Update stylelint & stylelint-config-wagtail packages

- Ensure that some rules are always ignored in overrides (aka vendor) styles. This avoids us having to add ignore comments all over these styles.
- Resolves #10719

.stylelintrc.js

@@ -28,6 +28,13 @@ module.exports = {
       // 'float': ['inline-start', 'inline-end', 'none', 'unset'],
       'text-align': ['start', 'end', 'center'],
     },
+    // Refined ordering to align with media mixin usage - see https://github.com/wagtail/stylelint-config-wagtail/issues/37
+    'order/order': [
+      'dollar-variables',
+      'custom-properties',
+      { type: 'at-rule', hasBlock: false }, // @-rules that have no nesting.
+      'declarations',
+    ],
     // Some parts of declaration-strict-value commented out until we are in a position to enforce them.
     'scale-unlimited/declaration-strict-value': [
       [
@@ -79,5 +86,13 @@ module.exports = {
         ],
       },
     ],
+    // Ignore rule until all existing selectors can be updated.
+    'scss/selector-no-union-class-name': null,
+    // Ignore rule until all existing classes can be updated to use BEM.
+    'selector-class-pattern': null,
+    // Allow more specificity until styles can be updated to match the more strict rules.
+    'selector-max-specificity': '0,6,3',
+    // Ignore rule until we confirmed we prefer shorthand properties for positioning.
+    'declaration-block-no-redundant-longhand-properties': null,
   },
 };

CHANGELOG.txt

@@ -76,6 +76,7 @@ Changelog
  * Maintenance: Support for the Stimulus `CloneController` to auto clear the added content after a set duration (LB (Ben) Johnston)
  * Maintenance: Refactor images listing view to use generic IndexView (Sage Abdullah)
  * Maintenance: Refactor form pages listing view to use generic IndexView (Sage Abdullah)
+ * Maintenance: Update Stylelint, our linting configuration, Sass, and related code changes (LB (Ben) Johnston)
 
 
 5.2.2 (06.12.2023)

client/scss/overrides/_vendor.datetimepicker.scss

@@ -1,3 +1,4 @@
+// stylelint-disable selector-max-combinators, max-nesting-depth
 @use 'sass:map';
 
 .xdsoft_datetimepicker {

client/scss/overrides/_vendor.tippy.scss

@@ -1,3 +1,4 @@
+// stylelint-disable selector-attribute-name-disallowed-list
 @import '../../../node_modules/tippy.js/dist/tippy';
 
 .tippy-box {

docs/releases/6.0.md

@@ -98,6 +98,7 @@ This release adds support for Django 5.0. The support has also been backported t
  * Support for the Stimulus `CloneController` to auto clear the added content after a set duration (LB (Ben) Johnston)
  * Refactor images listing view to use generic IndexView (Sage Abdullah)
  * Refactor form pages listing view to use generic IndexView (Sage Abdullah)
+ * Update Stylelint, our linting configuration, Sass, and related code changes (LB (Ben) Johnston)
 
 ## Upgrade considerations - removal of deprecated features from Wagtail 4.2 - 5.1
 

package-lock.json

@@ -51,7 +51,7 @@
         "@typescript-eslint/eslint-plugin": "^6.2.1",
         "@typescript-eslint/parser": "^6.2.1",
         "@wagtail/eslint-config-wagtail": "^0.4.0",
-        "@wagtail/stylelint-config-wagtail": "^0.5.0",
+        "@wagtail/stylelint-config-wagtail": "^0.7.0",
         "autoprefixer": "^10.4.2",
         "babel-loader": "^8.2.3",
         "copy-webpack-plugin": "^10.2.0",
@@ -72,11 +72,11 @@
         "prettier": "^3.0.0",
         "react-test-renderer": "^16.14.0",
         "redux-mock-store": "^1.3.0",
-        "sass": "^1.45.1",
+        "sass": "^1.69.5",
         "sass-loader": "^12.4.0",
         "storybook": "^7.5.3",
         "storybook-django": "^0.5.1",
-        "stylelint": "^15.10.0",
+        "stylelint": "^15.11.0",
         "tailwindcss": "^3.1.5",
         "tailwindcss-vanilla-rtl": "^0.2.0",
         "ts-jest": "^29.1.0",
@@ -6960,39 +6960,18 @@
       }
     },
     "node_modules/@wagtail/stylelint-config-wagtail": {
-      "version": "0.5.0",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "stylelint-config-prettier-scss": "^0.0.1",
-        "stylelint-config-recommended-scss": "^5.0.2",
-        "stylelint-declaration-strict-value": "^1.8.0"
-      },
-      "peerDependencies": {
-        "stylelint": ">=14.1.0"
-      }
-    },
-    "node_modules/@wagtail/stylelint-config-wagtail/node_modules/stylelint-config-recommended-scss": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/stylelint-config-recommended-scss/-/stylelint-config-recommended-scss-5.0.2.tgz",
-      "integrity": "sha512-b14BSZjcwW0hqbzm9b0S/ScN2+3CO3O4vcMNOw2KGf8lfVSwJ4p5TbNEXKwKl1+0FMtgRXZj6DqVUe/7nGnuBg==",
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/@wagtail/stylelint-config-wagtail/-/stylelint-config-wagtail-0.7.0.tgz",
+      "integrity": "sha512-zDLIIYa8KOpoTzpcuiBgoCp1gPuSld8gadhsyxb2d+oxcJzFGfQWamc1osPmUVKIGancjtN+pktZ2WpYCQE9FQ==",
       "dev": true,
       "dependencies": {
-        "postcss-scss": "^4.0.2",
-        "stylelint-config-recommended": "^6.0.0",
-        "stylelint-scss": "^4.0.0"
+        "stylelint-config-prettier-scss": "^1.0.0",
+        "stylelint-config-recommended-scss": "^12.0.0",
+        "stylelint-declaration-strict-value": "^1.9.2",
+        "stylelint-order": "^6.0.3"
       },
       "peerDependencies": {
-        "stylelint": "^14.0.0"
-      }
-    },
-    "node_modules/@wagtail/stylelint-config-wagtail/node_modules/stylelint-config-recommended-scss/node_modules/stylelint-config-recommended": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-6.0.0.tgz",
-      "integrity": "sha512-ZorSSdyMcxWpROYUvLEMm0vSZud2uB7tX1hzBZwvVY9SV/uly4AvvJPPhCcymZL3fcQhEQG5AELmrxWqtmzacw==",
-      "dev": true,
-      "peerDependencies": {
-        "stylelint": "^14.0.0"
+        "stylelint": ">=15.10.1"
       }
     },
     "node_modules/@webassemblyjs/ast": {
@@ -9319,12 +9298,12 @@
       }
     },
     "node_modules/css-functions-list": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/css-functions-list/-/css-functions-list-3.2.0.tgz",
