@archoleat/stylelint-config-extended-scss NPM

Stylelint Config Extended SCSS

NPM Version NPM Downloads CodeQL Specs Commitlint Editorconfig Prettier ESLint Remark

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, and what they do.

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.

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