Style props with headless components

[benoitdeziel]

Our design system is using headless components that uses a Box to convert style props to css, with Emotion and styled-system. In our migration to Panda, we would like to remove the Box and only use standard HTML.

Would it be possible to pass those props to a css function to convert them to classes? Here's an example:

const Button = (props) => {
  const systemProps = extractSystemProps(props);

  const systemPropsStyles = css(systemProps);
  
  return <ButtonPrimitive className={cx(buttonStyles, systemPropsStyles)}>{props.children}</ButtonPrimitive>
} 

ButtonPrimitive is an unstyled component that handles all the logic.

Same with an sx prop that would receive styles. We have a lot of components using those patterns in a lot of apps and we're looking to evaluate the effort on changing those to use className with the css function if it's not possible.

[astahmer]

In our migration to Panda, we would like to remove the Box and only use standard HTML.

fyi there's a <Box /> (or box()) pattern built-in the default preset

Would it be possible to pass those props to a css function to convert them to classes? Here's an example:

as long as they are statically analyzable, yes, you can use the special css prop for that
there's a isCssProperty exported from styled-system/jsx if you want to split props

Same with an sx prop that would receive styles.

rename sx to css

[benoitdeziel]

Thank you for the answer.