-      "integrity": "sha512-d/jBMPyYybkkLVypgtGv12R+pIFw4/f/IHtCTxWpZc8ofTYOPigIgmA6vu5rMHartZC+WuXhBUHfnyNUIQSYrg==",
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/css-functions-list/-/css-functions-list-3.2.1.tgz",
+      "integrity": "sha512-Nj5YcaGgBtuUmn1D7oHqPW0c9iui7xsTsj5lIX8ZgevdfhmjFfKB3r8moHJtNJnctnYXJyYX5I1pp90HM4TPgQ==",
       "dev": true,
       "engines": {
-        "node": ">=12.22"
+        "node": ">=12 || >=16"
       }
     },
     "node_modules/css-loader": {
@@ -11878,21 +11857,24 @@
       }
     },
     "node_modules/flat-cache": {
-      "version": "3.0.4",
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.1.1.tgz",
+      "integrity": "sha512-/qM2b3LUIaIgviBQovTLvijfyOQXPtSRnRK26ksj2J7rzPIecePUIpJsZ4T02Qg+xiAEKIs5K8dsHEd+VaKa/Q==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
-        "flatted": "^3.1.0",
+        "flatted": "^3.2.9",
+        "keyv": "^4.5.3",
         "rimraf": "^3.0.2"
       },
       "engines": {
-        "node": "^10.12.0 || >=12.0.0"
+        "node": ">=12.0.0"
       }
     },
     "node_modules/flatted": {
-      "version": "3.2.5",
-      "dev": true,
-      "license": "ISC"
+      "version": "3.2.9",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.9.tgz",
+      "integrity": "sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==",
+      "dev": true
     },
     "node_modules/flow-parser": {
       "version": "0.222.0",
@@ -15402,6 +15384,12 @@
         "node": ">=4"
       }
     },
+    "node_modules/json-buffer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
+      "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
+      "dev": true
+    },
     "node_modules/json-parse-even-better-errors": {
       "version": "2.3.1",
       "dev": true,
@@ -15454,6 +15442,15 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/keyv": {
+      "version": "4.5.4",
+      "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
+      "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
+      "dev": true,
+      "dependencies": {
+        "json-buffer": "3.0.1"
+      }
+    },
     "node_modules/kind-of": {
       "version": "6.0.3",
       "dev": true,
@@ -15479,9 +15476,9 @@
       }
     },
     "node_modules/known-css-properties": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.28.0.tgz",
