Use style elements in head rather than blob links

Author: jamesnw

Diff for: src/parse.ts

@@ -684,28 +684,30 @@ export async function parseCSS(styleData: StyleData[]) {
     }
   }
 
-  for (const styleObj of styleData) {
-    if (styleObj.changed) {
-      let changed = false;
-      const ast = getAST(styleObj.css);
-      walk(ast, {
-        visit: 'Atrule',
-        enter(node) {
-          changed = makeImportUrlAbsolute(node);
-        },
-      });
-      walk(ast, {
-        visit: 'Declaration',
-        enter(node) {
-          changed = makeDeclarationValueUrlAbsolute(node) || changed;
-        },
-      });
-      if (changed) {
-        // Update CSS
-        styleObj.css = generateCSS(ast);
-      }
-    }
-  }
+  // for (const styleObj of styleData) {
+  //   if (styleObj.changed) {
+  //     let changed = false;
+  //     const ast = getAST(styleObj.css);
+  //     // @import rules need to be reparsed, as atrule preludes are not parsed
+  //     // by default
+  //     walk(ast, {
+  //       visit: 'Atrule',
+  //       enter(node) {
+  //         changed = makeImportUrlAbsolute(node);
+  //       },
+  //     });
+  //     walk(ast, {
+  //       visit: 'Declaration',
+  //       enter(node) {
+  //         changed = makeDeclarationValueUrlAbsolute(node) || changed;
+  //       },
+  //     });
+  //     if (changed) {
+  //       // Update CSS
+  //       styleObj.css = generateCSS(ast);
+  //     }
+  //   }
+  // }
 
   // Store inline style custom property mappings for each target element
   const inlineStyles = new Map<HTMLElement, Record<string, string>>();

Diff for: src/transform.ts

@@ -21,35 +21,27 @@ export async function transformCSS(
         el.innerHTML = css;
       } else if (el instanceof HTMLLinkElement) {
         // Create new link
-        const blob = new Blob([css], { type: 'text/css' });
-        const url = URL.createObjectURL(blob);
-        const link = document.createElement('link');
+        const styleEl = document.createElement('style');
+        styleEl.textContent = css;
         for (const name of el.getAttributeNames()) {
           if (!name.startsWith('on') && !excludeAttributes.includes(name)) {
             const attr = el.getAttribute(name);
             if (attr !== null) {
-              link.setAttribute(name, attr);
+              styleEl.setAttribute(name, attr);
             }
           }
         }
-        link.setAttribute('href', url);
-        const promise = new Promise((res) => {
-          link.onload = res;
-        });
         if (!created) {
           // This is an existing stylesheet, so we replace it.
-          el.insertAdjacentElement('beforebegin', link);
+          el.insertAdjacentElement('beforebegin', styleEl);
           // Wait for new stylesheet to be loaded
-          await promise;
           el.remove();
         } else {
           // This is a new stylesheet, so we append it.
-          link.rel = 'stylesheet';
-          document.head.insertAdjacentElement('beforeend', link);
+          document.head.insertAdjacentElement('beforeend', styleEl);
           // Wait for new stylesheet to be loaded
-          await promise;
         }
-        updatedObject.el = link;
+        updatedObject.el = styleEl;
       } else if (el.hasAttribute('data-has-inline-styles')) {
         // Handle inline styles
         const attr = el.getAttribute('data-has-inline-styles');