@nexdom/uimed-vue 2.0.0-beta.20 → 2.0.0-beta.21

package/AGENTS.md

@@ -22,11 +22,11 @@ pnpm add @nexdom/uimed-vue
 yarn add @nexdom/uimed-vue
 ```
 
-Peer dependencies (`@fontsource/roboto`, `@mdi/font`, `@nexdom/shared`, `resize-observer-polyfill`, `vite-plugin-vuetify`, `vite-plus`, `vue`, `vue-router`, `vuetify`) must be installed alongside it — most package managers install these automatically, but confirm versions match what's declared in `package.json`'s `peerDependencies`.
+Peer dependencies (`@mdi/font`, `@nexdom/shared`, `resize-observer-polyfill`, `sass-embedded`, `vite-plus`, `vue`, `vue-component-type-helpers`, `vue-router`, `vuetify`) must be installed alongside it — most package managers install these automatically, but confirm versions match what's declared in `package.json`'s `peerDependencies`.
 
 ### Setup
 
-Add the Vite plugin:
+Add the Vite plugin, which compiles the components' styles with the library's font and Sass settings (without it, components lose the Unimed Slab font):
 
 ```ts
 // vite.config.ts
@@ -166,6 +166,7 @@ Use an existing composable (e.g. `use-toast`) as the reference, and deliver in t
   - `docs` must not mention Vuetify
   - A new component/composable must be listed in its guide page (`docs/guide/…`), its API page (`docs/api/…`), both sidebars in `docs/.vitepress/config.ts`, the guide index table (`docs/guide/index.md`) and the API index list (`docs/api/index.md`).
 - Never write CSS or `<style>` blocks, and expose styling to consumers only through props.
+- Adjustments that Vuetify exposes as Sass variables (e.g. a font family or a line height) go in `src/styles/settings.scss`, which `vitePluginUimed()` compiles into Vuetify's stylesheets in the apps. That file only configures variables: still no CSS rules.
 - Don't add spacing to Vuetify components: no padding or margin utility classes (`pa-*`, `pt-6`, `px-4`, `ma-2`, ...) and no spacing props overriding the defaults. Vuetify already applies Material Design 3 spacing, and overriding it breaks what it handles on its own, such as button paddings and the scrollbar of scrollable content. If the default spacing looks wrong, stop and ask instead of adjusting it.
 - Prefer a Vuetify component's own props to building its parts by hand (e.g. `title`/`text` on `v-card` instead of `v-card-item` > `v-card-title` > `v-card-text`). A non-spacing utility class is acceptable only when no prop covers the need (e.g. `text-wrap` on a card title), with a comment saying why.
 - Keep components thin: a component wires props, slots and events to Vuetify. Logic beyond that (focus management, queues, DOM lookups, comparisons) goes into an internal composable with its own unit tests.

package/dist/index.js

@@ -26,10 +26,7 @@ function createUimed() {
 					error: "#D92D20",
 					info: "#9ACBE5"
 				},
-				variables: {
-					"border-color": "#D0D5DD",
-					"font-body": "\"Unimed Slab\", sans-serif"
-				}
+				variables: { "border-color": "#D0D5DD" }
 			} }
 		}
 	});

package/dist/plugins.d.ts

@@ -1,10 +1,21 @@
-import vitePluginVuetify from "vite-plugin-vuetify";
-import { UserConfig } from "vite-plus";
+import { Plugin, UserConfig } from "vite-plus";
 //#region src/plugins.d.ts
 /**
- * Vite plugin for UIMed.
+ * Vite plugin that compiles the components' styles with the library's font and Sass settings.
+ * Required: without it, the components lose the Unimed Slab font. Needs `sass-embedded`, a peer
+ * dependency.
+ *
+ * @example
+ * ```ts
+ * // vite.config.ts
+ * import { vitePluginUimed } from "@nexdom/uimed-vue/plugins";
+ *
+ * export default defineConfig({
+ *   plugins: [vue(), vitePluginUimed()],
+ * });
+ * ```
  */
-export declare function vitePluginUimed(): ReturnType<typeof vitePluginVuetify>;
+export declare function vitePluginUimed(): Plugin[];
 /**
  * Vitest Server plugin for UIMed.
  */

