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

Usage

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

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

• selector-no-qualifying-type: Disallow qualifying a selector by type (excluding attribute selectors)

• time-min-milliseconds: Specify a minimum time value of 100 milliseconds

• order/properties-alphabetical-order: Specify the alphabetical order of properties within declaration blocks

• plugin/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 as font { size: 16px; weight: 700; }.

• scss/selector-no-redundant-nesting-selector: Disallow redundant nesting selectors (&).

Changelog

License