From 1d82dbb0713ad306770926c3f23b3241946f0e96 Mon Sep 17 00:00:00 2001 From: Bart Veneman Date: Mon, 11 Oct 2021 19:51:19 +0200 Subject: [PATCH] WIP: ignore-inline-styles feature --- src/index.js | 41 ++++++++++++++++++++--------------- test/index.js | 10 +++++++++ test/snapshots/index.js.md | 7 ++++++ test/snapshots/index.js.snap | Bin 406 -> 430 bytes 4 files changed, 40 insertions(+), 18 deletions(-) diff --git a/src/index.js b/src/index.js index 23235de..f2928a9 100644 --- a/src/index.js +++ b/src/index.js @@ -2,7 +2,7 @@ const puppeteer = require('puppeteer') const normalizeUrl = require('normalize-url') -function InvalidUrlError({url, statusCode, statusText}) { +function InvalidUrlError({ url, statusCode, statusText }) { this.name = 'InvalidUrlError' this.message = `There was an error retrieving CSS from ${url}.\n\tHTTP status code: ${statusCode} (${statusText})` } @@ -14,7 +14,7 @@ InvalidUrlError.prototype = Error.prototype * @param {string} waitUntil https://github.com/puppeteer/puppeteer/blob/master/docs/api.md#pagegotourl-options * @returns {string} All CSS that was found */ -module.exports = async (url, {waitUntil = 'networkidle0', origins = 'exclude'} = {}) => { +module.exports = async (url, { waitUntil = 'networkidle0', origins = 'exclude', inlineStyles = 'include' } = {}) => { // Setup a browser instance const browser = await puppeteer.launch() @@ -25,8 +25,8 @@ module.exports = async (url, {waitUntil = 'networkidle0', origins = 'exclude'} = // `HeadlessChrome/88.0.4298.0` and some websites/CDN's block that with a HTTP 403 await page.setUserAgent('Mozilla/5.0 (Macintosh; Intel Mac OS X 10.16; rv:85.0) Gecko/20100101 Firefox/85.0') await page.coverage.startCSSCoverage() - url = normalizeUrl(url, {stripWWW: false}) - const response = await page.goto(url, {waitUntil}) + url = normalizeUrl(url, { stripWWW: false }) + const response = await page.goto(url, { waitUntil }) // Make sure that we only try to extract CSS from valid pages. // Bail out if the response is an invalid request (400, 500) @@ -65,7 +65,7 @@ module.exports = async (url, {waitUntil = 'networkidle0', origins = 'exclude'} = return { type: stylesheet.ownerNode.tagName.toLowerCase(), href: stylesheet.href || document.location.href, - css: [...stylesheet.cssRules].map(({cssText}) => cssText).join('\n') + css: [...stylesheet.cssRules].map(({ cssText }) => cssText).join('\n') } }) }) @@ -82,15 +82,18 @@ module.exports = async (url, {waitUntil = 'networkidle0', origins = 'exclude'} = // CSSRule: // [x-extract-css-inline-style] { color: red; } // - const inlineCssRules = await page.evaluate(() => { - return [...document.querySelectorAll('[style]')] - .map(element => element.getAttribute('style')) - // Filter out empty style="" attributes - .filter(Boolean) - }) - const inlineCss = inlineCssRules - .map(rule => `[x-extract-css-inline-style] { ${rule} }`) - .map(css => ({type: 'inline', href: url, css})) + let inlineCss + if (inlineStyles !== 'exclude') { + const inlineCssRules = await page.evaluate(() => { + return [...document.querySelectorAll('[style]')] + .map(element => element.getAttribute('style')) + // Filter out empty style="" attributes + .filter(Boolean) + }) + inlineCss = inlineCssRules + .map(rule => `[x-extract-css-inline-style] { ${rule} }`) + .map(css => ({ type: 'inline', href: url, css })) + } const links = coverage // Filter out the tags that were found in the coverage @@ -106,9 +109,11 @@ module.exports = async (url, {waitUntil = 'networkidle0', origins = 'exclude'} = await browser.close() - const css = links - .concat(styleSheetsApiCss) - .concat(inlineCss) + const css = links.concat(styleSheetsApiCss) + + if (inlineStyles !== 'exclude') { + css.concat(inlineCss) + } // Return the complete structure ... if (origins === 'include') { @@ -118,7 +123,7 @@ module.exports = async (url, {waitUntil = 'networkidle0', origins = 'exclude'} = // ... or return all CSS as a single String return Promise.resolve( css - .map(({css}) => css) + .map(({ css }) => css) .join('\n') ) } diff --git a/test/index.js b/test/index.js index 7bd5538..7895199 100644 --- a/test/index.js +++ b/test/index.js @@ -84,6 +84,16 @@ test('it finds inline styles - JS', async t => { t.snapshot(actual) }) +test('it ignores inline styles when the flag `ignoreInline` is enabled', async t => { + const actual = await extractCss(server.url + '/inline-style-js.html', { + inlineStyles: 'exclude' + }) + + t.false(actual.includes('[x-extract-css-inline-style] { color: red; font-size: 12px; border-style: solid; }')) + t.false(actual.includes('[x-extract-css-inline-style] { border-color: blue; border-width: 1px; }')) + t.snapshot(actual) +}) + test('it yields an array of entries when the `origins` option equals `include`', async t => { const actual = await extractCss(server.url + '/kitchen-sink.html', { origins: 'include' diff --git a/test/snapshots/index.js.md b/test/snapshots/index.js.md index 5f834ac..99f6dbe 100644 --- a/test/snapshots/index.js.md +++ b/test/snapshots/index.js.md @@ -45,3 +45,10 @@ Generated by [AVA](https://avajs.dev). > Snapshot 1 '.css-imported-with-css {}' + +## it ignores inline styles when the flag `ignoreInline` is enabled + +> Snapshot 1 + + `[x-extract-css-inline-style] { color: red; font-size: 12px; border-style: solid; }␊ + [x-extract-css-inline-style] { border-color: blue; border-width: 1px; }` diff --git a/test/snapshots/index.js.snap b/test/snapshots/index.js.snap index b1e451e25586cdfb4329cd22d06d8908748b4bdc..afc9fc76c0a5b63da6d4153b3ba991bb98f3ad9b 100644 GIT binary patch delta 388 zcmV-~0ek+I1Fi#qK~_N^Q*L2!b7*gLAa*he0szsM-5EjZj}@F)TAdidVGJLO2mk;8 z00003+rz-Xz|O!cF0A>i>iFX`E_p^T*Odw|GJt>@5DRnZ%SEXk^4aac9rKmrz+OhM zXa^9>SvoA5Z{6R%QS!&e;5y4Qj9^hipjPd)nh3<6q0gEQ>_(hQB;NK zB^MX#X66<~)0#^!EwiGe zv?vu}MNw)Bnhi{|7@{k5Q!7e}5|c}G!IqOf0X8&$L&eH7Q%W*`rh^Pe4T>NvL6L}6*vkkO z?F3?8abeA8RmUHnamh1!xvo@z5iGhMh_%y}^DLIK*!d@a?|;?5(yVWcU{QXcp>mcE zi{@MRw{MjEu`#&L@(d$bbO#W>D*m0|oSR@7a)9|a|KjJ97{Q_jObiUn4D4XnFtRcT zGD_+t7Z>Yh<`(1^m87QVmS>h^=mJF)s%ue{h2T`i?C@sp-P=c^^GxI>QAU#T& z)?9jNnH42JrA4U<)e6b^Ir&9a3Pq_Y)(WULNa!Uc`v!zpAQUC#l%}Gq3c})!EPT$$ zBFPm@vlyZ)bW