chore: switch to sass-embedded and remedy sass API deprecation warnin…

…gs (#1926) - add `sass-embedded` to catalog and use it instead of `sass` - add workspace package `@sit-onyx/shared` for shared configs - add `vite.config.base.ts` file for shared Vite base config - right now we can't use a module import because of an [open Vite issue](vitejs/vite#5370). We have to use a relative import instead.
SchwarzIT · Oct 9, 2024 · 68f0b4f · 68f0b4f
1 parent 65ec48d
commit 68f0b4f
Show file tree

Hide file tree

Showing 15 changed files with 458 additions and 281 deletions.
diff --git a/apps/demo-app/package.json b/apps/demo-app/package.json
@@ -18,7 +18,8 @@
     "vue-router": "^4.4.5"
   },
   "devDependencies": {
-    "sass": "catalog:",
+    "@sit-onyx/shared": "workspace:^",
+    "sass-embedded": "catalog:",
     "vue": "catalog:"
   }
 }
diff --git a/apps/demo-app/vite.config.ts b/apps/demo-app/vite.config.ts
@@ -1,7 +1,7 @@
-import vue from "@vitejs/plugin-vue";
 import { defineConfig } from "vite";
+import { VITE_BASE_CONFIG } from "./node_modules/@sit-onyx/shared/vite.config.base";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue()],
+  ...VITE_BASE_CONFIG,
 });
diff --git a/apps/docs/package.json b/apps/docs/package.json
@@ -16,9 +16,11 @@
     "@playwright/test": "^1.47.2",
     "@sit-onyx/chartjs-plugin": "workspace:^",
     "@sit-onyx/icons": "workspace:^",
+    "@sit-onyx/shared": "workspace:^",
     "@sit-onyx/vitepress-theme": "workspace:^",
     "chart.js": "^4.4.4",
     "postcss": "^8.4.47",
+    "sass-embedded": "catalog:",
     "sit-onyx": "workspace:^",
     "vite": "^5.4.8",
     "vitepress": "^1.4.0",

diff --git a/apps/docs/src/.vitepress/config.ts b/apps/docs/src/.vitepress/config.ts
@@ -1,15 +1,12 @@
-import { fileURLToPath } from "node:url";
 import { defineConfig, type DefaultTheme, type UserConfig } from "vitepress";
 import packageJson from "../../../../packages/sit-onyx/package.json" with { type: "json" };
