defaultVaraints with utils?

[rostero1]

I'm creating a TS component and I want to have <MyComponent size="1em" /> or <MyComponent size="xs" />. Size would get converted to width and height.

I cannot come up with a way of doing this with just styled. defaultVariants requires you to have the variant defined above. Is there a way to have defaults for utils? Or are there any other suggestions?

[kndwin]

You can set this up in the stitches.config.js file under theme.sizes

For example

// stitches.config.js
export const { styled, css } = createStitches({
  theme: {
    sizes: {
      "sm": "12px",
      "md" : "24px"
      ...
    },
  },
  utils: {
    size: (value) => ({
      width: value,
      height: value
    })
  }
});

Usage

<MyComponent css={{ size: "sm" }} />

Some helpful docs

• https://stitches.dev/docs/tokens
• https://stitches.dev/docs/tokens#property-mapping
• https://stitches.dev/docs/utils