fix: composite border token reference

chakra-ui · Oct 26, 2024 · 144113f · 144113f
1 parent 50fc8ef
commit 144113f
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 2 deletions.
diff --git a/.changeset/light-rings-worry.md b/.changeset/light-rings-worry.md
@@ -0,0 +1,5 @@
+---
+'@pandacss/token-dictionary': patch
+---
+
+Fix issue where token reference in composite border token generates incorrect css.
diff --git a/packages/token-dictionary/__tests__/transform-border.test.ts b/packages/token-dictionary/__tests__/transform-border.test.ts
@@ -8,11 +8,15 @@ test('transform / border', () => {
       colors: {
         red: { value: '#ff0000' },
       },
+      borderWidths: {
+        thick: { value: '2px' },
+      },
       borders: {
         sm: { value: '1px solid {colors.red}' },
         md: { value: { width: 2, style: 'solid', color: '{colors.red}' } },
         lg: { value: { width: '2px', style: 'solid', color: 'pink' } },
         xl: { value: { width: '2', style: 'dashed', color: 'green' } },
+        brand: { value: { width: '{borderWidths.thick}', color: '#fff', style: 'solid' } },
       },
     },
     semanticTokens: {
@@ -53,6 +57,25 @@ test('transform / border', () => {
         "type": "color",
         "value": "#ff0000",
       },
+      Token {
+        "deprecated": undefined,
+        "description": undefined,
+        "extensions": {
+          "category": "borderWidths",
+          "condition": "base",
+          "prop": "thick",
+          "var": "--border-widths-thick",
+          "varRef": "var(--border-widths-thick)",
+        },
+        "name": "borderWidths.thick",
+        "originalValue": "2px",
+        "path": [
+          "borderWidths",
+          "thick",
+        ],
+        "type": "borderWidth",
+        "value": "2px",
+      },
       Token {
         "deprecated": undefined,
         "description": undefined,
@@ -129,6 +152,25 @@ test('transform / border', () => {
         "type": "border",
         "value": "2px dashed green",
       },
+      Token {
+        "deprecated": undefined,
+        "description": undefined,
+        "extensions": {
+          "category": "borders",
+          "condition": "base",
+          "prop": "brand",
+          "var": "--borders-brand",
+          "varRef": "var(--borders-brand)",
+        },
+        "name": "borders.brand",
+        "originalValue": "{borderWidths.thick} solid #fff",
+        "path": [
+          "borders",
+          "brand",
+        ],
+        "type": "border",
+        "value": "var(--border-widths-thick) solid #fff",
+      },
       Token {
         "deprecated": undefined,
         "description": undefined,

diff --git a/packages/token-dictionary/src/transform.ts b/packages/token-dictionary/src/transform.ts
@@ -5,10 +5,10 @@ import type { TokenTransformer } from './dictionary'
 import { isCompositeBorder, isCompositeGradient, isCompositeShadow } from './is-composite'
 import { svgToDataUri } from './mini-svg-uri'
 import type { Token } from './token'
-import { expandReferences, getReferences } from './utils'
+import { expandReferences, getReferences, hasReference } from './utils'
 
 function toUnit(v: string | number) {
-  return isCssUnit(v) ? v : `${v}px`
+  return isCssUnit(v) || hasReference(v.toString()) ? v : `${v}px`
 }
 
 /* -----------------------------------------------------------------------------