Use CSSStyleSheet constructor instead of <style> elements #1698

Open
opened 2026-04-21 15:05:02 +02:00 by ceymard · 3 comments

When creating the codemirror CSS, it injects style elements into the page.

This doesn't sit well with CSP, which doesn't let me use the CSS unless I add things like "unsafe-eval" for css or other directives.

However, CSSStyleSheet adopted through document.body.adoptedStylesheet.add(my_stylesheet) do not suffer the same treatment.

I think it would be a good move to generate CSS with this instead.

After some digging however, I see that style-mod is used, and that style-mod happy does so. I do not understand why CodeMirror's view does not trigger that mechanism however.

When creating the codemirror CSS, it injects style elements into the page. This doesn't sit well with CSP, which doesn't let me use the CSS unless I add things like "unsafe-eval" for css or other directives. However, CSSStyleSheet adopted through `document.body.adoptedStylesheet.add(my_stylesheet)` do not suffer the same treatment. I think it would be a good move to generate CSS with this instead. After some digging however, I see that style-mod is used, and that style-mod happy does so. I do not understand why CodeMirror's view does not trigger that mechanism however.
Owner

The reason adoptedStylesheets isn't used in the top document is that I don't want injected styles to override rules with the same precedence specified in <style> tags. See https://github.com/WICG/construct-stylesheets/issues/93 and #360.

The reason `adoptedStylesheets` isn't used in the top document is that I don't want injected styles to override rules with the same precedence specified in `<style>` tags. See https://github.com/WICG/construct-stylesheets/issues/93 and #360.
Author

I understand.

However, it still breaks CSP-powered sites.

Could there be a case to give an option that would change this behaviour in an opt-in manner ?

I understand. However, it still breaks CSP-powered sites. Could there be a case to give an option that would change this behaviour in an opt-in manner ?
Owner

Have you tried using EditorView.cspNonce to get around this issue?

Have you tried using [`EditorView.cspNonce`](https://codemirror.net/docs/ref/#view.EditorView^cspNonce) to get around this issue?
Sign in to join this conversation.
No labels
No milestone
No project
No assignees
2 participants
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
codemirror/dev#1698
No description provided.