Stylelint Config

Stylelint configurations for CSS, PostCSS, SASS, and CSS in JS solutions such as Styled Components or Emotion.js. Modular and opinionated.

• Stylelint Config
  • Available configurations
  • CSS properties order
  • Extending the configuration
  • Integration with IDEs/editors
  • Code of Conduct
  • Contributing
  • Acknowledgments
  • License

The following Stylelint configurations do not include code formatting rules, which are therefore delegated to Prettier. Please, use the @detra-lab/prettier to handle this type of need.

Available configurations

CSS/PostCSS Syntax

1. Install the config:

   pnpm add -D @detra-lab/stylelint-config stylelint

2. Create a .stylelintrc.json file in the root of your project, and extend the following configuration from it:

   {
     "extends": "@detra-lab/stylelint-config"
   }

3. Use the ESLint CLI to check supported files. Drop this line into your package.json under the scripts property:

   {
     "scripts": [
   +   "check:css": "stylelint ./styles/*.css"
     ]
   }

4. Lint your code with Stylelint:

   pnpm run check:css

SCSS Syntax

1. Install the config:

   pnpm add -D @detra-lab/stylelint-config stylelint stylelint-scss postcss-scss

2. Create a .stylelintrc.json file in the root of your project, and extend the following configuration from it:

   {
     "extends": [
       "@detra-lab/stylelint-config",
       "@detra-lab/stylelint-config/sass"
     ]
   }

3. Use the ESLint CLI to check supported files. Drop this line into your package.json under the scripts property:

   {
     "scripts": [
   +   "check:css": "stylelint ./styles/*.scss"
     ]
   }

4. Lint your code with Stylelint:

   pnpm run check:css

CSS in JS (Template Literals)

1. Install the config:

   pnpm add -D @detra-lab/stylelint-config stylelint postcss-styled-syntax

2. Create a .stylelintrc.json file in the root of your project, and extend the following configuration from it:

   {
     "extends": [
       "@detra-lab/stylelint-config",
       "@detra-lab/stylelint-config/styled"
     ]
   }

3. Use the Stylelint CLI to check supported files. Drop this line into your package.json under the scripts property:

   {
     "scripts": [
   +   "check:css": "stylelint ./styles/*.{js,jsx,ts,tsx}"
     ]
   }

4. Lint your code with Stylelint:

   pnpm run check:css

CSS properties order

Stylelint Config sorts the CSS property declarations by grouping them in the following order:

1. Positioning
2. Box Model
3. Typography
4. Visual
5. Animation
6. Misc

Extending the configuration

You can extend the configuration and override some rules. Add the rules property inside the .stylelintrc.json file and then choose what to turn on or off.

{
  "extends": "@detra-lab/stylelint-config",
  "rules": [
    // Customize your rules
    "selector-id-pattern": null,
    "selector-class-pattern": null
  ]
}

Integration with IDEs/editors

Visual Studio Code

1. Install the Stylelint Plugin

2. Add the following code to your .vscode/settings.json:

   "css.validate": false,
   "scss.validate": false,
   "editor.codeActionsOnSave": {
     "source.fixAll.stylelint": "explicit"
   },
   "stylelint.validate": ["css"] // Add the type of file you want to validate (e.g. ["css", "scss", "typescript", "typescriptreact"])

3. (Optional) Highlight the CSS-in-JS syntax with the Styled Components Plugin

Code of Conduct

Help us keep the project open and inclusive. Please read and follow our Code of Conduct.

Contributing

Read our contributing guide to learn about our development process, how to propose bug fixes and improvements, and how to build and test your changes.

Acknowledgments

Thanks to the following projects for their contributions:

• stylelint-declaration-block-no-ignored-properties
• stylelint-order
• stylelint-scss

License

Apache License 2.0

Human-Made by Detra.
© 2023