Panda gets styles from 3rd party CSS function

[literalpie]

Description

When I generate panda CSS in a project that uses a mix of emotion css functions and panda css functions, I expect it to only use the panda css styles, but it also picks up emotion css styles.

Link to Reproduction

https://play.panda-css.com/S0BSaf1PHV

Steps to reproduce

1. Open the playground, and the "CSS output" tab at the bottom
2. Notice that width: '123px' is only used in a non-panda css function, but it is getting added to the CSS output.

JS Framework

No response

Panda CSS Version

0.51.1

Browser

No response

Operating System

• macOS
• Windows
• Linux

Additional Information

CVA works as expected, so I'm hopeful it is possible to do this how I expect.

I believe isRawFn is the culprit because it returns true if the name === 'css' regardless of the import.

[kris-ellery]

We have noticed something similar with styled-components and ended up disabling it via cssProp: false in the babel plugin.

[literalpie]

I would love to get some confirmation if this is an issue that may be fixed, or if it is working as expected

[cgatian]

The file-matcher.ts is greedy not only with css but also with named/alias imports. Anything matching an existing pattern/recipe is valid for parsing. This is also true for any imports that contain a key or alias that matches an existing recipe or pattern. For example:

import { center as centerAliased } from 'styled-system/patterns';
import { center } from 'component-lib';

const center.raw({
   color: '[red]',   // ❌ Should not extract!
});

const center({
   color: '[red]',   // ❌ Should not extract!
});

https://play.panda-css.com/AFgHUiMXKl

I think I fixed up the file-parser in #3137 but needs more review and ❤ from the team.