Stylelint Config Extended SCSS

Table of Contents

• Installation
• Usage
• This Config
• Contributing
• License

Installation

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

Usage

Add the following code to the stylelint.config.ts or stylelint.config.js file:

import { defineConfig } from 'stylelint-define-config';

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

Add the Space Between Logical Groups

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

import { defineConfig } from 'stylelint-define-config';

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

Before

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

After

.popup {
  opacity: 0;

  position: fixed;
  inset: 0;
  z-index: 1;

  pointer-events: none;
}

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. A space between groups will only appear if the group has 3 or more properties.

• 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:

    "rem-over-px/rem-over-px": [
      true,
      {
        "ignore": "1px",
        "ignoreFunctions": ["url"],
        "ignoreAtRules": ["media"],
        "fontSize": 16
      }
    ],

Rules

This is a list of the lints turned on in this configuration.

CSS

At-rule

• at-rule-disallowed-list: Rule enabled.
  • Disallow the use of @debug.

Case

• value-keyword-case: Rule enabled.

  Ignore: text-rendering.

Color

• color-named: Rule disabled.

Declaration

• declaration-no-important: Rule enabled.

Descending

• no-descending-specificity: Rule disabled.

Function

• function-url-no-scheme-relative: Rule enabled.

Max & Min

• max-nesting-depth: 3.

  Ignore: blockless-at-rules.

• selector-max-combinators: 4.

• selector-max-compound-selectors: 3.

• selector-max-universal: 1.

Notation

• font-weight-notation: Numeric.

• keyframe-selector-notation: Percentage.

Pattern

• selector-class-pattern: BEM naming convention.

Selector

• selector-no-qualifying-type: Rule enabled.

Unknown

• media-feature-name-value-no-unknown: Rule enabled.

• no-unknown-animations: Rule enabled.

SCSS

SCSS At-rule

• scss/at-each-key-value-single-line: Rule enabled.

• scss/at-root-no-redundant: Rule enabled.

• scss/at-use-no-redundant-alias: Rule enabled.

Comment

• scss/comment-no-loud: Rule enabled.

• scss/double-slash-comment-inline: Rule disabled.

SCSS Declaration

• scss/declaration-nested-properties: Rule disabled.

• scss/dimension-no-non-numeric-values: Rule enabled.

Dollar Variable

• scss/dollar-variable-empty-line-after: Rule enabled.

  Expect: last-nested, before-comment, before-dollar-variable.

  Ignore: before-comment, inside-single-line-block.

• scss/dollar-variable-colon-newline-after: Rule enabled.

• scss/dollar-variable-no-namespaced-assignment: Rule enabled.

• scss/no-duplicate-dollar-variables: Rule enabled.

• scss/no-global-function-names: Rule disabled.

SCSS Function

• scss/function-color-relative: Rule enabled.

  • darken()
  • desaturate()
  • fade-in()
  • fade-out()
  • lighten()
  • opacify()
  • saturate()
  • transparentize()

Import

• scss/partial-no-import: Rule enabled.

Maps

• scss/map-keys-quotes: Rule enabled.

Media

• scss/media-feature-value-dollar-variable: Rule enabled.

SCSS Selector

• scss/selector-no-redundant-nesting-selector: Rule enabled.

SCSS Unknown

• scss/property-no-unknown: Rule enabled.

Contributing

Please read CONTRIBUTING to start contributing.

License

This project is licensed under the MIT license.