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-scssplugin pack and turns on its rules that check for possible errors - bundles the
postcss-scsscustom syntax and configures it - has a peer dependency on
stylelint ^16.1.0You'll need to install this package in your project - has a peer dependency on
postcss ^8.4.21You'll need to install this package in your project
$ npm i -D stylelint postcss stylelint-config-sass-guidelinesSet your stylelint config to:
{
"extends": "stylelint-config-sass-guidelines"
}Simply add a "rules" key to your config and add your overrides there.
For example:
{
"extends": "stylelint-config-sass-guidelines",
"rules": {
"selector-max-compound-selectors": 4,
"value-no-vendor-prefix": false
}
}This is a list of the lints turned on in this configuration, and what they do.
at-rule-disallowed-list: Specify a list of disallowed at-rules."debug"Disallow the use of@debug.
at-rule-no-unknown: Disallow unknown at-rules.at-rule-no-vendor-prefix: Disallow vendor prefixes for at-rules.
block-no-empty: Disallow empty blocks.
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-block-single-line-max-declarations: There should never be more than1declaration per line.
declaration-property-value-disallowed-list: Specify a list of disallowed property and value pairs within declarations.^border: Disallow the use of the wordnonefor borders, use0instead. The intent of this rule is to enforce consistency, rather than define which is "better."
function-url-quotes: URLs must always be quoted.
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.
media-feature-name-no-vendor-prefix: Disallow vendor prefixes for media feature names.
property-no-unknown: Disallow unknown propertiesproperty-no-vendor-prefix: Disallow vendor prefixes for properties.shorthand-property-no-redundant-values: Disallow redundant values in shorthand properties.
- [
rule-empty-line-before]https://stylelint.io/user-guide/rules/rule-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.
scss/at-extend-no-missing-placeholder: Disallow at-extends (@extend) with missing placeholders.scss/at-function-pattern: SCSS functions must be written in lowercase and match the regex^[a-z]+([a-z0-9-]+[a-z0-9]+)?$.scss/load-no-partial-leading-underscore: Disallow leading underscore in partial names in@import.scss/at-import-partial-extension-disallowed-list: Specify list of disallowed file extensions for partial names in@importcommands..scss: Disallow the use of the.scssfile extension in imports.
- scss/
at-mixin-pattern: SCSS mixins must be written in lowercase and match the regex^[a-z]+([a-z0-9-]+[a-z0-9]+)?$. scss/at-rule-no-unknown: SCSS mixins must be written in lowercase and match the regex^[a-z]+([a-z0-9-]+[a-z0-9]+)?$.scss/dollar-variable-colon-space-after: Require a single space after the colon in $-variable declarations.scss/dollar-variable-colon-space-before: Disallow whitespace before the colon in $-variable declarations.scss/dollar-variable-pattern: SCSS variables must be written in lowercase and match the regex^[a-z]+([a-z0-9-]+[a-z0-9]+)?$.scss/no-global-function-names: Disallows the use of global function names, as these global functions are now located inside built-in Sass modules.scss/percent-placeholder-pattern: SCSS%-placeholders must be written in lowercase and match the regex^[a-z]+([a-z0-9-]+[a-z0-9]+)?$.scss/selector-no-redundant-nesting-selector: Disallow redundant nesting selectors (&).
-
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-max-compound-selectors: Limit the number of compound selectors in a selector to3. -
selector-max-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.
value-no-vendor-prefix: Disallow vendor prefixes for values.
stylelint-config-sass-guidelines is maintained by Brett Jankord and contributions from the community. Without the code contributions from all these fantastic people, stylelint-config-sass-guidelines would not exist.
![dependabot-preview[bot] avatar](https://avatars.githubusercontent.com/in/2141?v=4 "dependabot-preview[bot]")
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
![greenkeeper[bot] avatar](https://avatars.githubusercontent.com/in/505?v=4 "greenkeeper[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent