stylelint-config-cloudfour

A sharable stylelint config object that enforces Cloud Four's CSS Standards

Note that this config mostly just extends the SUIT config, and any additions or changes from the SUIT standard should be well-documented here to explain the deviation.

Installation

Install stylelint and stylelint-config-cloudfour:

npm install stylelint stylelint-config-cloudfour --save-dev

Usage

If you've installed stylelint-config-cloudfour locally within your project, just set your stylelint config to:

{
  "extends": "stylelint-config-cloudfour"
}

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-cloudfour", "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-cloudfour",
  "rules": {
    "at-rule-no-unknown": [ true, {
      "ignoreAtRules": [
        "extends",
        "ignores"
      ]
    }],
    "indentation": "tab",
    "number-leading-zero": null,
    "unit-whitelist": ["em", "rem", "s"]
  }
}

Documentation

What's the difference between stylelint-config-cloudfour-suit and stylelint-config-cloudfour?

stylelint-config-cloudfour only contains the CSS formatting rules. stylelint-config-cloudfour-suit extends it, and additionally enforces the SUIT naming convention. In most cases, you should use stylelint-config-cloudfour-suit, but if your project doesn't follow the SUIT naming scheme, then you can use stylelint-config-cloudfour directly.

Extends

• stylelint-config-suitcss: Configuration rules to ensure your CSS code is compliant with SUIT CSS's code style.
• stylelint-config-standard-scss: The standard shareable SCSS config for Stylelint.

Plugins

• stylelint-high-performance-animation: Prevent the use of low performance animation and transition properties.

Configured Lints

This is a list of the lints turned on in this configuration (beyond the ones that come from stylelint-config-suitcss & stylelint-config-standard-scss), and what they do.

• at-rule-empty-line-before: Require an empty line before at-rules. disabled temporarily, pending #2480
• comment-empty-line-before: Require an empty line before comments. overriding SUIT rule to exclude the first nested comment in a block.
• max-line-length: Limit line lengths to 80 characters for comments only. overriding SUIT rule to ignore comments that contain URLs.
• no-descending-specificity: Disallow selectors of lower specificity from coming after overriding selectors of higher specificity. disabled due to false positives in SCSS contexts.
• rule-empty-line-before: Require an empty line before multi-line rules. overriding SUIT rule to exclude the first multi-line rule in a block, and to ignore rules following comments.

Order

• order/order: Specifies the order of content within declaration blocks: Variables, @include statements, declarations, block @include statements, nested rules.
• order/properties-alphabetical-order: Specify the alphabetical order of properties within declaration blocks.

SCSS

• at-rule-disallowed-list: Disallow use of @extend because it's considered an anti-pattern, and @import because it's deprecated
• 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 (&).

Performance

• plugin/no-low-performance-animation-properties: Prevent the use of low performance animation and transition properties that trigger layout.

Changelog

License