From 31071ba16dfc46e4bbd13f3491d0ae8691a87b2e Mon Sep 17 00:00:00 2001
From: Alexandre Stahmer <47224540+astahmer@users.noreply.github.com>
Date: Fri, 23 Feb 2024 23:42:06 +0100
Subject: [PATCH] =?UTF-8?q?fix:=20parsing=20values=20of=20tokens=20that=20?=
 =?UTF-8?q?look=20like=20numbers=20but=20arent=20(start=E2=80=A6=20(#2245)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

fix: parsing values of tokens that look like numbers but arent (starts with 0)
---
 .changeset/funny-plants-shave.md         | 31 ++++++++++++++++++
 packages/core/src/style-decoder.ts       |  7 +++++
 packages/parser/__tests__/output.test.ts | 40 ++++++++++++++++++++++++
 3 files changed, 78 insertions(+)
 create mode 100644 .changeset/funny-plants-shave.md

diff --git a/.changeset/funny-plants-shave.md b/.changeset/funny-plants-shave.md
new file mode 100644
index 000000000..c0b231a80
--- /dev/null
+++ b/.changeset/funny-plants-shave.md
@@ -0,0 +1,31 @@
+---
+'@pandacss/parser': patch
+'@pandacss/core': patch
+---
+
+Fix an issue for token names starting with '0'
+
+```ts
+import { defineConfig } from '@pandacss/dev'
+
+export default defineConfig({
+  theme: {
+    tokens: {
+      spacing: {
+        '025': {
+          value: '0.125rem',
+        },
+      },
+    },
+  },
+})
+```
+
+and then using it like
+
+```ts
+css({ margin: '025' })
+```
+
+This would not generate the expected CSS because the parser would try to parse `025` as a number (`25`) instead of
+keeping it as a string.
diff --git a/packages/core/src/style-decoder.ts b/packages/core/src/style-decoder.ts
index f4b40dfc6..df607f9dc 100644
--- a/packages/core/src/style-decoder.ts
+++ b/packages/core/src/style-decoder.ts
@@ -357,7 +357,14 @@ const getEntryFromHash = (hash: string) => {
   return entry
 }
 
+const startsWithZero = /^0\d+$/
 const parseValue = (value: string) => {
+  // Check if value starts with '0' and is followed by a number
+  // like '01', '02', etc. If so, return the value as is, it's meant to be a string
+  if (startsWithZero.test(value)) {
+    return value
+  }
+
   const asNumber = Number(value)
   if (!Number.isNaN(asNumber)) return asNumber
   return castBoolean(value)
diff --git a/packages/parser/__tests__/output.test.ts b/packages/parser/__tests__/output.test.ts
index 9451ff150..e10367273 100644
--- a/packages/parser/__tests__/output.test.ts
+++ b/packages/parser/__tests__/output.test.ts
@@ -3596,4 +3596,44 @@ describe('extract to css output pipeline', () => {
       }"
     `)
   })
+
+  test('tokens starting with 0', () => {
+    const code = `
+    import { css } from "styled-system/css"
+
+    css({ margin: "025" })
+     `
+    const result = parseAndExtract(code, {
+      theme: {
+        tokens: {
+          spacing: {
+            '025': {
+              value: '0.125rem',
+            },
+          },
+        },
+      },
+    })
+    expect(result.json).toMatchInlineSnapshot(`
+      [
+        {
+          "data": [
+            {
+              "margin": "025",
+            },
+          ],
+          "name": "css",
+          "type": "css",
+        },
+      ]
+    `)
+
+    expect(result.css).toMatchInlineSnapshot(`
+      "@layer utilities {
+        .m_025 {
+          margin: var(--spacing-025);
+      }
+      }"
+    `)
+  })
 })