stylelint-config-cloudfour

10.0.0 • Public • Published

stylelint-config-cloudfour

NPM version Build Status Renovate

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

Plugins

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

Performance

Changelog

License

Package Sidebar

Install

npm i stylelint-config-cloudfour

Weekly Downloads

247

Version

10.0.0

License

MIT

Unpacked Size

12.2 kB

Total Files

4

Last publish

Collaborators

  • cloudfour-user
  • gerardo-rodriguez
  • calebeby
  • spaceninja
  • cloudfour-paul
  • tylersticka