package/dist/plugins.js

@@ -1,10 +1,61 @@
-import vitePluginVuetify from "vite-plugin-vuetify";
+import { existsSync } from "node:fs";
+import { pathToFileURL } from "node:url";
 //#region src/plugins.ts
+/** Matches the ids of CSS files, with or without a query */
+const stylesheet = /\.css(?:\?|$)/;
+/** Path of Vuetify's stylesheets folder, inside the `node_modules` folder where it's installed */
+const vuetifyStylesheets = "/node_modules/vuetify/lib/";
 /**
-* Vite plugin for UIMed.
+* Matches the queries that import a stylesheet's file as is (`?raw`) or its URL (`?url`), which
+* Vite doesn't compile. The URL still serves the compiled stylesheet, which Vite loads separately
+*/
+const uncompiledStylesheetQuery = /[?&](?:raw|url)\b/;
+/**
+* Vite plugin that compiles the components' styles with the library's font and Sass settings.
+* Required: without it, the components lose the Unimed Slab font. Needs `sass-embedded`, a peer
+* dependency.
+*
+* @example
+* ```ts
+* // vite.config.ts
+* import { vitePluginUimed } from "@nexdom/uimed-vue/plugins";
+*
+* export default defineConfig({
+*   plugins: [vue(), vitePluginUimed()],
+* });
+* ```
 */
 function vitePluginUimed() {
-	return vitePluginVuetify({ autoImport: false });
+	const settings = new URL("./styles/settings.scss", import.meta.url);
+	let compiler;
+	return [{
+		name: "uimed:vuetify-styles",
+		enforce: "pre",
+		load: {
+			filter: { id: {
+				include: stylesheet,
+				exclude: uncompiledStylesheetQuery
+			} },
+			async handler(id) {
+				const file = id.split("?")[0].replaceAll("\\", "/");
+				const folder = file.lastIndexOf(vuetifyStylesheets);
+				if (folder === -1) return null;
+				const nodeModules = `${file.slice(0, folder)}/node_modules`;
+				const source = [".sass", ".scss"].map((extension) => `${file.slice(0, -4)}${extension}`).find((path) => existsSync(path));
+				if (!source) return null;
+				compiler ??= import("sass-embedded").then((sass) => sass.initAsyncCompiler());
+				const sass = await compiler;
+				const entry = `@use "${settings.href}";\n@use "${pathToFileURL(source).href}";`;
+				const { css } = await sass.compileStringAsync(entry, { loadPaths: [nodeModules] });
+				return css;
+			}
+		},
+		async closeBundle() {
+			const current = compiler;
+			compiler = void 0;
+			await (await current)?.dispose();
+		}
+	}];
 }
 /**
 * Vitest Server plugin for UIMed.

package/dist/styles/settings.scss

@@ -0,0 +1,6 @@
+@use "vuetify/settings" with (
+  $body-font-family: var(--v-font-body, "Unimed Slab", sans-serif),
+  // Unimed Slab's ascent and descent take 1.26em, more than the subtitles' default 1rem line
+  // height, which clipped its descenders and accented capitals
+  $list-item-subtitle-line-height: normal
+);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nexdom/uimed-vue",
-  "version": "2.0.0-beta.20",
+  "version": "2.0.0-beta.21",
   "description": "A ui framework for NEXDOM applications.",
   "keywords": [
     "lib",
@@ -75,7 +75,6 @@
     "sass-embedded": "^1.103.1",
     "stryker-vue-ignorer": "github:davidlandais/stryker-vue-ignorer",
     "typescript": "^6.0.3",
-    "vite-plugin-vuetify": "^2.1.3",
     "vite-plus": "^1.0.0",
     "vitepress": "2.0.0-alpha.19",
     "vitepress-plugin-group-icons": "^1.7.6",
@@ -90,7 +89,7 @@
     "@mdi/font": "^7.4.47",
     "@nexdom/shared": "^2.1.1",
     "resize-observer-polyfill": "^1.5.1",
-    "vite-plugin-vuetify": "^2.1.3",
+    "sass-embedded": "^1.103.1",
     "vite-plus": "^1.0.0",
     "vue": "^3.5.40",
     "vue-component-type-helpers": "^3.3.11",