Make declaration urls absolute

Author: jamesnw

Diff for: index.html

@@ -1343,7 +1343,8 @@ <h2>
       <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 />
+        bottom right corner of the Anchor. The Anchor has an envelope icon on
+        both sides of the text.<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
@@ -1353,6 +1354,10 @@ <h2>
       <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';
 
+#imports .anchor::after {
+  content: url('./mail.svg');
+}
+
 /* ./import-is-imported-url.css */
 #imports #target-1{
   color: var(--brand-orange);

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

@@ -7,6 +7,10 @@
   anchor-name: --import-anchor;
 }
 
+#imports .anchor::after {
+  content: url('./mail.svg');
+}
+
 #imports .target {
   position: absolute;
   position-anchor: --import-anchor;

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

@@ -6,3 +6,7 @@
   position-area: block-end inline-start;
   color: var(--brand-orange);
 }
+
+#imports .anchor::before {
+  content: url('./mail.svg');
+}

Diff for: public/mail.svg

@@ -44,6 +44,7 @@ import {
   getAST,
   getSelectors,
   isAnchorFunction,
+  makeDeclarationValueUrlAbsolute,
   makeImportUrlAbsolute,
   type StyleData,
 } from './utils.js';
@@ -693,6 +694,12 @@ export async function parseCSS(styleData: StyleData[]) {
           changed = makeImportUrlAbsolute(node);
         },
       });
+      walk(ast, {
+        visit: 'Declaration',
+        enter(node) {
+          changed = makeDeclarationValueUrlAbsolute(node) || changed;
+        },
+      });
       if (changed) {
         // Update CSS
         styleObj.css = generateCSS(ast);

Diff for: src/parse.ts

@@ -1,15 +1,14 @@
-import type {
-  Atrule,
-  CssNode,
-  Declaration,
-  FunctionNode,
-  Identifier,
+import {
+  type Atrule,
+  type CssNode,
+  type Declaration,
+  type FunctionNode,
+  type Identifier,
   List,
-  Selector as CssTreeSelector,
-  SelectorList,
-  Value,
-  AtrulePrelude,
-  StyleSheet,
+  type Selector as CssTreeSelector,
+  type SelectorList,
+  type StyleSheet,
+  type Value,
 } from 'css-tree';
 import generate from 'css-tree/generator';
 import parse from 'css-tree/parser';
@@ -59,7 +58,10 @@ function isImportRule(node: CssNode): node is Atrule {
 
 export function makeImportUrlAbsolute(node: CssNode): boolean {
   if (!isImportRule(node)) return false;
-  const reparsedNode = (getAST(generateCSS(node), true) as StyleSheet).children.first;
+  // AtRulePreludes are not parsed by default, so we need to reparse the node
+  // to get the URL.
+  const reparsedNode = (getAST(generateCSS(node), true) as StyleSheet).children
+    .first;
   if (!reparsedNode || !isImportRule(reparsedNode)) return false;
   if (reparsedNode.prelude?.type !== 'AtrulePrelude') return false;
 
@@ -72,6 +74,23 @@ export function makeImportUrlAbsolute(node: CssNode): boolean {
   return true;
 }
 
+export function makeDeclarationValueUrlAbsolute(node: CssNode): boolean {
+  if (!isDeclaration(node)) return false;
+
+  if (node.value.type !== 'Value') return false;
+  let changed = false;
+
+  const mapped = node.value.children.toArray().map((child) => {
+    if (!child) return child;
+    if (child.type !== 'Url') return child;
+    child.value = new URL(child.value, document.baseURI).href;
+    changed = true;
+    return child;
+  });
+  node.value.children = new List<CssNode>().fromArray(mapped);
+  return changed;
+}
+
 export interface StyleData {
   el: HTMLElement;
   css: string;