BREAKING CHANGE(stylelint-config): Upgrade to Stylelint 15 #DS-1245

lmc-eu · Jul 3, 2024 · fc78ba8 · fc78ba8
1 parent fc0e202
commit fc78ba8
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 35 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # Code Quality Tools
 
-> Built with ❤️ at [LMC][lmc-home]
+> Built with ❤️ at [Alma Career][alma-home]
 
 This monorepo contains shareable configurations for various coding-style/best practices/lint tools to make the configurations consistent across projects and provide easy setup mechanism.
 
@@ -12,14 +12,14 @@ This monorepo contains shareable configurations for various coding-style/best pr
 | Commitlint             | [@lmc-eu/commitlint-config](packages/commitlint-config)                                       | [![@lmc-eu/commitlint-config][clc-badge]][clc-npm]                        |
 | Conventional Changelog | [@lmc-eu/conventional-changelog-lmc-bitbucket](packages/conventional-changelog-lmc-bitbucket) | [![@lmc-eu/conventional-changelog-lmc-bitbucket][cc-bb-badge]][cc-bb-npm] |
 | Conventional Changelog | [@lmc-eu/conventional-changelog-lmc-github](packages/conventional-changelog-lmc-github)       | [![@lmc-eu/conventional-changelog-lmc-github][cc-gh-badge]][cc-gh-npm]    |
-| Prettier               | [@lmc-eu/prettier-config](packages/prettier-config)                                           | [![@lmc-eu/prettier-config][pc-badge]][pc-npm]                            |
-| Stylelint              | [@lmc-eu/stylelint-config](packages/stylelint-config)                                         | [![@lmc-eu/stylelint-config][slc-badge]][slc-npm]                         |
-| Renovate               | [@lmc-eu/renovate-config](packages/renovate-config)                                           | [![@lmc-eu/renovate-config][rc-badge]][rc-npm]                            |
 | ESLint                 | [@lmc-eu/eslint-config-base](packages/eslint-config-base)                                     | [![@lmc-eu/eslint-config-base][slc-badge]][ec-base-npm]                   |
 | ESLint                 | [@lmc-eu/eslint-config-graphql](packages/eslint-config-graphql)                               | [![@lmc-eu/eslint-config-graphql][ec-gql-badge]][ec-gql-npm]              |
 | ESLint                 | [@lmc-eu/eslint-config-react](packages/eslint-config-react)                                   | [![@lmc-eu/eslint-config-react][ec-react-badge]][ec-react-npm]            |
 | ESLint                 | [@lmc-eu/eslint-config-jest](packages/eslint-config-jest)                                     | [![@lmc-eu/eslint-config-jest][ec-jest-badge]][ec-jest-npm]               |
 | ESLint                 | [@lmc-eu/eslint-config-typescript](packages/eslint-config-typescript)                         | [![@lmc-eu/eslint-config-typescript][ec-ts-badge]][ec-ts-npm]             |
+| Prettier               | [@lmc-eu/prettier-config](packages/prettier-config)                                           | [![@lmc-eu/prettier-config][pc-badge]][pc-npm]                            |
+| Renovate               | [@lmc-eu/renovate-config](packages/renovate-config)                                           | [![@lmc-eu/renovate-config][rc-badge]][rc-npm]                            |
+| Stylelint              | [@lmc-eu/stylelint-config](packages/stylelint-config)                                         | [![@lmc-eu/stylelint-config][slc-badge]][slc-npm]                         |
 | Textlint               | [@lmc-eu/textlint-rule-preset-lmc](packages/textlint-rule-preset-lmc)                         | [![@lmc-eu/textlint-rule-preset-lmc][tlc-badge]][tlc-npm]                 |
 
 ## License
@@ -30,7 +30,7 @@ See the [LICENSE](LICENSE) file for information.
 
 We got a lot of inspiration from similar project at [STRV][strv-github]. Thank you very much ❤️!
 
-[lmc-home]: https://www.lmc.eu
+[alma-home]: https://www.almacareer.com
 [blc-npm]: https://npmjs.org/package/%40lmc-eu/browserslist-config
 [blc-badge]: https://img.shields.io/npm/v/%40lmc-eu/browserslist-config.svg?style=flat-square
 [cc-bb-npm]: https://npmjs.org/package/%40lmc-eu/conventional-changelog-lmc-bitbucket

diff --git a/packages/stylelint-config/package.json b/packages/stylelint-config/package.json
@@ -27,6 +27,6 @@
     "stylelint-order": "^6.0.0"
   },
   "peerDependencies": {
-    "stylelint": "^14.14.0"
+    "stylelint": "^15.11.0"
   }
 }
