@netcentric/stylelint-config

If StyleLint is new to you, you might want to check out what it does and how to configure it.

Install

npm install --save-dev @netcentric/stylelint-config stylelint

Setup

.stylelintrc

Create or update your .stylelintrc file in the folder of your project's package.json:

{
  "extends": "@netcentric/stylelint-config"
}

Please do not add it as a property stylelint within the package.json as it is not supported by all essential IDEs (e.g. Webstorm wouldn't pick it).

Note that Stylelint is different to eslint as it uses cosmiconfig to load the configuration file. Biggest difference: the first config file it finds is used, and it will stop looking for further files in upper folders. That means, you only can define one .stylelintrc file, preferably on the same folder as your project's package.json.

IDE integration

Most IDEs should have an integration for Stylelint.

Build system integration

In your package.json

  "scripts": {
    "lint": "stylelint "\"<root-css-files>/**/*.css\""
  }

Make sure you do not accidently lint files you are not interested that are out of scope for your build; e.g. files within the node_modules folder.

Overwriting rules

Please stick to the Netcentric rules as they are battle tested and were created to form a company wide basis for CSS code quality. If there's a very specific case you want to deactivate a rule for consider using StyleLint inline comments instead.

If there's a rule you consider as outdated or simply wrong please contact the package's maintainer or file an issue in JIRA (bugs in package.json) or create a PR on the package's repository (repository in package.json).

If you have a very project specific case where adding or deactivating a rule makes perfectly sense, you can overwrite any rule using the rules property.

I don't understand why I violated rule X

You can find a description of all rules on the Stylelint Homepage.

Plugins

no-unsupported-browser-features

https://github.com/ismay/stylelint-no-unsupported-browser-features

When working with this plugin we've found some browser issues that might help you save some time investigating:

"plugin/no-unsupported-browser-features": [true, {
  severity: `warning`,
  browsers,
  ignore: [
    // "css-hyphens" is only partially supported by Chrome and Android Browser 56
    // autoprefixer does the job
    `css-hyphens`,
    // we expect full CSS grid support on target browsers nowadays
    `multicolumn`,
    // most of the values are well supported, just clip is partially suppported by Safari
    'css-overflow',
    // most of the values are well supported, just old versions of Firefox and Safari have a few issues with transparent colors
    'css-gradients',
    // following rules need to be disabled if using SCSS, since the CSS nesting is going to be converted to compatible CSS by the build tools
    'css-nesting',
    'css-when-else',
    // it might give false positives when using together with SCSS functions, such as column-gap: scss-function();
    'column-gap',
  ]
}],

@stylistic/stylelint-plugin

@stylistic/stylelint-plugin