npm package: @nake/stylelint-config
Description: Naked stylelint shareable config for web apps
Author: Richie Zhu
Latest version: 1.2.4

# @nake/stylelint-config

> Naked stylelint shareable config for web apps

This Stylelint config is extended from both [standard](https://github.com/stylelint/stylelint-config-standard) and [prettier](https://prettier.io/) styles. It uses [stylelint-no-unsupported-browser-features](https://github.com/ismay/stylelint-no-unsupported-browser-features) plugin for browser compatibility linter, It uses [stylelint-order](https://github.com/hudochenkov/stylelint-order) for CSS rules and properties order consistency. It provides four extend options for different environment.

## Features

- Extends [stylelint-standard](https://github.com/stylelint/stylelint-config-standard) config
- Support css modules syntax
- Turns on recommended rules from [stylelint-scss](https://github.com/kristerkari/stylelint-scss)
- Support css-in-js linter with [styled-components](https://www.styled-components.com/)
- Maintains consistent declarations order with [stylelint-order](https://github.com/hudochenkov/stylelint-order)
- Support strict mode in which you have to use variables with color and font
- Support unsupported browser features linter
- Open for further extension

## Installation

```bash
# Install with npx
$ npx install-peerdeps --dev @nake/stylelint-config

# Install with yarn
$ yarn add --dev @nake/stylelint-config
$ yarn add --dev prettier stylelint
```

_Use npx to install peerdeps automatically or install peerDependencies with npm/yarn manually._

## Usage

After installation, add following contents to your `.stylelintrc` or the `stylelint` entry of `package.json` file.

### Default

For web project using CSS.

```json
{
  "extends": ["@nake/stylelint-config"],
  "rules": {
    "plugin/no-unsupported-browser-features": [
      true,
      {
        "severity": "warning",
        "ignore": ["flexbox"]
      }
    ]
  }
}
```

### SCSS

For web project using SCSS.

```json
{
  "extends": ["@nake/stylelint-config/scss"],
  "rules": {
    "plugin/no-unsupported-browser-features": [
      true,
      {
        "severity": "warning",
        "ignore": ["flexbox"]
      }
    ]
  }
}
```

### Styled Components (CSS-in-JS)

For project using [styled-components](https://www.styled-components.com/) or [emotion](https://github.com/emotion-js/emotion)

```json
{
  "extends": ["@nake/stylelint-config/styled-components"],
  "rules": {
    "plugin/no-unsupported-browser-features": [
      true,
      {
        "severity": "warning",
        "ignore": ["flexbox"]
      }
    ]
  }
}
```

### Wxapp (微信小程序)

For wechat miniProgram project.

```json
{
  "extends": ["@nake/stylelint-config/wxapp"]
}
```

_This environment can't support browser compatibility linter_

### With strict mode

If you want use varaibales instead of literals in your color or font properties, you can turn on strict mode.

```json
{
  "extends": ["@nake/stylelint-config", "@nake/stylelint-config/strict"]
}
```

```js
/* In strict mode, you have to use varaibles with these properties */
['/color/', 'fill', 'stroke', 'font-family', 'font-size', 'font-weight'];
```

## Browser compatibility linter

First, add browsers that we support in your `package.json` or config file that [browserslist](https://github.com/browserslist/browserslist) supports.

```json
{
  "browserslist": [
    "defaults",
    "> 0.5%",
    "last 2 versions",
    "Firefox ESR",
    "not ie <= 9",
    "not op_mini all"
  ]
}
```

Second, Stylelint will linter your code with predefined browserslist automatically. It will shot an warning message to tell you which feature have not be well supported by these browsers (e.g. [css-grid](https://caniuse.com/#feat=css-grid) and [css-animation](https://caniuse.com/#feat=css-animation)):

Finally, If the unsupported browser features is OK for progressive enhancement, we should add them to ignore list to prevent Stylelint shotting warning message again.

```js
const ignoredCSSFeature = ['flexbox', 'object-fit'];

module.exports = {
  extends: ['@nake/stylelint-config'],
  rules: {
    'plugin/no-unsupported-browser-features': [
      true,
      {
        severity: 'warning',
        ignore: ignoredCSSFeature,
      },
    ],
  },
};
```

We ignored unsupported-browser-features linter for `flexbox` and `object-fit` in the above example.

## Order linter

It use [stylelint-order](https://github.com/hudochenkov/stylelint-order) to autofixing your CSS rules and properties order.

## Ignore files

You can create `.stylelintignore` file or add `ignoreFiles` entry in `.stylelintrc.json` file.

[Configuration reference](https://github.com/stylelint/stylelint/blob/master/docs/user-guide/configuration.md#ignorefiles)

## NPM script

**CSS**

```json
{
  "scripts": {
    "stylelint": "stylelint 'src/**/*.css' --syntax css; exit 0",
    "stylelint:fix": "stylelint --fix 'src/**/*.css' --syntax css; exit 0"
  }
}
```

**SCSS**

```json
{
  "scripts": {
    "stylelint": "stylelint 'src/**/*.scss' --syntax scss; exit 0",
    "stylelint:fix": "stylelint --fix 'src/**/*.scss' --syntax scss; exit 0"
  }
}
```

**LESS**

```json
{
  "scripts": {
    "stylelint": "stylelint 'src/**/*.less' --syntax less; exit 0",
    "stylelint:fix": "stylelint --fix 'src/**/*.less' --syntax less; exit 0"
  }
}
```

## Work with VS Code

If you are using vscode with [vscode-stylelint](https://github.com/shinnn/vscode-stylelint) extension, this is my vscode config for stylelint (with [vscode-prettier](https://github.com/prettier/prettier-vscode) extension installed).

```jsonc
{
  "editor.formatOnSave": true,

  // Stylelint
  // https://github.com/shinnn/vscode-stylelint#optional-but-recommended-setup
  "css.validate": false,
  "less.validate": false,
  "scss.validate": false,

  // Prettier
  "prettier.stylelintIntegration": true
}
```

With these configs, when you save your CSS, SCSS or LESS files, vscode will automatically sort your CSS properties and fix some fixable stylelint rules.

## Extend

You can override any rules with your own prefs.

## License

MIT