@dcm/stylelint-config NPM

@dcm/stylelint-config

Shareable @stylelint config of @dcmhub.

Installation

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

# Install with npx
$ npx install-peerdeps --dev @dcm/stylelint-config

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

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

Features

Extend from stylelint-config-standard
Support css modules syntax
Support scss, less, wxss and css-in-js syntax
Maintains consistent property order with stylelint-order
Support unsupported browser features linter
Works well with prettier 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.

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

CSS-in-JS

For project using css-in-js, e.g. styled-components and emotion.

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

miniProgram (微信小程序)

For wechat miniProgram project.

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

The second method

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

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

Browser compatibility linter

First, add browsers that we support in your package.json or config file that browserslist supports.

{
  "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 and css-animation):

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

module.exports = {
  extends: ['@dcm/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.

{
  "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 extension, this is my vscode config for stylelint (with vscode-prettier extension installed).

{
  "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.