Back to all questions

How can I lint CSS files?

Last updated

Installation

Stylelint is a tool to lint CSS and CSS like files. To get started install stylelint and stylelint-config-standard-scss packages:

yarn add stylelint stylelint-config-standard-scss

Configuration

Create .stylelintrc.json file at your project root with the following content:

{
  "extends": ["stylelint-config-standard-scss"],
  "rules": {
    "scss/no-duplicate-mixins": null,
    "scss/at-mixin-pattern": null,
    "scss/at-rule-no-unknown": null,
    "selector-pseudo-class-no-unknown": [
      true,
      {
        "ignorePseudoClasses": ["global"]
      }
    ]
  }
}

The rules above are required to make Stylelint work with Mantine components.

Mantine Stylelint config

If you want to have the same Stylelint configuration as Mantine, change .stylelintrc.json content to the following:

{
  "extends": ["stylelint-config-standard-scss"],
  "rules": {
    "custom-property-pattern": null,
    "selector-class-pattern": null,
    "scss/no-duplicate-mixins": null,
    "declaration-empty-line-before": null,
    "declaration-block-no-redundant-longhand-properties": null,
    "alpha-value-notation": null,
    "custom-property-empty-line-before": null,
    "property-no-vendor-prefix": null,
    "color-function-notation": null,
    "length-zero-no-unit": null,
    "selector-not-notation": null,
    "no-descending-specificity": null,
    "comment-empty-line-before": null,
    "scss/at-mixin-pattern": null,
    "scss/at-rule-no-unknown": null,
    "value-keyword-case": null,
    "media-feature-range-notation": null,
    "selector-pseudo-class-no-unknown": [
      true,
      {
        "ignorePseudoClasses": ["global"]
      }
    ]
  }
}

Additional tools

Add npm script to your package.json to lint all css files in your project:

{
  "scripts": {
    "stylelint": "stylelint '**/*.css' --cache"
  }
}

To enable linting in your editor, install stylelint VSCode extension.