-      "integrity": "sha512-9pSL5XB4J+ifHP0e0jmmC98OGC1nL8/JjS+fi6mnTlIf//yt/MfVLtKg7S6nCtj/8KTcWX7nRlY0XywoYY1ISQ==",
+      "version": "0.29.0",
+      "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.29.0.tgz",
+      "integrity": "sha512-Ne7wqW7/9Cz54PDt4I3tcV+hAyat8ypyOGzYRJQfdxnnjeWsTxt1cy8pjvvKeI5kfXuyvULyeeAvwvvtAX3ayQ==",
       "dev": true
     },
     "node_modules/language-subtag-registry": {
@@ -17256,8 +17253,9 @@
     },
     "node_modules/postcss-media-query-parser": {
       "version": "0.2.3",
-      "dev": true,
-      "license": "MIT"
+      "resolved": "https://registry.npmjs.org/postcss-media-query-parser/-/postcss-media-query-parser-0.2.3.tgz",
+      "integrity": "sha512-3sOlxmbKcSHMjlUXQZKQ06jOswE7oVkXPxmZdoB1r5l0q6gTFTQSHxNxOrCccElbW7dxNytifNEo8qidX2Vsig==",
+      "dev": true
     },
     "node_modules/postcss-merge-longhand": {
       "version": "5.0.5",
@@ -17615,9 +17613,9 @@
       }
     },
     "node_modules/postcss-scss": {
-      "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/postcss-scss/-/postcss-scss-4.0.8.tgz",
-      "integrity": "sha512-Cr0X8Eu7xMhE96PJck6ses/uVVXDtE5ghUTKNUYgm8ozgP2TkgV3LWs3WgLV1xaSSLq8ZFiXaUrj0LVgG1fGEA==",
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/postcss-scss/-/postcss-scss-4.0.9.tgz",
+      "integrity": "sha512-AjKOeiwAitL/MXxQW2DliT28EKukvvbEWx3LBmJIRN8KfBGZbRTxNYW0kSqi1COiTZ57nZ9NW06S6ux//N1c9A==",
       "dev": true,
       "funding": [
         {
@@ -17653,6 +17651,15 @@
         "node": ">=4"
       }
     },
+    "node_modules/postcss-sorting": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-sorting/-/postcss-sorting-8.0.2.tgz",
+      "integrity": "sha512-M9dkSrmU00t/jK7rF6BZSZauA5MAaBW4i5EnJXspMwt4iqTh/L9j6fgMnbElEOfyRyfLfVbIHj/R52zHzAPe1Q==",
+      "dev": true,
+      "peerDependencies": {
+        "postcss": "^8.4.20"
+      }
+    },
     "node_modules/postcss-svgo": {
       "version": "5.0.3",
       "dev": true,
@@ -18946,9 +18953,10 @@
       "license": "MIT"
     },
     "node_modules/sass": {
-      "version": "1.49.0",
+      "version": "1.69.5",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.69.5.tgz",
+      "integrity": "sha512-qg2+UCJibLr2LCVOt3OlPhr/dqVHWOa9XtZf2OjbLs/T4VPSJ00udtgJxH3neXZm+QqX8B+3cU7RaLqp1iVfcQ==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "chokidar": ">=3.0.0 <4.0.0",
         "immutable": "^4.0.0",
@@ -18958,7 +18966,7 @@
         "sass": "sass.js"
       },
       "engines": {
-        "node": ">=8.9.0"
+        "node": ">=14.0.0"
       }
     },
     "node_modules/sass-loader": {
@@ -19684,9 +19692,9 @@
       }
     },
     "node_modules/stylelint": {
-      "version": "15.10.3",
-      "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-15.10.3.tgz",
-      "integrity": "sha512-aBQMMxYvFzJJwkmg+BUUg3YfPyeuCuKo2f+LOw7yYbU8AZMblibwzp9OV4srHVeQldxvSFdz0/Xu8blq2AesiA==",
+      "version": "15.11.0",
+      "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-15.11.0.tgz",
+      "integrity": "sha512-78O4c6IswZ9TzpcIiQJIN49K3qNoXTM8zEJzhaTE/xRTCZswaovSEVIa/uwbOltZrk16X4jAxjaOhzz/hTm1Kw==",
       "dev": true,
       "dependencies": {
         "@csstools/css-parser-algorithms": "^2.3.1",
@@ -19696,12 +19704,12 @@
         "balanced-match": "^2.0.0",
         "colord": "^2.9.3",
         "cosmiconfig": "^8.2.0",
-        "css-functions-list": "^3.2.0",
+        "css-functions-list": "^3.2.1",
         "css-tree": "^2.3.1",
         "debug": "^4.3.4",
         "fast-glob": "^3.3.1",
         "fastest-levenshtein": "^1.0.16",
-        "file-entry-cache": "^6.0.1",
+        "file-entry-cache": "^7.0.0",
         "global-modules": "^2.0.0",
         "globby": "^11.1.0",
         "globjoin": "^0.1.4",
@@ -19710,13 +19718,13 @@
         "import-lazy": "^4.0.0",
         "imurmurhash": "^0.1.4",
         "is-plain-object": "^5.0.0",
-        "known-css-properties": "^0.28.0",
+        "known-css-properties": "^0.29.0",
         "mathml-tag-names": "^2.1.3",
         "meow": "^10.1.5",
         "micromatch": "^4.0.5",
         "normalize-path": "^3.0.0",
         "picocolors": "^1.0.0",
-        "postcss": "^8.4.27",
+        "postcss": "^8.4.28",
         "postcss-resolve-nested-selector": "^0.1.1",
         "postcss-safe-parser": "^6.0.0",
         "postcss-selector-parser": "^6.0.13",
@@ -19741,37 +19749,49 @@
         "url": "https://opencollective.com/stylelint"
       }
     },
