Stylelint Config Crisp

A Stylelint configuration that enforces Crisp's CSS rules.

😘 Maintainer: @eliottvincent

Usage

Just extend this configuration in your Stylelint config object:

{
  "extends": ["stylelint-config-crisp"]
}

Documentation

This is the list of configured syntaxes, plugins and rules used by Stylelint Config Crisp, and what they do.

Custom syntaxes

| Name | Description | | :- | :- | | postcss-html | Allows to parse <style> tags from Vue files |

Configurations

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

Plugins

| Name | Description | | :- | :- | | stylelint-order | Order-related linting rules |

Rules

General 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 |

SCSS rules

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

Stylistic rules

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

Order rules

| Name | Description | | :- | :- | | order/order | Enforces the order of content within declaration blocks: dollar variables, then declarations, then nested rules |

Crisp 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) |

License

stylelint-config-crisp is released under the MIT License. See the bundled LICENSE file for details.