cssnano VS stylelint

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:

CSS minification by cssnano

cssnano

cssnano is used to ensure that the final result is as small as possible for a production environment.

There are plenty of free plugins are available to optimize styles, scripts and create source maps for them. Optimize styles Optimize Scripts Create Sourcemaps

Another common way to extend configs in linters is using the extends key in the configuration file. Let's take StyleLint as an example:

Stylelint is similar to ESLint, but its focus is on styling rather than JavaScript. It helps you find errors in style files, such as old syntax or empty classes. We will also incorporate stylelint-config-clean-order to sort your style rules and group them consistently across the entire codebase.

The “cost of loading modules” diagram shows non-linear behaviour (though you should largely ignore the curve visible in the diagram because the x axis is way off linear):

• 0.15s ÷ 500 = 0.3ms

• 0.31s ÷ 1000 = 0.31ms

• 3.12s ÷ 10000 = 0.312ms

• 16.81s ÷ 25000 = 0.6724ms

• 48.44s ÷ 50000 = 0.9688ms

My own observation on a Surface Book six years ago was that in Node.js under Windows, each module had about 1ms of overhead when there was warm file system cache—that is, simply bundling with Rollup saved 1ms per file. If this sort of thing interests you, quite a lot of useful stuff came out of https://github.com/stylelint/stylelint/issues/2454 which I filed because I was unhappy with stylelint taking over a second to import. And that must have been only in the order of one or two thousand modules, when the behaviour is still close enough to linear.

As the property is still experimental, stylelint does not recognize it yet at the time of writing this, so let's explicitly disable the property-no-unknown rule only where we use it by adding a stylelint-disable comment and re-enable it afterwards.

Document your build process in a blog, use eslint, stylelint and jsx-a11y lint. Run a lighthouse performance test, follow the optimisation reccomendations.

Run static analysis e.g. lint with lockfile-lint, Stylelint, ESLint, check for unimported files using unimported, and identify potential security vulnerabilities

Stylelint

I use StyleLint (https://stylelint.io/) to lint my css/scss. I don't think that's a rule, but writing a custom rule isn't too tough. And you can use the vscode extension - https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint

The complete code for this project is in the Rodney Lab GitHub repo. I do hope the post has either helped you with an existing project or provided some inspiration for a new one. As an extension, you can add all your favourite future CSS rules to the PostCSS config. Beyond PostCSS for linting your input CSS, consider trying stylelint.