kripod
Autoprefixing in runtime
Motivation
As popular CSS-in-JS libraries like Styled Components and Emotion have runtimes, they also do vendor prefixing on the fly.
Details
Consider using Stylis v4, @emotion/stylis or css-vendor.
There is also https://github.com/kitten/tiny-css-prefixer - each of the listed solutions probably differs in supported properties, so you need to decide how many properties do you want to prefix :)
Cool, I didn't know about that. Firstly, I'm going to implement proper rehydration of server-rendered styles, and then I'll experiment with your suggestion.
I'm not sure whether escaping is required or Stylis is capable of it, but cssesc may do that if necessary.
For the generated class names during development, according to the corresponding CSS specification. This should’ve had its own issue, but I wasn’t aware that Stylis is not made for this purpose.
In emotion we just dont generate invalid class names, not sure how stylis would handle it, looking at identifier in v4 I think it might just consume invalid identifier here. That's ok from its perspective though - it's designed to parse valid CSS
Thank you for the explanation! Currently, I’m trying to generate Tailwind-like atomic class names for better development experience, which includes the property name and the chosen value (the latter being escaped inside the <style> tag for successful parsing).