style object as a function that exposes the component props

[olup]

I love using Stitches, but coming from styled-component / emotion there is a use case that is missing for me : the property that affects styling but is not a enum / boolean kind of value (this latter case is addressed by variants). Like a numerical value that will affect different part of the styles, and differently so depending on the variant.

I think the ${prop => ...} pattern in those libs is excellent, and I'll be super happy to be able to use it here. Maybe you consider this an antipattern ?

If not, passing a callback as styled second argument - a function that would get the props as argument and retrun the style object - would be pretty handy. That would look like this :

const Button = styled<{opacity : number}>("button", ({opacity}) => ({
    opacity
  })
)

...

<Button opacity={0.5}>Hello</Button>

I know I can achieve a similar result by building a component and using the css function to dynamically pass on values, but it's verbose and is harder to type right.

But mainly, I was wondering why such a pattern did not exist here (and I guess it's by design).

[peduarte]

Hi there 👋

As you've mentioned, you can achieve this with the css prop.

<Button css={{ opacity: 0.5 }}>Hello</Button>

You're right that it's by design. Stitches won't support prop interpolation for performance reasons and to keep the runtime cost to a minimum.