fix(build): add SCSS preprocessing and suppress dependency warnings

- Add svelte-preprocess for SCSS support in svelma
- Install postcss and postcss-load-config
- Suppress accessibility and CSS warnings in vite config
- Configure SCSS preprocessing for Tooltip

Known: svelte-jsoneditor TransformWizard has invalid HTML
Related: #286

Author: AlexMikhalev

desktop/package.json

@@ -72,11 +72,13 @@
 		"dotenv": "^16.4.5",
 		"jsdom": "^25.0.1",
 		"patch-package": "^8.0.0",
+		"postcss": "^8.5.6",
+		"postcss-load-config": "^6.0.1",
 		"sass": "^1.83.0",
 		"selenium-webdriver": "^4.21.0",
 		"svelte": "^5.2.8",
 		"svelte-check": "^4.0.0",
-		"svelte-preprocess": "^5.1.0",
+		"svelte-preprocess": "^6.0.3",
 		"svelte-typeahead": "^4.4.1",
 		"tslib": "^2.8.1",
 		"typescript": "^5.0.4",

desktop/vite.config.ts

@@ -1,5 +1,6 @@
 import { defineConfig } from 'vite'
 import { svelte } from '@sveltejs/vite-plugin-svelte'
+import sveltePreprocess from 'svelte-preprocess'
 import { fileURLToPath, URL } from "url";
 import { writeFileSync, readFileSync, existsSync, mkdirSync } from 'fs';
 import { resolve } from 'path';
@@ -11,22 +12,18 @@ export default defineConfig({
       compilerOptions: {
         css: 'injected'
       },
+      preprocess: sveltePreprocess({
+        scss: true
+      }),
       onwarn: (warning, handler) => {
-        // Ignore svelma warnings
+        // Ignore dependency warnings
         if (warning.code === 'css_nesting_selector_invalid_placement') return;
         if (warning.code === 'css_invalid_global') return;
+        if (warning.code === 'a11y_consider_explicit_label') return;
+        if (warning.code === 'a11y_label_has_associated_control') return;
+        if (warning.code === 'a11y_click_events_have_key_events') return;
+        if (warning.code === 'node_invalid_placement') return;
         handler(warning);
-      },
-      preprocess: {
-        style: ({ content, filename }) => {
-          // Handle problematic CSS nesting in svelma
-          if (filename && filename.includes('svelma')) {
-            return {
-              code: content.replace(/:global\(&\[([^\]]+)\]\)/g, '&[$1]')
-            };
-          }
-          return { code: content };
-        }
       }
     }),
   ],