-    "node_modules/stylelint-config-prettier": {
-      "version": "9.0.3",
+    "node_modules/stylelint-config-prettier-scss": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/stylelint-config-prettier-scss/-/stylelint-config-prettier-scss-1.0.0.tgz",
+      "integrity": "sha512-Gr2qLiyvJGKeDk0E/+awNTrZB/UtNVPLqCDOr07na/sLekZwm26Br6yYIeBYz3ulsEcQgs5j+2IIMXCC+wsaQA==",
       "dev": true,
-      "license": "MIT",
       "bin": {
-        "stylelint-config-prettier": "bin/check.js",
-        "stylelint-config-prettier-check": "bin/check.js"
+        "stylelint-config-prettier-scss": "bin/check.js",
+        "stylelint-config-prettier-scss-check": "bin/check.js"
       },
       "engines": {
-        "node": ">= 12"
+        "node": "14.* || 16.* || >= 18"
       },
       "peerDependencies": {
-        "stylelint": ">=11.0.0"
+        "stylelint": ">=15.0.0"
       }
     },
-    "node_modules/stylelint-config-prettier-scss": {
-      "version": "0.0.1",
+    "node_modules/stylelint-config-recommended": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-12.0.0.tgz",
+      "integrity": "sha512-x6x8QNARrGO2sG6iURkzqL+Dp+4bJorPMMRNPScdvaUK8PsynriOcMW7AFDKqkWAS5wbue/u8fUT/4ynzcmqdQ==",
+      "dev": true,
+      "peerDependencies": {
+        "stylelint": "^15.5.0"
+      }
+    },
+    "node_modules/stylelint-config-recommended-scss": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/stylelint-config-recommended-scss/-/stylelint-config-recommended-scss-12.0.0.tgz",
+      "integrity": "sha512-5Bb2mlGy6WLa30oNeKpZvavv2lowJUsUJO25+OA68GFTemlwd1zbFsL7q0bReKipOSU3sG47hKneZ6Nd+ctrFA==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
-        "stylelint-config-prettier": ">=9.0.3"
-      },
-      "bin": {
-        "stylelint-config-prettier-scss": "bin/check.js",
-        "stylelint-config-prettier-scss-check": "bin/check.js"
-      },
-      "engines": {
-        "node": ">= 12"
+        "postcss-scss": "^4.0.6",
+        "stylelint-config-recommended": "^12.0.0",
+        "stylelint-scss": "^5.0.0"
       },
       "peerDependencies": {
-        "stylelint": ">=11.0.0"
+        "postcss": "^8.3.3",
+        "stylelint": "^15.5.0"
+      },
+      "peerDependenciesMeta": {
+        "postcss": {
+          "optional": true
+        }
       }
     },
     "node_modules/stylelint-declaration-strict-value": {
@@ -19787,21 +19807,41 @@
         "stylelint": ">=7 <=15"
       }
     },
