fix: parsing values of tokens that look like numbers but arent (start… (

#2245)

fix: parsing values of tokens that look like numbers but arent (starts with 0)

.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.

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)

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);
+      }
+      }"
+    `)
+  })
 })