stylelint-config-cloudfour

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"
}

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.

Configured Lints

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

At-rule

• at-rule-empty-line-before: Require an empty line before at-rules, except blockless after blockless. overriding SUIT rule to further exclude @custom-media, @mixin, @import, and @for rules.

Comments

• comment-empty-line-before: Require an empty line before comments. overriding SUIT rule to exclude the first nested comment in a block.

General / Sheet

• max-line-length: Limit line lengths to 80 characters for comments only. overriding SUIT rule to ignore comments that contain URLs.

Rule

• 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.

Changelog

License