vueless 1.5.1-beta.3 → 1.5.1-beta.4

package/index.d.ts

@@ -27,7 +27,15 @@ export {
 } from "./utils/ui";
 export { addToRequestQueue, removeFromRequestQueue } from "./utils/requestQueue";
 export { isMac, isPWA, isIOS, isAndroid, isMobileApp, isWindows } from "./utils/platform";
-export { getTheme, setTheme, resetTheme, normalizeThemeConfig, cssVar, setRootCSSVariables } from "./utils/theme";
+export {
+  getTheme,
+  setTheme,
+  resetTheme,
+  getThemeCookieName,
+  normalizeThemeConfig,
+  cssVar,
+  setRootCSSVariables,
+} from "./utils/theme";
 export { getArgs, getArgTypes, getSlotNames, getSlotsFragment, getSource, getDocsDescription } from "./utils/storybook";
 /* adapters */
 export { default as defaultEnLocale } from "./adapter.locale/locales/en";

package/index.ts

@@ -33,7 +33,15 @@ export {
 } from "./utils/ui";
 export { addToRequestQueue, removeFromRequestQueue } from "./utils/requestQueue";
 export { isMac, isPWA, isIOS, isAndroid, isMobileApp, isWindows } from "./utils/platform";
-export { getTheme, setTheme, resetTheme, normalizeThemeConfig, cssVar, setRootCSSVariables } from "./utils/theme";
+export {
+  getTheme,
+  setTheme,
+  resetTheme,
+  getThemeCookieName,
+  normalizeThemeConfig,
+  cssVar,
+  setRootCSSVariables,
+} from "./utils/theme";
 export { getArgs, getArgTypes, getSlotNames, getSlotsFragment, getSource, getDocsDescription } from "./utils/storybook";
 /* adapters */
 export { default as defaultEnLocale } from "./adapter.locale/locales/en";

package/modules.d.ts

@@ -33,3 +33,4 @@ declare module "virtual:vueless/vue-i18n" {
 }
 
 declare const __VUELESS_DEV__: boolean;
+declare const __VUELESS_APP_NAME__: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.5.1-beta.3",
+  "version": "1.5.1-beta.4",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",

package/plugin-vite.js

