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.