@tofrankie/stylelint

Shared Stylelint configuration.

[!IMPORTANT] Before 1.0.0, releases may include breaking changes. Read the CHANGELOG before upgrading.

Quick Start

Install dependencies:

$ pnpm add stylelint @tofrankie/stylelint -D

ESM (stylelint.config.mjs):

export default {
  extends: ['@tofrankie/stylelint'],
}

CJS (stylelint.config.cjs):

module.exports = {
  extends: ['@tofrankie/stylelint'],
}

@tofrankie/stylelint exports the base preset by default.

Presets

Use one or more presets in extends. Later entries in extends override earlier ones.

Base

Base preset with HTML support and CSS property ordering.

export default {
  extends: ['@tofrankie/stylelint'],
}

Visual Studio Code: use stylelint.vscode-stylelint and merge the snippet below into settings.json to enable linting for .html:

{
  "stylelint.validate": ["html"]
}

SCSS

SCSS preset

export default {
  extends: ['@tofrankie/stylelint', '@tofrankie/stylelint/scss'],
}

Tailwind CSS

Tailwind CSS v4 addon preset. It supports Tailwind directives, functions, properties, and values.

For CSS:

export default {
  extends: ['@tofrankie/stylelint', '@tofrankie/stylelint/tailwindcss'],
}

@tofrankie/stylelint/tailwindcss is an addon preset and must be the last item in extends.

With SCSS, keep this order:

export default {
  extends: [
    '@tofrankie/stylelint',
    '@tofrankie/stylelint/scss',
    '@tofrankie/stylelint/tailwindcss',
  ],
}

With Vue + SCSS, keep this order:

export default {
  extends: [
    '@tofrankie/stylelint',
    '@tofrankie/stylelint/vue-scss',
    '@tofrankie/stylelint/tailwindcss',
  ],
}

The SCSS rule scss/at-rule-no-unknown remains enabled. The Tailwind preset only ignores supported Tailwind at-rules such as @theme, @utility, @variant, and @apply; unrelated unknown SCSS at-rules are still reported.

Less

Less preset

export default {
  extends: ['@tofrankie/stylelint', '@tofrankie/stylelint/less'],
}

Vue

Vue preset

export default {
  extends: ['@tofrankie/stylelint', '@tofrankie/stylelint/vue'],
}

Visual Studio Code: merge the snippet below into settings.json to enable linting for .vue:

{
  "stylelint.validate": ["vue"]
}

Vue + SCSS

Vue + SCSS preset

export default {
  extends: ['@tofrankie/stylelint', '@tofrankie/stylelint/vue-scss'],
}

vue-scss includes scss and vue preset internally; do not extend them separately.

Miniprogram

Miniprogram preset with WXSS and WXML support.

WXSS parsing is powered by PostCSS, and WXML parsing is powered by @tofrankie/postcss-wxml.

export default {
  extends: ['@tofrankie/stylelint', '@tofrankie/stylelint/miniprogram'],
}

Visual Studio Code: merge the snippet below into settings.json to enable linting for .wxss and .wxml:

{
  "stylelint.validate": ["wxss", "wxml"]
}

uni-app

uni-app preset

export default {
  extends: ['@tofrankie/stylelint', '@tofrankie/stylelint/vue', '@tofrankie/stylelint/uniapp'],
}

With SCSS, use vue-scss and then uniapp:

export default {
  extends: ['@tofrankie/stylelint', '@tofrankie/stylelint/vue-scss', '@tofrankie/stylelint/uniapp'],
}

pxtorem

pxtorem addon preset for projects using postcss-pxtorem.

export default {
  extends: ['@tofrankie/stylelint/base', '@tofrankie/stylelint/pxtorem'],
}

Use this addon preset when you need to allow 1Px or 1PX to survive conversion.

WeChat SVG

WeChat SVG preset

export default {
  extends: ['@tofrankie/stylelint', '@tofrankie/stylelint/wechat-svg'],
}

Merging languageOptions

When you extend multiple presets, later entries usually replace earlier languageOptions instead of deep-merging them, so some syntax settings can be dropped.

This package ships preset languageOptions for common cases, and exports mergeLanguageOptions plus preset objects so you can combine or override them safely.

Provided preset language options:

• BASE_LANGUAGE_OPTIONS
• MINIPROGRAM_LANGUAGE_OPTIONS

Example:

import { BASE_LANGUAGE_OPTIONS, mergeLanguageOptions } from '@tofrankie/stylelint'

const languageOptions = mergeLanguageOptions(
  BASE_LANGUAGE_OPTIONS,
  // your overrides...
  {
    syntax: {
      // ...
    },
  }
)

export default {
  extends: ['@tofrankie/stylelint'],
  languageOptions,
}

License

MIT License © Frankie