+    "node_modules/stylelint-order": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/stylelint-order/-/stylelint-order-6.0.3.tgz",
+      "integrity": "sha512-1j1lOb4EU/6w49qZeT2SQVJXm0Ht+Qnq9GMfUa3pMwoyojIWfuA+JUDmoR97Bht1RLn4ei0xtLGy87M7d29B1w==",
+      "dev": true,
+      "dependencies": {
+        "postcss": "^8.4.21",
+        "postcss-sorting": "^8.0.2"
+      },
+      "peerDependencies": {
+        "stylelint": "^14.0.0 || ^15.0.0"
+      }
+    },
     "node_modules/stylelint-scss": {
-      "version": "4.7.0",
-      "resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-4.7.0.tgz",
-      "integrity": "sha512-TSUgIeS0H3jqDZnby1UO1Qv3poi1N8wUYIJY6D1tuUq2MN3lwp/rITVo0wD+1SWTmRm0tNmGO0b7nKInnqF6Hg==",
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-5.2.1.tgz",
+      "integrity": "sha512-ZoTJUM85/qqpQHfEppjW/St//8s6p9Qsg8deWlYlr56F9iUgC9vXeIDQvH4odkRRJLTLFQzYMALSOFCQ3MDkgw==",
       "dev": true,
       "dependencies": {
+        "known-css-properties": "^0.28.0",
         "postcss-media-query-parser": "^0.2.3",
         "postcss-resolve-nested-selector": "^0.1.1",
-        "postcss-selector-parser": "^6.0.11",
+        "postcss-selector-parser": "^6.0.13",
         "postcss-value-parser": "^4.2.0"
       },
       "peerDependencies": {
         "stylelint": "^14.5.1 || ^15.0.0"
       }
     },
+    "node_modules/stylelint-scss/node_modules/known-css-properties": {
+      "version": "0.28.0",
+      "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.28.0.tgz",
+      "integrity": "sha512-9pSL5XB4J+ifHP0e0jmmC98OGC1nL8/JjS+fi6mnTlIf//yt/MfVLtKg7S6nCtj/8KTcWX7nRlY0XywoYY1ISQ==",
+      "dev": true
+    },
     "node_modules/stylelint/node_modules/balanced-match": {
       "version": "2.0.0",
       "dev": true,
@@ -19846,6 +19886,18 @@
         "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
       }
     },
+    "node_modules/stylelint/node_modules/file-entry-cache": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-7.0.1.tgz",
+      "integrity": "sha512-uLfFktPmRetVCbHe5UPuekWrQ6hENufnA46qEGbfACkK5drjTTdQYUragRgMjHldcbYG+nslUerqMPjbBSHXjQ==",
+      "dev": true,
+      "dependencies": {
+        "flat-cache": "^3.1.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/stylelint/node_modules/is-plain-object": {
       "version": "5.0.0",
       "dev": true,
@@ -26429,34 +26481,15 @@
       "requires": {}
     },
     "@wagtail/stylelint-config-wagtail": {
-      "version": "0.5.0",
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/@wagtail/stylelint-config-wagtail/-/stylelint-config-wagtail-0.7.0.tgz",
+      "integrity": "sha512-zDLIIYa8KOpoTzpcuiBgoCp1gPuSld8gadhsyxb2d+oxcJzFGfQWamc1osPmUVKIGancjtN+pktZ2WpYCQE9FQ==",
       "dev": true,
       "requires": {
-        "stylelint-config-prettier-scss": "^0.0.1",
-        "stylelint-config-recommended-scss": "^5.0.2",
-        "stylelint-declaration-strict-value": "^1.8.0"
-      },
-      "dependencies": {
-        "stylelint-config-recommended-scss": {
-          "version": "5.0.2",
-          "resolved": "https://registry.npmjs.org/stylelint-config-recommended-scss/-/stylelint-config-recommended-scss-5.0.2.tgz",
-          "integrity": "sha512-b14BSZjcwW0hqbzm9b0S/ScN2+3CO3O4vcMNOw2KGf8lfVSwJ4p5TbNEXKwKl1+0FMtgRXZj6DqVUe/7nGnuBg==",
-          "dev": true,
-          "requires": {
-            "postcss-scss": "^4.0.2",
-            "stylelint-config-recommended": "^6.0.0",
-            "stylelint-scss": "^4.0.0"
-          },
-          "dependencies": {
-            "stylelint-config-recommended": {
-              "version": "6.0.0",
-              "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-6.0.0.tgz",
-              "integrity": "sha512-ZorSSdyMcxWpROYUvLEMm0vSZud2uB7tX1hzBZwvVY9SV/uly4AvvJPPhCcymZL3fcQhEQG5AELmrxWqtmzacw==",
-              "dev": true,
-              "requires": {}
-            }
-          }
-        }
+        "stylelint-config-prettier-scss": "^1.0.0",
+        "stylelint-config-recommended-scss": "^12.0.0",
+        "stylelint-declaration-strict-value": "^1.9.2",
+        "stylelint-order": "^6.0.3"
       }
     },
     "@webassemblyjs/ast": {
@@ -28146,9 +28179,9 @@
       }
     },
     "css-functions-list": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/css-functions-list/-/css-functions-list-3.2.0.tgz",
