ui_migration builf(purge) set configurations to minimize UIKIT on purge, set rules to minimize on build and not in serve.

webapp/stylelint.config.mjs

@@ -8,10 +8,10 @@ export default {
       files: ["**/*.vue"],
       customSyntax: "postcss-html",
       rules: {
-        // Stop Stylelint from throwing errors when it sees 
+        // Stop Stylelint from throwing errors when it sees
         // LESS functions (like darken, lighten, desaturate) inside Vue files.
-        "declaration-property-value-no-unknown": null
+        "declaration-property-value-no-unknown": null,
-      }
+      },
     },
     {
       // LESS FILES OVERRIDE
@@ -26,10 +26,10 @@ export default {
     "selector-class-pattern": null,
     "no-invalid-position-at-import-rule": null,
     "no-empty-source": null,
-    
+
     // Needed rgba for UIkit colot math
     "color-function-notation": null,
     "alpha-value-notation": null,
-    "color-function-alias-notation": null
+    "color-function-alias-notation": null,
   },
-};
+};

webapp/vite.config.mjs

@@ -6,7 +6,7 @@
 import { fileURLToPath, URL } from "node:url";
 import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
-import purgecss from '@fullhuman/postcss-purgecss';
+import purgecss from "@fullhuman/postcss-purgecss";
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -50,26 +50,49 @@ export default defineConfig({
   css: {
     preprocessorOptions: {
       less: {
-        // Always include math in Less files.
         math: "always",
-        // Enable relative URLs in Less files.
         relativeUrls: true,
-        // Enable JavaScript in Less files
         javascriptEnabled: true,
       },
     },
     postcss: {
-      plugins: [
+      plugins:
-        purgecss({
+        process.env.NODE_ENV === "production"
-          content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
+          ? [
-          safelist: {
+              purgecss({
-            standard: ['html', 'body'], // Keep basic HTML elements
+                content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
-            greedy: [ // greedy works by matching patterns, so we can keep all classes starting with 'uk-' for UIkit
+                safelist: {
-              /^uk-/, // Keep all classes starting with 'uk-' (UIkit)
+                  standard: [
+                    "html",
+                    "body",
+                    "svg",
+                    "path",
+                    "g",
+                    "canvas",
+                    // Add dynamic UIkit states that JS toggles
+                    "uk-active",
+                    "uk-open",
+                    "uk-modal-page",
+                    "uk-offcanvas-page",
+                    "uk-preserve-width",
+                  ],
+                  deep: [
+                    // Protect UIkit attribute selectors (e.g., [uk-modal])
+                    /\[uk-[^\]]+\]/,
+                    /\[data-uk-[^\]]+\]/,
+                    // Protect Vue transitions
+                    /-(leave|enter|appear)(|-(to|from|active))$/,
+                    // Protect UIkit dynamic components (notifications, tooltips, sorting)
+                    /^uk-notification/,
+                    /^uk-tooltip/,
+                    /^uk-animation-/,
+                    /^uk-transition-/,
+                  ],
+                  // Notice we completely removed the "greedy" block!
+                },
+              }),
             ]
-          },
+          : [],
-        }),
-      ],
     },
   },
 });