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

v6
1

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

EditorView.theme({
    "&": {
      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!

2

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…

EditorView.theme(css({...}))
1 Like