From 8c871ae7177099a16bcaa3a12bde27049c08550e Mon Sep 17 00:00:00 2001 From: Nicolas Turlais Date: Thu, 18 Oct 2018 09:45:44 +0200 Subject: [PATCH 1/7] Ignore resource hinted link --- src/run.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/run.js b/src/run.js index f2f9b367..b54eb157 100644 --- a/src/run.js +++ b/src/run.js @@ -334,6 +334,11 @@ const processPage = ({ elem.href.toLowerCase().startsWith('blob:') || elem.media.toLowerCase() === 'print' ); + + const isResourceHinted = elem => + (elem.rel === 'preload' || + elem.rel === 'prefetch'); + // #fragments are omitted from puppeteer's response.url(), so // we need to strip them from stylesheet links, otherwise the // hrefs won't always match when we check for missing ASTs. @@ -349,6 +354,9 @@ const processPage = ({ // of all the ones we're going to assess. For style elements, // also extract each tag's content. Array.from(document.querySelectorAll('link, style')).forEach(elem => { + if (isResourceHinted(elem)) { + return; + } if (isStylesheetLink(elem)) { const href = defragment(elem.href); hrefs.push(href); From a38632fac04e6f23faabd77ad75e198fda3b5469 Mon Sep 17 00:00:00 2001 From: Nicolas Turlais Date: Thu, 18 Oct 2018 09:46:17 +0200 Subject: [PATCH 2/7] Adding test file --- tests/examples/resource-hinted-css.html | 12 ++++++++++++ 1 file changed, 12 insertions(+) create mode 100644 tests/examples/resource-hinted-css.html diff --git a/tests/examples/resource-hinted-css.html b/tests/examples/resource-hinted-css.html new file mode 100644 index 00000000..00de64b2 --- /dev/null +++ b/tests/examples/resource-hinted-css.html @@ -0,0 +1,12 @@ + + + + + + + + + +

defragmenting...

+ + From 813ca0a8949fd229e7eab462911ab8ae0b82bc66 Mon Sep 17 00:00:00 2001 From: Nicolas Turlais Date: Thu, 18 Oct 2018 09:46:54 +0200 Subject: [PATCH 3/7] Adding test case --- tests/main.test.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/tests/main.test.js b/tests/main.test.js index 067ac86e..0fece076 100644 --- a/tests/main.test.js +++ b/tests/main.test.js @@ -306,3 +306,9 @@ test('handles #fragments in stylesheet hrefs', async () => { const { finalCss } = await runMinimalcss('url-fragment'); expect(finalCss).toMatch('p{color:red}'); }); + +test('ignore resource hinted (preloaded or prefetched) css', async () => { + const { finalCss } = await runMinimalcss('resource-hinted-css'); + expect(finalCss).toMatch('p{color:red}'); +}); + From 999260855c7b08f83cbdb67b45c9f7726ec25ef4 Mon Sep 17 00:00:00 2001 From: Nicolas Turlais Date: Thu, 18 Oct 2018 10:04:39 +0200 Subject: [PATCH 4/7] Prettier --- src/run.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/run.js b/src/run.js index b54eb157..f0f60166 100644 --- a/src/run.js +++ b/src/run.js @@ -336,8 +336,7 @@ const processPage = ({ ); const isResourceHinted = elem => - (elem.rel === 'preload' || - elem.rel === 'prefetch'); + elem.rel === 'preload' || elem.rel === 'prefetch'; // #fragments are omitted from puppeteer's response.url(), so // we need to strip them from stylesheet links, otherwise the From eafdb4c162f0e3ac6bbecf1e47d26a9d4f9e4d05 Mon Sep 17 00:00:00 2001 From: vagrant Date: Thu, 18 Oct 2018 08:22:16 +0000 Subject: [PATCH 5/7] Review --- src/run.js | 8 ++------ tests/main.test.js | 1 - 2 files changed, 2 insertions(+), 7 deletions(-) diff --git a/src/run.js b/src/run.js index f0f60166..0af1fda3 100644 --- a/src/run.js +++ b/src/run.js @@ -325,6 +325,8 @@ const processPage = ({ elem.tagName === 'STYLE' && (!elem.type || elem.type.toLowerCase() === 'text/css'); const isStylesheetLink = elem => + elem.rel !== 'preload' && + elem.rel !== 'prefetch' && elem.tagName === 'LINK' && elem.href && (elem.rel.toLowerCase() === 'stylesheet' || @@ -335,9 +337,6 @@ const processPage = ({ elem.media.toLowerCase() === 'print' ); - const isResourceHinted = elem => - elem.rel === 'preload' || elem.rel === 'prefetch'; - // #fragments are omitted from puppeteer's response.url(), so // we need to strip them from stylesheet links, otherwise the // hrefs won't always match when we check for missing ASTs. @@ -353,9 +352,6 @@ const processPage = ({ // of all the ones we're going to assess. For style elements, // also extract each tag's content. Array.from(document.querySelectorAll('link, style')).forEach(elem => { - if (isResourceHinted(elem)) { - return; - } if (isStylesheetLink(elem)) { const href = defragment(elem.href); hrefs.push(href); diff --git a/tests/main.test.js b/tests/main.test.js index 0fece076..92bfb95f 100644 --- a/tests/main.test.js +++ b/tests/main.test.js @@ -311,4 +311,3 @@ test('ignore resource hinted (preloaded or prefetched) css', async () => { const { finalCss } = await runMinimalcss('resource-hinted-css'); expect(finalCss).toMatch('p{color:red}'); }); - From 954ed326724f93991bac65caf10e7ba12479bd51 Mon Sep 17 00:00:00 2001 From: Nicolas Turlais Date: Thu, 18 Oct 2018 08:22:16 +0000 Subject: [PATCH 6/7] Review --- src/run.js | 8 ++------ tests/main.test.js | 1 - 2 files changed, 2 insertions(+), 7 deletions(-) diff --git a/src/run.js b/src/run.js index f0f60166..0af1fda3 100644 --- a/src/run.js +++ b/src/run.js @@ -325,6 +325,8 @@ const processPage = ({ elem.tagName === 'STYLE' && (!elem.type || elem.type.toLowerCase() === 'text/css'); const isStylesheetLink = elem => + elem.rel !== 'preload' && + elem.rel !== 'prefetch' && elem.tagName === 'LINK' && elem.href && (elem.rel.toLowerCase() === 'stylesheet' || @@ -335,9 +337,6 @@ const processPage = ({ elem.media.toLowerCase() === 'print' ); - const isResourceHinted = elem => - elem.rel === 'preload' || elem.rel === 'prefetch'; - // #fragments are omitted from puppeteer's response.url(), so // we need to strip them from stylesheet links, otherwise the // hrefs won't always match when we check for missing ASTs. @@ -353,9 +352,6 @@ const processPage = ({ // of all the ones we're going to assess. For style elements, // also extract each tag's content. Array.from(document.querySelectorAll('link, style')).forEach(elem => { - if (isResourceHinted(elem)) { - return; - } if (isStylesheetLink(elem)) { const href = defragment(elem.href); hrefs.push(href); diff --git a/tests/main.test.js b/tests/main.test.js index 0fece076..92bfb95f 100644 --- a/tests/main.test.js +++ b/tests/main.test.js @@ -311,4 +311,3 @@ test('ignore resource hinted (preloaded or prefetched) css', async () => { const { finalCss } = await runMinimalcss('resource-hinted-css'); expect(finalCss).toMatch('p{color:red}'); }); - From 32f55b3ea243c77af0da6efc44b610ef519b9815 Mon Sep 17 00:00:00 2001 From: Nicolas Turlais Date: Tue, 20 Nov 2018 15:29:17 +0000 Subject: [PATCH 7/7] Simplified stylesheet links detection --- src/run.js | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) diff --git a/src/run.js b/src/run.js index 0af1fda3..eae32dfe 100644 --- a/src/run.js +++ b/src/run.js @@ -324,18 +324,14 @@ const processPage = ({ const isCssStyleTag = elem => elem.tagName === 'STYLE' && (!elem.type || elem.type.toLowerCase() === 'text/css'); + const isStylesheetLink = elem => - elem.rel !== 'preload' && - elem.rel !== 'prefetch' && elem.tagName === 'LINK' && elem.href && - (elem.rel.toLowerCase() === 'stylesheet' || - elem.href.toLowerCase().endsWith('.css')) && - !( - elem.href.toLowerCase().startsWith('data:') || - elem.href.toLowerCase().startsWith('blob:') || - elem.media.toLowerCase() === 'print' - ); + elem.rel.toLowerCase() === 'stylesheet' && + !elem.href.toLowerCase().startsWith('data:') && + !elem.href.toLowerCase().startsWith('blob:') && + elem.media.toLowerCase() !== 'print'; // #fragments are omitted from puppeteer's response.url(), so // we need to strip them from stylesheet links, otherwise the