stylelint-config-crisp

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.