@giotramu/stylelint-config NPM

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

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

Available Configurations

Install the config:

# NPM
npm add --save-dev @giotramu/stylelint-config stylelint

# PNPM
pnpm add --save-dev @giotramu/stylelint-config stylelint

# Yarn
yarn add --dev @giotramu/stylelint-config stylelint

Create a .stylelintrc.json file in the root of your project, and extend the following configuration from it:
```
{
  "extends": "@giotramu/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:
```
npm run check:css
```

Install the config:

# NPM
npm add --save-dev @giotramu/stylelint-config stylelint stylelint-scss postcss-scss

# PNPM
pnpm add --save-dev @giotramu/stylelint-config stylelint stylelint-scss postcss-scss

# Yarn
yarn add --dev @giotramu/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": [
    "@giotramu/stylelint-config",
    "@giotramu/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:
```
npm run check:css
```

Install the config:

# NPM
npm add --save-dev @giotramu/stylelint-config stylelint postcss-styled-syntax

# PNPM
pnpm add --save-dev @giotramu/stylelint-config stylelint postcss-styled-syntax

# Yarn
yarn add --dev @giotramu/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": [
    "@giotramu/stylelint-config",
    "@giotramu/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:
```
npm 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": "@giotramu/stylelint-config",
  "rules": [
    // Customize your rules
    "selector-id-pattern": null,
    "selector-class-pattern": null
  ]
}

Integrating Stylelint into the 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": true
},
"stylelint.validate": ["css"] // Add the type of file you want to validate (e.g. ["css", "scss", "typescript", "typescriptreact"])