composing recipes, sprinkles and styles

[PHILLIPS71]

I'm relatively new to vanilla extract and attempting to wrap my head around how I can create multiple lower level components (eg; Block, Text, etc) that can be used throughout a design system. I've used styled-systems previously and wanting to achieve a similar result where you can have multiple helper properties on components (padding, margins, etc) and propagate them up into higher level components (Alert, Button, ect) which can have the values passed down into the base component via props.

The way I'm currently doing this is via sprinkles and composeStyles but it's warning me that this is deprecated and to use style instead. Although using style requires me to use it in a css.ts file, this won't work as I'm wanting to use the props passed into the component and set the sprinkles values based on those.
 

Here is an example of what I'm currently doing as understandably it could be rather confusing;

I've got a base sprinkle that contains many useful css properties that may require to be overridden (margins, paddings, etc) via props across components.

export const responsive = defineProperties({
  conditions: {
    xs: {
      '@media': 'screen and (max-width: 480px)',
    },
    ...
  },
  defaultCondition: 'xs',
  properties: {
    // space properties
    paddingTop: vars.spaces,
    paddingBottom: vars.spaces,
    paddingLeft: vars.spaces,
    paddingRight: vars.spaces,
   
    ...

})

export const sprinkles = createSprinkles(responsive)

I now have the lowest level component which is a Block, other components in the design system are all built upon this block so we expose all those common sprinkle properties we can use.

export type BlockProps = React.PropsWithChildren<ThemeSprinkles> & {
  as?: React.ElementType
  className?: string
}

const Block: React.FC<BlockProps> = ({ children, as, className, ...rest }) => {
  const Component = as ?? 'div'
  return <Component className={composeStyles([sprinkles({ ...rest }), className ?? ''])}>{children}</Component>
}

I now have a Text component that is built on top of our Block, this uses textSprinkle that contains text helper properties as well as recipe to change the color variant. I could then use this Text component create create a Heading component based upon this since it already has a lot of the styles I'd need, the only differing factor is the heading levels and differing element type.

export type TextProps = BlockProps & TextSprinkles & TextVariants

const Text: React.FC<TextProps> = ({
  children,
  fontStyle,
  textDecoration,
  textTransform,
  color,
  className,
  ...rest
}) => (
  <Block
    as='span'
    className={composeStyles([
      textSprinkle({ fontStyle, textDecoration, textTransform }),
      styles.text({ color }),
      className ?? '',
    ])}
    {...rest}
  >
    {children}
  </Block>
)

My question is what I'm doing some sort of anti-pattern and are there other ways to achieve the same result? Or should the composeStyles really deprecated in this case? As being able to compose multiple classNames together in a ts file is very useful especially when passing those classNames down into lower level components.

[rothsandro]

I never used composeStyles but it looks like its behavior depends on where it is used:

• when used in a *.css.ts file it will merge all styles, giving you one class name
• when used somewhere else it will just join the class names, and not merge the styles itself

That means you now already have a lot of class names in your HTML (that is rendered in the browser), when using multiple sprinkles props and styles, right?

If yes, then you can just replace composeStyles with style whenever you are in a *.css.ts file, and use something like clsx for all other files. Your approach is actually how SEEK (the company behind vanilla-extract, I think) uses vanilla-extract for their own design system .

[PHILLIPS71]

Thanks for your response @rothsandro much appreciated!

That means you now already have a lot of class names in your HTML (that is rendered in the browser), when using multiple sprinkles props and styles, right?

You're correct! I've noticing a fair few class names being attached (unsure if I should be concerned?) when using multiple sprinkle props. Thanks for reminding me about clsx as I've replaced my usage of composeStyles with clsx where composeStyles was being used within a tsx file.

Your approach is actually how SEEK (the company behind vanilla-extract, I think) uses vanilla-extract for their own design system.

I'm glad I'm not going down some rabbit hole where there are better alternatives!
 

Another issue I've ran into (unsure if you have any knowledge around it or able to assist) is if a component has it's own styles eg; Text from above (via styles.text({ color })) and it shares a css property in common with the responsive sprinkle above, the css properties in styles.text({ color }) always take presentence. So what is happening is that I'm providing a prop for padding that adds the padding classes via found in the sprinkle, but they are not being used. This is because the padding property in the Text component is overriding them, which is rendering these utility props unless at times as they don't always get applied.

[rothsandro]

You're correct! I've noticing a fair few class names being attached (unsure if I should be concerned?) when using multiple sprinkle props.

Except that it is somewhat disturbing when inspecting the DOM, I wouldn't care. The same thing happens when using Tailwind, so performance shouldn't be a problem.

Another issue I've ran into (unsure if you have any knowledge around it or able to assist) is if a component has it's own styles eg; Text from above (via styles.text({ color })) and it shares a css property in common with the responsive sprinkle above, the css properties in styles.text({ color }) always take presentence.

The issue could be fixed by changing the order of the generated CSS, which depends on the import order of the *.css.ts files. While this works fine for some specific use cases like reset styles, it would probably get messy when doing it for (multiple) components.

I would remove the padding from styles.text and instead define default values for the padding property of the Box component in your Text component. Something like this:

const Text: React.FC<TextProps> = ({
  children,
  fontStyle,
  textDecoration,
  textTransform,
  color,
  className,
  padding = 'xs', // Default value if not provided
  ...rest
}) => (
  <Block
    as='span'
    className={...}
    padding={padding} // Passing to box component
    {...rest}
  >
    {children}
  </Block>
)