Lumirelle's StyleLint config. Easy to use, customizable, and works with CSS, SCSS, Vue, and Tailwind CSS.
npm install -D @lumirelle/stylelint-configor
pnpm add -D @lumirelle/stylelint-configUse the exported helper function called lumirelle to construct your StyleLint configuration:
stylelint.config.js
import { lumirelle } from '@lumirelle/stylelint-config'
export default lumirelle(
/**
* Options for generating StyleLint configuration.
*/
{
/**
* Files to ignore, same as `.stylelintignore`.
*
* Notice that, StyleLint use `micromatch` to match the files, the behavior is different from another widely used glob
* package `tinyglobby`.
*
* @default GLOB_EXCLUDE
* @see [micromatch](https://github.com/micromatch/micromatch)
* @see [tinyglobby](https://github.com/SuperchupuDev/tinyglobby)
* @see [GLOB_EXCLUDE](https://github.com/lumirelle/stylelint-config/blob/main/src/globs.ts#L6)
*/
ignoreFiles: [
'your-ignore-files'
],
/**
* Stylistic configuration. Powered by `stylelint-stylistic`.
*
* If set to `true`, it will use the default stylistic config as below.
*
* If you want to use `prettier` as the formatter, you can set it to `false` to disable the stylistic config.
*
* @default
* {
* indent: 2,
* quotes: 'single',
* maxLineLength: 120,
* }
*/
stylistic: {
indent: 2,
quotes: 'single',
maxLineLength: 120,
},
/**
* Core rules. Can't be disabled.
*/
css: true,
/**
* Enable SCSS support.
*
* As StyleLint doesn't support both SCSS and LESS in the same file (e.g. in a single `.vue` file), if you enable both
* SCSS and LESS, only SCSS will take effect.
*
* @default auto-detect based on the dependencies if both SCSS and LESS are not enabled manually
*/
scss: true,
/**
* Enable Less support.
*
* Requires peer dependencies:
*
* - `postcss-less`
* - `stylelint-less`
*
* As StyleLint doesn't support both SCSS and LESS in the same file (e.g. in a single `.vue` file), if you enable both
* SCSS and LESS, only SCSS will take effect.
*
* @default false
*/
less: false,
/**
* Enable Tailwind CSS support.
*
* If enabled, StyleLint will not validate Tailwind CSS specific at-rules.
*
* @default false
*/
tailwindcss: false,
/**
* Enable HTML support.
*
* @default true
*/
html: true,
/**
* Enable Vue support.
*
* @default auto-detect based on the dependencies
*/
vue: true,
/**
* Whether to order the stylesheet properties. Powered by `stylelint-config-recess-order`.
*
* @see https://github.com/stormwarning/stylelint-config-recess-order
* @default true
*/
ordered: true,
/**
* Disable some opinionated rules to standard preference.
*
* You can also specify which category of rules to disable by providing an object with the category names as keys.
*
* Rules affected:
*
* - Symbol "pattern" rules:
* - `selector-class-pattern`
* - `selector-id-pattern`
* - Code "maintainability" rules:
* - `no-descending-specificity`
*
* @default false
*/
lessOpinionated: {
/**
* Whether to disable pattern rules.
*/
pattern: true,
/**
* Whether to disable maintainability rules.
*/
maintainability: true,
}
},
/**
* Additional user-defined StyleLint configuration objects to mix.
*
* Both general and file-specific configuration objects are supported.
*
* @see [general config](https://stylelint.io/user-guide/configure)
* @see [file-specific config](https://stylelint.io/user-guide/configure#overrides)
*/
{
// This is a general configuration object, which will be mixed into the final config directly.
rules: {
'selector-class-pattern': null,
},
},
{
// This is a file-specific configuration object, which will be mixed into the `overrides` section of the final config.
files: ['**/*.scss'],
rules: {
'scss/at-if-closing-brace-space-after': null,
},
}
// This just equivalent to passing the config objects to the `lumirelle` function like above.
).mix({
rules: {
'selector-class-pattern': null,
},
})
