Css class prefixes for existing StyleModules (or style encapsulating)

v6
1

Hello,

I am working on integration of Codemirror in to existing wysiwyg editor, where Codemirror used for source code editing (Codemirror runs in popup of wysiwyg editor).
And I hit a litle problem, the wysiwyg resets all external styling (example .wysiwyg *{color:inherit;}), that leads to unstyled code highlighter in Codemirror.

My idea is to add prefixes to Codemirror classes, example change StyleModule rule:
.ͼ5 {color: #404740;}
to
.my-container .ͼ5 {color: #404740;} (this will have higher priority and so will work).
But I cannot find a way of doing it.

I tried to make a ViewPlugin plugin, but it does not work (beceause mountStyles() reload styles from the view state every time) and it seems a wrong way.

ViewPlugin.define(( view ) => {
  let done = false;

  return {
    name: 'Prefixing styles',
    update(update) {
      if (done) return;
      done = true;

      view.styleModules.forEach((styleModule) => {
        styleModule.rules = styleModule.rules.map((rule) => {
          return '.my-container ' + rule;
        });
      });
    }
  }
});

Any idea how it possible to “isolate” Codemirror styles?
I would like to avoid of using shadow dom or iframe.

2

Put it in an iframe or shadow root.

Or just remove/edit this absolutely ridiculous CSS reset.

3

I trying to avoid that. But in the end probably will one of this.

Yeah it is, but it comes from wysiwyg library “vendor”. They alreayd have a request to fix it, but that will be a long way :smiley:

Thanks for answer, anyway :wink: