Stylelint-config-crisp NPM

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)