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