StyleLint

Installation

See the official documentation.

npm

npm i -D stylelint

yarn

yarn add -D stylelint

pnpm

pnpm add -D stylelint

bun

bun add -d stylelint

npm

npm i -D stylelint-a11y stylelint-config-standard stylelint-order stylelint-plugin-defensive-css stylelint-use-logical-spec

yarn

yarn add -D stylelint-a11y stylelint-config-standard stylelint-order stylelint-plugin-defensive-css stylelint-use-logical-spec

pnpm

pnpm add -D stylelint-a11y stylelint-config-standard stylelint-order stylelint-plugin-defensive-css stylelint-use-logical-spec

bun

bun add -d stylelint-a11y stylelint-config-standard stylelint-order stylelint-plugin-defensive-css stylelint-use-logical-spec

Settings

These are basic .stylelintrc.json settings.

.stylelintrc.json

{
  "$schema": "https://json.schemastore.org/stylelintrc.json",
  "extends": ["stylelint-config-standard"],
  "plugins": [
    "stylelint-order",
    "stylelint-use-logical-spec",
    "stylelint-plugin-defensive-css"
  ],
  "rules": {
    "color-no-hex": true,
    "liberty/use-logical-spec": true,
    "plugin/use-defensive-css": [
      true,
      {
        "accidental-hover": true,
        "background-repeat": true,
        "custom-property-fallbacks": true,
        "scroll-chaining": true
      }
    ]
  },
  "reportNeedlessDisables": true,
  "reportInvalidScopeDisables": true
}

Create an ignore file (.stylelintignore) with the following:

build
dist
coverage
analysis

Usage

and here is a script to run stlintlint on your project:

# File: package.json

"style:lint": "pnpm run stylelint --cache './src/**/*.css'",
"style:lint:fix": "pnpm run style:lint --fix",