v3.0.0 – Stylelint 15

3.0.0 (2023-08-17)

Features

• Update stylelint to v15 (#28).
• Update all config dependencies to their latest releases, compatible with stylelint v15 (#28).
• Remove dependency on stylelint-config-prettier, which is no longer needed with stylelint v15 (#28).
• Change enforced rules from stylelint-config-standard, including 10 new rules (see list below) (#28).

BREAKING CHANGES

The configuration now mandates stylelint v15, and no longer uses stylelint-config-prettier. Stylelint has stopped enforcing formatting-related rules, which are no longer relevant with the majority of projects now using Prettier for formatting. See Stylelint’s official Migrating to 15.0.0 documentation.

The configuration also switches from stylelint-config-standard to stylelint-config-standard-scss, which more correctly disables CSS-only rules and replaces them with SCSS-aware rules.

Newly enforced rules:

• import-notation
  • Specify string or URL notation for @import rules.
  • Set to: string
• keyframe-block-no-duplicate-selectors
  • Disallow duplicate selectors within keyframe blocks.
  • Set to: true
• keyframe-selector-notation
  • Specify keyword or percentage notation for keyframe selectors.
  • Set to: percentage-unless-within-keyword-only-block
• selector-anb-no-unmatchable
  • Disallow unmatchable An+B selectors.
  • Set to: true
• selector-attribute-quotes
  • Require or disallow quotes for attribute values.
  • Set to: always
• scss/at-if-no-null
  • Check for equality to null is unnecessarily explicit since null is falsey in Sass.
  • Set to: true
• scss/at-import-no-partial-leading-underscore
  • Disallow leading underscore in partial names in @import.
  • Set to: true
• scss/at-import-partial-extension
  • Require or disallow extension in @import commands.
  • Set to: never
• scss/declaration-nested-properties-no-divided-groups
  • Disallow nested properties of the same "namespace" be divided into multiple groups.
  • Set to: true
• scss/no-duplicate-mixins
  • Disallow duplicate mixins within a stylesheet.
  • Set to: true

New rules which have been explicitly disabled:

• annotation-no-unknown
  • Disallow unknown annotations.
  • Set to: disabled (rather than true)
• selector-not-notation
  • Specify simple or complex notation for :not() pseudo-class selectors.
  • Set to: disabled (rather than complex, syntax from Selectors Level 4)
• media-feature-range-notation
  • Specify context or prefix notation for media feature ranges.
  • Set to: disabled (rather than context, syntax from Media Queries Level 4)
• at-rule-empty-line-before
  • Require or disallow an empty line before at-rules.
  • Set to: disabled (rather than always except first-nested, blockless-after-blockless; ignore after-comment; ignoreAtRules else)
• scss/at-extend-no-missing-placeholder
  • Disallow at-extends (@extend) with missing placeholders.
  • Set to: disabled (rather than true)
• scss/at-function-pattern
  • Specify a pattern for Sass/SCSS-like function names.
  • Set to: disabled (rather than "kebab-case")
• scss/dollar-variable-pattern
  • Specify a pattern for Sass-like variables.
  • Set to: disabled (rather than "kebab-case")
• scss/dollar-variable-empty-line-before
  • Require an empty line or disallow empty lines before $-variable declarations.
  • Set to: disabled (rather than true)
• scss/double-slash-comment-empty-line-before
  • Require or disallow an empty line before //-comments.
  • Set to: disabled (rather than true)
• scss/no-global-function-names
  • Disallows the use of global function names, as these global functions are now located inside built-in Sass modules.
  • Set to: disabled (rather than true)

Rules which have been replaced by a Sass-specific equivalent:

• comment-no-empty (replaced with scss/comment-no-empty)
• function-no-unknown (replaced with scss/function-no-unknown)

New formatting rules which are enforced:

• scss/at-if-closing-brace-newline-after: always-last-in-chain
• scss/at-if-closing-brace-space-after: always-intermediate
• scss/at-else-closing-brace-newline-after: always-last-in-chain
• scss/at-else-closing-brace-space-after: always-intermediate
• scss/at-else-empty-line-before: never
• scss/at-else-if-parentheses-space-before: always
• scss/at-function-parentheses-space-before: never
• scss/at-mixin-parentheses-space-before: never
• scss/at-rule-conditional-no-parentheses: true
• scss/dollar-variable-colon-space-after: always
• scss/dollar-variable-colon-space-before: never
• scss/double-slash-comment-whitespace-inside: always
• scss/function-quote-no-quoted-strings-inside: true
• scss/function-unquote-no-unquoted-strings-inside: true
• scss/operator-no-newline-after: true
• scss/operator-no-newline-before: true
• scss/operator-no-unspaced: true

Formatting rules which are no longer enforced:

• number-leading-zero
• at-rule-empty-line-before
• at-rule-name-case
• at-rule-name-newline-after
• at-rule-name-space-after
• at-rule-semicolon-newline-after
• at-rule-semicolon-space-before
• block-opening-brace-newline-after
• block-opening-brace-newline-before
• block-opening-brace-space-after
• block-opening-brace-space-before
• block-closing-brace-empty-line-before
• block-closing-brace-newline-after
• block-closing-brace-newline-before
• block-closing-brace-space-after
• block-closing-brace-space-before
• color-hex-case
• declaration-bang-space-after
• declaration-bang-space-before
• declaration-block-semicolon-newline-after
• declaration-block-semicolon-newline-before
• declaration-block-semicolon-space-after
• declaration-block-semicolon-space-before
• declaration-block-trailing-semicolon
• declaration-colon-newline-after
• declaration-colon-space-after
• declaration-colon-space-before
• function-comma-newline-after
• function-comma-newline-before
• function-comma-space-after
• function-comma-space-before
• function-max-empty-lines
• function-whitespace-after
• indentation
• linebreaks
• max-empty-lines
• max-line-length
• media-feature-colon-space-after
• media-feature-colon-space-before
• media-feature-name-case
• media-feature-parentheses-space-inside
• media-feature-range-operator-space-after
• media-feature-range-operator-space-before
• media-query-list-comma-newline-after
• media-query-list-comma-newline-before
• media-query-list-comma-space-after
• media-query-list-comma-space-before
• no-empty-first-line
• no-eol-whitespace
• no-extra-semicolons
• no-missing-end-of-source-newline
• number-no-trailing-zeros
• property-case
• selector-attribute-brackets-space-inside
• selector-attribute-operator-space-after
• selector-attribute-operator-space-before
• selector-attribute-quotes
• selector-combinator-space-after
• selector-combinator-space-before
• selector-descendant-combinator-no-non-space
• selector-list-comma-newline-after
• selector-list-comma-newline-before
• selector-list-comma-space-after
• selector-list-comma-space-before
• selector-max-empty-lines
• selector-pseudo-class-parentheses-space-inside
• selector-pseudo-element-case
• selector-pseudo-class-case
• string-quotes
• unicode-bom
• unit-case
• value-list-comma-newline-after
• value-list-comma-newline-before
• value-list-comma-space-after
• value-list-comma-space-before
• value-list-max-empty-lines