Dynamic Variants

[nmhieu1896]

Hello guys,

Firstly, I just want to know if this project is still in developing or not, because I'm sooooo in love with Stitches. Looking it haven't got any commits for the last 5 months is so sad :(

If this's still in progress, I hope that we can have dynamic variants or component scope utils. For details, we can pass a dynamic values to variants as a function argument like we did with utils.

hope to see your comeback.

[hadihallak]

Hey @nmhieu1896 👋

We don't plan on adding dynamic variants as part of the library as most of the cases for dynamic variants can be achieved with normal variants and custom css properties.

I've made a demo here and the a bit of a discussion about it is available on discord

[misaku]

if i wouldlike create progressbar and i passed progress how can i do this without dinamic variant?

[LexSwed]

As an option (not a real code I tested)

const ProgressBar = styled('div', {
  width: '100%',
  transform: 'scaleX(var(--progress-bar-status, 0))',
})

const App = ({ progress }) => {
  return <ProgressBar style={{ --progress-bar-status: progress / 100 } as SomethingToSurpressReactStyleBeingUnhappy) />;
}