Add a config option for css prop aliases

[zachbwh]

Description

I would like to extend the existing style props functionality to include configurable aliases for the css prop so that style objects passed into other named props are picked up by the Panda CSS AST parser

Problem Statement/Justification

I have a component API where I want to be able to expose style overrides for sub-elements as well as the main element. For example

// In a NumberField component implementation

<InputStructure
  type="number"
  // Overrides the wrapper styles
  css={{ marginBottom: '100' }}
  // Overrides the input element styles
  inputCss={{ "&::-webkit-outer-spin-button": { WebkitAppearance: 'none' } }}
/>

As it works currently, there is no ergonomic or consistent way to make sure that the styles passed into the inputCss prop are correctly parsed by Panda CSS

Proposed Solution or API

Add a new config option called jsxCssPropAliases (open to alternative names) which accepts an array of strings. Any values get passed in here gets treated the same way as the css prop does by the Panda CSS parser.

  // In panda.config.ts
  jsxCssPropAliases: ['inputCss', 'contentCss'],

  // In application code
  <Component css={{ color: 'blue' }} />
  <Component inputCss={{ color: 'red' }} />
  <Component contentCss={{ color: 'green' }} />

generates the following css

@layer utilities {
	.c_yellow {
		color: yellow;
	}

	.c_blue {
		color: blue;
	}

	.c_green {
		color: green;
	}
}

Alternatives

We have considered simply using css.raw when passing in style objects into these additional style props. The AST will parse these styles correctly, however the API for our consumers then becomes confusing and inconsistent, and we make it too easy to write styles that aren't picked up by the parser.

Additional Information

No response

[segunadebayo]

Did you consider using the css.raw compiler hint?

<InputStructure
  type="number"
  css={{ marginBottom: '100' }}
  inputCss={css.raw({ "&::-webkit-outer-spin-button": { WebkitAppearance: 'none' } })}
/>

[zachbwh]

I actually think that's a great idea

[segunadebayo]

Will consider adding it in the coming days.

[zachbwh]

Legend, ty

[segunadebayo]

It's now implemented here: 3ca1f24

Should be released sometime this week. cc @anubra266

[zachbwh]

Amazing!