diff --git a/packages/stylelint-config/rules/extras.js b/packages/stylelint-config/rules/extras.js
@@ -1,20 +1,9 @@
 module.exports = {
   rules: {
-    // Reason: Avoid compound selectors' creation using nested ampersand SASS syntax.
-    // Main reasons why use this pattern:
-    // - Unification with design system components code style
-    // - Look up easily for the selector using fulltext search in IDEs
-    // - Better orientation in longer component's code when scrolled down
-    // - Makes `no-descending-specificity` stylelint rule work correctly
-    // - IDE's support clicking through from selector usage to its source
-    // Docs: https://stylelint.io/user-guide/rules/list/selector-nested-pattern/
-    'selector-nested-pattern': [
-      '(^&:)|(^&\\[)|(^&\\.(is\\-|has\\-))',
-      {
-        message:
-          'Only pseudo class selector, attribute selector and combination with state class is allowed (selector-nested-pattern)',
-      },
-    ],
+    // No default value
+    // Reason: Color-named values disabled - desired lint should check for design system token values only.
+    // Docs: https://stylelint.io/user-guide/rules/list/color-named
+    'color-named': 'never',
 
     // Reason: Except for utility classes and third-party overrides, !important can be avoided.
     // Docs: https://stylelint.io/user-guide/rules/list/declaration-no-important
@@ -35,21 +24,26 @@ module.exports = {
       },
     ],
 
+    // No default value
+    // Reason: Declaring font weights in other ways is unsafe.
+    // Docs: https://stylelint.io/user-guide/rules/list/font-weight-notation
+    'font-weight-notation': 'numeric',
+
     // Reason: Selector maximum class count should be just one but especially form parts/components
     // need more complex selectors to add styles when validation is applied.
     // Setting rule to "1" would be uneasy to pass in almost all projects so "2" is clearly just fine.
     // In case of inevitable more complex selector it is allowed and recommended to locally disable that rule.
     // Docs: https://stylelint.io/user-guide/rules/list/selector-max-class
     'selector-max-class': 2,
 
-    // Reason: IDs are handy for Javascript, not for CSS anymore.
-    // Docs: https://stylelint.io/user-guide/rules/list/selector-max-id
-    'selector-max-id': 0,
-
     // Reason: Keep selector specificity as low as possible by default.
     // Docs: https://stylelint.io/user-guide/rules/list/selector-max-compound-selectors
     'selector-max-compound-selectors': 3,
 
+    // Reason: IDs are handy for Javascript, not for CSS anymore.
+    // Docs: https://stylelint.io/user-guide/rules/list/selector-max-id
+    'selector-max-id': 0,
+
     // Reason: Keep selector specificity as low as possible by default.
     // Docs: https://stylelint.io/user-guide/rules/list/selector-max-specificity
     'selector-max-specificity': '0,4,0',
@@ -58,20 +52,26 @@ module.exports = {
     // Docs: https://stylelint.io/user-guide/rules/list/selector-max-universal
     'selector-max-universal': 0,
 
+    // Reason: Avoid compound selectors' creation using nested ampersand SASS syntax.
+    // Main reasons why use this pattern:
+    // - Unification with design system components code style
+    // - Look up easily for the selector using fulltext search in IDEs
+    // - Better orientation in longer component's code when scrolled down
+    // - Makes `no-descending-specificity` stylelint rule work correctly
+    // - IDE's support clicking through from selector usage to its source
+    // Docs: https://stylelint.io/user-guide/rules/list/selector-nested-pattern/
+    'selector-nested-pattern': [
+      '(^&:)|(^&\\[)|(^&\\.(is\\-|has\\-))',
+      {
+        message:
+          'Only pseudo class selector, attribute selector and combination with state class is allowed (selector-nested-pattern)',
+      },
+    ],
+
     // Reason: In most cases, it only needlessly increases selector specificity.
     // Docs: https://stylelint.io/user-guide/rules/list/selector-no-qualifying-type
     'selector-no-qualifying-type': true,
 
-    // No default value
-    // Reason: Declaring font weights in other ways is unsafe.
-    // Docs: https://stylelint.io/user-guide/rules/list/font-weight-notation
-    'font-weight-notation': 'numeric',
-
-    // No default value
-    // Reason: Color-named values disabled - desired lint should check for design system token values only.
-    // Docs: https://stylelint.io/user-guide/rules/list/color-named
-    'color-named': 'never',
-
     // Default value: 'always' with secondary options.
     // Reason: Turned off to support grouping variables using empty lines.
     // Docs: https://github.com/stylelint-scss/stylelint-scss/blob/master/src/rules/dollar-variable-empty-line-before/README.md