Stylelint Config Extended SCSS

Table of Contents

• Installation
• Usage
• This Config
• Contributing
• License

Installation

bun i -D @archoleat/stylelint-config-extended-scss

Usage

Tip

We recommend setting stylelint-define-config for property suggestions.

# bun
bun i -D stylelint-define-config

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

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

Extending the Config

// stylelint.config.js or stylelint.config.ts
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;
}

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.

• stylelint-rem-over-px: Enforce the usage of rem units over px units.

  Declaring the rule with default values is equivalent to:

    // Declaring the rule with default values is equivalent to:
    "rem-over-px/rem-over-px": [
      true,
      {
        "ignore": "1px",
        "ignoreFunctions": ["url"],
        "ignoreAtRules": ["media"],
        "fontSize": 16
      }
    ],

• stylelint-no-unsupported-browser-features: Disallow features that aren't supported by your target browser audience.

  For this plugin, browserslist is already configured with the following options: > 1.5% Firefox ESR last 2 versions not dead

  If you want to use your own config, then create a browserslist file in your project's root.

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

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-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.

SCSS 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.

SCSS 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()

Import

• scss/partial-no-import: Disallow non-CSS @imports in partial files.

Maps

• scss/map-keys-quotes: Require quoted keys in SASS maps.

Media

• scss/media-feature-value-dollar-variable: Require a media feature value be a $-variable.

SCSS Selector

• scss/selector-no-redundant-nesting-selector: Disallow redundant nesting selectors (&).

SCSS Unknown

• scss/property-no-unknown: Disallow unknown properties. Should be used instead of Stylelint's property-no-unknown.

Contributing

Please read CONTRIBUTING to start contributing.

License

This project is licensed under the MIT license.