# @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`.

```sh
npm i @soleil-se/stylelint-config@3 stylelint@15 --save-dev
```

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

**.stylelintrc.js**

```js
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 2 to 3.

Update Stylelint to version 15 the config to version 3.

```sh
npm i stylelint@15 && npm i @soleil-se/stylelint-config@3
```

> **Visual Studio Code**
>
> The editor needs to be reloaded for changes to take effect.

## VS Code

Install [stylelint](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint) for VS Code.

### Settings

Open `settings.json` and add the following settings:

**settings.json**

```json
"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](https://stylelint.io/migration-guide/to-14#syntax-option-and-automatic-inferral-of-syntax).

### Less

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

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

Then add the following to `stylelintrc.js`

**stylelintrc.js**

```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.

**package.json**

```json
{
  "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>