spaceninjastylelint-config-spaceninja
A sharable stylelint config object that enforces Space Ninja's CSS Standards
Installation
Install stylelint and stylelint-config-spaceninja:
npm install stylelint stylelint-config-spaceninja --save-devUsage
If you've installed stylelint-config-spaceninja locally within your project, just set your stylelint config to:
{
"extends": "stylelint-config-spaceninja"
}You'll probably also want to add a script to your package.json file to make it easier to run Stylelint with this config:
"scripts": {
"lint:css": "stylelint '**/*.css'"
}Using with Prettier
It's common to pair Stylelint with Prettier. If you're going to use both, you'll want to add stylelint-config-prettier, which is a config that disables any Stylelint rules that conflict with Prettier.
npm install stylelint-config-prettier --save-devThen add it to your Stylelint config. It'll need to be the last item in the extends array so it can override other configs.
{
extends: ["stylelint-config-spaceninja", "stylelint-config-prettier"],
}Then you can update your package.json script to run Prettier as well as Stylelint:
"scripts": {
"lint:css": "prettier --list-different '**/*.css' && stylelint '**/*.css'"
}Extending the config
Simply add a "rules" key to your config, then add your overrides and additions there.
For example, to change the at-rule-no-unknown rule to use its ignoreAtRules option, change the indentation to tabs, turn off the number-leading-zero rule,and add the unit-whitelist rule:
{
"extends": "stylelint-config-spaceninja",
"rules": {
"at-rule-no-unknown": [ true, {
"ignoreAtRules": [
"extends",
"ignores"
]
}],
"indentation": "tab",
"number-leading-zero": null,
"unit-whitelist": ["em", "rem", "s"]
}
}Documentation
Extends
- stylelint-config-standard-scss: The standard shareable SCSS config for Stylelint.
Plugins
- stylelint-declaration-block-no-ignored-properties: Disallow property values that are ignored due to another property value in the same rule.
- stylelint-high-performance-animation: Prevent the use of low performance animation and transition properties.
- stylelint-order: A plugin pack of order related linting rules for stylelint.
Configured Lints
This is a list of the lints turned on in this configuration (beyond the ones that come from stylelint-config-standard-scss), and what they do.
Declaration
declaration-empty-line-before: Disallow an empty line before declarations.selector-class-pattern: Expect class selector to be kebab-case. Disabled to allow for BEM selectors.selector-max-id: Don't allow ID selectorsselector-no-qualifying-type: Disallow qualifying a selector by type (excluding attribute selectors)time-min-milliseconds: Specify a minimum time value of 100 millisecondsorder/properties-alphabetical-order: Specify the alphabetical order of properties within declaration blocksplugin/declaration-block-no-ignored-properties: Disallow property values that are ignored due to another property value in the same rule.plugin/no-low-performance-animation-properties: Prevent the use of low performance animation and transition properties.scss/declaration-nested-properties: Disallow SCSS nested property groups, such asfont { size: 16px; weight: 700; }.scss/selector-no-redundant-nesting-selector: Disallow redundant nesting selectors (&).