@soleil-se/stylelint-config

Stylelint config based on stylelint-config-standard-scss and stylelint-config-recess-order.

Prerequisites

A project using SCSS or CSS as styling language.

Installation

Install @soleil-se/stylelint-config and stylelint.

npm install @soleil-se/stylelint-config@2 stylelint@15 --save-dev

Create .stylelintrc.js in the root of the project containing:

module.exports = {
  extends: '@soleil-se/stylelint-config'
}

Visual Studio Code

The editor needs to be reloaded for changes to take effect.

Migration

Migration from version 1 to 2.
The biggest change is upgrading to Stylelint 14 with the changed behaviour of different syntaxes.

Remove old peer dependencies:

npm uninstall stylelint-scss stylelint-config-standard stylelint-config-rational-order stylelint-order

Upgrade shared config and stylelint:

npm install @soleil-se/stylelint-config@2 stylelint@15

Visual Studio Code

The editor needs to be reloaded for changes to take effect.

VS Code

Install stylelint for VS Code.

Settings

Open settings.json and add the following settings:

"css.validate": false,
"less.validate": false,
"scss.validate": false,
"stylelint.validate": [
  "css",
  "less",
  "postcss",
  "scss",
  "svelte",
  "vue"
],
// If you want autofix enabled
"editor.codeActionsOnSave": {
  "source.fixAll.stylelint": true
}

Other syntaxes

If other syntaxes than CSS or SCSS needs to be supported you need to setup a custom config with the settings needed.

Read more about syntax.

Less

To support an old legacy project still using Less install postcss-less

npm install postcss-less --save-dev
yarn add postcss-less --dev

Then add the following to stylelintrc.js

module.exports = {
  extends: '@soleil-se/stylelint-config',
  overrides: [{
    files: '**/*.less',
    customSyntax: 'postcss-less',
  }],
};

CLI

Add the following to package.json and then adjust paths and file extensions.

{
  "scripts": {
    "stylelint": "npx stylelint ./path/to/css/**/*.css --allow-empty-input",
    "stylelint-fix": "npx stylelint ./path/to/css/**/*.css --fix --allow-empty-input"
  }
}

https://stylelint.io/user-guide/usage/cli