feat: cssVarName support string template

unocss-community · Oct 25, 2023 · 3e586e3 · 3e586e3
1 parent 67ba71a
commit 3e586e3
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 11 deletions.
diff --git a/src/index.ts b/src/index.ts
@@ -1,7 +1,7 @@
 import { definePreset } from "@unocss/core";
 import type { Theme } from "@unocss/preset-mini";
 import type { CssVarName, PaletteOptions } from "./types";
-import { getColorComponents } from "./utils";
+import { getColorComponents, normalizeVarName } from "./utils";
 
 
 
@@ -17,21 +17,22 @@ export const presetPalette = definePreset((options: PaletteOptions = {}) => {
 
   const { selector = ":root", attribute = "class", defaultValue = "default" } = colorMode;
 
-  const cssVarName: CssVarName = options.cssVarName || ((name) => `un-platte-${name}-color`);
+  const cssVarName: CssVarName = options.cssVarName || "un-platte-[name]-color";
 
   const colorComponents = getColorComponents(themeColors, defaultValue, colorFormat);
 
   let getVarName: (name: string) => string;
 
-  if (typeof cssVarName === "function") {
-    getVarName = name => `--${cssVarName(name)}`;
+  if (typeof cssVarName === "string") {
+    getVarName = name => normalizeVarName(cssVarName.replace(/\[name]/g, name));
+  } else if (typeof cssVarName === "function") {
+    getVarName = name => normalizeVarName(cssVarName(name));
   } else {
-    const prefix = options.cssVarName?.prefix ?? "un-platte-";
-    const suffix = options.cssVarName?.suffix ?? "-color";
-    getVarName = name => `--${prefix}${name}${suffix}`;
+    const prefix = cssVarName?.prefix ?? "un-platte-";
+    const suffix = cssVarName?.suffix ?? "-color";
+    getVarName = name => normalizeVarName(`${prefix}${name}${suffix}`);
   }
 
-
   const colors = Object.fromEntries(Object.keys(themeColors).map(e => {
     const colorValue = `${colorFormat}(var(${getVarName(e)}-${colorFormat}))`;
     return [e, colorValue];

diff --git a/src/types.ts b/src/types.ts
@@ -4,11 +4,12 @@ export interface CSSProperties extends CSS.Properties<string | number>, CSS.Prop
 }
 export type ThemeColors = Record<string, string | (string | number)[] | Record<string, string | (string | number)[]>>;
 
-export interface CssVarName {
+export type CssVarName = string | {
   (name: string): string
+} | {
   prefix?: string
   suffix?: string
-}
+};
 
 export interface PaletteOptions {
 

diff --git a/src/utils.ts b/src/utils.ts
@@ -85,3 +85,8 @@ export function getColorComponents(colors: ThemeColors = {}, defaultTheme: strin
   }
   return rs;
 }
+
+
+export function normalizeVarName(varName: string) {
+  return `--${varName}`.replace(/^-+/, "--");
+}
diff --git a/test/utils.test.ts b/test/utils.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from "vitest";
-import { getColorComponents, rgb2hsl } from "../src/utils";
+import { getColorComponents, normalizeVarName, rgb2hsl } from "../src/utils";
 
 
 describe("utils test", () => {
@@ -13,4 +13,9 @@ describe("utils test", () => {
     }, "light", "hsl");
     expect(components.light.primary).toEqual("0 100% 50%");
   });
+
+  it("normalizeVarName", () => {
+    expect(normalizeVarName("un-platte-primary-color")).toEqual("--un-platte-primary-color");
+    expect(normalizeVarName("--un-platte-primary-color")).toEqual("--un-platte-primary-color");
+  });
 });