feat: allow nesting string token ref / fix CSS var in string token re…

…f fallback (#2615) * test: add failing test * feat: nested token references in fallback / fix CSS var in token ref fallback
chakra-ui · May 21, 2024 · 8b07cdf · 8b07cdf
1 parent 1f636eb
commit 8b07cdf
Show file tree

Hide file tree

Showing 8 changed files with 576 additions and 91 deletions.
diff --git a/.changeset/unlucky-humans-own.md b/.changeset/unlucky-humans-own.md
@@ -0,0 +1,7 @@
+---
+"@pandacss/token-dictionary": patch
+"@pandacss/parser": patch
+"@pandacss/core": patch
+---
+
+Allow nesting (string) token references in the fallback argument, fix an issue where using CSS var in the fallback argument would be mistakenly escaped
diff --git a/packages/core/__tests__/serialize.test.ts b/packages/core/__tests__/serialize.test.ts
@@ -202,22 +202,21 @@ describe('serialize - with token()', () => {
     `)
   })
 
-  // TODO: This is not supported yet
-  // test.skip('with nested fallback reference', () => {
-  //   const result = css({
-  //     html: {
-  //       color: 'red',
-  //       border: '2px solid token(colors.red.300, token(colors.blue.300, colors.green.300))',
-  //     },
-  //   })
-
-  //   expect(result).toMatchInlineSnapshot(`
-  //     {
-  //       "html": {
-  //         "border": "2px solid var(--colors-red-300, var(--colors-blue-300, var(--colors-green-300)))",
-  //         "color": "red",
-  //       },
-  //     }
-  //   `)
-  // })
+  test('with nested fallback reference', () => {
+    const result = css({
+      html: {
+        color: 'red',
+        border: '2px solid token(colors.red.300, token(colors.blue.300, colors.green.300))',
+      },
+    })
+
+    expect(result).toMatchInlineSnapshot(`
+      {
+        "html": {
+          "border": "2px solid var(--colors-red-300, var(--colors-blue-300, var(--colors-green-300)))",
+          "color": "red",
+        },
+      }
+    `)
+  })
 })
diff --git a/packages/core/__tests__/static-css.test.ts b/packages/core/__tests__/static-css.test.ts
@@ -890,11 +890,11 @@ describe('static-css', () => {
       }
 
         .\\--bleed-x_token\\(spacing\\.20\\,_20\\) {
-          --bleed-x: var(--spacing-20, \\320);
+          --bleed-x: var(--spacing-20, 20);
       }
 
         .\\--bleed-y_token\\(spacing\\.0\\,_0\\) {
-          --bleed-y: var(spacing\\.0, \\30);
+          --bleed-y: 0;
       }
 
         .mx_calc\\(var\\(--bleed-x\\,_0\\)_\\*_-1\\) {
@@ -906,27 +906,27 @@ describe('static-css', () => {
       }
 
         .\\--bleed-x_token\\(spacing\\.40\\,_40\\) {
-          --bleed-x: var(--spacing-40, \\340);
+          --bleed-x: var(--spacing-40, 40);
       }
 
         .\\--bleed-x_token\\(spacing\\.60\\,_60\\) {
-          --bleed-x: var(--spacing-60, \\360);
+          --bleed-x: var(--spacing-60, 60);
       }
 
         .\\--bleed-x_token\\(spacing\\.auto\\,_auto\\) {
-          --bleed-x: var(spacing\\.auto, auto);
+          --bleed-x: auto;
       }
 
         .\\--bleed-x_token\\(spacing\\.-20\\,_-20\\) {
-          --bleed-x: calc(var(--spacing-20) * -1, -\\320);
+          --bleed-x: calc(var(--spacing-20) * -1, -20);
       }
 
         .\\--bleed-x_token\\(spacing\\.-40\\,_-40\\) {
-          --bleed-x: calc(var(--spacing-40) * -1, -\\340);
+          --bleed-x: calc(var(--spacing-40) * -1, -40);
       }
 
         .\\--bleed-x_token\\(spacing\\.-60\\,_-60\\) {
-          --bleed-x: calc(var(--spacing-60) * -1, -\\360);
+          --bleed-x: calc(var(--spacing-60) * -1, -60);
       }
 
         .\\--thickness_1px {

diff --git a/packages/parser/__tests__/output.test.ts b/packages/parser/__tests__/output.test.ts
@@ -2794,7 +2794,7 @@ describe('extract to css output pipeline', () => {
       }
 
         .grid-cols_repeat\\(auto-fit\\,_minmax\\(token\\(sizes\\.20\\,_20\\)\\,_1fr\\)\\) {
-          grid-template-columns: repeat(auto-fit, minmax(var(--sizes-20, \\320), 1fr));
+          grid-template-columns: repeat(auto-fit, minmax(var(--sizes-20, 20), 1fr));
       }
       }"
     `)