npm package: @laozhu/stylelint-config
Description: Shareable @stylelint config of @laozhu
Author: Ritchie Zhu
Latest version: 1.1.0

# @laozhu/stylelint-config

[![Version](https://img.shields.io/npm/v/@laozhu/stylelint-config.svg)](https://npm.im/@laozhu/stylelint-config) [![Weekly Downloads](https://img.shields.io/npm/dw/@laozhu/stylelint-config.svg)](https://npm.im/@laozhu/stylelint-config)

Shareable @stylelint config of @laozhu.

## Installation

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

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

# Install with NPM
$ npm i -D stylelint prettier @laozhu/stylelint-config

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

## Features

- Extend from [stylelint-config-standard](https://github.com/stylelint/stylelint-config-standard)
- Support css modules syntax
- Support `scss`, `less`, `wxss` and `css-in-js` syntax
- Maintains consistent property order with [stylelint-order](https://github.com/hudochenkov/stylelint-order)
- Support unsupported browser features linter
- Works well with [prettier](https://prettier.io/) together
- Open for further extension

## Usage

After installation, you have two methods to use this configuration.

### The first method

Create a `.stylelintrc.js` or `stylelint.config.js` file in your project root, then require this package in the file.

#### Default

For project which using `css`, `postcss`, `scss` or `less`.

```javascript
module.exports = {
  extends: ['@laozhu/stylelint-config'],
};
```

#### CSS-in-JS

For project using `css-in-js`, e.g. [styled-components](https://www.styled-components.com/) and [emotion](https://github.com/emotion-js/emotion).

```javascript
module.exports = {
  extends: ['@laozhu/stylelint-config/styled'],
};
```

#### miniProgram (微信小程序)

For wechat miniProgram project.

```javascript
module.exports = {
  extends: ['@laozhu/stylelint-config/wxapp'],
};
```

### The second method

If your project have a `package.json` file, add "stylelint" key in your this file.

```json
{
  "name": "my-cool-project-name",
  "version": "1.0.0",
  "stylelint": {
    "extends": ["@laozhu/stylelint-config"]
  }
}
```

## 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": ["> 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)):

```javascript
const whiteListFeatures = ['flexbox', 'object-fit'];

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

_This shareable config setted `flexbox` as default ignore._

## Ignore files

You can create `.stylelintignore` file or add ignoreFiles entry in `stylelint.config.js` file.

## NPM Scripts

Add stylelint scripts in your `package.json`, then you can run `yarn lint:css` from CLI.

```json
{
  "name": "my-cool-project-name",
  "version": "1.0.0",
  "scripts": {
    "lint:css": "stylelint 'src/**/*.css'",
    "lint:scss": "stylelint 'src/**/*.scss'",
    "lint:less": "stylelint 'src/**/*.less'",
    "lint:wxapp": "stylelint 'src/**/*.wxss'",
    "lint:styled": "stylelint 'src/**/*.{jsx,tsx}'",
    "stylelint": "stylelint 'src/**/*.{css,scss,less,jsx,tsx}'",
    "stylelint:fix": "stylelint 'src/**/*.{css,scss,less,jsx,tsx}' --fix"
  }
}
```

## 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 settings above, vscode will automatically sort your css properties and fix some fixable stylelint rules while saving `css`, `scss`, `less` and `wxss` files.

## Extend

You can override any rules with your own prefs.

## License

MIT