diff --git a/src/index.js b/src/index.js index 09f0d3e..5aafe30 100644 --- a/src/index.js +++ b/src/index.js @@ -31,13 +31,6 @@ function initPolyfill() { 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' - ); - } - if ( !Reflect.defineProperty(window, 'ScrollTimeline', { value: ScrollTimeline }) ) { diff --git a/src/scroll-timeline-css.js b/src/scroll-timeline-css.js index 3c30461..f13d10c 100644 --- a/src/scroll-timeline-css.js +++ b/src/scroll-timeline-css.js @@ -41,8 +41,26 @@ function initMutationObserver() { el.innerHTML = newSrc; } - function handleLinkedStylesheet(el) { - // TODO + function handleLinkedStylesheet(linkElement) { + // Filter only css links to external stylesheets. + if (linkElement.type != 'text/css' && linkElement.rel != 'stylesheet' || !linkElement.href) { + return; + } + const url = new URL(linkElement.href, document.baseURI); + if (url.origin != location.origin) { + // Most likely we won't be able to fetch resources from other origins. + return; + } + fetch(linkElement.getAttribute('href')).then(async (response) => { + const result = await response.text(); + let newSrc = parser.transpileStyleSheet(result, true); + newSrc = parser.transpileStyleSheet(result, false); + if (newSrc != result) { + const blob = new Blob([newSrc], { type: 'text/css' }); + const url = URL.createObjectURL(blob); + linkElement.setAttribute('href', url); + } + }); } document.querySelectorAll("style").forEach((tag) => handleStyleTag(tag));