Improvements to the styled factory

[Jonas-C]

I don't want to bury the lede here: I created a panda plugin that (I think) increases the possibilities of the styled factory. I'd like to get this into panda core if possible!
The code to try it out is here: https://gist.github.com/Jonas-C/c1756b4357d9a22322f83700bcf99eeb.
If you want to try it out as a panda plugin, you can import this file: https://gist.github.com/Jonas-C/0abc53384321e01d2a46616fcf49641f

Hi! I've been heavily using the styled factory to create a component library. In my opinion, it's a great choice for creating named components. However, during my usage I've found several things that are simply impossible to do with it. Here's a couple of scenarios I'd like to see support for:

asChild prop merging

const StyledOuter = styled(ark.div, {
  base: {
    display: "flex",
  },
});

const StyledInner = styled("div", {
  base: {
    display: "inline",
  },
});

const { container } = render(
  <StyledOuter asChild>
    <StyledInner>Hello</StyledInner>
  </StyledOuter>,
);

expect(container.firstChild).toMatchInlineSnapshot(`
  <div
    class="d_flex"
  >
    Hello
  </div>
`);

Merging internal component css with external css with a styled function.

const Text = ({ children, css: cssProp, ...rest }: ComponentPropsWithoutRef<"div"> & JsxStyleProps) => {
  return (
    <styled.div css={css.raw({ textStyle: "heading.large", display: "block" }, cssProp)} {...rest}>
      {children}
    </styled.div>
  );
};

const StyledText = styled(Text, {
  base: {
    textStyle: "heading.small",
  },
});

const { container } = render(<StyledText>Hello</StyledText>);

expect(container.firstChild).toMatchInlineSnapshot(`
  <div
    class="textStyle_heading.small d_block"
  >
    Hello
  </div>
`);

Whilst discussing with Alex on Discord, he proposed adding a forwardCssProp option to the styled factory in order to increase flexibility. I ended up implementing this with a panda plugin, but found it much too cumbersome to continually write out forwardCssProp on pretty much every single component.

I then had the idea to reverse the process; By assuming that every component should forward the css prop by default, only the "root" component would need to consume it. Thus, I switched out forwardCssProp with consumeCss, and placed it wherever the css prop should be consumed (convert itself to a class name).

consumeCss is also cumbersome, but less so. I added an option to the styled factory that allowed for removing most consumeCss usage:

const StyledContainer = styled(ark.div, recipe, { base: true })`

Disclaimer: You only need to add the base prop when you're creating a component that is not aware of how the css prop works. The only real scenario where you have to use it is when you're asChild-ing onto a component that is not aware of how the css prop works. Think of it as a bailout that only works on root components!

<Box asChild>
  <Text asChild consumeCss>
    <div>Hello</div>
  </Text>
</Box>

With a little bit of wrangling, I got a working panda plugin to achieve all of this for me. By modifying the createStyleContext function found in park-ui I also got it to cleanly merge slot components!

I'll be the first to admit that the API is a bit clunky, but it opens up a whole range of possibilities that the styled factory couldn't do before. You could also make it a more explicit choice in the styled factory, allowing for users to call it like this:

const BaseComponent = styled.base(ark.div, recipe);

The two mentioned above are my primary motivations, but this could also for instance simplify overriding recipe variants:

// Imagine that `variant` sets the background color.
export const Button = forwardRef<HTMLButtonElement, ButtonProps>(({ variant, size, css: cssProp, ...props }, ref) => (
  <StyledButton
    {...props}
    css={css.raw(buttonBaseRecipe.raw({ variant }), buttonRecipe.raw({ size }), cssProp)}
    ref={ref}
  />
));

//One-off styled usage of this component
const PurpleButton = styled(Button, {
  base: {
    backgroundColor: "purple.500"
  },
});

As it stands, the styled factory is somewhat of a mine field. You get different results based on the underlying implementation of the component you're styling. This makes the react factory much more streamlined and consistent.

I would love to get this into panda proper! I'm currently in the process of writing a whole bunch of tests for this process, so if you'd be down to develop this further I could contribute those too! Let me know if there's anything I need to add, do or explain better!

[segunadebayo]

Interesting thoughts. I will read more thoroughly over the weekend.

Quick reaction: Panda being framework-agnostic means we must achieve this for all frameworks (React, Solid, Vue, Qwik, and Preact). Based on our work on Ark, it's very challenging to make this work in Solid.js and Qwik since they don't exactly use a Virtual DOM.

We don't want to add a framework-specific feature to the core of Panda. We'd rather keep them as community plugins instead.

[Jonas-C]

I guess the "core of panda" is a slight misrepresentation on my part. I only wanted this added to the generated styled factory (hopefully factories). I'm assuming the generation process for different frameworks are independent. If so, adding something like this to frameworks that can support it would be a net gain for a lot of people, I think!

Edit: I'm not looking to get the createStyleContext stuff merged in. I just added it for the sake of completeness, and to show what the styled factory changes could allow for.

[Jonas-C]

After a couple of bugs I encountered during testing I adjusted the API slightly. It no longer relies on checking if children has a __base__ prop, which should hopefully make it more framework-agnostic. The drawback is that you have to add consumeCss when using asChild to merge onto a component that doesn't support panda.

[segunadebayo]

Nice. How about publishing a plugin on NPM so that other folks can benefit from this.

With reasonable adoption, the team can consider this proposal.

[Jonas-C]

I'll try to find the time, will need to figure out a couple of things first. I'll also try to make it available for more frameworks!