@cedric-ruiu/stylelint-config

Shareable Stylelint config with sensible defaults — one-liner setup.

• Based on Stylelint v17
• Lint Sass (extends stylelint-config-standard-scss)
• Lint HTML files (extends stylelint-config-html)
• Lint Vue files including <style lang="scss">
• Tailwind / UnoCSS at-rules allowed
• Logical property ordering (extends stylelint-config-clean-order)

Requirements: Stylelint ≥ 17, Node ≥ 22

Install

yarn add -D @cedric-ruiu/stylelint-config stylelint

Setup

.stylelintrc.json:

{
  "extends": "@cedric-ruiu/stylelint-config"
}

Custom rules

On top of the extended configs, this package adds:

Rule	Value	Why
selector-pseudo-class-no-unknown	ignore :deep, :global	Vue scoped style selectors
selector-pseudo-element-no-unknown	ignore ::v-deep, ::v-global, ::v-slotted	Legacy Vue 2 / Vue 3 early scoped selectors
scss/at-rule-no-unknown	ignore @apply, @config, @layer, @responsive, @screen, @tailwind, @unocss, @variants	Tailwind / UnoCSS at-rules
scss/at-mixin-argumentless-call-parentheses	"always"	Mixin calls always look like functions

Override / extend

{
  "extends": "@cedric-ruiu/stylelint-config",
  "rules": {
    "scss/dollar-variable-pattern": null
  }
}

VSCode integration

Install the Stylelint extension, then .vscode/settings.json:

{
  "prettier.enable": false,
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": "explicit",
    "source.organizeImports": "never"
  },
  "css.validate": false,
  "scss.validate": false,
  "stylelint.enable": true,
  "stylelint.packageManager": "yarn",
  "stylelint.snippet": ["css", "postcss", "scss", "html", "vue"],
  "stylelint.validate": ["css", "postcss", "scss", "html", "vue"]
}

Contributing

Conventional Commits are required — they drive the changelog and the release pipeline.

yarn install
yarn test     # runs stylelint against test/ fixtures