use new css api when available

nightwing · nightwing · commit e0d69e4e11bd · 2025-07-10T15:11:54.000+04:00
diff --git a/.eslintrc b/.eslintrc
@@ -26,8 +26,8 @@
         clearTimeout: true,
         setInterval: true,
         clearInterval: true,
+        CSSStyleSheet: true,
         Blob: true,
-        cvox: true,
         alert: true,
         prompt: true,
         XMLHttpRequest: true,
diff --git a/demo/csp-simple.html b/demo/csp-simple.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <meta http-equiv="Content-Security-Policy" content="
+    style-src 'self' ;
+    img-src  'self' data: ;
+    script-src 'self' 'nonce-bootstrap-script' https://mkslanc.github.io;
+    worker-src 'self' blob:
+  ">
+  <title>Editor</title>
+</head>
+<body>
+<pre id="editor"></pre>
+
+<script src="../build/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
+
+<script nonce="bootstrap-script">
+
+var editor = ace.edit("editor", {
+    theme: "ace/theme/tomorrow_night_eighties",
+    mode: "ace/mode/html",
+    maxLines: 30,
+    wrap: true,
+    autoScrollEditorIntoView: true
+});
+
+</script>
+
+<script src="./show_own_source.js"></script>
+
+</body>
+</html>
diff --git a/demo/csp.html b/demo/csp.html
@@ -6,7 +6,7 @@
   <meta http-equiv="Content-Security-Policy" content="
     style-src 'self' ;
     img-src  'self' ;
-    script-src 'self' 'nonce-bootstrap-script';
+    script-src 'self' 'nonce-bootstrap-script' https://mkslanc.github.io;
     worker-src 'self' blob:
   ">
   <title>Editor</title>
diff --git a/src/lib/dom.js b/src/lib/dom.js
@@ -271,15 +271,38 @@ function importCssString(cssText, id, target) {
     if (id)
         cssText += "\n/*# sourceURL=ace/css/" + id + " */";
     
+    if (!USE_STYLE_TAG) {
+        try {
+            var stylesheet = styles[id];
+            if (!stylesheet) {
+                stylesheet = styles[id] = new CSSStyleSheet();
+                stylesheet.replaceSync(cssText);
+            }
+            container.adoptedStyleSheets.push(stylesheet);
+            USE_STYLE_TAG = false;
+            return;
+        } catch(e) {
+            if (USE_STYLE_TAG === null) {
+                USE_STYLE_TAG = true;
+            } else {
+                setTimeout(function() {
+                    throw e;
+                });
+            }
+        }
+    }
+    
     var style = exports.createElement("style");
     style.appendChild(doc.createTextNode(cssText));
     if (id)
         style.id = id;
-
     if (container == doc)
         container = exports.getDocumentHead(doc);
     container.insertBefore(style, container.firstChild);
 }
+var USE_STYLE_TAG = null;
+var styles = Object.create(null);
+
 exports.importCssString = importCssString;
 
 /**
