From 323afb359c8235a4f2c6a7dafbeef67634cd8046 Mon Sep 17 00:00:00 2001
From: Saneef Ansari <hello@saneef.com>
Date: Thu, 25 Apr 2024 18:16:37 +0530
Subject: [PATCH] fix: empty string prefix get '-' class prefix

---
 lib/design-token-utils.js     |  5 +++--
 test/utility-classes.test.mjs | 16 +++++++++++++---
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/lib/design-token-utils.js b/lib/design-token-utils.js
index 3ffbe72..44a15b5 100644
--- 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
index 918d5e4..f042308 100644
--- 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)}`,
   );
 });