@workleap/stylelint-config NPM

@workleap/stylelint-config

Shareable stylelint configuration for Workleap.

Installation

Polyrepo

Install the following package:

With pnpm

pnpm add -D @workleap/stylelint-config stylelint prettier

With yarn

yarn add -D @workleap/stylelint-config stylelint prettier

With npm

npm install -D @workleap/stylelint-config stylelint prettier

Monorepo

Install the following packages at the root of the project:

With pnpm

pnpm add -D @workleap/stylelint-config stylelint prettier

With yarn

yarn add -D @workleap/stylelint-config stylelint prettier

With npm

npm install -D @workleap/stylelint-config stylelint prettier

Install the following packages in every workspace project:

pnpm add -D @workleap/stylelint-config

With yarn

yarn add -D @workleap/stylelint-config

With npm

npm install -D @workleap/stylelint-config

Usage

Configuration

Create a .stylelintrc.json file at the root of your project with the following content:

{
    "$schema": "https://json.schemastore.org/stylelintrc",
    "extends": "@workleap/stylelint-config"
}

Package.json script

Optionally add the following script to your package.json file:

{
    "lint:stylelint": "stylelint \"**/*.css\" --cache --cache-location node_modules/.cache/stylelint"
}

The script definition may vary depending of your needs and your application configuration. For example, you might want to specify additional file extensions such as "**/*.{css,scss,sass}".

VSCode integration

To integrate with VSCode, install the stylelint.vscode-stylelint VSCode extension for Stylelint and add the following settings to your ./vscode/settings.json file:

{
    "editor.codeActionsOnSave": {
        "source.fixAll": true, // this makes sure Stylelint is run on save
    },
    "editor.formatOnSave": true,
    "css.validate": false, // disables the default formatter, we use Stylelint instead
    "less.validate": false, // disables the default formatter, we use Stylelint instead
    "scss.validate": false, // disables the default formatter, we use Stylelint instead
}

Prettier

Since Stylelint v15.0.0, stylistic rules are deprecated. They now suggest using Prettier to format your CSS files.

With that in mind, the @workleap/stylelint-config includes the stylelint-prettier plugin. Using this plugin, prettier changes are exposed as stylelint rule violations.

You should therefore add either a .editorconfig or .prettierrc file at the root of your project. These rule will be run against your CSS files and will be autofixed when you run stylelint --fix */.css.

You need to make sure that you create a .prettierignore file to ignore everything but your CSS files at the root of your project. This file should contain the following content: