Netcentric's coding and style rules for Stylelint
npm install @netcentric/stylelint-config
If StyleLint is new to you, you might want to check out what it does and how to configure it.
``bash`
npm install --save-dev @netcentric/stylelint-config stylelint
Create or update your .stylelintrc file in the folder of your project's package.json:
`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.
Most IDEs should have an integration for Stylelint.
In your package.json
`json`
"scripts": {
"lint": "stylelint "\"
}
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.
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.
You can find a description of all rules on the Stylelint Homepage.
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:
`javascriptwarning
"plugin/no-unsupported-browser-features": [true, {
severity: ,css-hyphens
browsers,
ignore: [
// "css-hyphens" is only partially supported by Chrome and Android Browser 56
// autoprefixer does the job
,multicolumn
// we expect full CSS grid support on target browsers nowadays
,``
// 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',
]
}],