Using dynamic variables in my CSS

[julienben]

Hey there!

Loving Stitches so far. There's just one limitation of variants (vs. prop interpolation) that I'm running into and wondering if there's a way around it. Either something I've somehow missed in the library or something that could be changed?

Let's say I need to pass to my CSS a dynamic variable. Or similarly, if I need 10+ variants of a component and writing a variant for each seems tedious, i.e:

<Wrapper>
  <Circle />
  <Circle rotate={30} delay={-1.1} />
  <Circle rotate={60} delay={-1} />
  <Circle rotate={90} delay={-0.9} />
  <Circle rotate={120} delay={-0.8} />
  <Circle rotate={150} delay={-0.7} />
  <Circle rotate={180} delay={-0.6} />
  <Circle rotate={210} delay={-0.5} />
  <Circle rotate={240} delay={-0.4} />
  <Circle rotate={270} delay={-0.3} />
  <Circle rotate={300} delay={-0.2} />
  <Circle rotate={330} delay={-0.1} />
</Wrapper>

I could obviously pass my data as local CSS variables and access them with var():

<Circle style={{'--angle': '30', '--delay': '-1.1'}}>

But that's not very readable (and requires some casting in TypeScript - see here).

I noticed that Linaria offers dynamic prop-based styles by compiling the variables into CSS vars under the hood.

Is this something that could be built into Stitches somehow? Or is there another solution I'm missing?

If it's the former, I'd be happy to take a stab at it if someone can give me some initial pointers.

[kgautamt]

Similar to above, is there any way to directly access props passed in stitches components (like styled-components). Writing every use case for a dynamic process seems tedious and manual.

[joseDaKing]

There is a pull request for this feature but it is not merged and not supported yet. As of now, the best option is to use CSS prop directly on a styled component.

[arpeiks]

import { CSS as BaseCSS, createStitches } from "@stitches/react";

export const { css, styled, getCssText, config } = createStitches({
  utils: {
    px: (value) => ({ paddingLeft: value, paddingRight: value }),
    py: (value) => ({ paddingTop: value, paddingBottom: value }),
  },
});

export type CSS = BaseCSS<typeof config>;

[Dessader]

Actual problem.