@archoleat/stylelint-config-extended-scss NPM

Stylelint Config Extended SCSS

NPM Version NPM Downloads CodeQL Specs Commitlint Editorconfig Prettier ESLint Markdown

This Config

Extends

Extends the stylelint-config-standard-scss shared config and configures it's rules for SCSS.
stylelint-prettier/recommended: Runs Prettier to format SCSS code.

Plugins

stylelint-declaration-block-no-ignored-properties: Disallow property values that are ignored due to another property value in the same rule.
stylelint-gamut: Throw warning if color goes out of sRGB color space and is not wrapped in @media (color-gamut: p3) {} or @media (color-gamut: rec2020) {}
stylelint-group-selectors: Identify the selectors, which can be grouped, as they have same set of properties and values.
stylelint-high-performance-animation: Enhances your animations.
stylelint-order: Sorts over 400 properties for enhanced clarity and maintainability.
Properties are logically grouped and separated by a space.
stylelint-plugin-defensive-css: Enforcing defensive CSS best practices.
stylelint-plugin-logical-css: Replace properties with logical alternatives.

Installation

# pnpm
pnpm i -D @archoleat/stylelint-config-extended-scss

# npm
npm i -D @archoleat/stylelint-config-extended-scss

# yarn
yarn add -D @archoleat/stylelint-config-extended-scss

Usage

[!TIP] We recommend setting stylelint-define-config for property suggestions.
# pnpm
pnpm i -D stylelint-define-config
# npm
npm i -D stylelint-define-config
# yarn
yarn add -D stylelint-define-config

// stylelint.config.js
import { defineConfig } from 'stylelint-define-config';

export default defineConfig({
  extends: '@archoleat/stylelint-config-extended-scss',
});

Extending the Config

// stylelint.config.js
import { defineConfig } from 'stylelint-define-config';

export default defineConfig({
  extends: '@archoleat/stylelint-config-extended-scss',
  rules: {
    'selector-max-compound-selectors': 4,
    'value-no-vendor-prefix': false,
  },
});

Add the Space Between Logical Groups

If you want to add spaces between logical groups, add this rule to your Stylelint config:

// stylelint.config.js
import { defineConfig } from 'stylelint-define-config';

export default defineConfig({
  extends: '@archoleat/stylelint-config-extended-scss',
  rules: {
    'declaration-empty-line-before': null,
  },
});

Before

.popup {
  pointer-events: none;
  opacity: 0;
  position: fixed;
  inset: 0;
}

After

.popup {
  pointer-events: none;

  opacity: 0;

  position: fixed;
  inset: 0;
}

Rules

This is a list of the lints turned on in this configuration, and what they do.

CSS

At-rule

at-rule-disallowed-list: List of disallowed at-rules.
- Disallow the use of @debug.

Case

value-keyword-case: Lowercase for keywords values.
Ignore: text-rendering.

Color

color-named: Colors must never be named.

Declaration

declaration-no-important: Disallow !important within declarations.

Descending

no-descending-specificity: Rule disabled.

Function

function-url-no-scheme-relative: Disallow scheme-relative URLs.

Max & Min

max-nesting-depth: Limit the allowed nesting depth to 3.
Ignore: 'blockless-at-rules'.
selector-max-combinators: Limit the allowed combinators to 4.
selector-max-compound-selectors: Limit the allowed compound selectors to 3.
selector-max-universal: Limit the allowed universal selector to 1.

Notation

font-weight-notation: Numeric notation for font weights.
keyframe-selector-notation: Percentage notation for keyframe selectors.

Pattern

selector-class-pattern: BEM naming convention likely enforced, encouraging modularity, maintainability, and clarity in class naming.

Selector

selector-no-qualifying-type: Disallow qualifying a selector by type.

Unknown

media-feature-name-value-no-unknown: Disallow unknown values for media features.
no-unknown-animations: Disallow unknown animations.

SCSS

At-rule

scss/at-each-key-value-single-line: Each key value in the @each rule must be on a separate line.
scss/at-function-named-arguments: Require named parameters in SCSS function call rule.
Ignore: single-argument.
scss/at-mixin-named-arguments: Require named parameters in at-mixin call rule.
Ignore: single-argument.
scss/at-root-no-redundant: Disallow redundant @at-root rule.
scss/at-use-no-redundant-alias: Disallow redundant @at-root rule.

Comment

scss/comment-no-loud: Disallow /*-comments.
scss/double-slash-comment-inline: Disallow //-comments to be inline comments.

Declaration

scss/declaration-nested-properties: Disallow properties with - in their names to be in a form of a nested group.
scss/dimension-no-non-numeric-values: Prevents the use of non-numeric values in dimensions.

Dollar Variable

scss/dollar-variable-empty-line-after: Require a newline after the $-variable declaration.
Expect: last-nested, before-comment, before-dollar-variable.
Ignore: before-comment, inside-single-line-block.
scss/dollar-variable-colon-newline-after: Require a newline after the colon in $-variable declarations.
scss/dollar-variable-no-namespaced-assignment: Disallow assignment to namespaced variables.
scss/no-duplicate-dollar-variables: Disallow duplicate dollar variables within a stylesheet.

Function

scss/function-color-relative: Encourages the use of the scale-color() feature instead of deprecated features:
- darken()
- desaturate()
- fade-in()
- fade-out()
- lighten()
- opacify()
- saturate()
- transparentize()