Make relative css imports absolute to allow loading from blobs

Author: jamesnw

Diff for: index.html

@@ -45,6 +45,7 @@
     <link rel="stylesheet" href="/anchor-scope.css" />
     <link rel="stylesheet" href="/position-area.css" />
     <link rel="stylesheet" href="/anchor-inside-outside.css" />
+    <link rel="stylesheet" href="/import-has-import.css" />
     <!-- Included to test invalid stylesheets -->
     <link rel="stylesheet" href="/fake.css" />
     <style>
@@ -1328,6 +1329,47 @@ <h2>
   top: anchor(center);
 }</code></pre>
     </section>
+
+    <section id="imports" class="demo-item">
+      <h2>
+        <a href="#imports" aria-hidden="true">🔗</a>
+        Works with CSS @imports
+      </h2>
+      <div class="demo-elements">
+        <div class="anchor">Anchor</div>
+        <div class="target" id="target-1">Target One</div>
+        <div class="target" id="target-2">Target Two</div>
+      </div>
+      <p class="note">
+        With polyfill applied: Target and Anchor text is orange (from styles
+        defined in an imported stylesheet). Target One is positioned at the
+        bottom right corner of the Anchor.<br />
+
+        <strong>Note:</strong> Target Two has <code>position-area</code> defined
+        in an imported stylesheet, which is not parsed by the polyfill, so it is
+        not positioned correctly. It should be positioned at the bottom left
+        corner.
+      </p>
+      <pre><code class="language-css">@import url('./import-is-imported-url.css') supports(display: grid) screen and (min-width: 400px);
+@import './import-is-imported-string.css';
+
+/* ./import-is-imported-url.css */
+#imports #target-1{
+  color: var(--brand-orange);
+}
+
+#imports #target-2{
+  position-area: block-end inline-start;
+  color: var(--brand-orange);
+}
+
+/* ./import-is-imported-string.css */
+#imports .anchor{
+  color: var(--brand-orange);
+}
+      </code></pre>
+    </section>
+
     <section id="sponsor">
       <h2>Sponsor OddBird’s OSS Work</h2>
       <p>

Diff for: public/import-has-import.css

@@ -0,0 +1,17 @@
+@import url('./import-is-imported-url.css') supports(display: grid) screen and
+  (min-width: 400px);
+/* stylelint-disable-next-line import-notation */
+@import './import-is-imported-string.css';
+
+#imports .anchor {
+  anchor-name: --import-anchor;
+}
+
+#imports .target {
+  position: absolute;
+  position-anchor: --import-anchor;
+}
+
+#imports #target-1 {
+  position-area: end;
+}

Diff for: public/import-is-imported-string.css

@@ -0,0 +1,3 @@
+#imports .anchor {
+  color: var(--brand-orange);
+}

Diff for: public/import-is-imported-url.css

@@ -0,0 +1,8 @@
+#imports #target-1 {
+  color: var(--brand-orange);
+}
+
+#imports #target-2 {
+  position-area: block-end inline-start;
+  color: var(--brand-orange);
+}

Diff for: src/parse.ts

@@ -44,6 +44,7 @@ import {
   getAST,
   getSelectors,
   isAnchorFunction,
+  makeImportUrlAbsolute,
   type StyleData,
 } from './utils.js';
 import { validatedForPositioning } from './validate.js';
@@ -682,6 +683,23 @@ 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);
+        },
+      });
+      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>>();
   // Store any `anchor()` fns

Diff for: src/utils.ts

@@ -1,4 +1,5 @@
 import type {
+  Atrule,
   CssNode,
   Declaration,
   FunctionNode,
@@ -7,6 +8,8 @@ import type {
   Selector as CssTreeSelector,
   SelectorList,
   Value,
+  AtrulePrelude,
+  StyleSheet,
 } from 'css-tree';
 import generate from 'css-tree/generator';
 import parse from 'css-tree/parser';
@@ -27,9 +30,9 @@ export function isAnchorFunction(node: CssNode | null): node is FunctionNode {
   return Boolean(node && node.type === 'Function' && node.name === 'anchor');
 }
 
-export function getAST(cssText: string) {
+export function getAST(cssText: string, parseAtrulePrelude = false) {
   return parse(cssText, {
-    parseAtrulePrelude: false,
+    parseAtrulePrelude: parseAtrulePrelude,
     parseCustomProperty: true,
   });
 }
@@ -50,6 +53,25 @@ export function getDeclarationValue(node: DeclarationWithValue) {
   return (node.value.children.first as Identifier).name;
 }
 
+function isImportRule(node: CssNode): node is Atrule {
+  return node.type === 'Atrule' && node.name === 'import';
+}
+
+export function makeImportUrlAbsolute(node: CssNode): boolean {
+  if (!isImportRule(node)) return false;
+  const reparsedNode = (getAST(generateCSS(node), true) as StyleSheet).children.first;
+  if (!reparsedNode || !isImportRule(reparsedNode)) return false;
+  if (reparsedNode.prelude?.type !== 'AtrulePrelude') return false;
+
+  // URL is always the first child of the prelude
+  const url = reparsedNode.prelude.children.first;
+  if (!url) return false;
+  if (url.type !== 'Url' && url.type !== 'String') return false;
+  url.value = new URL(url.value, document.baseURI).href;
+  node.prelude = reparsedNode.prelude;
+  return true;
+}
+
 export interface StyleData {
   el: HTMLElement;
   css: string;