Skip to content

crisp-oss/stylelint-config-crisp

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

44 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Stylelint Config Crisp

Build and Release NPM Downloads

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.