cssnano VS css-loader

Use free tools like Terser for JavaScript and CSSNano for CSS:

Minify CSS: Strip out comments, whitespace, and redundant code with tools like CSSNano or CleanCSS. A 100KB stylesheet might shrink to 70KB, speeding up downloads.

cssnano has had some complicated ownership turnover[0], I'm glad to see someone took the mantle again though.

I do find that CSSO[1] with structural optimizations can be more effective still, perhaps that will be less true overtime though.

I think once lightning CSS is more stable (in particular, some bugs are addressed around ordering) it will be the clear winner in this space though.

[0]: https://github.com/cssnano/cssnano/issues/833

[1]: https://github.com/css/csso

cssnano/cssnano - A modular minifier, built on top of the PostCSS ecosystem.

There are a number of tools available to minify CSS in development or as part of your build pipeline including, but not limited to, cssnano and Vite. If you’re using sass, it’s as straightforward as adding --style=compressed to your sass command. The results you achieve may vary depending on the complexity of your CSS, but you may see numbers similar to this (processed with sass):

Since Tailwind is a PostCSS plugin, we can also add cssnano plugin to compress the bundle.

Minifying your CSS involves removing unnecessary whitespace, comments, and reducing property names. This results in smaller file sizes and faster downloads. Use tools like UglifyCSS and CSSNano for this purpose.

For the sake of simplicity, my example setup uses a single-file plugin and puts all styles directly into a single style.css file without using further theme.css or theme.json files, which we might want to use depending on the requirements for customizability. Likewise, SASS / SCSS support can be added if it makes life easier for the developer(s) involved. But as we already use PostCSS to control autoprefixing and cssnano minification, we can also use it to support the latest and even upcoming CSS sytax like native CSS nesting.

The cssnano plugin can minify/compress CSS and make it suitable for production use. Install cssnano plugin using this command:

@fbem/css-loader is very similar to css-loader (and actually a fork of it) and has almost the same set of options and functionality. You can even use it with different style preprocessors by simply chaining loaders together in webpack config. But be sure to pick up if you need them 😏.

Css files need a css loader like https://github.com/webpack-contrib/css-loader. In fact I see you already have 2 css loaders in your normal webpack config. the server config needs those too. Your fronted build and server build will be very similar in that regard.

React comes by default with css module support via https://github.com/webpack-contrib/css-loader, which is stable and not deprecated. (Note that this entirely independent of react)

I have enabled CSS modules within webpack.config in my React application so that I can locally scope CSS files to individual components. I'm also trying to use the TabView component from PrimeReact. When I do so the themes from PrimeReact are not applied. If I create a separate project and do not enable CSS modules the themes apply correctly.

this is technically a feature of css-loader and not of nextjs, next just supports it ootb through their webpack config. iirc its this option you need to customize

One possible non-JSS solution is css-modules supported in css-loader. That requires some setup which may get convoluted if you need CSS preprocessors or SSR.

✨ css loader 💥 jss 🌟 csjs ☄️ aphrodite

Before we start, you should have a minimum knowledge of webpack, you should have css-loader. Along this article, I use nuxt for example, but you can use React or Angular.

The above should work in Create React App out of the box. If you are rolling your own Webpack configuration (may God have mercy on your soul), you'll need to configure modules with a compileType of icss: