Prevent CSS leaking

[fjf2002]

Prevent the embedded online-IDE from leaking out CSS selectors.

Work in progress. @martin-pabst: Please take a look and consider.

• Based on / works only with proper monaco import #18

• Mechanics: Do CSS rewriting, in 2 alternative variants

  • Variant 1, currently activated, see https://github.com/martin-pabst/Online-IDE-new-compiler/blob/0d91f3b98f6826dc5efa59c51bda275501f77dbc/vite.config.js#L81-L95 This nests the whole CSS in a .joe_javaOnlineDiv selector. What then probably fails are :root, html, body selectors (this doesn't seem to matter).

  • Variant 2: Use a proper plugin. This obviously adds a dependency and perhaps a bit more processing effort. https://github.com/martin-pabst/Online-IDE-new-compiler/blob/0d91f3b98f6826dc5efa59c51bda275501f77dbc/vite.config.js#L72-L80

In either variant, somehow CSS variables get set in the :root namespace (with ThemeSelector even in the html selector).

[fjf2002]

OK I had to take the postcss approach - the handmade approach broke the monaco-editor CSS. Please note:

• the postcss processing is configured to only affect node_modules CSS
• custom CSS: You have to wrap it yourself.
• EVERY html file needs a class="joeCssFence".
• TODO: How can we treat https://github.com/martin-pabst/Online-IDE-new-compiler/blob/51f7ec06471a93d19a7b7f11a68766445b5eb8c2/src/client/main/gui/ThemeManager.ts#L40 ?