stylelint-config-sass-guidelines
stylelint-config-sass-guidelines copied to clipboard
⚙ A stylelint config inspired by https://sass-guidelin.es/
stylelint-config-sass-guidelines
A stylelint config inspired by sass-guidelin.es.
This linter has been designed / tested with SCSS syntax based on the SCSS guidelines documented in https://sass-guidelin.es/. It is intended for use with SCSS syntax, not Sass (tab style) syntax.
This config:
- bundles the
stylelint-scss
plugin pack and turns on its rules that check for possible errors - bundles the
stylelint-order
plugin pack and turns on its rules that check for possible errors - bundles the
postcss-scss
custom syntax and configures it - has a peer dependency on
stylelint ^14.0.1
You'll need to install this package in your project - has a peer dependency on
postcss ^8.3.3
You'll need to install this package in your project
Translations
- Deutsch
Installation
$ npm i -D stylelint postcss stylelint-config-sass-guidelines
Usage
Set your stylelint config to:
{
"extends": "stylelint-config-sass-guidelines"
}
Extending the config
Simply add a "rules"
key to your config and add your overrides there.
For example, to change the indentation
to tabs and turn off the number-leading-zero
rule:
{
"extends": "stylelint-config-sass-guidelines",
"rules": {
"indentation": "tab",
"number-leading-zero": null
}
}
Lint Rule Comparison
Lint Report Comparison
Documentation
Configured lints
This is a list of the lints turned on in this configuration, and what they do.
At-rule
-
at-rule-disallowed-list
: Specify a list of disallowed at-rules.-
"debug"
Disallow the use of@debug
.
-
-
at-rule-no-vendor-prefix
: Disallow vendor prefixes for at-rules.
Block
-
block-no-empty
: Disallow empty blocks. -
block-opening-brace-space-before
: There must always be a single space before the opening brace.
Color
-
color-hex-case
: Hex colors must be written in lowercase. -
color-hex-length
: Always use short hex notation, where available. -
color-named
: Colors must never be named. -
color-no-invalid-hex
: Hex values must be valid.
Declaration
-
declaration-bang-space-after
: There must never be whitespace after the bang. -
declaration-bang-space-before
: There must always be a single space before the bang. -
declaration-colon-space-after
: There must always be a single space after the colon if the declaration's value is single-line. -
declaration-colon-space-before
: There must never be whitespace before the colon.
Declaration block
-
declaration-block-properties-order
: Properties in declaration blocks must be sorted alphabetically. -
declaration-block-semicolon-newline-after
: There must always be a newline after the semicolon. -
declaration-block-semicolon-space-before
: There must never be whitespace before the semicolons. -
declaration-block-single-line-max-declarations
: There should never be more than1
declaration per line. -
declaration-block-trailing-semicolon
: There must always be a trailing semicolon.
Declaration Property
-
declaration-property-value-disallowed-list
: Specify a list of disallowed property and value pairs within declarations.-
^border
: Disallow the use of the wordnone
for borders, use0
instead. The intent of this rule is to enforce consistency, rather than define which is "better."
-
Function
-
function-comma-space-after
: There must always be a single space after the commas in single-line functions. -
function-parentheses-space-inside
: There must never be whitespace on the inside of the parentheses of functions. -
function-url-quotes
: URLs must always be quoted.
General
-
indentation
: Indentation should always be2
spaces. -
length-zero-no-unit
: Disallow units for zero lengths. -
max-nesting-depth
: Limit the allowed nesting depth to1
. Ignore: Nested at-rules@media
,@supports
, and@include
. -
no-missing-eof-newline
: Disallow missing end-of-file newlines in non-empty files.
Media Feature
-
media-feature-name-no-vendor-prefix
: Disallow vendor prefixes for media feature names.
Number
-
number-leading-zero
: There must always be a leading zero. -
number-no-trailing-zeros
: Disallow trailing zeros in numbers.
Property
-
property-no-vendor-prefix
: Disallow vendor prefixes for properties. -
shorthand-property-no-redundant-values
: Disallow redundant values in shorthand properties.
Rule
-
rule-nested-empty-line-before
: There must always be an empty line before multi-line rules. Except: Nested rules that are the first of their parent rule. Ignore: Rules that come after a comment. -
rule-non-nested-empty-line-before
: There must always be an empty line before multi-line rules. Ignore: Rules that come after a comment.
SCSS
-
at-extend-no-missing-placeholder
: Disallow at-extends (@extend
) with missing placeholders. -
at-function-pattern
: SCSS functions must be written in lowercase and match the regex^[a-z]+([a-z0-9-]+[a-z0-9]+)?$
. -
at-import-no-partial-leading-underscore
: Disallow leading underscore in partial names in@import
. -
at-import-partial-extension-blacklist
: Specify list of disallowed file extensions for partial names in@import
commands.-
.scss
: Disallow the use of the.scss
file extension in imports.
-
-
at-mixin-pattern
: SCSS mixins must be written in lowercase and match the regex^[a-z]+([a-z0-9-]+[a-z0-9]+)?$
. -
dollar-variable-colon-space-after
: Require a single space after the colon in $-variable declarations. -
dollar-variable-colon-space-before
: Disallow whitespace before the colon in $-variable declarations. -
dollar-variable-pattern
: SCSS variables must be written in lowercase and match the regex^[a-z]+([a-z0-9-]+[a-z0-9]+)?$
. -
percent-placeholder-pattern
: SCSS%
-placeholders must be written in lowercase and match the regex^[a-z]+([a-z0-9-]+[a-z0-9]+)?$
. -
selector-no-redundant-nesting-selector
: Disallow redundant nesting selectors (&
).
Selector
-
selector-class-pattern
: Selectors must be written in lowercase and match the regex^(?:u|is|has)-[a-z][a-zA-Z0-9]*$|^(?!u|is|has)[a-zA-Z][a-zA-Z0-9]*(?:-[a-z][a-zA-Z0-9]*)?(?:--[a-z][a-zA-Z0-9]*)?$
. -
selector-list-comma-newline-after
: There must always be a newline after the commas of selector lists. -
selector-max-compound-selectors
: Limit the number of compound selectors in a selector to3
. -
selector-no-id
: Disallow id selectors. -
selector-no-qualifying-type
: Disallow qualifying a selector by type. -
selector-no-vendor-prefix
: Disallow vendor prefixes for selectors. -
selector-pseudo-element-colon-notation
: Applicable pseudo-elements must always use the double colon notation. -
selector-pseudo-element-no-unknown
: Disallow unknown pseudo-element selectors.
String
-
string-quotes
: Strings must always be wrapped with single quotes.
Stylelint Disable Comment
-
stylelint-disable-reason
: Require a reason comment before stylelint-disable comments.
Value
-
value-no-vendor-prefix
: Disallow vendor prefixes for values.
Changelog
Contributors
stylelint-config-sass-guidelines is maintained myself and contributions from the community. Without the code contributions from all these fantastic people, stylelint-config-sass-guidelines would not exist.