Stylelint Config

Modular and opinionated Stylelint configuration with support for CSS or PostCSS syntax, SASS language, and some CSS in JS solutions, like Styled Components or Emotion.js template literals.

• 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

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

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

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

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