From 5a205e7900719dee8c77ff8c3d5b9b96feabc302 Mon Sep 17 00:00:00 2001
From: Alexandre Stahmer <47224540+astahmer@users.noreply.github.com>
Date: Tue, 27 Feb 2024 00:19:55 +0100
Subject: [PATCH] fix: conditions accessing (#2268)

---
 .changeset/red-comics-itch.md                     | 6 ++++++
 packages/core/src/conditions.ts                   | 4 ++--
 packages/generator/src/artifacts/css/token-css.ts | 6 +++++-
 packages/generator/src/artifacts/js/conditions.ts | 2 +-
 4 files changed, 14 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/red-comics-itch.md

diff --git a/.changeset/red-comics-itch.md b/.changeset/red-comics-itch.md
new file mode 100644
index 000000000..d95cb35ed
--- /dev/null
+++ b/.changeset/red-comics-itch.md
@@ -0,0 +1,6 @@
+---
+'@pandacss/generator': patch
+'@pandacss/core': patch
+---
+
+Fix conditions accessing `Cannot read properties of undefined (reading 'raw')`
diff --git a/packages/core/src/conditions.ts b/packages/core/src/conditions.ts
index 54499dce3..eade2af97 100644
--- a/packages/core/src/conditions.ts
+++ b/packages/core/src/conditions.ts
@@ -114,9 +114,9 @@ export class Conditions {
     return Object.keys(this.values).length === 0
   }
 
-  get = (key: string) => {
+  get = (key: string): undefined | string | string[] => {
     const details = this.values[key]
-    return details.raw
+    return details?.raw
   }
 
   getRaw = (condNameOrQuery: ConditionQuery): ConditionDetails | undefined => {
diff --git a/packages/generator/src/artifacts/css/token-css.ts b/packages/generator/src/artifacts/css/token-css.ts
index 9d86cc881..42f2167d1 100644
--- a/packages/generator/src/artifacts/css/token-css.ts
+++ b/packages/generator/src/artifacts/css/token-css.ts
@@ -30,14 +30,18 @@ export function generateTokenCss(ctx: Context, sheet: Stylesheet) {
         .filter(Boolean)
         .map((condition) => {
           const lastSegment = Array.isArray(condition) ? condition.at(-1)! : condition
+          if (!lastSegment) return
           const parent = extractParentSelectors(lastSegment)
           // ASSUMPTION: the nature of parent selectors with tokens is that they're merged
           // [data-color-mode=dark][data-theme=pastel]
           // If we really want it nested, we remove the `&`
           return parent ? `&${parent}` : lastSegment
         })
+        .filter(Boolean)
+
+      if (!mapped.length) return
 
-      const rule = getDeepestRule(root, mapped)
+      const rule = getDeepestRule(root, mapped as string[])
       if (!rule) continue
 
       getDeepestNode(rule)?.append(css)
diff --git a/packages/generator/src/artifacts/js/conditions.ts b/packages/generator/src/artifacts/js/conditions.ts
index 085e7c893..c952918c8 100644
--- a/packages/generator/src/artifacts/js/conditions.ts
+++ b/packages/generator/src/artifacts/js/conditions.ts
@@ -51,7 +51,7 @@ export function generateConditions(ctx: Context) {
             key === 'base'
               ? `/** The base (=no conditions) styles to apply  */\n`
               : ctx.conditions.get(key)
-              ? `/** \`${([] as string[]).concat(ctx.conditions.get(key)).join(' ')}\` */\n`
+              ? `/** \`${([] as string[]).concat(ctx.conditions.get(key) ?? '').join(' ')}\` */\n`
               : ''
           }\t${JSON.stringify(key)}: string`,
       )