# @soleil-se/stylelint-config

Stylelint config based on `stylelint-config-standard-scss`, `stylelint-config-recess-order` and `@stylistic/stylelint-plugin`.

## Prerequisites

A project or app using SCSS or CSS as styling language.

## Installation

To install dependencies and setup configuration files for `@soleil-se/stylelint-config` run the following command:

```sh
npx @soleil-se/stylelint-config@latest --setup
```

To install `@soleil-se/stylelint-config` and `stylelint` manually follow the steps below.

1. Install

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

   ```sh
   npm i @soleil-se/stylelint-config@^5 stylelint@17 --save-dev
   ```

2. Set project or app to ESM

   Set the project or app so it resolves Node dependencies as ES modules in `package.json`.

   **package.json**

   ```json
   {
     "name": "My project",
     "private": true,
     "license": "UNLICENSED",
     "type": "module",
     ...
   }
   ```

   > **Other configs**
   >
   > If other linting configurations such as `eslintrc.js`, `prettierrc.js` or `svelte.config.js` exists and these are using CommonJS their extensions needs to be changed to `.cjs`.

3. Create config files

   Create `stylelint.config.js` in the root of the project or app containing:

   **stylelint.config.js**

   ```js
   export default {
     extends: '@soleil-se/stylelint-config',
   }
   ```

   If the project is **NOT** using ESM as instructed in step 2 (`"type": "module"` in `package.json`) the file extension should be `.mjs`.

4. Reload Visual Studio Code

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

## Migration

To migrate automatically run the following command:

```sh
npx @soleil-se/stylelint-config@latest --setup
```

To migrate manually follow steps below.

1. Uninstall old versions

   To manage npm peer dependency resolution it’s easiest to unistall and reinstall `stylelint` and `@soleil-se/stylelint-config`. Uninstall the old versions of `stylelint` and `@soleil-se/stylelint-config`.

   ```sh
   npm remove stylelint @soleil-se/stylelint-config
   ```

2. Install new versions

   Install version 17 of `stylelint` and version 5 of `@soleil-se/stylelint-config`.

   ```sh
   npm i stylelint@17 @soleil-se/stylelint-config@5 --save-dev
   ```

3. Set project to ESM

   Set the project so it resolves Node dependencies as ES modules in `package.json`.

   **package.json**

   ```json
   {
     "name": "My project",
     "private": true,
     "license": "UNLICENSED",
     "type": "module",
     ...
   }
   ```

   > **Other configs**
   >
   > If other configurations such as `eslintrc.js`, `prettierrc.js` or `svelte.config.js` exists and these are using CommonJS their extensions needs to be changed to `.cjs`.

4. Change config to ESM

   Update the content of `stylelint.config.js` its content:

   **stylelint.config.js**

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

   If the project is **NOT** using ESM as instructed in step 3 (`"type": "module"` in `package.json`) the file extension should be `.mjs`.

5. Reload Visual Studio Code

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

## Visual Studio Code

Install the [Stylelint](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint) extension for Visual Studio 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"
],
"[scss]": {
  "editor.defaultFormatter": "stylelint.vscode-stylelint"
},
// If you want autofix enabled
"editor.codeActionsOnSave": {
  "source.fixAll.stylelint": "explicit"
}
```

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

Then add the following to `stylelint.config.js`

**stylelint.config.js**

```js
export default {
  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>