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

v2.0.3 – Even fewer rules

2.0.3 (2023-08-17)

Bug fixes

Disables the following rules introduced in Stylelint 14 & related package updates, to make it simpler for projects to upgrade to Stylelint 14:

• declaration-block-no-redundant-longhand-properties
• selector-id-pattern
• shorthand-property-no-redundant-values

v2.0.2 – Fewer rules

2.0.2 (2023-08-17)

Bug fixes

Disables the following rules introduced in Stylelint 14 & related package updates, to make it simpler for projects to upgrade to Stylelint 14:

• keyframes-name-pattern: ^(a-za-z0-9*)(-a-z0-9+)*$, message: Expected keyframe name to be kebab-case
• alpha-value-notation: percentage, exceptProperties: opacity
• color-function-notation: modern
• custom-media-pattern: ^(a-za-z0-9*)(-a-z0-9+)*$, message: Expected custom media query name to be kebab-case
• custom-property-pattern: ^(a-za-z0-9*)(-a-z0-9+)*$, message: Expected custom property name to be kebab-case

v2.0.1 – Stylelint 14 and Sass

2.0.1 (2023-08-17)

Bug fixes

• Add explicit support for Sass/SCSS syntax

v2.0.0 – Stylelint 14

2.0.0 (2023-08-17)

Features

• Update stylelint to v14 for compatibility with PostCSS v8 (#13).
• Update all config dependencies to their latest releases, compatible with stylelint v14 (#13).
• Remove stylelint-a11y, which is no longer maintained and does not support stylelint v14. no-text-align-justify has been replaced with declaration-property-value-disallowed-list (#13).
• Stop enforcing function-calc-no-invalid, which has been removed from stylelint (#13)
• Change enforced rules from stylelint-config-standard and stylelint-config-prettier.

BREAKING CHANGES

The configuration now mandates stylelint v14, doesn’t use stylelint-a11y, and follows changes in enforced rules from stylelint-config-standard and stylelint-config-prettier.

No longer enforced (all formatting related):

• at-rule-name-space-after
• declaration-bang-space-after
• declaration-bang-space-before
• media-feature-colon-space-after
• media-feature-colon-space-before
• media-feature-parentheses-space-inside
• selector-attribute-brackets-space-inside
• selector-attribute-operator-space-after
• selector-attribute-operator-space-before
• selector-pseudo-class-parentheses-space-inside

No longer enforced (from stylelint-a11y):

• a11y/no-obsolete-attribute
• a11y/no-obsolete-element
• a11y/no-outline-none

Newly enforced rules:

• alpha-value-notation: percentage, exceptProperties: opacity
• color-function-notation: modern
• custom-media-pattern: ^(a-za-z0-9*)(-a-z0-9+)*$, message: Expected custom media query name to be kebab-case
• custom-property-pattern: ^(a-za-z0-9*)(-a-z0-9+)*$, message: Expected custom property name to be kebab-case
• declaration-block-no-redundant-longhand-properties
• font-family-name-quotes: always-where-recommended
• function-url-quotes: always
• hue-degree-notation: angle
• keyframes-name-pattern: ^(a-za-z0-9*)(-a-z0-9+)*$, message: Expected keyframe name to be kebab-case
• no-irregular-whitespace
• number-max-precision: 4
• rule-empty-line-before: always-multi-line, except: first-nested, ignore: after-comment
• selector-id-pattern: ^(a-za-z0-9*)(-a-z0-9+)*$, message: Expected id selector to be kebab-case
• shorthand-property-no-redundant-values
• custom-property-no-missing-var-function
• declaration-block-no-duplicate-custom-properties

v1.1.1

1.1.1 (2023-05-11)

Bug fixes

• Ignore system colors with declaration-strict-value, and unset keyword

v1.1.0

1.1.0 (2022-06-25)

Features

• Add new at-rule-no-unknown rules for tailwind (#21)

v1.0.0

1.0.0 (2020-11-10)

Features

• Update stylelint to v13 (#9)
• Update all config dependencies to their latest releases, compatible with stylelint v13 (#9)
• Enforce value-keyword-case from stylelint v13 (#9)
• Rename all deprecated stylelint rules to their newer alternatives.
• The config’s README documentation now links directly to rules’ documentation for plugins.

Upgrading to v1.0.0

Here are recommended steps:

# 1. Install the new versions.
npm install --save-dev stylelint@13 stylelint-config-torchbox@^1.0.0
# 2. Attempt to auto-fix any new issue picked up by Stylelint.
npm run lint:css -- --fix
npm run format
# 3. Check if there are remaining issues
npm run lint:css

If there are remaining issues, consider a gradual approach: whether you want to update the code, or disable the corresponding rules. This can be done either in the Stylelint configuration, or via stylelint-disable configuration comments. Get the rules reporting issues with: npm run lint:js -- --formatter tap | grep ruleId | cut -d ':' -f 2 | cut -c 2- | sort | uniq. For projects strapped for time, disabling all new rules listed above may be a reasonable tradeoff.

v0.5.0

0.5.0 (2019-10-10)

Features

• Stop enforcing a11y/content-property-no-static-value, which feels too restrictive for projects already following best practices.

Bug fixes

• Fix scale-unlimited/declaration-strict-value being applied twice to background-color declarations.

v0.4.0

0.4.0 (2019-10-08)

Features

• Enforce accessibility-related rules with stylelint-a11y (#2, #3).
• Enforce usage of variables for colors with stylelint-declaration-strict-value (#2, #4).
• Enforce "hyphenated BEM" nomenclature for class names with selector-class-pattern (#1, #5).
• Enforce "hyphenated lowercase" nomenclature for mixins with scss/at-mixin-pattern (#1, #5).

BREAKING CHANGES

• Most if not all of the rules changes in this release are breaking changes. Expect breakage on every minor release until the config reaches v1.0.0.