CSS-in-JS: Post-processing or "fallback" style rules?

Hi, I’d like to make sure that style rules I write using the CodeMirror CSS-in-JS system are somehow post-processed or can contain fallback style rules. My specific use case is vendor prefixing: for example, I would like

    "&": {
      transition: "all 4s ease",

to include transition as well as -o-transition, -ms-transition, -moz-transition, -webkit-transition in the final rules output.

I would also like a way to write fallback rules for the same property. E.g., I would like to be able to somehow say

background: blue;
background: "linear-gradient(red, blue)";

such that browsers which understand linear-gradient will render that rule, but browsers which do not will still include a background color.

Does the CSS-in-JS system support these features, or would you recommend I reference styles in CodeMirror using class names and use an alternate CSS build system to author styles?

Thank you!

There is provision for fallback rules by including properties with underscores in their names—anything starting from the underscore will be cut off. So you can do…

  background_fallback: "blue",
  background: "linear-gradient(red, blue)"

There’s no postprocessing or autoprefixing feature, so your best approach there is probably to define your own function for that, and run arguments to theme through it…

1 Like