+import viteConfig from "../../vite.config";
 
 // https://vitepress.dev/reference/site-config
 export const CONFIG = {
   vite: {
-    resolve: {
-      alias: {
-        "~components": getFilePath("../../../../packages/sit-onyx/src/components"),
-      },
-    },
+    ...viteConfig,
+    plugins: [], // don't use any of the default (vue) plugins, as it would conflict with vitepress setup
   },
   title: "onyx",
   description: packageJson.description,
@@ -217,8 +214,3 @@ export const CONFIG = {
 } as const satisfies UserConfig<DefaultTheme.Config>;
 
 export default defineConfig(CONFIG);
-
-/** Gets the given path while ensuring cross-platform and correct decoding */
-function getFilePath(path: string) {
-  return fileURLToPath(new URL(path, import.meta.url));
-}
diff --git a/apps/docs/vite.config.ts b/apps/docs/vite.config.ts
@@ -1,10 +1,10 @@
-import vue from "@vitejs/plugin-vue";
 import { fileURLToPath, URL } from "node:url";
 import { defineConfig } from "vite";
+import { VITE_BASE_CONFIG } from "./node_modules/@sit-onyx/shared/vite.config.base";
 
 // https://vitejs.dev/config
 export default defineConfig({
-  plugins: [vue()],
+  ...VITE_BASE_CONFIG,
   resolve: {
     alias: {
       "~components": getFilePath("../../packages/sit-onyx/src/components"),

diff --git a/apps/playground/package.json b/apps/playground/package.json
@@ -23,6 +23,7 @@
     "sit-onyx": "workspace:^"
   },
   "devDependencies": {
+    "@sit-onyx/shared": "workspace:^",
     "vue": "catalog:"
   }
 }
diff --git a/apps/playground/vite.config.ts b/apps/playground/vite.config.ts
@@ -1,9 +1,9 @@
-import vue from "@vitejs/plugin-vue";
 import { defineConfig } from "vite";
+import { VITE_BASE_CONFIG } from "./node_modules/@sit-onyx/shared/vite.config.base";
 
 // https://vitejs.dev/config
 export default defineConfig({
-  plugins: [vue()],
+  ...VITE_BASE_CONFIG,
   optimizeDeps: {
     // needed in order for the web workers of "@vue/repl" to work
     exclude: ["@vue/repl"],

diff --git a/packages/chartjs-plugin/package.json b/packages/chartjs-plugin/package.json
@@ -34,6 +34,7 @@
     "sit-onyx": "workspace:^"
   },
   "devDependencies": {
+    "@sit-onyx/shared": "workspace:^",
     "@vue/compiler-dom": "catalog:",
     "chart.js": "catalog:",
     "vue": "catalog:",

diff --git a/packages/chartjs-plugin/vite.config.ts b/packages/chartjs-plugin/vite.config.ts
@@ -1,7 +1,7 @@
-import vue from "@vitejs/plugin-vue";
 import { defineConfig } from "vite";
+import { VITE_BASE_CONFIG } from "./node_modules/@sit-onyx/shared/vite.config.base";
 
 // https://vitejs.dev/config
 export default defineConfig({
-  plugins: [vue()],
+  ...VITE_BASE_CONFIG,
 });
diff --git a/packages/shared/package.json b/packages/shared/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "@sit-onyx/shared",
+  "version": "1.0.0",
+  "description": "",
+  "private": true,
+  "type": "module",
+  "peerDependencies": {
+    "@vitejs/plugin-vue": "^5.1.4",
+    "sass-embedded": "catalog:",
+    "vue": "catalog:"
+  }
+}
diff --git a/packages/shared/vite.config.base.ts b/packages/shared/vite.config.base.ts
@@ -0,0 +1,20 @@
+import vue from "@vitejs/plugin-vue";
+import { deprecations, type Deprecation, type Options } from "sass-embedded";
+import type { UserConfig } from "vite";
+
+type ViteScssOptions = Options<"async"> & { api: "modern-compiler" };
+
+export const VITE_BASE_CONFIG = {
+  plugins: [vue()],
+  css: {
+    preprocessorOptions: {
+      scss: {
+        api: "modern-compiler",
+        // error for all warnings
+        fatalDeprecations: (Object.values(deprecations) as Deprecation[]).filter(
+          ({ status }) => status !== "future",
+        ),
+      } satisfies ViteScssOptions,
+    },
+  },
+} satisfies UserConfig;
diff --git a/packages/sit-onyx/package.json b/packages/sit-onyx/package.json
@@ -50,10 +50,11 @@
   "devDependencies": {
     "@axe-core/playwright": "^4.10.0",
     "@sit-onyx/headless": "workspace:^",
+    "@sit-onyx/shared": "workspace:^",
     "@storybook/addon-a11y": "^8.3.5",
     "@vue/compiler-dom": "catalog:",
     "eslint-plugin-vue-scoped-css": "^2.8.1",
-    "sass": "catalog:",
+    "sass-embedded": "catalog:",
     "vue": "catalog:",
     "vue-component-type-helpers": "^2.1.6"
   }

diff --git a/packages/sit-onyx/vite.config.ts b/packages/sit-onyx/vite.config.ts
@@ -1,15 +1,14 @@
 /// <reference types="vitest" />
 import vue from "@vitejs/plugin-vue";
 import { fileURLToPath, URL } from "node:url";
-import { Deprecation, deprecations, Options } from "sass";
 import { defineConfig } from "vite";
+import { VITE_BASE_CONFIG } from "./node_modules/@sit-onyx/shared/vite.config.base";
 import packageJson from "./package.json";
 import { vuePluginOptions } from "./playwright.config";
 
-type ViteScssOptions = Options<"async"> & { api: "modern-compiler" };
-
 // https://vitejs.dev/config
 export default defineConfig({
+  ...VITE_BASE_CONFIG,
   plugins: [vue(vuePluginOptions)],
   build: {
     lib: {
@@ -32,17 +31,6 @@ export default defineConfig({
       exclude: ["src/**/*.stories.ts"],
     },
   },
-  css: {
-    preprocessorOptions: {
-      scss: {
-        api: "modern-compiler",
-        // error for all warnings
-        fatalDeprecations: (Object.values(deprecations) as Deprecation[]).filter(
-          ({ status }) => status !== "future",
-        ),
-      } satisfies ViteScssOptions,
-    },
-  },
 });
 
 /** Gets the given path while ensuring cross-platform and correct decoding */