https://github.com/cloudfour/stylelint-config-cloudfour
Cloud Four's shareable config
https://github.com/cloudfour/stylelint-config-cloudfour
Last synced: 9 months ago
JSON representation
Cloud Four's shareable config
- Host: GitHub
- URL: https://github.com/cloudfour/stylelint-config-cloudfour
- Owner: cloudfour
- License: mit
- Created: 2017-09-21T22:12:40.000Z (over 8 years ago)
- Default Branch: main
- Last Pushed: 2025-06-30T05:05:17.000Z (9 months ago)
- Last Synced: 2025-06-30T06:22:41.326Z (9 months ago)
- Language: JavaScript
- Size: 2.47 MB
- Stars: 2
- Watchers: 6
- Forks: 1
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# stylelint-config-cloudfour
[](https://www.npmjs.org/package/stylelint-config-cloudfour) [](https://github.com/cloudfour/stylelint-config-cloudfour/actions?query=workflow%3ACI) [](https://renovatebot.com)
> A sharable stylelint config object that enforces [Cloud Four's CSS Standards](https://github.com/cloudfour/guides/tree/main/css)
Note that this config mostly just extends the [SUIT config](https://github.com/suitcss/stylelint-config-suitcss), and any additions or changes from the SUIT standard should be well-documented here to explain the deviation.
## Installation
Install [stylelint](https://stylelint.io/) 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:
```js
{
"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:
```json
"scripts": {
"lint:css": "stylelint '**/*.css'"
}
```
### Using with Prettier
> [!NOTE]
> This section is no longer relevant if you are using **Stylelint V15** or higher.
> As of Stylelint v15 [all style-related rules have been deprecated](https://stylelint.io/migration-guide/to-15#deprecated-stylistic-rules). If you are using v15 or higher and are not making use of these deprecated rules, [this plugin is no longer necessary](https://stylelint.io/migration-guide/to-15#:~:text=Additionally%2C%20you%20may%20no%20longer%20need%20to%20extend%20Prettier%27s%20Stylelint%20config).
---
It's common to [pair Stylelint with Prettier](https://prettier.io/docs/en/integrating-with-linters.html#stylelint). If you're going to use both, you'll want to add [`stylelint-config-prettier`](https://github.com/prettier/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.
```js
{
extends: ["stylelint-config-cloudfour", "stylelint-config-prettier"],
}
```
Then you can update your `package.json` script to run Prettier as well as Stylelint:
```json
"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:
```js
{
"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](https://github.com/cloudfour/stylelint-config-cloudfour-suit) and [stylelint-config-cloudfour](https://github.com/cloudfour/stylelint-config-cloudfour)?
[stylelint-config-cloudfour](https://github.com/cloudfour/stylelint-config-cloudfour) only contains the CSS formatting rules. [stylelint-config-cloudfour-suit](https://github.com/cloudfour/stylelint-config-cloudfour-suit) extends it, and additionally enforces the [SUIT naming convention](https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md). In most cases, you should use [stylelint-config-cloudfour-suit](https://github.com/cloudfour/stylelint-config-cloudfour-suit), but if your project doesn't follow the SUIT naming scheme, then you can use [stylelint-config-cloudfour](https://github.com/cloudfour/stylelint-config-cloudfour) directly.
### Extends
- [stylelint-config-suitcss](https://github.com/suitcss/stylelint-config-suitcss): Configuration rules to ensure your CSS code is compliant with [SUIT CSS's code style](https://github.com/suitcss/suit/blob/master/doc/STYLE.md).
- [stylelint-config-standard-scss](https://github.com/stylelint-scss/stylelint-config-standard-scss): The standard shareable SCSS config for Stylelint.
### Plugins
- [stylelint-high-performance-animation](https://github.com/kristerkari/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`](https://github.com/stylelint/stylelint/blob/master/lib/rules/at-rule-empty-line-before/README.md): Require an empty line before at-rules. _disabled temporarily, pending [#2480](https://github.com/stylelint/stylelint/issues/2480)_
- [`comment-empty-line-before`](https://github.com/stylelint/stylelint/tree/master/lib/rules/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`](https://github.com/stylelint/stylelint/blob/master/lib/rules/max-line-length/): Limit line lengths to 80 characters for comments only. _overriding SUIT rule to ignore comments that contain URLs._
- [`no-descending-specificity`](https://stylelint.io/user-guide/rules/list/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`](https://github.com/stylelint/stylelint/blob/master/lib/rules/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`](https://github.com/hudochenkov/stylelint-order/blob/master/rules/order/README.md): Specifies the order of content within declaration blocks: Variables, `@include` statements, declarations, block `@include` statements, nested rules.
- [`order/properties-alphabetical-order`](https://github.com/hudochenkov/stylelint-order/blob/master/rules/properties-alphabetical-order/README.md): Specify the alphabetical order of properties within declaration blocks.
#### SCSS
- [`at-rule-disallowed-list`](https://github.com/stylelint/stylelint/blob/main/lib/rules/at-rule-disallowed-list/README.md): Disallow use of `@extend` because it's [considered an anti-pattern](https://csswizardry.com/2016/02/mixins-better-for-performance/), and `@import` because it's [deprecated](https://sass-lang.com/documentation/at-rules/import)
- [`scss/declaration-nested-properties`](https://github.com/kristerkari/stylelint-scss/blob/master/src/rules/declaration-nested-properties/README.md): Disallow SCSS nested property groups, such as `font { size: 16px; weight: 700; }`.
- [`scss/selector-no-redundant-nesting-selector`](https://github.com/kristerkari/stylelint-scss/blob/master/src/rules/selector-no-redundant-nesting-selector/README.md): Disallow redundant nesting selectors (`&`).
#### Performance
- [`plugin/no-low-performance-animation-properties`](https://github.com/kristerkari/stylelint-high-performance-animation): Prevent the use of low performance animation and transition properties that trigger `layout`.
## [Changelog](CHANGELOG.md)
## [License](LICENSE)