How To Setup Stylelint - Mantine

import { Layout } from '@/layout';

export const meta = { title: 'How can I lint CSS files?', description: 'Learn how to set up Stylelint for Mantine postcss syntax', slug: 'how-to-setup-stylelint', category: 'tooling', tags: ['stylelint', 'lint', 'postcss'], created_at: 'December 27, 2023', last_updated_at: 'December 27, 2023', };

export default Layout(meta);

Installation

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

Configuration

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

json

{
  "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 the .stylelintrc.json content to the following:

json

{
  "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 an npm script to your package.json to lint all css files in your project:

json

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

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