[pigment-css] Add support for transient props with the styled API

Summary 💡

Our team is using Material UI / typescript / styled, and we'd like to write styles as display: flex;, not JS display: "flex",, so we've opted to use Material UI's experimentalStyled, but we're seeing some errors with custom props and our solution is getting ugly. I believe it would be solved by transient props.

Motivation 🔦

When we want to use custom props like so:

const MarqueeItems = styled(Box)<{ animate: boolean }>(
  ({ theme, animate }) => css`
    animation: ${animate ? "marquee 10s linear infinite" : "none"};
    margin-bottom: ${theme.spacing(2)};
  `
);

<MarqueeItems animate={isMobile} />

They work great, but props like animate get passed through to the DOM and cause errors.

We've been able to fix this by wrapping our components like so:

const MarqueeItems = styled(
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  ({ animate, ...rest }: { animate: boolean } & BoxProps) => <Box {...rest} />
)(
  ({ theme, animate }) => css`
    animation: ${animate ? "marquee 10s linear infinite" : "none"};
    margin-bottom: ${theme.spacing(2)};
  `
);

<MarqueeItems animate={isMobile} />

But this is getting pretty ugly.

Examples 🌈

Styled-components came up with a solution to this problem via the transient props: https://styled-components.com/docs/api#transient-props in v5.1.0, but they don't seem to be working in Material UI.

I'm pretty sure it would look something like this:

const MarqueeItems = styled(Box)<{ $animate: boolean }>(
  ({ theme, $animate }) => css`
    animation: ${$animate ? "marquee 10s linear infinite" : "none"};
    margin-bottom: ${theme.spacing(2)};
  `
);

<MarqueeItems $animate={isMobile} />

Alternatively, I'm open to a better, existing way to do this without transient props. :D

No source file or test is named. Start at the pigment-css styled API entry point and trace how custom props are forwarded to rendered elements; compare the requested transient-prop behavior with the styled API examples in the issue. Done means supported transient props remain available to styling while no longer reaching the DOM.