@culur/config-stylelint

Sharing Stylelint configurations.

✨ Features

The library is a shareable Stylelint configuration. It has some key features as follows:

Auto detect environment

The config will check whether the following packages are installed or not to change plugins and rules.

| Environment | Packages | | ----------- | ------------------------------------ | | Tailwind | tailwindcss | | SCSS | sass or dart-sass or node-sass | | Vue | vue |

Extends

• The config extends:
  • Configs from:
    • stylelint-config-standard - The standard shareable config for Stylelint.
    • stylelint-config-standard-scss - The standard shareable SCSS config for Stylelint.
    • stylelint-config-standard-vue - The recommended shareable Vue config for Stylelint.
    • stylelint-config-html - The shareable HTML config for Stylelint.
    • stylelint-config-clean-order - A clean and complete config for stylelint-order.
  • Plugins from:
    • stylelint-order - A plugin pack of order related linting rules for stylelint.
    • stylelint-scss - A collection of SCSS specific linting rules for stylelint.
    • stylelint-selector-bem-pattern - Stylelint plugin that incorporates postcss-bem-linter
• And it also has custom rules for Tailwind, SCSS and Vue.
• This config bundles the above packages, you don't need to install them yourself.

💿 Installation

Add @culur/config-stylelint dependency to your project.

# Using npm
npm install @culur/config-stylelint --save-dev

# Using pnpm
pnpm install @culur/config-stylelint --dev

# Using yarn
yarn add @culur/config-stylelint --dev

Other packages:

• Use need to install stylelint package in devDependencies.

📖 Usage

1. Extending config

Set your .stylelintrc.json to:

{
  "extends": ["@culur/config-stylelint"]
}

Below are also some pre-built configs to use.

| Config | Tailwind | Sass | Vue | | ------------------------------------------- | -------- | ---- | ---- | | @culur/config-stylelint | auto | auto | auto | | @culur/config-stylelint/auto | auto | auto | auto | | @culur/config-stylelint/none | | | | | @culur/config-stylelint/sass-vue | | true | true | | @culur/config-stylelint/sass | | true | | | @culur/config-stylelint/tailwind-sass-vue | true | true | true | | @culur/config-stylelint/tailwind-sass | true | true | | | @culur/config-stylelint/tailwind | true | | | | @culur/config-stylelint/vue | | | true |

2. Define config

You can also define which environments are enabled via the defineConfig function.

// .stylelintrc.mjs
import { defineConfig } from '@culur/config-stylelint/factory';

export default defineConfig(
  {
    tailwind: true,
    sass: false,
    vue: false,
  },
  {
    extends: [],
    plugins: [],
    rules: {},
  },
);

Note: When using defineConfig function, you must install stylelint-config-* and plugins dependencies to your project.

2. Ignoring Code

Stylelint use .stylelintignore file to ignore specific files. You can use the following command to copy our default .stylelintignore to your project root folder:

# unix
cp "node_modules\@culur\config-stylelint\.stylelintignore" ".stylelintignore"

# windows
copy "node_modules\@culur\config-stylelint\.stylelintignore" ".stylelintignore"

📜 Scripts

Some commonly used scripts in package.json.

{
  "scripts": {
    "fix:css": "stylelint '**/*.{vue,tsx,css,scss}' --allow-empty-input --fix",
    "lint:css": "stylelint '**/*.{vue,tsx,css,scss}' --allow-empty-input"
  }
}

🗃️ Changelog

See CHANGELOG for more information on what has changed recently.

🔒 License

See LICENSE for license rights and limitations (MIT).