Next.js: Have you considered using sass + css modules as the main technical point

[MinJieLiu]

with-external-scoped-css is not perfect.
In a slightly larger system, doing so will add a lot of work.
I think style jsx is not a good idea, it can not and other open source UI framework very good integration.

Have you considered using sass + css modules as the main technical point

[amankkg]

Imo, css-in-js is better for component styling. And even more, with tools like PreJSS you can write both - (any steroid) css and css-in-js.
Anyway, there is a problem with plain css for components styling - duplicates in next/head. With this fix (#668) released you can write your own wrapper to reduce boilerplate code for styles content injection. Take a look at my example here

[khankuan]

@code4aman thanks for your tip! I have a similar problem. I'm using a ui kit that is built on top of css modules. I would like to use the ui kit in my next.js application. It seems like next.js does not support css modules though it isn't global. So practically, i'm thinking of exporting the ui kit into a .js and .css file that I'll use in the application, I'll need to live with the fact that the ui kit has to be imported globally for now. Your solution is great but does it mean that the entire css would be downloaded on every page load? I'm thinking of copying the css file into the static folder (during build process somehow) and then import it as a head <link ref='stylesheet'> tag pointing to the static file. What do you think?

Cheers! :)

[amankkg]

@khankuan that's a default behavior and yes, this way your styles will be referenced on every page load. The real problem is, since we are component-oriented, do we reference only to the styles used by the current page? To import them on-demand, in per-component manner, we need that PR. And we need to somehow (my example wrapper is just a starting point) reduce current boilerplate code for css injection.
If your 3rd party framework provides just one large stylesheets file then your only way is to reference it in _document.js or maybe your own layout file.
Modern ui kits (i.e. antd) provide stylesheets for every component. So, with such approach, we can benefit from this PR merged.

[khankuan]

@code4aman would your method allow browser caching?

[amankkg]

@khankuan yes, why not. CSS Modules will change hash only if content is changed.

[khankuan]

Oh a related note, did you manage to get CSS modules working? I have a uikit that is based on css modules + sass + react. I tried overriding the webpack config but didn't manage to get it working. I then tried building my uikit into a umd lib with a css file. But I realized that it didn't work well with styled-jsx because it does not pass data-jsx prop to components, so I could not do layout styling in my application. Any help/advice would be appreciated :)

[amankkg]

During my research I started with https://github.com/zeit/next.js/tree/master/examples/with-scoped-stylesheets-and-postcss and then built my own setup (which was unfortunately replaced with plain scss w/o modules and babel-loaders). Yep, it was in working condition, but with some packages being obsolete. If I'll dig this topic next time I'd start with postcss (or PreJSS) and process css with babel loader instead of webpack's css/style loader. It's still interesting area, since there are still many people who use css/sass and not ready to jump in css-in-js space. On this point PreJSS's idea is very promising.
Hope to research this in near future. Feel free to share if you'll get some luck on this.

[arunoda]

CSS is pretty confusing when it's come to choices. So, we won't change the default styled-jsx usage. Since it won't add any overhead if you haven't use it.

We'll keep trying to improve.