Cleaning up

package.json

@@ -23,7 +23,7 @@
     "url": "git+https://github.com/opencor/webapp.git"
   },
   "type": "module",
-  "version": "0.20260318.0",
+  "version": "0.20260318.1",
   "engines": {
     "bun": ">=1.2.0"
   },
@@ -83,6 +83,7 @@
     "electron-vite": "^5.0.0",
     "esbuild": "^0.27.4",
     "node-addon-api": "^8.6.0",
+    "postcss": "^8.5.8",
     "rollup-plugin-visualizer": "^7.0.1",
     "stylelint": "^17.4.0",
     "stylelint-config-standard": "^40.0.0",

src/renderer/package.json

@@ -42,7 +42,7 @@
     },
     "./style.css": "./dist/opencor.css"
   },
-  "version": "0.20260318.0",
+  "version": "0.20260318.1",
   "scripts": {
     "build": "vite build && bun scripts/generate.version.js",
     "build:lib": "vite build --config vite.lib.config.ts && bun scripts/copy.indexdts.js",
@@ -84,6 +84,7 @@
     "@vue/tsconfig": "^0.9.0",
     "autoprefixer": "^10.4.27",
     "esbuild": "^0.27.4",
+    "postcss": "^8.5.8",
     "rollup-plugin-visualizer": "^7.0.1",
     "stylelint": "^17.4.0",
     "stylelint-config-standard": "^40.0.0",

src/renderer/src/components/DragNDropComponent.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="absolute w-full h-full border-[0.375rem] border-dashed border-primary z-99999">
+  <div class="absolute w-full h-full border-[0.375rem] border-dashed border-primary z-99999 highlight">
     <div
       class="message absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-[1.5rem] leading-tight text-center rounded-2xl p-[0.5rem_1rem] bg-primary text-primary-contrast whitespace-nowrap"
     >
@@ -10,6 +10,10 @@
 </template>
 
 <style scoped>
+.highlight {
+  background-color: color-mix(in srgb, var(--p-primary-color) 7%, transparent);
+}
+
 .message {
   box-shadow: 0 0 0.75rem 0.375rem var(--p-content-border-color);
 }

src/renderer/src/components/OpenCOR.vue

@@ -20,7 +20,16 @@
       @dragleave="onDragLeave"
     >
       <input ref="filesRef" type="file" multiple style="display: none;" @change="onChange" />
-      <DragNDropComponent v-show="dragAndDropCounter" />
+      <Transition
+        enter-active-class="transition-opacity duration-200"
+        leave-active-class="transition-opacity duration-200"
+        enter-from-class="opacity-0"
+        enter-to-class="opacity-100"
+        leave-from-class="opacity-100"
+        leave-to-class="opacity-0"
+      >
+        <DragNDropComponent v-if="dragAndDropCounter" />
+      </Transition>
       <MainMenu ref="mainMenuRef" v-if="isFullWebApp"
         :isActive="compIsActive"
         :uiEnabled="compUiEnabled"

src/renderer/vite.lib.config.ts

@@ -2,6 +2,7 @@ import * as primeVueAutoImportResolver from '@primevue/auto-import-resolver';
 import tailwindcssPlugin from '@tailwindcss/vite';
 import vuePlugin from '@vitejs/plugin-vue';
 
+import * as postcss from 'postcss';
 import vitePlugin from 'unplugin-vue-components/vite';
 import * as vite from 'vite';
 
@@ -53,71 +54,30 @@ export default vite.defineConfig({
       generateBundle(_options, bundle) {
         for (const asset of Object.values(bundle)) {
           if (asset.type === 'asset' && typeof asset.source === 'string' && asset.fileName.endsWith('.css')) {
-            // Process @layer blocks: strip base, unwrap others.
+            // Process @layer blocks through a CSS AST:
+            //  1. Remove @layer base blocks;
+            //  2. Unwrap remaining @layer blocks; and
+            //  3. Remove bare @layer ordering declarations.
 
-            const processLayers = (source: string): string => {
-              const layerBlockRegEx = /@layer\s+([\w-]+)\s*\{/g;
-              let res = '';
-              let pos = 0;
+            const root = postcss.parse(asset.source);
 
-              for (;;) {
-                layerBlockRegEx.lastIndex = pos;
+            root.walkAtRules('layer', (atRule) => {
+              if (!atRule.nodes || atRule.nodes.length === 0) {
+                atRule.remove();
 
-                const match = layerBlockRegEx.exec(source);
-
-                if (!match) {
-                  res += source.slice(pos);
-
-                  break;
-                }
-
-                const layerName = match[1] ?? '';
-                const start = match.index;
-                const contentStart = start + match[0].length;
-
-                // Scan forward to find the matching closing brace.
-
-                let depth = 1;
-                let i = contentStart;
-
-                while (i < source.length && depth > 0) {
-                  if (source[i] === '{') {
-                    ++depth;
-                  } else if (source[i] === '}') {
-                    --depth;
-                  }
-
-                  ++i;
-                }
-
-                const end = i; // One past the closing '}'.
-
-                // Append everything before this @layer block unchanged.
-
-                res += source.slice(pos, start);
-
-                if (layerName !== 'base') {
-                  // Unwrap: keep content, remove @layer wrapper.
-                  // Note: we recurse so any nested @layer blocks are also processed.
-
-                  res += processLayers(source.slice(contentStart, end - 1));
-                }
-
-                // 'base' is stripped entirely (no append).
-
-                pos = end;
+                return;
               }
 
-              return res;
-            };
+              if (atRule.params.trim() === 'base') {
+                atRule.remove();
 
-            let css = processLayers(asset.source);
-
-            // Remove bare @layer ordering declarations (e.g., "@layer base, components;").
+                return;
+              }
 
-            css = css.replace(/@layer\s+[\w\s,-]+;/g, '');
+              atRule.replaceWith(...atRule.nodes);
+            });
 
-            asset.source = css;
+            asset.source = root.toString();
           }
         }
       }