fix: svg asset token conversion

chakra-ui · Feb 23, 2024 · 6d8c884 · 6d8c884
1 parent 5184771
commit 6d8c884
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 5 deletions.
diff --git a/.changeset/slimy-experts-brush.md b/.changeset/slimy-experts-brush.md
@@ -0,0 +1,5 @@
+---
+'@pandacss/token-dictionary': patch
+---
+
+Fix issue where svg asset tokens doesn't work as expected due to unbalanced quotes.
diff --git a/packages/token-dictionary/__tests__/transform-asset.test.ts b/packages/token-dictionary/__tests__/transform-asset.test.ts
@@ -32,13 +32,13 @@ describe('transform / assets', () => {
             "prop": "checkbox",
           },
           "name": "assets.checkbox",
-          "originalValue": "url('data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e)'",
+          "originalValue": "url('data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e')",
           "path": [
             "assets",
             "checkbox",
           ],
           "type": "asset",
-          "value": "url('data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e)'",
+          "value": "url('data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e')",
         },
       ]
     `)
@@ -72,13 +72,13 @@ describe('transform / assets', () => {
             "prop": "checkbox",
           },
           "name": "assets.checkbox",
-          "originalValue": "url('data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e)'",
+          "originalValue": "url('data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e')",
           "path": [
             "assets",
             "checkbox",
           ],
           "type": "asset",
-          "value": "url('data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e)'",
+          "value": "url('data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e')",
         },
       ]
     `)

diff --git a/packages/token-dictionary/src/transform.ts b/packages/token-dictionary/src/transform.ts
@@ -123,7 +123,7 @@ export const transformAssets: TokenTransformer = {
     return match(raw)
       .with(P.string, (value) => value)
       .with({ type: 'url' }, ({ value }) => `url('${value}')`)
-      .with({ type: 'svg' }, ({ value }) => `url('${svgToDataUri(value)})'`)
+      .with({ type: 'svg' }, ({ value }) => `url('${svgToDataUri(value)}')`)
       .exhaustive()
   },
 }