Load JS and CSS polyfill individually

flackr · Jan 28, 2024 · c956c8f · c956c8f
1 parent 6164bc8
commit c956c8f
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 15 deletions.
diff --git a/src/index.js b/src/index.js
@@ -25,17 +25,10 @@ import {
 
 import { initCSSPolyfill } from "./scroll-timeline-css"
 
-function initPolyfill() {
-  // initCSSPolyfill returns true iff the host browser supports SDA
-  if (initCSSPolyfill()) {
-    return;
-  }
-
-  if ([...document.styleSheets].filter((s) => s.href !== null).length) {
-    console.warn(
-      'Non-Inline StyleSheets detected: ScrollTimeline polyfill currently only' +
-        ' supports inline styles within style tags'
-    );
+function initJSPolyfill() {
+  // Don’t load if the browser already has support
+  if ((typeof window.ScrollTimeline) !== 'undefined') {
+    return false;
   }
 
   if (
@@ -73,6 +66,26 @@ function initPolyfill() {
       "Error installing ScrollTimeline polyfill: could not attach WAAPI's getAnimations to document"
     );
   }
+
+  return true;
+}
+
+function initPolyfill() {
+  const jsPolyfillLoaded = initJSPolyfill();
+  const cssPolyfillLoaded = initCSSPolyfill();
+
+  if (jsPolyfillLoaded || jsPolyfillLoaded) {
+    console.log('ScrollTimeline Polyfill loaded');
+  }
+
+  if (cssPolyfillLoaded) {
+    if ([...document.styleSheets].filter((s) => s.href !== null).length) {
+      console.warn(
+        'Non-Inline StyleSheets detected: ScrollTimeline polyfill currently only' +
+          ' supports inline styles within style tags'
+      );
+    }
+  }
 }
 
 initPolyfill();
diff --git a/src/scroll-timeline-css.js b/src/scroll-timeline-css.js
@@ -5,7 +5,7 @@ import { ScrollTimeline, ViewTimeline, getScrollParent, calculateRange,
 
 const parser = new StyleParser();
 
-function initMutationObserver() {
+function monitorAndParseStyleSheets() {
   const sheetObserver = new MutationObserver((entries) => {
     for (const entry of entries) {
       for (const addedNode of entry.addedNodes) {
@@ -59,7 +59,7 @@ function relativePosition(phase, container, target, axis, optionsInset, percent)
   return calculateRelativePosition(phaseRange, percent, coverRange);
 }
 
-function createScrollTimeline(anim, animationName, target) {
+export function createScrollTimeline(anim, animationName, target) {
   const animOptions = parser.getAnimationTimelineOptions(animationName, target);
 
   if(!animOptions)
@@ -135,10 +135,11 @@ function updateKeyframesIfNecessary(anim, options) {
 export function initCSSPolyfill() {
   // Don't load if browser claims support
   if (CSS.supports("animation-timeline: --works")) {
-    return true;
+    return false;
   }
 
-  initMutationObserver();
+  // Monitor and parse the Style Sheets
+  monitorAndParseStyleSheets();
 
   // Override CSS.supports() to claim support for the CSS properties from now on
   const oldSupports = CSS.supports;
@@ -163,7 +164,11 @@ export function initCSSPolyfill() {
           // invoke the set the timeline procedure on the existing animation.
           anim.timeline = result.timeline;
         }
+      } else {
+        console.info('Not a ScrollTimeline dinges');
       }
     });
   });
+
+  return true;
 }