Inline style definitions

[Dremora]

I'm in love with this library. There's just this little thing on my mind. One of the (probably, the only, compared to vanilla-extract) benefits of libraries such as Tailwind and Emotion is that they don't require coming up with intermediate variable names for the classes / components. What if we could do this with vanilla-extract?

export const InlineButExtracted = () => (
  <div className={style({ color: 'red' })}>
    I’m red and with statically extracted class
  </div>
);

(I've tried, but this sadly doesn't work)

I'm not talking about having special React support here. As long as all calls to style() can be replaced with their string class name values, rather than only those made at the top level, nothing else would need to be done to support React. I guess the same applies to other APIs.
Of course, a gotcha here would be that we can't pass any variables anywhere to style that are not defined globally. But this can probably be determined during the build.
Has this been considered?

[mattcompiles]

Hey 👋

This kind of API would force us to use AST manipulation to achieve, which is against the core idea's of vanilla-extract. This is what allows us to support things like esbuild, plus this kind of API seems simple in demo's but has seemingly-infinite edge cases in reality. Vanilla-extract will always force your styles to be inside a separate .css.ts file.

If you want to continue using vanilla-extract then I'd suggest checking out Sprinkles and Recipes if you haven't already. I think they help to get passed this issue a lot.

If you can't get passed not having inline style definitions then check out compiled or linaria who use this style of approach with different trade-offs.

[Dremora]

To be honest, I haven't previously looked in depth into Sprinkles. Having done this today, I think they totally solve the issue! Custom styles for the edge cases will still have to be defined in .css.ts files and be given names, but I don't think this is a problem. One would have to do the same with Tailwind, or extend the configuration (and likewise, we can always extend the sprinkles).

[Nvveen]

@mattcompiles Could you elaborate a bit on the edge-cases you'd expect? I also wonder about style() definitions inside component files, but outside the component definitions, so as separate top-level declarations; would that be possible (maybe just with an esbuild-plugin)? My main wish would be to colocate styles inside files (and not necessarily inline style definitions), so I'm wondering about what possible obstacles would arise in those cases.