Skip to content

Commit bb58244

Browse files
authored
Upgrade to Stylelint 16 (#45)
1 parent b7a9f82 commit bb58244

File tree

8 files changed

+915
-731
lines changed

8 files changed

+915
-731
lines changed

CHANGELOG.md

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,89 @@ All notable changes to this project will be documented in this file.
44

55
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/) and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
66

7+
## [4.0.0](https://github.com/torchbox/stylelint-config-torchbox/compare/v3.1.0...v4.0.0) (2025-12-02)
8+
9+
### Features
10+
11+
- Update stylelint to v16.23.1 and up ([#41](https://github.com/torchbox/stylelint-config-torchbox/pull/41)).
12+
- Update all config dependencies to their latest releases, compatible with stylelint v16 ([#41](https://github.com/torchbox/stylelint-config-torchbox/pull/41)).
13+
- Change enforced rules from Stylelint and `stylelint-config-standard-scss` (see list below) ([#41](https://github.com/torchbox/stylelint-config-torchbox/pull/41)).
14+
15+
### BREAKING CHANGES
16+
17+
The configuration now mandates stylelint v16. 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 16.0.0](https://stylelint.io/migration-guide/to-16) documentation.
18+
19+
Newly enforced rules:
20+
21+
- [`at-rule-no-deprecated`](https://stylelint.io/user-guide/rules/at-rule-no-deprecated/)
22+
- Disallow deprecated at-rules.
23+
- Set to: `true`
24+
- [`block-no-redundant-nested-style-rules`](https://stylelint.io/user-guide/rules/block-no-redundant-nested-style-rules/)
25+
- Disallow redundant nested style rules within blocks.
26+
- Set to: `true`
27+
- [`color-function-alias-notation`](https://stylelint.io/user-guide/rules/color-function-alias-notation/)
28+
- Specify alias notation for color-functions.
29+
- Set to: `without-alpha`
30+
- [`container-name-pattern`](https://stylelint.io/user-guide/rules/container-name-pattern/)
31+
- Specify a pattern for container names.
32+
- Set to: `^(--)?(a-za-z0-9*)(-a-z0-9+)*$, `
33+
- [`declaration-property-value-keyword-no-deprecated`](https://stylelint.io/user-guide/rules/declaration-property-value-keyword-no-deprecated/)
34+
- Disallow deprecated keywords for properties within declarations.
35+
- Set to: `true`
36+
- [`layer-name-pattern`](https://stylelint.io/user-guide/rules/layer-name-pattern/)
37+
- Specify a pattern for layer names.
38+
- Set to: `^(a-za-z0-9*)(.-a-z0-9+)*$, `
39+
- [`lightness-notation`](https://stylelint.io/user-guide/rules/lightness-notation/)
40+
- Specify number or percentage notation for lightness.
41+
- Set to: `percentage`
42+
- [`media-type-no-deprecated`](https://stylelint.io/user-guide/rules/media-type-no-deprecated/)
43+
- Disallow deprecated media types.
44+
- Set to: `true`
45+
- [`nesting-selector-no-missing-scoping-root`](https://stylelint.io/user-guide/rules/nesting-selector-no-missing-scoping-root/)
46+
- Disallow missing scoping root for nesting selectors.
47+
- Set to: `true, ignoreAtRules: mixin`
48+
- [`no-invalid-position-declaration`](https://stylelint.io/user-guide/rules/no-invalid-position-declaration/)
49+
- Disallow invalid position declarations.
50+
- Set to: `true`
51+
- [`property-no-deprecated`](https://stylelint.io/user-guide/rules/property-no-deprecated/)
52+
- Disallow deprecated properties.
53+
- Set to: `true`
54+
- [`scss/load-no-partial-leading-underscore`](https://github.com/stylelint-scss/stylelint-scss/blob/master/src/rules/load-no-partial-leading-underscore/README.md)
55+
- Replaces `scss/at-import-no-partial-leading-underscore`.
56+
- Disallow leading underscore in partial names in `@import`, `@use`, `@forward`, and [`meta.load-css`](https://sass-lang.com/documentation/modules/meta/#load-css) `$url` parameter.
57+
- Set to: `true`
58+
- [`scss/load-partial-extension`](https://github.com/stylelint-scss/stylelint-scss/blob/master/src/rules/load-partial-extension/README.md)
59+
- Replaces `scss/at-import-partial-extension`.
60+
- Require or disallow extension in `@import`, `@use`, `@forward`, and [`meta.load-css`](https://sass-lang.com/documentation/modules/meta/#load-css) commands.
61+
- Set to: `never`
62+
- [`syntax-string-no-invalid`](https://stylelint.io/user-guide/rules/syntax-string-no-invalid/)
63+
- Disallow invalid `syntax` strings.
64+
- Set to: `true`
65+
66+
Rules with new configuration:
67+
68+
- [`scss/dollar-variable-colon-space-after`](https://github.com/stylelint-scss/stylelint-scss/blob/master/src/rules/dollar-variable-colon-space-after/README.md)
69+
- Require or disallow whitespace after the colon in `$`-variable declarations.
70+
- Was set to: `always`
71+
- Now set to: `always-single-line`
72+
- [`length-zero-no-unit`](https://stylelint.io/user-guide/rules/length-zero-no-unit/)
73+
- Was set to: `true, ignore: custom-properties`
74+
- Now set to: `true, ignore: custom-properties, ignorePreludeOfAtRules: function, mixin`
75+
76+
New rules which have been explicitly disabled:
77+
78+
- [`at-rule-descriptor-no-unknown`](https://stylelint.io/user-guide/rules/at-rule-descriptor-no-unknown/)
79+
- [`at-rule-descriptor-value-no-unknown`](https://stylelint.io/user-guide/rules/at-rule-descriptor-value-no-unknown/)
80+
- [`at-rule-prelude-no-invalid`](https://stylelint.io/user-guide/rules/at-rule-prelude-no-invalid/)
81+
- [`declaration-property-value-no-unknown`](https://stylelint.io/user-guide/rules/declaration-property-value-no-unknown/)
82+
- [`media-feature-name-value-no-unknown`](https://stylelint.io/user-guide/rules/media-feature-name-value-no-unknown/)
83+
- [`media-query-no-invalid`](https://stylelint.io/user-guide/rules/media-query-no-invalid/)
84+
85+
Renamed rules which are disabled:
86+
87+
- [`scss/at-import-partial-extension-disallowed-list`](https://github.com/stylelint-scss/stylelint-scss/blob/master/src/rules/at-import-partial-extension-disallowed-list/README.md)
88+
- [`scss/at-import-partial-extension-allowed-list`](https://github.com/stylelint-scss/stylelint-scss/blob/master/src/rules/at-import-partial-extension-allowed-list/README.md)
89+
790
## [3.1.0](https://github.com/torchbox/stylelint-config-torchbox/compare/v3.0.0...v3.1.0) (2025-12-02)
891

992
### Features

README.md

Lines changed: 29 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,11 @@ Install stylelint, and the config:
1010
npm install --save-dev stylelint stylelint-config-torchbox
1111
```
1212

13-
Then [configure stylelint to use this config](https://stylelint.io/user-guide/configuration/#extends). As a `stylelint.config.js` in the root of your project:
13+
Then [configure stylelint to use this config](https://stylelint.io/user-guide/configuration/#extends). As a `stylelint.config.js` or `stylelint.config.mjs` in the root of your project:
1414

1515
```js
16-
module.exports = {
16+
/** @type {import('stylelint').Config} */
17+
export default {
1718
// See https://github.com/torchbox/stylelint-config-torchbox for rules.
1819
extends: 'stylelint-config-torchbox',
1920
};
@@ -34,7 +35,8 @@ const legacyRules = {
3435
'selector-max-specificity': null,
3536
};
3637

37-
module.exports = {
38+
/** @type {import('stylelint').Config} */
39+
export default {
3840
// See https://github.com/torchbox/stylelint-config-torchbox for rules.
3941
extends: 'stylelint-config-torchbox',
4042
rules: {
@@ -48,11 +50,12 @@ module.exports = {
4850
We recommend the following `run` script to add to your `package.json`:
4951

5052
```json
51-
"lint:css": "stylelint --report-needless-disables 'src/sass' 'src/vue'"
53+
"lint:css": "stylelint --report-needless-disables --report-unscoped-disables 'src/sass' 'src/vue'"
5254
```
5355

54-
- Use [`--report-needless-disables`](https://stylelint.io/user-guide/node-api/#reportneedlessdisables) flag to ensure you do not use more `stylelint-disable` comments than needed.
55-
- Target specific folders so Stylelint doesn’t attempt to lint e.g. JS or HTML files.
56+
- Use [`--report-needless-disables`](https://stylelint.io/user-guide/cli#--report-needless-disables---rd) to ensure you do not use more `stylelint-disable` comments than needed.
57+
- Use [`--report-unscoped-disables`](https://stylelint.io/user-guide/cli#--report-unscoped-disables---rud) to prevent fully disabling linting.
58+
- Target specific folders so Stylelint doesn’t attempt to lint other file types, say JS or HTML files.
5659

5760
#### `.stylelintignore`
5861

@@ -75,20 +78,20 @@ default_language_version:
7578
node: system
7679
repos:
7780
- repo: https://github.com/thibaudcolas/pre-commit-stylelint
78-
rev: v15.10.3
81+
rev: v16.26.1
7982
hooks:
8083
- id: stylelint
8184
files: \.(scss|vue)$
8285
additional_dependencies:
83-
- stylelint@15.10.3
84-
- stylelint-config-torchbox@3.0.0
86+
- stylelint@16.26.1
87+
- stylelint-config-torchbox@4.0.0
8588
```
8689
8790
### Vue
8891
8992
Stylelint supports Vue, and our configuration is usable in `.vue` single-file components with no changes. Do make sure linting is configured to check `.vue` files:
9093

91-
- Wherever `stylelint` is manually invoked, make sure to point it both at stylesheets, and Vue components: `stylelint --report-needless-disables './src/sass' './src/vue_components'`.
94+
- Wherever `stylelint` is manually invoked, make sure to point it both at stylesheets, and Vue components: `stylelint --report-needless-disables --report-unscoped-disables './src/sass' './src/vue_components'`.
9295
- With [`stylelint-webpack-plugin`](https://webpack.js.org/plugins/stylelint-webpack-plugin/), use `extensions: ['scss', 'vue'],`.
9396
- With [`pre-commit`](https://github.com/awebdeveloper/pre-commit-stylelint), use `files: \.(scss|vue)$`.
9497

@@ -141,16 +144,21 @@ To get the most out of this config, it is assumed that projects have the followi
141144

142145
## Inherited rules
143146

147+
- [`at-rule-no-deprecated`](https://stylelint.io/user-guide/rules/at-rule-no-deprecated/)
144148
- [`block-no-empty`](https://stylelint.io/user-guide/rules/block-no-empty/)
149+
- [`block-no-redundant-nested-style-rules`](https://stylelint.io/user-guide/rules/block-no-redundant-nested-style-rules/)
150+
- [`color-function-alias-notation`](https://stylelint.io/user-guide/rules/color-function-alias-notation/): `without-alpha`
145151
- [`color-hex-length`](https://stylelint.io/user-guide/rules/color-hex-length/): `short`
146152
- [`color-no-invalid-hex`](https://stylelint.io/user-guide/rules/color-no-invalid-hex/)
147153
- [`comment-empty-line-before`](https://stylelint.io/user-guide/rules/comment-empty-line-before/): `always, except: first-nested, ignore: stylelint-commands`
148154
- [`comment-whitespace-inside`](https://stylelint.io/user-guide/rules/comment-whitespace-inside/): `always`
155+
- [`container-name-pattern`](https://stylelint.io/user-guide/rules/container-name-pattern/): `^(--)?(a-za-z0-9*)(-a-z0-9+)*$, `
149156
- [`custom-property-empty-line-before`](https://stylelint.io/user-guide/rules/custom-property-empty-line-before/): `always, except: after-custom-property, first-nested, ignore: after-comment, inside-single-line-block`
150157
- [`custom-property-no-missing-var-function`](https://stylelint.io/user-guide/rules/custom-property-no-missing-var-function/)
151158
- [`declaration-block-no-duplicate-custom-properties`](https://stylelint.io/user-guide/rules/declaration-block-no-duplicate-custom-properties/)
152159
- [`declaration-block-no-duplicate-properties`](https://stylelint.io/user-guide/rules/declaration-block-no-duplicate-properties/): `true, ignore: consecutive-duplicates-with-different-syntaxes`
153160
- [`declaration-block-single-line-max-declarations`](https://stylelint.io/user-guide/rules/declaration-block-single-line-max-declarations/): `1`
161+
- [`declaration-property-value-keyword-no-deprecated`](https://stylelint.io/user-guide/rules/declaration-property-value-keyword-no-deprecated/)
154162
- [`font-family-name-quotes`](https://stylelint.io/user-guide/rules/font-family-name-quotes/): `always-where-recommended`
155163
- [`font-family-no-duplicate-names`](https://stylelint.io/user-guide/rules/font-family-no-duplicate-names/)
156164
- [`font-family-no-missing-generic-family-keyword`](https://stylelint.io/user-guide/rules/font-family-no-missing-generic-family-keyword/)
@@ -163,16 +171,22 @@ To get the most out of this config, it is assumed that projects have the followi
163171
- [`keyframe-block-no-duplicate-selectors`](https://stylelint.io/user-guide/rules/keyframe-block-no-duplicate-selectors/)
164172
- [`keyframe-declaration-no-important`](https://stylelint.io/user-guide/rules/keyframe-declaration-no-important/)
165173
- [`keyframe-selector-notation`](https://stylelint.io/user-guide/rules/keyframe-selector-notation/): `percentage-unless-within-keyword-only-block`
166-
- [`length-zero-no-unit`](https://stylelint.io/user-guide/rules/length-zero-no-unit/): `true, ignore: custom-properties`
174+
- [`layer-name-pattern`](https://stylelint.io/user-guide/rules/layer-name-pattern/): `^(a-za-z0-9*)(.-a-z0-9+)*$, `
175+
- [`length-zero-no-unit`](https://stylelint.io/user-guide/rules/length-zero-no-unit/): `true, ignore: custom-properties, ignorePreludeOfAtRules: function, mixin`
176+
- [`lightness-notation`](https://stylelint.io/user-guide/rules/lightness-notation/): `percentage`
167177
- [`media-feature-name-no-unknown`](https://stylelint.io/user-guide/rules/media-feature-name-no-unknown/)
178+
- [`media-type-no-deprecated`](https://stylelint.io/user-guide/rules/media-type-no-deprecated/)
168179
- [`named-grid-areas-no-invalid`](https://stylelint.io/user-guide/rules/named-grid-areas-no-invalid/)
180+
- [`nesting-selector-no-missing-scoping-root`](https://stylelint.io/user-guide/rules/nesting-selector-no-missing-scoping-root/): `true, ignoreAtRules: mixin`
169181
- [`no-duplicate-at-import-rules`](https://stylelint.io/user-guide/rules/no-duplicate-at-import-rules/)
170182
- [`no-duplicate-selectors`](https://stylelint.io/user-guide/rules/no-duplicate-selectors/)
171183
- [`no-empty-source`](https://stylelint.io/user-guide/rules/no-empty-source/)
172184
- [`no-invalid-double-slash-comments`](https://stylelint.io/user-guide/rules/no-invalid-double-slash-comments/)
173185
- [`no-invalid-position-at-import-rule`](https://stylelint.io/user-guide/rules/no-invalid-position-at-import-rule/): `true, ignoreAtRules: use, forward`
186+
- [`no-invalid-position-declaration`](https://stylelint.io/user-guide/rules/no-invalid-position-declaration/)
174187
- [`no-irregular-whitespace`](https://stylelint.io/user-guide/rules/no-irregular-whitespace/)
175188
- [`number-max-precision`](https://stylelint.io/user-guide/rules/number-max-precision/): `4`
189+
- [`property-no-deprecated`](https://stylelint.io/user-guide/rules/property-no-deprecated/)
176190
- [`property-no-unknown`](https://stylelint.io/user-guide/rules/property-no-unknown/)
177191
- [`rule-empty-line-before`](https://stylelint.io/user-guide/rules/rule-empty-line-before/): `always-multi-line, except: first-nested, ignore: after-comment`
178192
- [`scss/at-else-closing-brace-newline-after`](https://github.com/stylelint-scss/stylelint-scss/blob/master/src/rules/at-else-closing-brace-newline-after/README.md): `always-last-in-chain`
@@ -183,17 +197,17 @@ To get the most out of this config, it is assumed that projects have the followi
183197
- [`scss/at-if-closing-brace-newline-after`](https://github.com/stylelint-scss/stylelint-scss/blob/master/src/rules/at-if-closing-brace-newline-after/README.md): `always-last-in-chain`
184198
- [`scss/at-if-closing-brace-space-after`](https://github.com/stylelint-scss/stylelint-scss/blob/master/src/rules/at-if-closing-brace-space-after/README.md): `always-intermediate`
185199
- [`scss/at-if-no-null`](https://github.com/stylelint-scss/stylelint-scss/blob/master/src/rules/at-if-no-null/README.md)
186-
- [`scss/at-import-no-partial-leading-underscore`](https://github.com/stylelint-scss/stylelint-scss/blob/master/src/rules/at-import-no-partial-leading-underscore/README.md)
187-
- [`scss/at-import-partial-extension`](https://github.com/stylelint-scss/stylelint-scss/blob/master/src/rules/at-import-partial-extension/README.md): `never`
188200
- [`scss/at-mixin-parentheses-space-before`](https://github.com/stylelint-scss/stylelint-scss/blob/master/src/rules/at-mixin-parentheses-space-before/README.md): `never`
189201
- [`scss/at-rule-conditional-no-parentheses`](https://github.com/stylelint-scss/stylelint-scss/blob/master/src/rules/at-rule-conditional-no-parentheses/README.md)
190202
- [`scss/comment-no-empty`](https://github.com/stylelint-scss/stylelint-scss/blob/master/src/rules/comment-no-empty/README.md)
191203
- [`scss/declaration-nested-properties-no-divided-groups`](https://github.com/stylelint-scss/stylelint-scss/blob/master/src/rules/declaration-nested-properties-no-divided-groups/README.md)
192-
- [`scss/dollar-variable-colon-space-after`](https://github.com/stylelint-scss/stylelint-scss/blob/master/src/rules/dollar-variable-colon-space-after/README.md): `always`
204+
- [`scss/dollar-variable-colon-space-after`](https://github.com/stylelint-scss/stylelint-scss/blob/master/src/rules/dollar-variable-colon-space-after/README.md): `always-single-line`
193205
- [`scss/dollar-variable-colon-space-before`](https://github.com/stylelint-scss/stylelint-scss/blob/master/src/rules/dollar-variable-colon-space-before/README.md): `never`
194206
- [`scss/double-slash-comment-whitespace-inside`](https://github.com/stylelint-scss/stylelint-scss/blob/master/src/rules/double-slash-comment-whitespace-inside/README.md): `always`
195207
- [`scss/function-quote-no-quoted-strings-inside`](https://github.com/stylelint-scss/stylelint-scss/blob/master/src/rules/function-quote-no-quoted-strings-inside/README.md)
196208
- [`scss/function-unquote-no-unquoted-strings-inside`](https://github.com/stylelint-scss/stylelint-scss/blob/master/src/rules/function-unquote-no-unquoted-strings-inside/README.md)
209+
- [`scss/load-no-partial-leading-underscore`](https://github.com/stylelint-scss/stylelint-scss/blob/master/src/rules/load-no-partial-leading-underscore/README.md)
210+
- [`scss/load-partial-extension`](https://github.com/stylelint-scss/stylelint-scss/blob/master/src/rules/load-partial-extension/README.md): `never`
197211
- [`scss/no-duplicate-mixins`](https://github.com/stylelint-scss/stylelint-scss/blob/master/src/rules/no-duplicate-mixins/README.md)
198212
- [`scss/operator-no-newline-after`](https://github.com/stylelint-scss/stylelint-scss/blob/master/src/rules/operator-no-newline-after/README.md)
199213
- [`scss/operator-no-newline-before`](https://github.com/stylelint-scss/stylelint-scss/blob/master/src/rules/operator-no-newline-before/README.md)
@@ -206,6 +220,7 @@ To get the most out of this config, it is assumed that projects have the followi
206220
- [`selector-type-case`](https://stylelint.io/user-guide/rules/selector-type-case/): `lower`
207221
- [`selector-type-no-unknown`](https://stylelint.io/user-guide/rules/selector-type-no-unknown/): `true, ignore: custom-elements`
208222
- [`string-no-newline`](https://stylelint.io/user-guide/rules/string-no-newline/)
223+
- [`syntax-string-no-invalid`](https://stylelint.io/user-guide/rules/syntax-string-no-invalid/)
209224
- [`unit-no-unknown`](https://stylelint.io/user-guide/rules/unit-no-unknown/)
210225
- [`value-keyword-case`](https://stylelint.io/user-guide/rules/value-keyword-case/): `lower`
211226

0 commit comments

Comments
 (0)