Strategies to avoid combinatorial explosions for tokens & states

[danielberndt]

Hello there! 👋

I'm currently working on a Box component which is supposed to become the main interface for classes generated via vanilla-extract.

Conceptually this component should be fairly close to offering tailwind-style classes via props. This should also include stuff like hover/focus state and media queries. But a naïve implementation will of course also come with a drawback of tailwind. Depending on the amount of tokens and states a lot of classes will be generated, of which only few will be used. Tailwind incorporates PurgeCSS to solve this issue. But I don't think that approach is viable using vanilla-extract.

Do you have any strategies in mind for how this could be solved using vanilla-extract?

Cheers,
Daniel

PS: Last week we managed to complete our migration from treat to vanilla-extract. I guess you can call the library production ready :)
We're not using any of the theming or variable functionality yet.

[markdalgleish]

Congrats on the migration! That's awesome 👏

The way we deal with this is to only put things on Box that are very commonly needed. This can also be evaluated for each individual prop, which helps cut down on the combinatorial explosion.

For example, only some of our props support responsive arrays, e.g. in our system padding is a responsive prop but background isn't because we very rarely change colours responsively. In addition, looking at your example, I'd say you might find that only some of your props need hover/focus support too.

[danielberndt]

Okay, cool that's what I was leaning towards as well. 👍

I was kinda hoping that maybe there's maybe some magic that could be done using variables, but after reading into it, it seems that stuff like @media (max-width: var(--mobile-breakpoint)) { isn't supported yet.

I guess that it won't be too bad after all since duplicate (dimension based) style definitions for media queries should be be quite efficient to compress.

[duarten]

I'm in a similar situation, but we're thinking of using the runtime to set css variables. For example, if height is responsive, then we have a variable for each breakpoint. The height style just includes the media queries, each setting the height to the value of the corresponding variable:

export const heightVars = createThemeContract({
  mobile: null,
  desktop: null,
});

export const heightStyle = style({
  height: `${heightVars.mobile}`,
  '@media': {
    'screen and (min-width: 1024px)': {
      height: `${heightVars.desktop}`,
    }
  }
});

The Box calls createInlineTheme() to set those vars.