CSS, SCSS and Sass Static Code Analysis

Monday, September 20, 2021 • 3 minutes to read

Cascading Style Sheets is the most widespread style sheet language. It is one of the three pillars of modern web development. Although CSS is not the most complicated language, it could still gain a lot from SAST (Static Analysis Software Testing) tools. The standard tool used for code analysis for CSS, or Sass used as a preprocessor, by all professionals is Stylelint.

I have already described why you should use static code analysis in one of the last articles, which I encourage you to read. There is a lot of helpful information about static code analysis in general and how to use it in your development pipeline.

How to lint your styles with Stylelint?

If you are using plain CSS without any preprocessor, you need to add a Stylelint dependency and its standard config to your project.

$ npm i -D stylelint stylelint-config-standard

If your files use SCSS or Sass syntax and use Sass preprocessor, you will need to install a different Stylelint config. It extends the standard config and adds changes according to Sass Guidelines.

$ npm i -D stylelint stylelint-config-sass-guidelines

Stylelint requires a minimal configuration to work and will try to find the config object in multiple places and formats. My personal preference is JSON format in .stylelintrc.json file located in the main working directory. The only mandatory entry we need to put there is to inform Stylelint which configuration we extend. For example, if we use Sass, the configuration would look like the following.

{
    "extends": "stylelint-config-sass-guidelines",
}

With such configuration you are ready to go. To check your files run npx stylelint "**/*.css".

How to extend the Stylelint configuration?

The configuration described in the previous section should be your starting point. Then, depending on your or your team’s style writing definitions, you could add, remove, or modify all available rules. Let’s take as an example indentation. Instead of the default 2 spaces, you decided that you prefer 4. To apply this rule, add to your configuration file the following change.

{
    "rules": {
        "indentation": 4
    }
}

A full list of rules and their possible values is available at Stylelint rules list.

How to integrate Stylelint with Webpack?

Stylelint, like all SAST tools, could be easily integrated with your Continuous Integration systems. The easiest way would be to configure it as a part of the Webpack build system. To start, install the stylelint-webpack-plugin as your dependency.

$ npm i -D stylelint-webpack-plugin

After that, you need to load it as a module and add it to Webpack’s plugins list.

const StylelintPlugin = require('stylelint-webpack-plugin');

module.exports = {
    plugins: [
        new StylelintPlugin()
    ]
}