Merge pull request #26993 from robintown/compound-theming

Allow Element Web to use cascade layers

package.json

@@ -179,13 +179,13 @@
         "postcss": "^8.4.31",
         "postcss-easings": "^2.0.0",
         "postcss-hexrgba": "2.0.1",
-        "postcss-import": "^12.0.1",
-        "postcss-loader": "^3.0.0",
+        "postcss-import": "^16.0.0",
+        "postcss-loader": "^8.1.0",
         "postcss-mixins": "^6.2.3",
         "postcss-nested": "^4.2.3",
-        "postcss-preset-env": "^6.7.0",
+        "postcss-preset-env": "^9.3.0",
         "postcss-scss": "^4.0.4",
-        "postcss-simple-vars": "^5.0.2",
+        "postcss-simple-vars": "^7.0.1",
         "prettier": "3.2.4",
         "process": "^0.11.10",
         "proxy-agent": "^6.3.0",

webpack.config.js

@@ -330,8 +330,9 @@ module.exports = (env, argv) => {
                             loader: "postcss-loader",
                             ident: "postcss",
                             options: {
-                                "sourceMap": true,
-                                "plugins": () => [
+                                sourceMap: true,
+                                postcssOptions: () => ({
+                                    "plugins": [
                                         // Note that we use significantly fewer plugins on the plain
                                         // CSS parser. If we start to parse plain CSS, we end with all
                                         // kinds of nasty problems (like stylesheets not loading).
@@ -359,6 +360,7 @@ module.exports = (env, argv) => {
                                     ],
                                     "parser": "postcss-scss",
                                     "local-plugins": true,
+                                }),
                             },
                         },
                     ],
@@ -413,8 +415,9 @@ module.exports = (env, argv) => {
                             loader: "postcss-loader",
                             ident: "postcss",
                             options: {
-                                "sourceMap": true,
-                                "plugins": () => [
+                                sourceMap: true,
+                                postcssOptions: () => ({
+                                    "plugins": [
                                         // Note that we use slightly different plugins for PostCSS.
                                         require("postcss-import")(),
                                         require("postcss-mixins")(),
@@ -429,6 +432,7 @@ module.exports = (env, argv) => {
                                     ],
                                     "parser": "postcss-scss",
                                     "local-plugins": true,
+                                }),
                             },
                         },
                     ],