Support standard CSS syntax?

[mlenser]

Question

Would vanilla-extract ever support the standard css syntax along with the current object-based syntax?

Example

export const className = sprinkles(`
  display: flex;
  flex-direction: column;
  padding-left: ${small};
  padding-right: ${small};
`);

Reasoning

While typescript can bring many benefits and the sprinkles API can make mobile and dark mode very simple, many of our developers prefer standard css syntax.

In a survey of our company's frontend developers we found that object-based syntax had a NPS (% of promoters minus % of detractors) of -11 while standard CSS syntax had a NPS of 56.

We'll follow up with our developers to gauge their experience of actually using vanilla-extract (with sprinkles), but if that result is the same as the survey then the benefits of the typescript/object-based approach wouldn't be realized if developers didn't want to use vanilla-extract due to the syntax.

Thank you.

[roginfarrer]

I don't think the string syntax aligns with the goals of this project. You miss out on the typescript types, and adding parsing for the string syntax would likely add a lot of complexity to the project.

That said, You could probably write a function that takes the CSS string syntax, parses it into the object syntax, then forwards that to style. I imagine this likely already exists somewhere in other projects.

[wakaztahir]

Official support of CSS standard syntax would still be better IMO, This could help in this regard
https://github.com/activeguild/css-to-vanilla-extract