-      "integrity": "sha512-d/jBMPyYybkkLVypgtGv12R+pIFw4/f/IHtCTxWpZc8ofTYOPigIgmA6vu5rMHartZC+WuXhBUHfnyNUIQSYrg==",
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/css-functions-list/-/css-functions-list-3.2.1.tgz",
+      "integrity": "sha512-Nj5YcaGgBtuUmn1D7oHqPW0c9iui7xsTsj5lIX8ZgevdfhmjFfKB3r8moHJtNJnctnYXJyYX5I1pp90HM4TPgQ==",
       "dev": true
     },
     "css-loader": {
@@ -30010,15 +30043,20 @@
       "requires": {}
     },
     "flat-cache": {
-      "version": "3.0.4",
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.1.1.tgz",
+      "integrity": "sha512-/qM2b3LUIaIgviBQovTLvijfyOQXPtSRnRK26ksj2J7rzPIecePUIpJsZ4T02Qg+xiAEKIs5K8dsHEd+VaKa/Q==",
       "dev": true,
       "requires": {
-        "flatted": "^3.1.0",
+        "flatted": "^3.2.9",
+        "keyv": "^4.5.3",
         "rimraf": "^3.0.2"
       }
     },
     "flatted": {
-      "version": "3.2.5",
+      "version": "3.2.9",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.9.tgz",
+      "integrity": "sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==",
       "dev": true
     },
     "flow-parser": {
@@ -32419,6 +32457,12 @@
       "version": "2.5.2",
       "dev": true
     },
+    "json-buffer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
+      "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
+      "dev": true
+    },
     "json-parse-even-better-errors": {
       "version": "2.3.1",
       "dev": true
@@ -32456,6 +32500,15 @@
         "object.assign": "^4.1.2"
       }
     },
+    "keyv": {
+      "version": "4.5.4",
+      "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
+      "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
+      "dev": true,
+      "requires": {
+        "json-buffer": "3.0.1"
+      }
+    },
     "kind-of": {
       "version": "6.0.3",
       "dev": true
@@ -32469,9 +32522,9 @@
       "dev": true
     },
     "known-css-properties": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.28.0.tgz",
-      "integrity": "sha512-9pSL5XB4J+ifHP0e0jmmC98OGC1nL8/JjS+fi6mnTlIf//yt/MfVLtKg7S6nCtj/8KTcWX7nRlY0XywoYY1ISQ==",
+      "version": "0.29.0",
+      "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.29.0.tgz",
+      "integrity": "sha512-Ne7wqW7/9Cz54PDt4I3tcV+hAyat8ypyOGzYRJQfdxnnjeWsTxt1cy8pjvvKeI5kfXuyvULyeeAvwvvtAX3ayQ==",
       "dev": true
     },
     "language-subtag-registry": {
@@ -33668,6 +33721,8 @@
     },
     "postcss-media-query-parser": {
       "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/postcss-media-query-parser/-/postcss-media-query-parser-0.2.3.tgz",
+      "integrity": "sha512-3sOlxmbKcSHMjlUXQZKQ06jOswE7oVkXPxmZdoB1r5l0q6gTFTQSHxNxOrCccElbW7dxNytifNEo8qidX2Vsig==",
       "dev": true
     },
     "postcss-merge-longhand": {
@@ -33853,9 +33908,9 @@
       "requires": {}
     },
     "postcss-scss": {
-      "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/postcss-scss/-/postcss-scss-4.0.8.tgz",
-      "integrity": "sha512-Cr0X8Eu7xMhE96PJck6ses/uVVXDtE5ghUTKNUYgm8ozgP2TkgV3LWs3WgLV1xaSSLq8ZFiXaUrj0LVgG1fGEA==",
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/postcss-scss/-/postcss-scss-4.0.9.tgz",
+      "integrity": "sha512-AjKOeiwAitL/MXxQW2DliT28EKukvvbEWx3LBmJIRN8KfBGZbRTxNYW0kSqi1COiTZ57nZ9NW06S6ux//N1c9A==",
       "dev": true,
       "requires": {}
     },
