A Stylelint configuration that enforces Crisp's CSS rules.
😘 Maintainer: @eliottvincent
Just extend this configuration in your Stylelint config object:
{
"extends": ["stylelint-config-crisp"]
}This is the list of configured syntaxes, plugins and rules used by Stylelint Config Crisp, and what they do.
| Name | Description |
|---|---|
| postcss-html | Allows to parse <style> tags from Vue files |
| Name | Description |
|---|---|
| @stylistic/stylelint-config | A backport of stylistic rules that were deprecated in Stylelint 15.0.0 |
| stylelint-config-standard-scss | Standard rules specific to SCSS syntax |
| Name | Description |
|---|---|
| stylelint-order | Order-related linting rules |
| Name | Description |
|---|---|
| alpha-value-notation | Alpha-values must use the number notation (instead of the percentage notation) |
| at-rule-empty-line-before | Requires an empty line before at-rules - blockless at-rules are ignored (usefull for root .scss files with a lot of @import rules, organized in different groups) |
| block-no-empty | Disallows empty blocks |
| color-function-notation | Color functions must use legacy notation (rgba(12, 122, 231, 0.2) instead of rgb(12 122 231 / 0.2)) |
| color-hex-length | Hex colors must use long notation |
| color-no-invalid-hex | Disallows invalid hex colors |
| declaration-block-no-redundant-longhand-properties | Disallows redundant longhand properties - inset shorthand is ignored (prefer using the longhand properties top, right, bottom and left altogether) - overflow shorthand is ignored (prefer using the longhand properties overflow-x and overflow-y altogether) |
| declaration-block-single-line-max-declarations | Allows only 1 declaration per line |
| declaration-property-value-disallowed-list | A list of disallowed property and value pairs within declaration - ^border: none is disallowed (prefer 0, for consistency) - outline: none is disallowed (prefer 0, for consistency) |
| keyframe-block-no-duplicate-selectors | Rule is disabled, in order to allow cascade selectors within keyframe blocks (seems they are not supported by this rule, yet) |
| number-max-precision | Allows a maximum of 5 decimal places in numbers |
| media-feature-range-notation | Media feature ranges must use the prefix notation |
| no-descending-specificity | Rule is disabled, as we do not want to check source order |
| rule-empty-line-before | Requires an empty line before multi-line rules - "first-nested" is reversed (for rules that are nested and the first child of their parent node, we don't want any empty line) - "after-comment" is ignored (for rules that follow a comment) |
| selector-class-pattern | Rule is disabled as it conflicts with our BEM notation in class selectors |
| selector-not-notation | Enforces simple notation for :not() pseudo-class selectors |
| selector-pseudo-class-no-unknown | Disallows unknown pseudo-class selectors |
| selector-pseudo-element-colon-notation | Pseudo-elements must use the single colon notation |
| Name | Description |
|---|---|
| scss/at-rule-conditional-no-parentheses | Rule is disabled to allow parentheses in conditional at-rules (if, elsif, while) |
| scss/dollar-variable-empty-line-before | Rule is disabled to allow empty lines between logical variable blocks |
| scss/load-no-partial-leading-underscore | Rule is disabled to allow @import-ing files with underscore in their name |
| scss/map-keys-quotes | Requires quoted keys in maps |
| scss/no-global-function-names | Rule is disabled to keep using global function names, instead of the new built-in module system |
| scss/operator-no-newline-after | Rule is disabled to allow linebreaks after Sass operators |
| Name | Description |
|---|---|
| @stylistic/block-closing-brace-newline-after | Requires a newline after the closing brace of blocks - if and else at-rules are ignored |
| @stylistic/color-hex-case | Enforces lowercase for hex colors |
| @stylistic/declaration-colon-newline-after | Rule is disabled to allow multi-line decleration without newline after the colon |
| @stylistic/indentation | Enforces 2-spaces indentation - Indentation inside parentheses is ignored, as we increment the indentation for multi-line expressions |
| @stylistic/number-leading-zero | Requires a leading zero for fractional numbers less than 1 |
| @stylistic/property-case | Enforces lowercase for properties |
| @stylistic/selector-pseudo-class-case | Enforces lowercase for pseudo-class selectors |
| @stylistic/selector-pseudo-element-case | Enforces lowercase for pseudo-element selectors |
| @stylistic/string-quotes | Enforces double quotes around strings |
| @stylistic/unit-case | Enforces lowercase for units |
| Name | Description |
|---|---|
| order/order | Enforces the order of content within declaration blocks: dollar variables, then declarations, then nested rules |
| Name | Description |
|---|---|
| at-rule-conditional-parentheses | Enforces parentheses in conditions of at-rules (@if, @elseif, @while) |
| filename-class-match | Ensures that class name is derivated from filename (this rule is only applied to Vue files) |
| rule-empty-line-before | Requires an empty line before multi-line rules the same way rule-empty-line-before does, but properly handles Sass interpolation #{} in selectors |
| selector-class-interpolation | Enforces class selectors to use Sass interpolation (this rule is only applied to Vue files) |
stylelint-config-crisp is released under the MIT License. See the bundled LICENSE file for details.