Enable plugins in config

vite.common-config.js

@@ -1,9 +1,15 @@
 const cssvariables = require("postcss-css-variables");
 const flexbugsFixes = require("postcss-flexbugs-fixes");
+const compileVariables = require("./scripts/postcss/css-compile-variables");
+const urlVariables = require("./scripts/postcss/css-url-to-variables");
+const urlProcessor = require("./scripts/postcss/css-url-processor");
 const fs = require("fs");
 const path = require("path");
 const manifest = require("./package.json");
 const version = manifest.version;
+const compiledVariables = new Map();
+const derive = require("./scripts/postcss/color").derive;
+const replacer = require("./scripts/postcss/svg-colorizer").buildColorizedSVG;
 
 const commonOptions = {
     logLevel: "warn",
@@ -32,11 +38,14 @@ const commonOptions = {
     css: {
         postcss: {
             plugins: [
-                cssvariables({
-                    preserve: (declaration) => {
-                        return declaration.value.indexOf("var(--ios-") == 0;
-                    }
-                }),
+                compileVariables({derive, compiledVariables}),
+                urlVariables({compileVariables}),
+                urlProcessor({replacer}),
+                // cssvariables({
+                //     preserve: (declaration) => {
+                //         return declaration.value.indexOf("var(--ios-") == 0;
+                //     }
+                // }),
                 // the grid option creates some source fragment that causes the vite warning reporter to crash because
                 // it wants to log a warning on a line that does not exist in the source fragment.
                 // autoprefixer({overrideBrowserslist: ["IE 11"], grid: "no-autoplace"}),
@@ -46,4 +55,4 @@ const commonOptions = {
     }
 };
 
-module.exports = commonOptions;
+module.exports = { commonOptions, compiledVariables };

vite.config.js

@@ -1,8 +1,9 @@
 const injectWebManifest = require("./scripts/build-plugins/manifest");
 const {injectServiceWorker, createPlaceholderValues} = require("./scripts/build-plugins/service-worker");
+const themeBuilder = require("./scripts/build-plugins/rollup-plugin-build-themes");
 const {defineConfig} = require('vite');
 const mergeOptions = require('merge-options').bind({concatArrays: true});
-const commonOptions = require("./vite.common-config.js");
+const {commonOptions, compiledVariables} = require("./vite.common-config.js");
 
 export default defineConfig(({mode}) => {
     const definePlaceholders = createPlaceholderValues(mode);
@@ -15,6 +16,7 @@ export default defineConfig(({mode}) => {
             sourcemap: true,
         },
         plugins: [
+            themeBuilder({manifestLocations: ["./src/platform/web/ui/css/themes/element"], compiledVariables}),
             // important this comes before service worker
             // otherwise the manifest and the icons it refers to won't be cached
             injectWebManifest("assets/manifest.json"),