PostCSS VS stylelint

the plugins in the official PostCSS website were old like IE6 or the marquee tag, and

Hello internet. I just published a new blog post on how to implement dark mode with SvelteKit, optionally with PostCSS and TailwindCSS:

There are many frontend tools available for this purpose. For example, PostCSS is a popular CSS processor that can combine and minimize your code. With the right plugin, it can even fix your code for compatibility issues, making sure your CSS styles work for all browsers.

I use PostCSS to extend CSS’s features and to add a few things that make writing styles a little more convenient, but it could easily be swapped for another preprocessor like Sass or vanilla CSS. It’s up to you. You can view my PostCSS config here.

Code transpilation isn't specific to JavaScript, You can also add a level of transformation to your CSS source using tools like post-css. Most languages with a fairly mature ecosystem will probably have some tools to help with code transformation.

In large projects, it is still a good idea to use PostCSS, which will translate new CSS features to something that browsers understand today.

LiveCodes provides many of the commonly used developer tools. These include Monaco editor (that powers VS Code), Prettier, Emmet, Vim/Emacs modes, Babel, TypeScript, SCSS, Less, PostCSS, Jest and Testing Library, among others. All these tools run seamlessly in the browser without any installations or configurations. It feels like a very light-weight version of your own local development environment including the keyboard shortcuts, IntelliSense and code navigation features.

Usually, one of the first things I do on creating a new web app is to throw a UI library in to help style components. There are several UI libraries that can be used by Svelte, but in this case I went with daisyUI because it's a fairly popular UI library which includes tailwind. To install daisyUI, you first need to install tailwind. There's a few different ways to do this (such as this guide), but the easiest way I've found is the following command, which also adds PostCSS and AutoPrefixer:

Vanilla CSS has taken a similar path with ambitious working drafts, better browser support, and PostCSS to fill the gap for user agents lagging behind. So why is Sass/SCSS still so popular? Maybe we go so used to it that we might have forgotten what problems it was meant to solve in the first place.

There are more linting tools that I won't go into deeply, but you can integrate them with lint-staged. For example, you can lint your CSS content with Stylelint, or even lint your README files with markdownlint, etc.

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.