@@ -24,6 +24,7 @@ import { overrideComponents, restoreComponents } from "./utils/node/componentOve
 import {
   getNuxtDirs,
   getVueDirs,
+  getAppName,
   getVuelessAppDirs,
   cacheMergedConfigs,
   autoImportUserConfigs,
@@ -74,6 +75,9 @@ export const Vueless = function (options = {}) {
 
   const vuelessSrcDir = isInternalEnv ? VUELESS_LOCAL_DIR : VUELESS_PACKAGE_DIR;
 
+  /* app name for theme cookie prefixing */
+  const appName = getAppName();
+
   // Cache to store previous icon content for change detection
   const iconContentCache = new Map();
 
@@ -109,6 +113,7 @@ export const Vueless = function (options = {}) {
       define: {
         "process.env": {},
         __VUELESS_DEV__: process.argv.includes("--watch") || process.argv.includes("-w"),
+        __VUELESS_APP_NAME__: JSON.stringify(appName),
       },
       optimizeDeps: {
         include: isInternalEnv

package/types.ts

@@ -183,6 +183,11 @@ export interface Config extends ThemeConfig {
    */
   directives?: Partial<Directives>;
 
+  /**
+   * Theme cookie name prefix (defaults to the app `package.json` name, `""` disables prefixing).
+   */
+  cookiePrefix?: string;
+
   /**
    * Tailwind CSS theme config.
    * https://tailwindcss.com/docs/theme

package/utils/node/helper.d.ts

@@ -13,6 +13,7 @@ export function cacheMergedConfigs({ vuelessSrcDir, basePath }?: {
 }): Promise<void>;
 export function buildTSFile(entryPath: string, configOutFile: string): Promise<void>;
 export function removeFolderIfEmpty(dirPath: string): Promise<void>;
+export function getAppName(): string;
 export function detectTypeScript(): Promise<boolean>;
 export function autoImportUserConfigs(basePath?: string): Promise<void>;
 export function generateConfigIndexContent(imports?: string[], componentEntries?: string[]): Promise<string>;

package/utils/node/helper.js

@@ -2,7 +2,7 @@ import { build as rolldownBuild } from "rolldown";
 import path from "node:path";
 import { cwd } from "node:process";
 import { pathToFileURL } from "node:url";
-import { existsSync, statSync } from "node:fs";
+import { existsSync, statSync, readFileSync } from "node:fs";
 import { mkdir, readdir, rmdir, readFile, writeFile } from "node:fs/promises";
 
 import { getMergedConfig, getVuelessConfig } from "./vuelessConfig.js";
@@ -226,6 +226,18 @@ export async function removeFolderIfEmpty(dirPath) {
   }
 }
 
+/**
+ * Reads the app name from the project's package.json (used to prefix theme cookies).
+ * @returns {string} The package name, or an empty string if unavailable.
+ */
+export function getAppName() {
+  try {
+    return JSON.parse(readFileSync(path.join(cwd(), "package.json"), "utf-8")).name || "";
+  } catch {
+    return "";
+  }
+}
+
 /**
  * Detects if TypeScript is a dependency in the project's package.json
  * @returns {Promise<boolean>} True if TypeScript is found in dependencies or devDependencies

package/utils/tests/theme.test.ts

@@ -0,0 +1,124 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+
+import { AUTO_MODE_KEY, COLOR_MODE_KEY } from "../../constants.js";
+import { ColorMode } from "../../types";
+import type { Config } from "../../types";
+
+const mockVuelessConfig: Config = {};
+
+vi.mock("../ui", () => ({ vuelessConfig: mockVuelessConfig }));
+
+/* 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 { getTheme, getThemeCookieName, resetTheme } = await import("../theme");
+
+function setConfig(config: Config) {
+  Object.keys(mockVuelessConfig).forEach((key) => delete mockVuelessConfig[key as keyof Config]);
+  Object.assign(mockVuelessConfig, config);
+}
+
+function clearCookies() {
+  document.cookie.split("; ").forEach((cookie) => {
+    const name = cookie.split("=")[0];
+
+    if (name) document.cookie = `${name}=; max-age=-1; path=/`;
+  });
+}
+
+beforeEach(() => {
+  localStorage.clear();
+  clearCookies();
+  setConfig({});
+});
+
+describe("getThemeCookieName", () => {
+  it("prefixes a key with the app name from package.json", () => {
+    expect(getThemeCookieName(COLOR_MODE_KEY)).toBe(`vueless-${COLOR_MODE_KEY}`);
+  });
+
+  it("makes the prefix cookie-safe", () => {
+    setConfig({ cookiePrefix: "@acme/Back_Office!" });
+
+    expect(getThemeCookieName(COLOR_MODE_KEY)).toBe(`acme-back_office-${COLOR_MODE_KEY}`);
+  });
+
+  it("lets cookiePrefix override the app name", () => {
+    setConfig({ cookiePrefix: "app-a" });
+
+    expect(getThemeCookieName(COLOR_MODE_KEY)).toBe(`app-a-${COLOR_MODE_KEY}`);
+  });
+
+  it("returns the legacy name when cookiePrefix is an empty string", () => {
+    setConfig({ cookiePrefix: "" });
+
+    expect(getThemeCookieName(COLOR_MODE_KEY)).toBe(COLOR_MODE_KEY);
+  });
+});
+
+describe("theme value storage", () => {
+  it("writes the cookie prefixed and the localStorage key raw", () => {
+    setConfig({ cookiePrefix: "app-a" });
+
+    getTheme({ colorMode: ColorMode.Dark });
+
+    expect(localStorage.getItem(COLOR_MODE_KEY)).toBe(ColorMode.Dark);
+    expect(document.cookie).toContain(`app-a-${COLOR_MODE_KEY}=${ColorMode.Dark}`);
+    expect(document.cookie.split("; ")).not.toContain(`${COLOR_MODE_KEY}=${ColorMode.Dark}`);
+  });
+
+  it("deletes the prefixed cookies on resetTheme", () => {
+    setConfig({ cookiePrefix: "app-a" });
+
+    getTheme({ colorMode: ColorMode.Dark });
+    resetTheme();
+
+    expect(localStorage.getItem(COLOR_MODE_KEY)).toBeNull();
+    expect(document.cookie).not.toContain(`app-a-${COLOR_MODE_KEY}=${ColorMode.Dark}`);
+  });
+});
+
+describe("CSR color mode precedence", () => {
+  it("prefers the explicit mode over everything else", () => {
+    localStorage.setItem(COLOR_MODE_KEY, ColorMode.Light);
+    setConfig({ colorMode: ColorMode.Light });
+
+    expect(getTheme({ colorMode: ColorMode.Dark }).colorMode).toBe(ColorMode.Dark);
+  });
+
+  it("falls back to localStorage when no mode is passed", () => {
+    localStorage.setItem(COLOR_MODE_KEY, ColorMode.Dark);
+    setConfig({ colorMode: ColorMode.Light });
+
+    expect(getTheme().colorMode).toBe(ColorMode.Dark);
+  });
+
+  it("ignores cookies when localStorage is empty", () => {
+    document.cookie = `${COLOR_MODE_KEY}=${ColorMode.Dark}; path=/`;
+    document.cookie = `vueless-${COLOR_MODE_KEY}=${ColorMode.Dark}; path=/`;
+    setConfig({ colorMode: ColorMode.Light });
+
+    expect(getTheme().colorMode).toBe(ColorMode.Light);
+  });
+
+  it("falls back to vuelessConfig.colorMode", () => {
+    setConfig({ colorMode: ColorMode.Dark });
+
+    expect(getTheme().colorMode).toBe(ColorMode.Dark);
+  });
+
+  it("falls back to light when nothing is set", () => {
+    expect(getTheme().colorMode).toBe(ColorMode.Light);
+  });
+});
+
+describe("auto color mode", () => {
+  it("reports auto mode from the cached localStorage flag", () => {
+    localStorage.setItem(AUTO_MODE_KEY, "1");
+    localStorage.setItem(COLOR_MODE_KEY, ColorMode.Dark);
+
+    expect(getTheme().isColorModeAuto).toBe(true);
+  });
+});

package/utils/theme.ts

@@ -1,7 +1,7 @@
 import { cloneDeep, merge } from "lodash-es";
 
 import { vuelessConfig } from "./ui";
-import { isCSR, getStored, getCookie, setCookie, deleteCookie, toNumber } from "./helper";
+import { isCSR, getStored, setCookie, deleteCookie, toNumber } from "./helper";
 
 import {
   PX_IN_REM,
@@ -63,14 +63,33 @@ declare interface SetColorMode {
 /* Creates a media query that checks if the user's system color scheme is set to the dark. */
 const prefersColorSchemeDark = isCSR && window.matchMedia("(prefers-color-scheme: dark)");
 
+/* Prefixes theme cookie names, so apps sharing a host (cookies ignore the port) don't collide. */
+export function getThemeCookieName(key: string) {
+  const appName = typeof __VUELESS_APP_NAME__ === "undefined" ? "" : __VUELESS_APP_NAME__;
+  const prefix = (vuelessConfig.cookiePrefix ?? appName)
+    .toLowerCase()
+    .replace(/[^a-z0-9_-]/g, "-")
+    .replace(/^-+|-+$/g, "");
+
+  return prefix ? `${prefix}-${key}` : key;
+}
+
+/* Saves a theme value under the raw key in local storage (client) and the prefixed cookie (SSR). */
+function storeThemeValue(key: string, value: string) {
+  if (!isCSR) return;
+
+  localStorage.setItem(key, value);
+  setCookie(getThemeCookieName(key), value);
+}
+
 function toggleColorModeClass() {
   if (!prefersColorSchemeDark) return;
 
   const isDarkMode = prefersColorSchemeDark.matches;
   const colorMode = isDarkMode ? ColorMode.Dark : ColorMode.Light;
 
-  setCookie(COLOR_MODE_KEY, colorMode);
-  setCookie(AUTO_MODE_KEY, String(Number(true)));
+  storeThemeValue(COLOR_MODE_KEY, colorMode);
+  storeThemeValue(AUTO_MODE_KEY, String(Number(true)));
 
   document.documentElement.classList.toggle(DARK_MODE_CLASS, isDarkMode);
   document.documentElement.classList.toggle(LIGHT_MODE_CLASS, !isDarkMode);
@@ -90,8 +109,9 @@ function toggleColorModeClass() {
  * - `isColorModeAuto` {boolean}: Indicates whether the color mode is set to auto.
  */
 function setCSRColorMode(mode: `${ColorMode}`): SetColorMode {
-  const colorMode = mode || getCookie(COLOR_MODE_KEY) || vuelessConfig.colorMode || ColorMode.Light;
-  const isCachedAutoMode = !!Number(getCookie(AUTO_MODE_KEY) ?? 0);
+  const colorMode = mode || getStored(COLOR_MODE_KEY) || vuelessConfig.colorMode || ColorMode.Light;
+  const storedAutoMode = getStored(AUTO_MODE_KEY);
+  const isCachedAutoMode = !!Number(storedAutoMode ?? 0);
 
   const isAutoMode = colorMode === ColorMode.Auto;
   const isSystemDarkMode = isAutoMode && prefersColorSchemeDark && prefersColorSchemeDark?.matches;
@@ -114,17 +134,15 @@ function setCSRColorMode(mode: `${ColorMode}`): SetColorMode {
   /* Dispatching custom event for the useDarkMode composable. */
   window.dispatchEvent(new CustomEvent("darkModeChange", { detail: isDarkMode }));
 
-  /* Saving color mode value into cookies (server) and local storage (client). */
   let currentColorMode = colorMode;
 
   if (isAutoMode) {
     currentColorMode = isDarkMode ? ColorMode.Dark : ColorMode.Light;
   }
 
-  /* Define color mode cookies to be used in both CSR and SSR */
-  if (mode || getCookie(AUTO_MODE_KEY) === undefined) {
-    setCookie(COLOR_MODE_KEY, currentColorMode);
-    setCookie(AUTO_MODE_KEY, String(Number(isAutoMode)));
+  if (mode || storedAutoMode === undefined) {
+    storeThemeValue(COLOR_MODE_KEY, currentColorMode);
+    storeThemeValue(AUTO_MODE_KEY, String(Number(isAutoMode)));
 
     if (mode !== ColorMode.Auto && prefersColorSchemeDark) {
       prefersColorSchemeDark.removeEventListener("change", toggleColorModeClass);
@@ -196,7 +214,7 @@ export function resetTheme() {
 
   themeKeys.forEach((key) => {
     localStorage.removeItem(key);
-    deleteCookie(key);
+    deleteCookie(getThemeCookieName(key));
   });
 }
 
@@ -436,8 +454,7 @@ function getPrimaryColor(primary?: PrimaryColors) {
     validateColorShades(primaryColor, PRIMARY_COLOR);
 
     if (isCSR && primary) {
-      setCookie(storageKey, JSON.stringify(primaryColor));
-      localStorage.setItem(storageKey, JSON.stringify(primaryColor));
+      storeThemeValue(storageKey, JSON.stringify(primaryColor));
     }
 
     return primaryColor;
@@ -454,8 +471,7 @@ function getPrimaryColor(primary?: PrimaryColors) {
   }
 
   if (isCSR && primary) {
-    setCookie(storageKey, String(primaryColor));
-    localStorage.setItem(storageKey, String(primaryColor));
+    storeThemeValue(storageKey, String(primaryColor));
   }
 
   return primaryColor;
@@ -486,8 +502,7 @@ function getNeutralColor(neutral?: NeutralColors) {
     validateColorShades(neutralColor, NEUTRAL_COLOR);
 
     if (isCSR && neutral) {
-      setCookie(storageKey, JSON.stringify(neutralColor));
-      localStorage.setItem(storageKey, JSON.stringify(neutralColor));
+      storeThemeValue(storageKey, JSON.stringify(neutralColor));
     }
 
     return neutralColor;
@@ -503,8 +518,7 @@ function getNeutralColor(neutral?: NeutralColors) {
   }
 
   if (isCSR && neutral) {
-    setCookie(storageKey, String(neutralColor));
-    localStorage.setItem(storageKey, String(neutralColor));
+    storeThemeValue(storageKey, String(neutralColor));
   }
 
   return neutralColor;
@@ -553,15 +567,10 @@ function getText(text?: ThemeConfig["text"]) {
   /* eslint-enable prettier/prettier,vue/max-len */
 
   if (isCSR && text !== undefined) {
-    setCookie(storageKey.xs, String(mergedText.xs));
-    setCookie(storageKey.sm, String(mergedText.sm));
-    setCookie(storageKey.md, String(mergedText.md));
-    setCookie(storageKey.lg, String(mergedText.lg));
-
-    localStorage.setItem(storageKey.xs, String(mergedText.xs));
-    localStorage.setItem(storageKey.sm, String(mergedText.sm));
-    localStorage.setItem(storageKey.md, String(mergedText.md));
-    localStorage.setItem(storageKey.lg, String(mergedText.lg));
+    storeThemeValue(storageKey.xs, String(mergedText.xs));
+    storeThemeValue(storageKey.sm, String(mergedText.sm));
+    storeThemeValue(storageKey.md, String(mergedText.md));
+    storeThemeValue(storageKey.lg, String(mergedText.lg));
   }
 
   return mergedText;
@@ -609,13 +618,9 @@ function getOutlines(outline?: ThemeConfig["outline"]) {
   /* eslint-enable prettier/prettier,vue/max-len */
 
   if (isCSR && outline !== undefined) {
-    setCookie(storageKey.sm, String(mergedOutline.sm));
-    setCookie(storageKey.md, String(mergedOutline.md));
-    setCookie(storageKey.lg, String(mergedOutline.lg));
-
-    localStorage.setItem(storageKey.sm, String(mergedOutline.sm));
-    localStorage.setItem(storageKey.md, String(mergedOutline.md));
-    localStorage.setItem(storageKey.lg, String(mergedOutline.lg));
+    storeThemeValue(storageKey.sm, String(mergedOutline.sm));
+    storeThemeValue(storageKey.md, String(mergedOutline.md));
+    storeThemeValue(storageKey.lg, String(mergedOutline.lg));
   }
 
   return mergedOutline;
@@ -672,13 +677,9 @@ function getRoundings(rounding?: ThemeConfig["rounding"]) {
   /* eslint-enable prettier/prettier,vue/max-len */
 
   if (isCSR && rounding !== undefined) {
-    setCookie(storageKey.sm, String(mergedRounding.sm));
-    setCookie(storageKey.md, String(mergedRounding.md));
-    setCookie(storageKey.lg, String(mergedRounding.lg));
-
-    localStorage.setItem(storageKey.sm, String(mergedRounding.sm));
-    localStorage.setItem(storageKey.md, String(mergedRounding.md));
-    localStorage.setItem(storageKey.lg, String(mergedRounding.lg));
+    storeThemeValue(storageKey.sm, String(mergedRounding.sm));
+    storeThemeValue(storageKey.md, String(mergedRounding.md));
+    storeThemeValue(storageKey.lg, String(mergedRounding.lg));
   }
 
   return mergedRounding;
@@ -695,8 +696,7 @@ function getSpacing(spacing?: ThemeConfig["spacing"]) {
   const mergedSpacing = Number(storedSpacing ?? DEFAULT_SPACING);
 
   if (isCSR && spacing !== undefined) {
-    setCookie(storageKey, String(mergedSpacing));
-    localStorage.setItem(storageKey, String(mergedSpacing));
+    storeThemeValue(storageKey, String(mergedSpacing));
   }
 
   return mergedSpacing;
@@ -713,8 +713,7 @@ function getLetterSpacing(letterSpacing?: ThemeConfig["letterSpacing"]) {
   const mergedSpacing = Number(spacing ?? DEFAULT_LETTER_SPACING);
 
   if (isCSR && letterSpacing !== undefined) {
-    setCookie(storageKey, String(mergedSpacing));
-    localStorage.setItem(storageKey, String(mergedSpacing));
+    storeThemeValue(storageKey, String(mergedSpacing));
   }
 
   return mergedSpacing;
@@ -731,8 +730,7 @@ function getDisabledOpacity(disabledOpacity?: ThemeConfig["disabledOpacity"]) {
   const mergedOpacity = Math.max(0, Number(opacity ?? DEFAULT_DISABLED_OPACITY));
 
   if (isCSR && disabledOpacity !== undefined) {
-    setCookie(storageKey, String(mergedOpacity));
-    localStorage.setItem(storageKey, String(mergedOpacity));
+    storeThemeValue(storageKey, String(mergedOpacity));
   }
 
   return mergedOpacity;