How to correctly use Styled Function with Predefined jsx patterns

[JonnyDawe]

Please can I clarify some behaviour with the styled function? When I use it with a predefined jsx component (for example the circle component), the css for the circle pattern is no longer generated. Is this expected behaviour? I'm still getting my head around how the static css generation all works!

I would also like to clarify if there is a better technique for checking if a string is a correct Token in Typescript. Currently I am manually asserting it: "--color": token(colors.${color} as Token, "white"),

Here is my code snippet for reference:

import { Circle, styled } from "@styled-system/jsx";
import { Token, token } from "@styled-system/tokens";
import { JsxStyleProps, StyledVariantProps } from "@styled-system/types";
import { cva } from "../../styled-system/css";

const palletteCircleStyle = cva({
  variants: {
    visual: {
      solid: {
        bg: "[var(--color)]",
      },
      outline: {
        border: "[3px solid var(--color)]",
      },
    },
  },
  defaultVariants: {
    visual: "solid",
  },
});

const StyledPalletteCircle = styled(Circle, palletteCircleStyle);

type StyledPalletteCircleProps = StyledVariantProps<
  typeof StyledPalletteCircle
>;

function PalletteCircle({
  color,
  visual,
}: {
  color: JsxStyleProps["color"];
  visual?: StyledPalletteCircleProps["visual"];
}) {
  return (
    <StyledPalletteCircle
      size={"40"}
      visual={visual}
      style={
        {
          "--color": token(`colors.${color}` as Token, "white"),
        } as React.CSSProperties
      }
    >
      {color?.toString()}
    </StyledPalletteCircle>
  );
}```

[segunadebayo]

Creating a styled component from a pattern is not a valid composition pattern for the compiler. We'll consider adding this to our upcoming ESLint Plugin.

However, I think the component can be greatly simplified to achieve the same result you're looking. Here's another way to design it:

Playground: https://play.panda-css.com/e9h4RvvC1d

const paletteRecipe = cva({
  variants: {
    visual: {
      solid: {
        bg: 'currentColor',
      },
      outline: {
        border: '3px solid currentColor',
      },
    },
  },
  defaultVariants: {
    visual: 'solid',
  },
})

type Props = RecipeVariantProps<typeof paletteRecipe> & {
  color: SystemStyleObject['color']
}

function PaletteCircle(props: Props) {
  const [variantProps, restProps] = paletteRecipe.splitVariantProps(props)
  const { color } = restProps
  const className = css(paletteRecipe.raw(variantProps), { color })
  const colorStr = color?.toString() ?? 'Unknown'
  return <div className={className}>{colorStr}</div>
}

[JonnyDawe]

Thanks @segunadebayo - thats a really useful example for me!