Passing dynamic properties / calculated styles

[proohit]

Hey, I've been looking at vanilla-extract as a framework / library agnostic way to use jss and it looks promising to this point.

One major feature of libraries like styled-components is the ability to calculate styles based on component properties or stateful values. Here's an example with styled-components in a react-y syntax:

const StyledButton = styled.button`
  color: ${props => props.color || "black";
`;

const SomeComponent = (props) => {
   const color = props.color; // this might change dynamically!
   return <StyledButton color={color}>Click me</StyledButton>
}

Is there any way to make this possible in vanilla-extract? This would be a huge benefit to dynamically style components.

[DanielHeath]

You can't do this and still get build-time extraction of CSS.

This is what the theming api is for

[proohit]

Isn't there a way to create css variables internally when dynamic props are used in a style class? Those can be completely automatically generated.

[DanielHeath]

You can absolutely use a CSS variable with createVar(), but you need to export the variable and set it elsewhere (eg via a .ts file that imports and re-exports everything from the .css.ts file, and also exports a component which sets the variable)

[proohit]

So with that limitation vanilla wouldn't be able to both create and set a css variable from a prop and then create a style where the variable is used. All of this abstracted in a single function that accepts props and a style definition.

[DanielHeath]

Vanilla extract won't do it for you, because it has no concept of props (or of react).

However, nothing stops you writing a short function component that sets the variable & any other style props.

[stephengladney]

Would this work?

Write a function that takes in props as a param and then returns a style with the props evaluated

const getStyleWithProps = (props) => style({
    color: props.isSelected ? "green" : "black"
  })

And the pass the function call into the component as the className

<Component className={getStyleWithProps(props)} />

[DanielHeath]

No. You can do function calls like that, but the calls have to happen at compile time; there's nothing to call at runtime.

[astahmer]

using sprinkles this would be fine