fix: eager extraction on URL values with valid property name (#1757)

.changeset/healthy-pants-grin.md

@@ -0,0 +1,14 @@
+---
+'@pandacss/core': patch
+---
+
+Fix an edge-case when Panda eagerly extracted and tried to generate the CSS for a JSX property that contains an URL.
+
+```tsx
+const App = () => {
+  // here the content property is a valid CSS property, so Panda will try to generate the CSS for it
+  // but since it's an URL, it would produce invalid CSS
+  // we now check if the property value is an URL and skip it if needed
+  return <CopyButton content="https://www.buymeacoffee.com/grizzlycodes" />
+}
+```

packages/core/src/atomic-rule.ts

@@ -17,6 +17,8 @@ export interface ProcessOptions {
   styles: Dict
 }
 
+const urlRegex = /^https?:\/\//
+
 export class AtomicRule {
   root: Root
   layer: string
@@ -61,6 +63,11 @@ export class AtomicRule {
       // if value doesn't exist
       if (value == null) return
 
+      // we don't want to extract and generate invalid CSS for urls
+      if (urlRegex.test(value)) {
+        return
+      }
+
       const important = isImportant(value)
 
       // conditions.shift was done to support condition groups

packages/parser/__tests__/output.test.ts

@@ -2687,6 +2687,30 @@ describe('extract to css output pipeline', () => {
       }"
     `)
   })
+
+  test('urls as value', () => {
+    const code = `
+    const App = () => {
+      return <CopyButton content="https://www.buymeacoffee.com/grizzlycodes" />
+    }
+     `
+    const result = run(code, { strictTokens: true })
+    expect(result.json).toMatchInlineSnapshot(`
+      [
+        {
+          "data": [
+            {
+              "content": "https://www.buymeacoffee.com/grizzlycodes",
+            },
+          ],
+          "name": "CopyButton",
+          "type": "jsx",
+        },
+      ]
+    `)
+
+    expect(result.css).toMatchInlineSnapshot('""')
+  })
 })
 
 describe('preset patterns', () => {