stylelint-config-sass-guidelines
Advanced tools
Sharable stylelint config based on https://sass-guidelin.es/
stylelint-config-sass-guidelines is a shareable configuration for Stylelint that enforces the Sass Guidelines. It helps developers maintain consistent and clean Sass code by providing a set of rules and best practices.
Enforce BEM Naming Conventions
This rule enforces the Block-Element-Modifier (BEM) naming convention for class selectors, ensuring a consistent and readable structure.
module.exports = { "rules": { "selector-class-pattern": "^[a-z0-9\-]+(__[a-z0-9\-]+)?(--[a-z0-9\-]+)?$" } };Disallow Vendor Prefixes
These rules disallow the use of vendor prefixes in properties and values, encouraging the use of autoprefixer for handling browser compatibility.
module.exports = { "rules": { "property-no-vendor-prefix": true, "value-no-vendor-prefix": true } };Limit Nesting Depth
This rule limits the depth of nesting in Sass files to a maximum of 3 levels, promoting simpler and more maintainable code.
module.exports = { "rules": { "max-nesting-depth": 3 } };Disallow Important
This rule disallows the use of !important in declarations, encouraging developers to find more specific and maintainable solutions.
module.exports = { "rules": { "declaration-no-important": true } };stylelint-config-standard is a widely-used shareable configuration for Stylelint that enforces a set of standard rules for CSS. It is less specific to Sass but provides a solid foundation for maintaining consistent and clean CSS code.
stylelint-config-recommended-scss is a shareable configuration for Stylelint that provides a set of recommended rules for SCSS. It is similar to stylelint-config-sass-guidelines but focuses on general best practices for SCSS rather than adhering strictly to the Sass Guidelines.
stylelint-config-prettier is a shareable configuration for Stylelint that turns off all rules that are unnecessary or might conflict with Prettier. It is useful for developers who use Prettier for code formatting and want to avoid conflicts between Stylelint and Prettier.
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:
stylelint-scss plugin module and turns on rules for SCSS specific code@stylistic/stylelint-plugin plugin module and turns on rules for stylistic settingspostcss-scss custom syntax module and configures itstylelint
postcss
Using NPM
$ npm i -D stylelint postcss stylelint-config-sass-guidelines
Using Yarn
$ yarn add -D stylelint postcss stylelint-config-sass-guidelines
Using PNPM
$ pnpm add -D stylelint postcss stylelint-config-sass-guidelines
Set 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 than 1 declaration per line.declaration-property-value-disallowed-list: Specify a list of disallowed property and value pairs within declarations.
^border: Disallow the use of the word none for borders, use 0 instead. 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 to 1. 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: 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/at-import-partial-extension-disallowed-list: Specify list of disallowed file extensions for partial names in @import commands.
.scss: Disallow the use of the .scss file extension in imports.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/load-no-partial-leading-underscore: Disallow leading underscore in partial names in @import.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 to 3.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.@stylistic/block-opening-brace-space-before: There must always be a single space before the opening brace.
@stylistic/color-hex-case: Hex colors must be written in lowercase.
@stylistic/declaration-bang-space-after: There must never be whitespace after the bang.
@stylistic/declaration-bang-space-before: There must always be a single space before the bang.
@stylistic/declaration-block-semicolon-newline-after: There must always be a newline after the semicolon.
@stylistic/declaration-block-semicolon-space-before: There must never be whitespace before the semicolons.
@stylistic/declaration-block-trailing-semicolon: There must always be a trailing semicolon.
@stylistic/declaration-colon-space-after: There must always be a single space after the colon if the declaration's value is single-line.
@stylistic/declaration-colon-space-before: There must never be whitespace before the colon.
@stylistic/function-comma-space-after: There must always be a single space after the commas in single-line functions.
@stylistic/function-parentheses-space-inside: There must never be whitespace on the inside of the parentheses of functions.
@stylistic/indentation: Indentation should always be 2 spaces.
@stylistic/media-feature-parentheses-space-inside: There must never be whitespace on the inside of the parentheses of media features.
@stylistic/no-missing-end-of-source-newline: Disallow missing end-of-file newlines in non-empty files.
@stylistic/number-leading-zero: There must always be a leading zero.
@stylistic/number-no-trailing-zeros: Disallow trailing zeros in numbers.
@stylistic/selector-list-comma-newline-after: There must always be a newline after the commas of selector lists.
@stylistic/string-quotes: Strings must always be wrapped with single quotes.
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.
[12.1.0]
Full list of changes can be viewed here
FAQs
Sharable stylelint config based on https://sass-guidelin.es/
We found that stylelint-config-sass-guidelines demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Snyk's use of malicious npm packages for research raises ethical concerns, highlighting risks in public deployment, data exfiltration, and unauthorized testing.
Research
Security News
Socket researchers found several malicious npm packages typosquatting Chalk and Chokidar, targeting Node.js developers with kill switches and data theft.
Security News
pnpm 10 blocks lifecycle scripts by default to improve security, addressing supply chain attack risks but sparking debate over compatibility and workflow changes.