fix(parser): improve spreading extraction

Author: segunadebayo

.changeset/css-raw-reference-resolution-improvements.md

@@ -0,0 +1,37 @@
+---
+'@pandacss/core': patch
+'@pandacss/parser': patch
+---
+
+Fix css.raw spreading within selectors and conditions
+
+Fixed several scenarios where spreading css.raw objects wouldn't be properly extracted:
+
+**Child selectors:**
+
+```js
+const baseStyles = css.raw({ margin: 0, padding: 0 })
+const component = css({
+  '& p': { ...baseStyles, fontSize: '1rem' }, // Now works
+})
+```
+
+**Nested conditions:**
+
+```js
+const interactive = css.raw({ cursor: 'pointer', transition: 'all 0.2s' })
+const card = css({
+  _hover: {
+    ...interactive, // Now works
+    _dark: { ...interactive, color: 'white' },
+  },
+})
+```
+
+**CSS aliases:**
+
+```js
+import { css as xcss } from 'styled-system/css'
+const styles = xcss.raw({ color: 'red' })
+// xcss.raw now properly recognized
+```

packages/core/__tests__/file-matcher.test.ts

@@ -143,12 +143,43 @@ describe('file matcher', () => {
     ])
 
     expect(file.isRawFn('css')).toMatchInlineSnapshot('true')
-    expect(file.isRawFn('xcss')).toMatchInlineSnapshot('false')
+    expect(file.isRawFn('xcss')).toMatchInlineSnapshot('true') // xcss is an alias for css, should be true
 
     expect(file.isRawFn('css.raw')).toMatchInlineSnapshot('true')
+    expect(file.isRawFn('xcss.raw')).toMatchInlineSnapshot('true') // xcss.raw should work too
     expect(file.isRawFn('stack.raw')).toMatchInlineSnapshot('true')
 
-    expect(file.isRawFn('cva.raw')).toMatchInlineSnapshot('false')
+    expect(file.isRawFn('cva.raw')).toMatchInlineSnapshot('true') // cva is imported, should be true
+  })
+
+  test('is raw fn with sva aliases', () => {
+    const ctx = createContext()
+
+    const file = ctx.imports.file([
+      { mod: 'styled-system/css', name: 'css', alias: 'styledCss' },
+      { mod: 'styled-system/css', name: 'cva', alias: 'componentVariant' },
+      { mod: 'styled-system/css', name: 'sva', alias: 'slotVariant' },
+    ])
+
+    // Test aliased css functions
+    expect(file.isRawFn('styledCss')).toMatchInlineSnapshot('true')
+    expect(file.isRawFn('styledCss.raw')).toMatchInlineSnapshot('true')
+
+    // Test aliased cva functions
+    expect(file.isRawFn('componentVariant')).toMatchInlineSnapshot('true')
+    expect(file.isRawFn('componentVariant.raw')).toMatchInlineSnapshot('true')
+
+    // Test aliased sva functions
+    expect(file.isRawFn('slotVariant')).toMatchInlineSnapshot('true')
+    expect(file.isRawFn('slotVariant.raw')).toMatchInlineSnapshot('true')
+
+    // Test non-aliased should still work
+    expect(file.isRawFn('css')).toMatchInlineSnapshot('true')
+    expect(file.isRawFn('css.raw')).toMatchInlineSnapshot('true')
+
+    // Test non-existent aliases
+    expect(file.isRawFn('randomAlias')).toMatchInlineSnapshot('false')
+    expect(file.isRawFn('randomAlias.raw')).toMatchInlineSnapshot('false')
   })
 
   test('namespace', () => {

packages/core/src/file-matcher.ts

@@ -187,7 +187,12 @@ export class FileMatcher {
 
   isRawFn = (fnName: string) => {
     const name = fnName.split('.raw')[0] ?? ''
-    return name === 'css' || this.isValidPattern(name) || this.isValidRecipe(name)
+
+    // Check if it's css (literal or alias), pattern, or recipe
+    const isCssOrAlias =
+      name === 'css' || this.cssAliases.has(name) || this.cvaAliases.has(name) || this.svaAliases.has(name)
+
+    return isCssOrAlias || this.isValidPattern(name) || this.isValidRecipe(name)
   }
 
   isNamespaced = (fnName: string) => {