Resolve relative urls for blob stylesheets - fixes #279

manuelmeister · web-flow · commit 6125d80e665c · 2024-08-26T10:52:10.000-04:00
- Don't prefix data: &amp; blob: urls
- Handle path-absolute urls correctly
diff --git a/demo/view-timeline-external-css-with-url/asset/green.png b/demo/view-timeline-external-css-with-url/asset/green.png
diff --git a/demo/view-timeline-external-css-with-url/asset/red.png b/demo/view-timeline-external-css-with-url/asset/red.png
diff --git a/demo/view-timeline-external-css-with-url/index.html b/demo/view-timeline-external-css-with-url/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<script src="../../dist/scroll-timeline.js"></script>
+
+<link rel="stylesheet" href="styles.css">
+<body>  
+  <div id="container">
+    <div class="big-spacer"></div>
+    <div id="subject"></div>
+    <div class="big-spacer"></div>
+    <div id=box></div>
+  </div>
+</body>
+
diff --git a/demo/view-timeline-external-css-with-url/styles.css b/demo/view-timeline-external-css-with-url/styles.css
@@ -0,0 +1,48 @@
+#container {
+  overflow-y: scroll;
+  height:  300px;
+  width: 300px;
+  border:  1px solid black;
+  timeline-scope: --foo;
+}
+.big-spacer {
+  height:  800px;
+}
+#subject {
+  background: url(asset/green.png), blue;
+  height:  100px;
+  width:  100px;
+  view-timeline-name: --foo;
+}
+#box {
+  position: fixed;
+  top: 0;
+  background: url("../view-timeline-external-css-with-url/asset/red.png"), yellow;
+  width: 50px;
+  height: 50px;
+  /* Please don't delete the following comments */
+  /* This comment has been added to make sure css parser ignores it */
+  /* animation-range: entry 0% 100%; */
+  animation: linear anim forwards;
+  animation-timeline: --foo;
+}
+
+/* Please don't delete the following comments */
+/* This comment has been added to make sure css parser ignores it */
+/*
+#box {
+  position: fixed;
+  top: 0;
+  background-color: red;
+  width: 50px;
+  height: 50px;
+  animation-timeline: foo;
+  animation-range: entry 0% 100%;
+  animation: linear anim;
+}
+*/
+
+@keyframes anim {
+  from { top: 0px; left: 0px; }
+  to { top: 100px; left: 200px; }
+}
diff --git a/index.html b/index.html
@@ -33,6 +33,9 @@
     <li>
         <a href="demo/view-timeline-external-css/">demo/view-timeline-external-css</a>
     </li>
+    <li>
+        <a href="demo/view-timeline-external-css-with-url/">demo/view-timeline-external-css-with-url</a>
+    </li>
     <li>
         <a href="demo/basic/anonymous-scroll-timeline.html">demo/basic/anonymous-scroll-timeline.html</a>
     </li>
diff --git a/src/scroll-timeline-css-parser.js b/src/scroll-timeline-css-parser.js
@@ -83,10 +83,30 @@ export class StyleParser {
         this.handleScrollTimelineProps(rule, p);
     }
 
-    // If this sheet has no srcURL (like from a <style> tag), we are done.
-    // TODO: Otherwise, we have to find `url()` functions and resolve
-    // relative and path-absolute URLs to absolute URLs.
-    return p.sheetSrc;
+    return this.replaceUrlFunctions(p.sheetSrc, srcUrl);
+  }
+
+
+  // If this sheet has no srcURL (like from a <style> tag), we are done.
+  // Otherwise, we have to find `url()` functions and resolve
+  // relative and path-absolute URLs to absolute URLs.
+  replaceUrlFunctions(sheetSrc, srcUrl) {
+    if (!srcUrl) {
+      return sheetSrc;
+    }
+
+    const srcUrlOrigin = new URL(srcUrl).origin
+    const srcUrlDir = srcUrl.lastIndexOf('/') > srcUrlOrigin.length
+        ? srcUrl.substring(0, srcUrl.lastIndexOf('/'))
+        : srcUrlOrigin;
+
+    // replace relative paths
+    sheetSrc = sheetSrc.replace(/url\((?:(['"])(?!https?:\/\/|data:|blob:|\/)|(?!['"]?(?:https?:\/\/|data:|blob:|\/)))(?:\.\/)?/gm, `url($1${srcUrlDir}/`)
+
+    // replace path-absolute paths
+    sheetSrc = sheetSrc.replace(/url\((['"])?\//gm, `url($1${srcUrlOrigin}/`)
+
+    return sheetSrc;
   }
 
   getAnimationTimelineOptions(animationName, target) {
@@ -107,7 +127,7 @@ export class StyleParser {
         }
       } catch {
         // TODO: handle nested at-rules
-      }      
+      }
     }
 
     return null;
@@ -154,10 +174,10 @@ export class StyleParser {
   findPreviousSiblingOrAncestorMatchingSelector(target, selector) {
     // Target self
     let candidate = target;
-    
+
     // Walk the DOM tree: preceding siblings and ancestors
     while (candidate) {
-      if (candidate.matches(selector)) 
+      if (candidate.matches(selector))
         return candidate;
       candidate = candidate.previousElementSibling || candidate.parentElement;
     }
diff --git a/src/scroll-timeline-css.js b/src/scroll-timeline-css.js
@@ -56,7 +56,7 @@ function initMutationObserver() {
     fetch(linkElement.getAttribute('href')).then(async (response) => {
       const result = await response.text();
       let newSrc = parser.transpileStyleSheet(result, true);
-      newSrc = parser.transpileStyleSheet(result, false);
+      newSrc = parser.transpileStyleSheet(result, false, response.url);
       if (newSrc != result) {
         const blob = new Blob([newSrc], { type: 'text/css' });
         const url = URL.createObjectURL(blob);
