@nake/stylelint-config

Naked stylelint shareable config for web apps

This Stylelint config is extended from both standard and prettier styles. It uses stylelint-no-unsupported-browser-features plugin for browser compatibility linter, It uses stylelint-order for CSS rules and properties order consistency. It provides four extend options for different environment.

Features

• Extends stylelint-standard config
• Support css modules syntax
• Turns on recommended rules from stylelint-scss
• Support css-in-js linter with styled-components
• Maintains consistent declarations order with 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

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

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

SCSS

For web project using SCSS.

{
  "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 or emotion

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

Wxapp (微信小程序)

For wechat miniProgram project.

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

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

/* 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 supports.

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

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

NPM script

CSS

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

SCSS

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

LESS

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