Add Stylelint to webpack

Adding stylelint to your project has many advantages that range from being able to throw warnings and errors when the styling rules (CSS, SASS-SCSS) are broken, to being able to fix most of your warnings automatically with a single command.

Install

The first step in this process would be to add stylint and it’s webpack plugins as development dependencies to your package.json.

npm i --save-dev stylelint stylelint-webpack-plugin

Configure

Add the following to your webpack config file in the plugins section. Here in this example I am using the default config file name stylelint.rc. This is the file where all your rules would go.

var StyleLintPlugin = require('stylelint-webpack-plugin');
 
module.exports = {
  // ...
  plugins: [
    new StyleLintPlugin({
    configFile: '.stylelintrc',
    context: 'src',
    files: '**/*.css',
    failOnError: false,
    quiet: false,
    emitErrors: true // by default this is to true to check the CSS lint errors
}),

Rules

The following is an example stylelint.rc file

{
  "rules": {
    "block-no-empty": null,
    "color-no-invalid-hex": true,
    "comment-empty-line-before": [ "always", {
      "ignore": ["stylelint-commands", "after-comment"]
    } ],
    "declaration-colon-space-after": "always",
    "indentation": ["tab", {
      "except": ["value"]
    }],
    "max-empty-lines": 2,
    "rule-empty-line-before": [ "always", {
      "except": ["first-nested"],
      "ignore": ["after-comment"]
    } ],
    "unit-whitelist": ["em", "rem", "%", "s"]
  }
}

You can choose from the total list of rules here.

IDE

You can install the stylelint plugin in your IDE like Intellij from the plugins section. This will help you highlight code issues on the go.

Fix

You can fix most of the warnings with a command like the following

stylelint src/**/*.css --fix

You can add this to the scripts section of npm and run it along with your npm builds or from your IDE.