From 788aaba364dc33e180b18646725cbe54d67a3ea5 Mon Sep 17 00:00:00 2001
From: Alexandre Stahmer <47224540+astahmer@users.noreply.github.com>
Date: Mon, 4 Dec 2023 00:17:28 +0100
Subject: [PATCH] fix: eager extraction on URL values with valid property name
 (#1757)

---
 .changeset/healthy-pants-grin.md         | 14 ++++++++++++++
 packages/core/src/atomic-rule.ts         |  7 +++++++
 packages/parser/__tests__/output.test.ts | 24 ++++++++++++++++++++++++
 3 files changed, 45 insertions(+)
 create mode 100644 .changeset/healthy-pants-grin.md

diff --git a/.changeset/healthy-pants-grin.md b/.changeset/healthy-pants-grin.md
new file mode 100644
index 000000000..ec5fa3b01
--- /dev/null
+++ b/.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" />
+}
+```
diff --git a/packages/core/src/atomic-rule.ts b/packages/core/src/atomic-rule.ts
index ec3b91a5b..28a1ed74d 100644
--- a/packages/core/src/atomic-rule.ts
+++ b/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
diff --git a/packages/parser/__tests__/output.test.ts b/packages/parser/__tests__/output.test.ts
index b9cee8c4e..e4f76ba3a 100644
--- a/packages/parser/__tests__/output.test.ts
+++ b/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', () => {