@detra-lab/stylelint-config v1.1.0
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.
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
Install the config:
pnpm add -D @detra-lab/stylelint-config stylelint
Create a
.stylelintrc.json
file in the root of your project, and extend the following configuration from it:{ "extends": "@detra-lab/stylelint-config" }
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" ] }
Lint your code with Stylelint:
pnpm run check:css
Install the config:
pnpm add -D @detra-lab/stylelint-config stylelint stylelint-scss postcss-scss
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" ] }
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" ] }
Lint your code with Stylelint:
pnpm run check:css
Install the config:
pnpm add -D @detra-lab/stylelint-config stylelint postcss-styled-syntax
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" ] }
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}" ] }
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:
- Positioning
- Box Model
- Typography
- Visual
- Animation
- 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
Install the Stylelint Plugin
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"])
(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: