stylelint-scss VS stylelint

Working with SCSS? Check here

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

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.

Stylelint helps prevent errors and ensures style conventions.

After installation, it will generate a lefthook.yml file which can be customized to perform a static code analysis before committing the code. For example, it can ensure that the git commit follows the git-conventional-commits, and use Prettier, ESLint, and Stylelint to check, format, and fix any file which will be committed and run any test related with Vitest depending on the filetype and run each in parallel.

We might also call stylelint so we can lint our source CSS.

stylelint Homepage

Next we also want to lint our CSS, because we can also have accessibility issues there. We can do this by adding the stylelint linter to our project. The configuration there depends on what CSS processing you're using. For this case, we'll use CSS modules:

stylelint - The core linter

Tooling takes away alot of headaches and saves yourself from "being clever" (stupid). Most front-end tooling can be run out of the nodeJS runtime, so even if your stack isn't JS oriented, it's still worth running node. The obvious shoutouts: Vite, eslint, stylelint, postCSS, browserslist. Playwright is somethin else you can give a look at if your scope of work is large enough.