fix: empty string prefix get '-' class prefix

saneef · Apr 25, 2024 · 323afb3 · 323afb3
1 parent 85558c7
commit 323afb3
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 5 deletions.
diff --git a/lib/design-token-utils.js b/lib/design-token-utils.js
@@ -252,9 +252,10 @@ function createUtilityClasses(tokenObjects, options) {
       return tokenObjects
         .filter((t) => t.parentId === id)
         .map(({ prop, value, name }) => {
-          const selectorPrefix = prefix ?? kebabCase(id);
+          const selectorPrefix = prefix ?? id;
+          const selectorBase = kebabCase(`${selectorPrefix} ${name}`);
           return {
-            selectorBase: `${selectorPrefix}-${name}`,
+            selectorBase,
             prop: property,
             value: `var(${prop})`,
             skipViewportVariant: !responsiveVariants,

diff --git a/test/utility-classes.test.mjs b/test/utility-classes.test.mjs
@@ -16,15 +16,25 @@ test("Generate utility classes", async (t) => {
 });
 
 test("Generate with prefix", async (t) => {
-  const tokens = { color: { accent: "#ff0", dark: "#111" } };
+  const tokens = {
+    color: { accent: "#ff0", dark: "#111" },
+    textSize: {
+      "step-0": "1rem",
+      "step-1": "1.333rem",
+      "step-2": "1.776rem",
+    },
+  };
   const input = `@design-token-utils (utility-classes);`;
   const options = {
-    utilityClasses: [{ id: "color", prefix: "text", property: "color" }],
+    utilityClasses: [
+      { id: "color", property: "color", prefix: "text" },
+      { id: "textSize", property: "font-size", prefix: "" },
+    ],
   };
   const res = await run(input, { tokens, ...options });
   t.is(
     res.css,
-    `.text-accent{color:var(--color-accent)}.text-dark{color:var(--color-dark)}`,
+    `.text-accent{color:var(--color-accent)}.text-dark{color:var(--color-dark)}.step-0{font-size:var(--text-size-step-0)}.step-1{font-size:var(--text-size-step-1)}.step-2{font-size:var(--text-size-step-2)}`,
   );
 });