@lumirelle/stylelint-config

Lumirelle's StyleLint config. Easy to use, customizable, and works with CSS, SCSS, Vue, and Tailwind CSS.

Install

npm install -D @lumirelle/stylelint-config

or

pnpm add -D @lumirelle/stylelint-config

Usage

Use 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,
  },
})

Sponsors

License

MIT License © Lumirelle