@@ -33869,6 +33924,13 @@
         "util-deprecate": "^1.0.2"
       }
     },
+    "postcss-sorting": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-sorting/-/postcss-sorting-8.0.2.tgz",
+      "integrity": "sha512-M9dkSrmU00t/jK7rF6BZSZauA5MAaBW4i5EnJXspMwt4iqTh/L9j6fgMnbElEOfyRyfLfVbIHj/R52zHzAPe1Q==",
+      "dev": true,
+      "requires": {}
+    },
     "postcss-svgo": {
       "version": "5.0.3",
       "dev": true,
@@ -34787,7 +34849,9 @@
       "version": "2.1.2"
     },
     "sass": {
-      "version": "1.49.0",
+      "version": "1.69.5",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.69.5.tgz",
+      "integrity": "sha512-qg2+UCJibLr2LCVOt3OlPhr/dqVHWOa9XtZf2OjbLs/T4VPSJ00udtgJxH3neXZm+QqX8B+3cU7RaLqp1iVfcQ==",
       "dev": true,
       "requires": {
         "chokidar": ">=3.0.0 <4.0.0",
@@ -35312,9 +35376,9 @@
       }
     },
     "stylelint": {
-      "version": "15.10.3",
-      "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-15.10.3.tgz",
-      "integrity": "sha512-aBQMMxYvFzJJwkmg+BUUg3YfPyeuCuKo2f+LOw7yYbU8AZMblibwzp9OV4srHVeQldxvSFdz0/Xu8blq2AesiA==",
+      "version": "15.11.0",
+      "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-15.11.0.tgz",
+      "integrity": "sha512-78O4c6IswZ9TzpcIiQJIN49K3qNoXTM8zEJzhaTE/xRTCZswaovSEVIa/uwbOltZrk16X4jAxjaOhzz/hTm1Kw==",
       "dev": true,
       "requires": {
         "@csstools/css-parser-algorithms": "^2.3.1",
@@ -35324,12 +35388,12 @@
         "balanced-match": "^2.0.0",
         "colord": "^2.9.3",
         "cosmiconfig": "^8.2.0",
-        "css-functions-list": "^3.2.0",
+        "css-functions-list": "^3.2.1",
         "css-tree": "^2.3.1",
         "debug": "^4.3.4",
         "fast-glob": "^3.3.1",
         "fastest-levenshtein": "^1.0.16",
-        "file-entry-cache": "^6.0.1",
+        "file-entry-cache": "^7.0.0",
         "global-modules": "^2.0.0",
         "globby": "^11.1.0",
         "globjoin": "^0.1.4",
@@ -35338,13 +35402,13 @@
         "import-lazy": "^4.0.0",
         "imurmurhash": "^0.1.4",
         "is-plain-object": "^5.0.0",
-        "known-css-properties": "^0.28.0",
+        "known-css-properties": "^0.29.0",
         "mathml-tag-names": "^2.1.3",
         "meow": "^10.1.5",
         "micromatch": "^4.0.5",
         "normalize-path": "^3.0.0",
         "picocolors": "^1.0.0",
-        "postcss": "^8.4.27",
+        "postcss": "^8.4.28",
         "postcss-resolve-nested-selector": "^0.1.1",
         "postcss-safe-parser": "^6.0.0",
         "postcss-selector-parser": "^6.0.13",
@@ -35385,6 +35449,15 @@
             "source-map-js": "^1.0.1"
           }
         },
+        "file-entry-cache": {
+          "version": "7.0.1",
+          "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-7.0.1.tgz",
+          "integrity": "sha512-uLfFktPmRetVCbHe5UPuekWrQ6hENufnA46qEGbfACkK5drjTTdQYUragRgMjHldcbYG+nslUerqMPjbBSHXjQ==",
+          "dev": true,
+          "requires": {
+            "flat-cache": "^3.1.1"
+          }
+        },
         "is-plain-object": {
           "version": "5.0.0",
           "dev": true
@@ -35413,16 +35486,29 @@
         }
       }
     },
-    "stylelint-config-prettier": {
-      "version": "9.0.3",
+    "stylelint-config-prettier-scss": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/stylelint-config-prettier-scss/-/stylelint-config-prettier-scss-1.0.0.tgz",
+      "integrity": "sha512-Gr2qLiyvJGKeDk0E/+awNTrZB/UtNVPLqCDOr07na/sLekZwm26Br6yYIeBYz3ulsEcQgs5j+2IIMXCC+wsaQA==",
       "dev": true,
       "requires": {}
     },
