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 */