fix: Tailwind border color arbitrary var (#5717)

Author: kof

apps/builder/app/shared/tailwind/tailwind.test.tsx

@@ -215,6 +215,21 @@ test("keep typed literal border color utility", async () => {
   );
 });
 
+test("keep border side typed arbitrary var color utility", async () => {
+  const fragment = await generateFragmentFromTailwind(
+    renderTemplate(
+      <ws.element
+        ws:tag="div"
+        class="p-8 border-t border-[color:var(--border-color)]"
+      ></ws.element>
+    )
+  );
+
+  expect(getBaseStyleValue(fragment, "borderTopColor")).toEqual(
+    expect.objectContaining({ type: "var", value: "border-color" })
+  );
+});
+
 test("keep inline border shorthand var color override", async () => {
   const fragment = await generateFragmentFromTailwind(
     renderTemplate(
@@ -985,3 +1000,17 @@ test("generate space with display property", async () => {
     )
   ).toBe(true);
 });
+
+test("keep typed arbitrary var border color utility", async () => {
+  const fragment = await generateFragmentFromTailwind(
+    renderTemplate(
+      <ws.element
+        ws:tag="div"
+        class="p-8 border border-[color:var(--border-color)]"
+      ></ws.element>
+    )
+  );
+  expect(getBaseStyleValue(fragment, "borderTopColor")).toEqual(
+    expect.objectContaining({ type: "var", value: "border-color" })
+  );
+});

apps/builder/app/shared/tailwind/tailwind.ts

@@ -377,10 +377,19 @@ const parseTailwindClasses = async (
       // Tailwind v4 css variable shorthand: border-(--x)
       // UnoCSS doesn't parse this alias directly, so normalize it to
       // an explicit arbitrary property utility it understands.
+      // TODO: remove workaround once fixed https://github.com/unocss/unocss/issues/5188
       if (/^border-\(--[\w-]+\)$/.test(item)) {
         const varName = item.slice("border-(".length, -1);
         return `[border-color:var(${varName})]`;
       }
+      // Tailwind v4 typed arbitrary border color: border-[color:value]
+      // UnoCSS wind4 incorrectly maps this to border-width. Rewrite to the
+      // explicit arbitrary property form so it resolves to border-color.
+      // TODO: remove workaround once fixed https://github.com/unocss/unocss/issues/5188
+      const borderColorMatch = item.match(/^border-\[color:(.+)\]$/);
+      if (borderColorMatch) {
+        return `[border-color:${borderColorMatch[1]}]`;
+      }
       // styles data cannot express space-x and space-y selectors
       // with lobotomized owl so replace with gaps
       if (item.includes("space-x-")) {

packages/css-data/bin/property-var-test-fixtures.ts

@@ -639,6 +639,28 @@ const buildPatterns = ({
   return current;
 };
 
+/**
+ * Derive a semantic CSS variable name from a slot's grammar position label.
+ * The label looks like "border:term:2:type:color:branch:0:type:hex-color".
+ * We extract the first `type:XXX` segment to build `--slot-XXX`.
+ * When multiple slots in the same pattern share the same type we append
+ * a counter suffix: `--slot-color`, `--slot-color-2`, etc.
+ * Falling back to `--slot-N` when no type can be extracted.
+ */
+const slotVarName = (
+  label: string | undefined,
+  fallbackIndex: number,
+  used: Map<string, number>
+): string => {
+  const typeMatch = label?.match(/(?:^|:)type:([^:]+)/);
+  const base = typeMatch
+    ? `--slot-${typeMatch[1]}`
+    : `--slot-${fallbackIndex + 1}`;
+  const count = (used.get(base) ?? 0) + 1;
+  used.set(base, count);
+  return count === 1 ? base : `${base}-${count}`;
+};
+
 const buildCases = ({
   patterns,
   property,
@@ -658,7 +680,12 @@ const buildCases = ({
     }
 
     for (const [slotOrder, slot] of slots.entries()) {
-      const variableName = `--slot-${slotOrder + 1}`;
+      const used = new Map<string, number>();
+      // pre-register names for earlier slots so this slot gets the right suffix
+      for (let i = 0; i < slotOrder; i++) {
+        slotVarName(slots[i].part.label, i, used);
+      }
+      const variableName = slotVarName(slot.part.label, slotOrder, used);
       const parts = pattern.parts.map((part, index) => {
         if (index !== slot.index || part.kind !== "slot") {
           return part;
@@ -685,12 +712,13 @@ const buildCases = ({
     }
 
     const variables: Record<string, string> = {};
+    const allUsed = new Map<string, number>();
     const parts = pattern.parts.map((part, index) => {
       const slotOrder = slots.findIndex((slot) => slot.index === index);
       if (slotOrder === -1 || part.kind !== "slot") {
         return part;
       }
-      const variableName = `--slot-${slotOrder + 1}`;
+      const variableName = slotVarName(part.label, slotOrder, allUsed);
       variables[variableName] = part.text;
       return {
         kind: "text" as const,