vueless 1.5.1-beta.4 → 1.5.1-beta.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.5.1-beta.4",
+  "version": "1.5.1-beta.6",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",
@@ -35,7 +35,7 @@
     "@tailwindcss/postcss": "^4.2.4",
     "@tailwindcss/vite": "^4.2.4",
     "@types/lodash-es": "^4.17.12",
-    "cva": "^1.0.0-beta.4",
+    "cva": "1.0.0-beta.10",
     "lodash-es": "^4.18.1",
     "rolldown": "^1.1.5",
     "svgo": "^4.0.1",

package/utils/node/vuelessConfig.d.ts

@@ -1,6 +1,6 @@
 export function getVuelessConfig(basePath?: string): Promise<Object>;
 export let vuelessConfig: {};
-export const cx: import("cva").CX;
+export const cx: import("cva").CX<import("cva").ClassValue>;
 export const getMergedConfig: ({ defaultConfig, globalConfig, propsConfig, unstyled }: {
     defaultConfig: any;
     globalConfig: any;

package/utils/node/vuelessConfig.js

@@ -2,7 +2,8 @@ import fs from "node:fs";
 import path from "node:path";
 import { cwd } from "node:process";
 import { pathToFileURL } from "node:url";
-import { defineConfig } from "cva";
+import { cx as cvaCx } from "cva";
+import { defineConfig } from "cva/config";
 import { merge } from "lodash-es";
 import { extendTailwindMerge } from "tailwind-merge";
 
@@ -57,6 +58,7 @@ const twMerge = extendTailwindMerge(
  * – remove all Vueless nested component names ({U...} strings) from the class list string.
  */
 export const { cx } = defineConfig({
+  cx: cvaCx,
   hooks: {
     onComplete: (classNames) => twMerge(classNames).replace(NESTED_COMPONENT_PATTERN_REG_EXP, ""),
   },

package/utils/tests/ui.test.ts

@@ -0,0 +1,48 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+
+import { COLOR_MODE_KEY } from "../../constants.js";
+import { loadSSRVuelessConfig, setVuelessConfig, vuelessConfig } from "../ui";
+
+import type { Config } from "../../types";
+
+/* jsdom doesn't implement matchMedia, which theme.ts evaluates on import. */
+const prefersDark = { matches: false, addEventListener: vi.fn(), removeEventListener: vi.fn() };
+
+window.matchMedia = vi.fn(() => prefersDark) as unknown as typeof window.matchMedia;
+
+const { getThemeCookieName } = await import("../theme");
+
+beforeEach(() => {
+  Object.keys(vuelessConfig).forEach((key) => delete vuelessConfig[key as keyof Config]);
+});
+
+describe("loadSSRVuelessConfig", () => {
+  it.each([
+    ["resolves", () => ({ cookiePrefix: "from-file" })],
+    [
+      "fails",
+      () => {
+        throw new Error("Cannot find module '/vueless.config'");
+      },
+    ],
+  ])("keeps the injected config when a deferred import %s", async (_, settle: () => Config) => {
+    let release!: () => void;
+    const released = new Promise<void>((resolve) => (release = resolve));
+
+    const loading = loadSSRVuelessConfig(() => released.then(() => ({ default: settle() })));
+
+    setVuelessConfig({ cookiePrefix: "app-a" });
+    expect(getThemeCookieName(COLOR_MODE_KEY)).toBe(`app-a-${COLOR_MODE_KEY}`);
+
+    release();
+    await loading;
+
+    expect(getThemeCookieName(COLOR_MODE_KEY)).toBe(`app-a-${COLOR_MODE_KEY}`);
+  });
+
+  it("uses the imported config when none was injected", async () => {
+    await loadSSRVuelessConfig(async () => ({ default: { cookiePrefix: "from-file" } }));
+
+    expect(getThemeCookieName(COLOR_MODE_KEY)).toBe(`from-file-${COLOR_MODE_KEY}`);
+  });
+});

package/utils/ui.ts

@@ -1,5 +1,6 @@
 import { merge } from "lodash-es";
-import { defineConfig } from "cva";
+import { cx as cvaCx } from "cva";
+import { defineConfig } from "cva/config";
 import { extendTailwindMerge } from "tailwind-merge";
 
 import { isCSR, isSSR } from "./helper";
@@ -7,6 +8,7 @@ import { createGetMergedConfig } from "./node/mergeConfigs";
 import { COMPONENT_NAME as U_ICON } from "../ui.image-icon/constants";
 import { ICON_NON_PROPS_DEFAULTS, TAILWIND_MERGE_EXTENSION } from "../constants";
 
+import type { CVAVariantShape } from "cva";
 import type {
   Config,
   UnknownObject,
@@ -46,17 +48,22 @@ if (isCSR) {
     )[0] || {};
 }
 
-if (isSSR) {
-  (async () => {
-    try {
-      // @ts-expect-error: vueless.config.{js,ts} is optional
-      vuelessConfig = (await import(/* @vite-ignore */ "/vueless.config")).default;
-    } catch {
-      vuelessConfig = {};
-    }
-  })();
+/** Load Vueless config on the server; a config injected via `createVueless` meanwhile wins. */
+export async function loadSSRVuelessConfig(
+  // @ts-expect-error: vueless.config.{js,ts} is optional
+  importConfig = () => import(/* @vite-ignore */ "/vueless.config"),
+) {
+  try {
+    const { default: config } = await importConfig();
+
+    if (!Object.keys(vuelessConfig).length) vuelessConfig = config;
+  } catch {
+    /* No config file: keep the current config. */
+  }
 }
 
+if (isSSR) loadSSRVuelessConfig();
+
 /**
  * Extend twMerge (tailwind merge) by vueless and user config:
  */
@@ -75,6 +82,7 @@ export const {
   compose,
   cva: classVarianceAuthority,
 } = defineConfig({
+  cx: cvaCx,
   hooks: {
     onComplete: (classNames) => twMerge(classNames),
   },
@@ -83,7 +91,12 @@ export const {
 export const getMergedConfig = createGetMergedConfig(cx) as GetMergedConfig;
 
 /* This allows skipping some CVA config keys in vueless config. */
-export const cva = ({ base = "", variants = {}, compoundVariants = [], defaultVariants = {} }) =>
+export const cva = ({
+  base = "",
+  variants = {} as CVAVariantShape,
+  compoundVariants = [],
+  defaultVariants = {},
+}) =>
   classVarianceAuthority({
     base,
     variants,