Scope JSX props to factory components

[RickDT]

When you enable JSX, Panda looks at every component to generate CSS. If components that don't use Panda happen to use a prop with the same name as a Styled prop, they get swept into the css generation which makes for some funny classes (and potentially a lot of noise) in the utility layer.

Discord thread where Alex and I chatted on this subject

Expected behavior

Ideally, if I init Panda with a jsxFramework setting in an existing codebase and run panda cssgen before using the styled factory anywhere, then it shouldn't output any "extra" css from my existing non-Panda-ified components.

Possible solution

A config option to scope jsx style props (as suggested by Alex). My naive assumption is that if the AST for a given file doesn't include "type": "jsx-factory" anywhere, then the file would be filtered out. I think that would satisfy the expected behavior above.

{ // config example
  jsxStyleProps: 'panda'
}

Work-around

I'm going to try adding .panda to files in our codebase where we start using Panda. This will let us adopt Panda at the pace that makes sense for us. The downside is that imports will have to be re-written and will get a little uglier/noisier. For instance import * from "button" becomes import * from button.panda. Not the end of the world, but eventually you'd want to drop that syntax once you've fully adopted Panda, so you're signing yourself up for a big re-refactor (hopefully automated) at the end of the adoption period.

{ // config example
  include: ['./src/**/*.panda.tsx'],
}

Examples of problems we've seen

content prop in 1st party code

Our codebase has a lot of components with a content prop.
<MyComponent content='This is a test prop' /> creates

.content_This_is_a_test_prop {
  content: This is a test prop;
}

Unexpected Panda errors with content

In fact, we have some contents with mixed quotes, which the parser struggles with:
<MyComponent content="This shouldn't matter" /> and panda debug gives

🐼 info [cli] Writing /Users/rickdt/Documents/Projects/pm-frontend/styled-system/debug/config.json
🐼 error [sheet:process] > 1 | .content_This_shouldn\'t_matter {content: This shouldn't matter;
    |                                                       ^
  2 | }
  3 |

We've decided to refactor our use of content to avoid JSX style props. PandaCSS is worth it! But 3rd party components still pose a problem.

3rd party props

For instance, Radix components make use of position='popper', which makes for some funny utility classes.

.pos_popper {
  position: popper;
}

[astahmer]

hey, this will be solved next release with #2149

[RickDT]

Great solution. Thanks!