-    "stylelint-config-prettier-scss": {
-      "version": "0.0.1",
+    "stylelint-config-recommended": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-12.0.0.tgz",
+      "integrity": "sha512-x6x8QNARrGO2sG6iURkzqL+Dp+4bJorPMMRNPScdvaUK8PsynriOcMW7AFDKqkWAS5wbue/u8fUT/4ynzcmqdQ==",
+      "dev": true,
+      "requires": {}
+    },
+    "stylelint-config-recommended-scss": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/stylelint-config-recommended-scss/-/stylelint-config-recommended-scss-12.0.0.tgz",
+      "integrity": "sha512-5Bb2mlGy6WLa30oNeKpZvavv2lowJUsUJO25+OA68GFTemlwd1zbFsL7q0bReKipOSU3sG47hKneZ6Nd+ctrFA==",
       "dev": true,
       "requires": {
-        "stylelint-config-prettier": ">=9.0.3"
+        "postcss-scss": "^4.0.6",
+        "stylelint-config-recommended": "^12.0.0",
+        "stylelint-scss": "^5.0.0"
       }
     },
     "stylelint-declaration-strict-value": {
@@ -35435,16 +35521,35 @@
         "shortcss": "^0.1.3"
       }
     },
+    "stylelint-order": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/stylelint-order/-/stylelint-order-6.0.3.tgz",
+      "integrity": "sha512-1j1lOb4EU/6w49qZeT2SQVJXm0Ht+Qnq9GMfUa3pMwoyojIWfuA+JUDmoR97Bht1RLn4ei0xtLGy87M7d29B1w==",
+      "dev": true,
+      "requires": {
+        "postcss": "^8.4.21",
+        "postcss-sorting": "^8.0.2"
+      }
+    },
     "stylelint-scss": {
-      "version": "4.7.0",
-      "resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-4.7.0.tgz",
-      "integrity": "sha512-TSUgIeS0H3jqDZnby1UO1Qv3poi1N8wUYIJY6D1tuUq2MN3lwp/rITVo0wD+1SWTmRm0tNmGO0b7nKInnqF6Hg==",
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-5.2.1.tgz",
+      "integrity": "sha512-ZoTJUM85/qqpQHfEppjW/St//8s6p9Qsg8deWlYlr56F9iUgC9vXeIDQvH4odkRRJLTLFQzYMALSOFCQ3MDkgw==",
       "dev": true,
       "requires": {
+        "known-css-properties": "^0.28.0",
         "postcss-media-query-parser": "^0.2.3",
         "postcss-resolve-nested-selector": "^0.1.1",
-        "postcss-selector-parser": "^6.0.11",
+        "postcss-selector-parser": "^6.0.13",
         "postcss-value-parser": "^4.2.0"
+      },
+      "dependencies": {
+        "known-css-properties": {
+          "version": "0.28.0",
+          "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.28.0.tgz",
+          "integrity": "sha512-9pSL5XB4J+ifHP0e0jmmC98OGC1nL8/JjS+fi6mnTlIf//yt/MfVLtKg7S6nCtj/8KTcWX7nRlY0XywoYY1ISQ==",
+          "dev": true
+        }
       }
     },
     "supports-color": {

package.json

@@ -74,7 +74,7 @@
     "@typescript-eslint/eslint-plugin": "^6.2.1",
     "@typescript-eslint/parser": "^6.2.1",
     "@wagtail/eslint-config-wagtail": "^0.4.0",
-    "@wagtail/stylelint-config-wagtail": "^0.5.0",
+    "@wagtail/stylelint-config-wagtail": "^0.7.0",
     "autoprefixer": "^10.4.2",
     "babel-loader": "^8.2.3",
     "copy-webpack-plugin": "^10.2.0",
@@ -95,11 +95,11 @@
     "prettier": "^3.0.0",
     "react-test-renderer": "^16.14.0",
     "redux-mock-store": "^1.3.0",
-    "sass": "^1.45.1",
+    "sass": "^1.69.5",
     "sass-loader": "^12.4.0",
     "storybook": "^7.5.3",
     "storybook-django": "^0.5.1",
-    "stylelint": "^15.10.0",
+    "stylelint": "^15.11.0",
     "tailwindcss": "^3.1.5",
     "tailwindcss-vanilla-rtl": "^0.2.0",
     "ts-jest": "^29.1.0",