Transforms in Sprinkles

[Ghirigoro]

It's not clear to me how you would define transforms (or anything else that both has a large number of potential values and doesn't map cleanly to a css property). For example I can do something like this:

const translation = createVar();
const transforms = defineProperties({
  properties: {
      transform: {
        translateX1: {
          vars: { [translation]: "1px" },
          transform: `translateX(${translation})`,
        },
    },
  }
});

But since I have to map the var values and names it gets prohibitively big really fast (especially when you start folding in scale, rotation etc.) Am I missing a cleaner approach or is this just something that has to be worked around when using sprinkles?

[alex-mcgovern]

I think the thought behind the Sprinkles API is that it should satisfy ~80% of your styling needs, but I have still needed to write custom classes for bespoke use cases.

Something that you may find useful is a third party wrapper component around VE Sprinkles called desert box. This allows you to create a box component that accepts your sprinkles args as props. Importantly it also allows override values by prefixing the sprinkles key with __, e.g.

<Box 
    __transform="translateX(50%)"
>
    content
</Box>