From 303a271e5b2e2ecacbd6a785c395aa9a51b9f4ec Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Thu, 11 Jul 2019 06:50:48 +0200 Subject: [PATCH 01/48] Bump lodash.merge from 4.6.1 to 4.6.2 (#11) Bumps [lodash.merge](https://github.com/lodash/lodash) from 4.6.1 to 4.6.2. - [Release notes](https://github.com/lodash/lodash/releases) - [Commits](https://github.com/lodash/lodash/commits) Signed-off-by: dependabot[bot] --- package-lock.json | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index b0dd299..2bdb59a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "extract-css-core", - "version": "1.0.0", + "version": "1.1.0", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -4390,9 +4390,9 @@ "dev": true }, "lodash.merge": { - "version": "4.6.1", - "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.1.tgz", - "integrity": "sha512-AOYza4+Hf5z1/0Hztxpm2/xiPZgi/cjMqdnKTUWTBSKchJlxXXuUSxCCl8rJlf4g6yww/j6mA8nC8Hw/EZWxKQ==", + "version": "4.6.2", + "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", + "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==", "dev": true }, "lodash.mergewith": { From 52547c7a845ac4cd20deaa7a4dac9b93b2b80c2a Mon Sep 17 00:00:00 2001 From: Bart Veneman <1536852+bartveneman@users.noreply.github.com> Date: Sat, 24 Aug 2019 21:08:33 +0200 Subject: [PATCH 02/48] Add notes in readme about CSS-in-JS --- readme.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/readme.md b/readme.md index f32a6fe..b7e8d50 100644 --- a/readme.md +++ b/readme.md @@ -19,8 +19,8 @@ Existing packages like [get-css](https://github.com/cssstats/cssstats/tree/master/packages/get-css) look at a server-generated piece of HTML and get all the `` and ` - `) - }) - const customBrowser = await puppeteerCore.launch({ - executablePath: chromium.path, - args: ['--user-agent=Extract CSS Core'] - }) - const actual = await extractCss(server.url + path, {customBrowser}) - - t.is(actual, 'body::before { content: "Extract CSS Core"; }') -}) - -test('it rejects on an invalid customBrowser option', async t => { - const path = '/browser-override' - await t.throwsAsync(extractCss(server.url + path, {customBrowser: {}}), { - message: 'The `customBrowser` option is invalid' - }) -}) From abab34e1765ab4d2d0dc129909c2310574bf1594 Mon Sep 17 00:00:00 2001 From: Bart Veneman Date: Sun, 15 Dec 2019 20:36:19 +0100 Subject: [PATCH 08/48] v2.0.0-beta.1 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index a1a85f3..2238536 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "extract-css-core", "description": "Extract all CSS from a given url, both server side and client side rendered.", - "version": "1.1.0", + "version": "2.0.0-beta.1", "homepage": "https://www.projectwallace.com/oss", "repository": "https://github.com/bartveneman/extract-css-core", "issues": "https://github.com/bartveneman/extract-css-core/issues", From 46c278d6f29e0bcbff20b4d5e216ce964b5856c3 Mon Sep 17 00:00:00 2001 From: Bart Veneman Date: Mon, 16 Dec 2019 21:39:48 +0100 Subject: [PATCH 09/48] v2.0.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 2238536..511ee6b 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "extract-css-core", "description": "Extract all CSS from a given url, both server side and client side rendered.", - "version": "2.0.0-beta.1", + "version": "2.0.0", "homepage": "https://www.projectwallace.com/oss", "repository": "https://github.com/bartveneman/extract-css-core", "issues": "https://github.com/bartveneman/extract-css-core/issues", From 04758f143c911e61c603fd3939f2671f9d1bf668 Mon Sep 17 00:00:00 2001 From: Bart Veneman <1536852+bartveneman@users.noreply.github.com> Date: Sat, 15 Feb 2020 21:36:06 +0100 Subject: [PATCH 10/48] Fix unit test for CSS-in-JS (#19) --- package-lock.json | 2 +- test/css-in-js.html | 10816 +++++++++++++++++++++++++++++++++++++++++- test/index.js | 5 +- 3 files changed, 10787 insertions(+), 36 deletions(-) diff --git a/package-lock.json b/package-lock.json index 36a90de..fe3f015 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "extract-css-core", - "version": "1.1.0", + "version": "2.0.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/test/css-in-js.html b/test/css-in-js.html index 1c13c56..2cdf011 100644 --- a/test/css-in-js.html +++ b/test/css-in-js.html @@ -1,32 +1,10786 @@ - -CodePen - CSS-in-JS example for extract-css-core unit tests - - - -
- - - - - - + + + + + React App + + + + +
+ + + + + diff --git a/test/index.js b/test/index.js index 22c236e..a5edb31 100644 --- a/test/index.js +++ b/test/index.js @@ -98,10 +98,7 @@ test('it finds css-in-js, like Styled Components', async t => { }) const actual = await extractCss(server.url + url, {waitUntil: 'load'}) - // Color is RGB instead of Hex, because of serialization: - // https://www.w3.org/TR/cssom-1/#serializing-css-values - const expected = - 'html { color: rgb(255, 0, 0); }.hJHBhT { color: blue; font-family: sans-serif; font-size: 3em; }' + const expected = 'body { color: red; }.bcMPWx { color: blue; }' t.is(actual, expected) }) From 8daed2f5a4d5fd322d701206f179e6177a7a7828 Mon Sep 17 00:00:00 2001 From: Bart Veneman <1536852+bartveneman@users.noreply.github.com> Date: Sat, 15 Feb 2020 21:40:10 +0100 Subject: [PATCH 11/48] fixes incorrect explanation in readme --- readme.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/readme.md b/readme.md index 376a80e..6d4b474 100644 --- a/readme.md +++ b/readme.md @@ -19,8 +19,8 @@ Existing packages like [get-css](https://github.com/cssstats/cssstats/tree/master/packages/get-css) look at a server-generated piece of HTML and get all the `` and ` diff --git a/test/fixture.css b/test/fixture.css index 1fa6a8f..7c88d8e 100644 --- a/test/fixture.css +++ b/test/fixture.css @@ -1,3 +1 @@ -body { - color: teal; -} +.fixture { color: red; } diff --git a/test/index.js b/test/index.js index a5edb31..462062d 100644 --- a/test/index.js +++ b/test/index.js @@ -8,121 +8,60 @@ const extractCss = require('..') let server const fixture = readFileSync(resolve(__dirname, 'fixture.css'), 'utf8') +function staticFile(req, res) { + const fileContents = readFileSync(resolve(__dirname, req.path.slice(1)), 'utf8') + res.send(fileContents) +} + test.before(async () => { server = await createTestServer() - server.get('/fixture.css', (req, res) => { - res.send(fixture) - }) + server.get('/fixture.css', staticFile) }) test.after(async () => { await server.close() }) -test('it fetches css from a page with CSS in a server generated inside the ', async t => { - const url = '/server-link-head' - server.get(url, (req, res) => { - res.send(` - - - - - - - `) - }) - - const actual = await extractCss(server.url + url) +test('it finds css in a tag - HTML', async t => { + server.get('/link-tag-html.html', staticFile) + const actual = await extractCss(server.url + '/link-tag-html.html') const expected = fixture - t.is(actual, expected) }) -test('it fetches css from a page with CSS in server generated - `) - }) - - const actual = await extractCss(server.url + url) - const expected = 'body { color: teal; }' - - t.is(actual, expected) -}) - -test('it finds JS generated CSS', async t => { - const path = '/js-generated-link' - const cssInJsExampleHtml = readFileSync( - resolve(__dirname, 'js-create-link-element.html'), - 'utf8' - ) - - server.get(path, (req, res) => { - res.send(cssInJsExampleHtml) - }) - - const actual = await extractCss(server.url + path) +test('it finds css in a tag - JS', async t => { + server.get('/link-tag-js.html', staticFile) + const actual = await extractCss(server.url + '/link-tag-js.html') const expected = fixture - t.is(actual, expected) }) -test('it finds JS generated - -

Title

-
server-style:
- - diff --git a/test/link-tag-html.html b/test/link-tag-html.html new file mode 100644 index 0000000..7f5fb70 --- /dev/null +++ b/test/link-tag-html.html @@ -0,0 +1,12 @@ + + + + + + Document + + + +

<link> tag in HTML

+ + \ No newline at end of file diff --git a/test/link-tag-js.html b/test/link-tag-js.html new file mode 100644 index 0000000..1170980 --- /dev/null +++ b/test/link-tag-js.html @@ -0,0 +1,19 @@ + + + + + + + Document + + + +

<link> tag in JS

+ + + \ No newline at end of file diff --git a/test/style-tag-html.html b/test/style-tag-html.html new file mode 100644 index 0000000..e3a446b --- /dev/null +++ b/test/style-tag-html.html @@ -0,0 +1,14 @@ + + + + + + Document + + + +

<style> tag in HTML

+ + \ No newline at end of file diff --git a/test/style-tag-js.html b/test/style-tag-js.html new file mode 100644 index 0000000..ce161b2 --- /dev/null +++ b/test/style-tag-js.html @@ -0,0 +1,16 @@ + + + + + + Document + + +

<style> tag in JS

+ + + \ No newline at end of file From 86dcd8c314850512d26a397265fa88b93edf3b7f Mon Sep 17 00:00:00 2001 From: Bart Veneman <1536852+bartveneman@users.noreply.github.com> Date: Sun, 16 Feb 2020 22:48:36 +0100 Subject: [PATCH 13/48] add support for fetching @import rules (#22) --- readme.md | 38 +++++++++++----------- src/index.js | 19 ++++++++--- test/fixture.css | 3 +- test/imported.css | 1 + test/index.js | 61 ++++++++++++++++++++++++++--------- test/kitchen-sink.html | 33 +++++++++++++++++++ test/link-tag-html.html | 1 + test/link-tag-js.html | 1 + test/snapshots/index.js.md | 45 +++++++++++++++++++++----- test/snapshots/index.js.snap | Bin 168 -> 305 bytes test/style-tag-html.html | 3 +- test/style-tag-js.html | 2 +- 12 files changed, 156 insertions(+), 51 deletions(-) create mode 100644 test/imported.css create mode 100644 test/kitchen-sink.html diff --git a/readme.md b/readme.md index 6d4b474..a49b0bd 100644 --- a/readme.md +++ b/readme.md @@ -12,6 +12,22 @@ [![XO code style](https://img.shields.io/badge/code_style-XO-5ed9c7.svg)](https://github.com/sindresorhus/xo) [![Project: Wallace](https://img.shields.io/badge/Project-Wallace-29c87d.svg)](https://www.projectwallace.com/oss) +## Usage + +```js +const extractCss = require('extract-css-core') + +const css = await extractCss('http://www.projectwallace.com') +``` + +## Installation + +```sh +npm install extract-css-core +# or +yarn add extract-css-core +``` + ## Problem, solution and shortcomings ### Problem @@ -28,23 +44,7 @@ This module uses an instance of Chromium to render a page. This has the benefit that most of the styles can be rendered, even when generated by JavaScript. The [Puppeteer CSSCoverage API](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#coveragestartcsscoverageoptions) is the power behind finding most of the CSS. Additionally, the -`document.styleSheets` API is used to get CSS-inJS styling. - -## Installation - -```sh -npm install extract-css-core -# or -yarn add extract-css-core -``` - -## Usage - -```js -const extractCss = require('extract-css-core') - -const css = await extractCss('http://www.projectwallace.com') -``` +`document.styleSheets` API is used to get CSS-in-JS styling. ## API @@ -63,7 +63,7 @@ Default: `null` Type: `String` -Default: `networkidle2` +Default: `networkidle0` Can be any value as provided by the [Puppeteer docs](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pagegotourl-options). @@ -72,4 +72,4 @@ Can be any value as provided by the - [Wallace CLI](https://github.com/bartveneman/wallace-cli) - Pretty CSS analytics in your terminal - [get-css](https://github.com/cssstats/cssstats/tree/master/packages/get-css) - - The original get-css + The original get-css from CSSStats diff --git a/src/index.js b/src/index.js index aa92a5d..03389bc 100644 --- a/src/index.js +++ b/src/index.js @@ -7,7 +7,11 @@ function InvalidUrlError({url, statusCode, statusText}) { InvalidUrlError.prototype = Error.prototype -module.exports = async (url, {waitUntil = 'networkidle2'} = {}) => { +/** + * @param {string} url URL to get CSS from + * @param {string} waitUntil https://github.com/puppeteer/puppeteer/blob/master/docs/api.md#pagegotourl-options + */ +module.exports = async (url, {waitUntil = 'networkidle0'} = {}) => { // Setup a browser instance const browser = await puppeteer.launch() @@ -37,6 +41,7 @@ module.exports = async (url, {waitUntil = 'networkidle2'} = {}) => { const coverage = await page.coverage.stopCSSCoverage() // Get all CSS generated with the CSSStyleSheet API + // This is primarily for CSS-in-JS solutions // See: https://developer.mozilla.org/en-US/docs/Web/API/CSSRule/cssText const styleSheetsApiCss = await page.evaluate(() => { /* global document */ @@ -45,9 +50,9 @@ module.exports = async (url, {waitUntil = 'networkidle2'} = {}) => { .map(stylesheet => [...stylesheet.cssRules] .map(cssStyleRule => cssStyleRule.cssText) - .join('') + .join('\n') ) - .join('') + .join('\n') }) await browser.close() @@ -61,7 +66,11 @@ module.exports = async (url, {waitUntil = 'networkidle2'} = {}) => { .filter(styles => styles.url !== url) // The `text` property contains the actual CSS .map(({text}) => text) - .join('') + .join('\n') - return Promise.resolve(styleSheetsApiCss + coverageCss) + const css = [styleSheetsApiCss, coverageCss] + .filter(Boolean) + .join('\n') + + return Promise.resolve(css) } diff --git a/test/fixture.css b/test/fixture.css index 7c88d8e..ad12d88 100644 --- a/test/fixture.css +++ b/test/fixture.css @@ -1 +1,2 @@ -.fixture { color: red; } +@import url("imported.css"); +.fixture { color: red; } \ No newline at end of file diff --git a/test/imported.css b/test/imported.css new file mode 100644 index 0000000..7fd2bab --- /dev/null +++ b/test/imported.css @@ -0,0 +1 @@ +.imported { color: blue; } \ No newline at end of file diff --git a/test/index.js b/test/index.js index 462062d..1e0104c 100644 --- a/test/index.js +++ b/test/index.js @@ -6,9 +6,8 @@ const {resolve} = require('path') const extractCss = require('..') let server -const fixture = readFileSync(resolve(__dirname, 'fixture.css'), 'utf8') -function staticFile(req, res) { +function serveStatic(req, res) { const fileContents = readFileSync(resolve(__dirname, req.path.slice(1)), 'utf8') res.send(fileContents) } @@ -16,7 +15,8 @@ function staticFile(req, res) { test.before(async () => { server = await createTestServer() - server.get('/fixture.css', staticFile) + server.get('/fixture.css', serveStatic) + server.get('/imported.css', serveStatic) }) test.after(async () => { @@ -24,40 +24,69 @@ test.after(async () => { }) test('it finds css in a tag - HTML', async t => { - server.get('/link-tag-html.html', staticFile) + // @TODO: during tests, it doesn't find the imported CSS file contents + // but it does work outside of test scope + server.get('/link-tag-html.html', serveStatic) const actual = await extractCss(server.url + '/link-tag-html.html') - const expected = fixture - t.is(actual, expected) + + t.true(actual.includes('@import url("imported.css");')) + t.true(actual.includes('.fixture { color: red; }')) + t.snapshot(actual) }) test('it finds css in a tag - JS', async t => { - server.get('/link-tag-js.html', staticFile) + // @TODO: during tests, it doesn't find the imported CSS file contents + // but it does work outside of test scope + server.get('/link-tag-js.html', serveStatic) const actual = await extractCss(server.url + '/link-tag-js.html') - const expected = fixture - t.is(actual, expected) + + t.true(actual.includes('@import url("imported.css");')) + t.true(actual.includes('.fixture { color: red; }')) + t.snapshot(actual) }) test('it finds css in a + + + + + + + + + + \ No newline at end of file diff --git a/test/link-tag-html.html b/test/link-tag-html.html index 7f5fb70..bce5b55 100644 --- a/test/link-tag-html.html +++ b/test/link-tag-html.html @@ -8,5 +8,6 @@

<link> tag in HTML

+
imported
\ No newline at end of file diff --git a/test/link-tag-js.html b/test/link-tag-js.html index 1170980..7cfe5db 100644 --- a/test/link-tag-js.html +++ b/test/link-tag-js.html @@ -9,6 +9,7 @@

<link> tag in JS

+
imported
From c46a9df0da87bba61a590398691599c22b1aa683 Mon Sep 17 00:00:00 2001 From: Bart Veneman <1536852+bartveneman@users.noreply.github.com> Date: Sun, 16 Feb 2020 23:33:59 +0100 Subject: [PATCH 14/48] add support for fetching inline styles (#23) --- src/index.js | 37 +++++++++++++++++++++++++++++++++-- test/index.js | 20 +++++++++++++++++++ test/inline-style-html.html | 3 +++ test/inline-style-js.html | 14 +++++++------ test/kitchen-sink.html | 9 +++++++++ test/snapshots/index.js.md | 18 ++++++++++++++++- test/snapshots/index.js.snap | Bin 305 -> 486 bytes 7 files changed, 92 insertions(+), 9 deletions(-) diff --git a/src/index.js b/src/index.js index 03389bc..ae45075 100644 --- a/src/index.js +++ b/src/index.js @@ -1,4 +1,11 @@ +/* global document */ + const puppeteer = require('puppeteer') +const crypto = require('crypto') + +function hashString(str) { + return crypto.createHash('md5').update(str, 'utf8').digest('hex') +} function InvalidUrlError({url, statusCode, statusText}) { this.name = 'InvalidUrlError' @@ -44,7 +51,6 @@ module.exports = async (url, {waitUntil = 'networkidle0'} = {}) => { // This is primarily for CSS-in-JS solutions // See: https://developer.mozilla.org/en-US/docs/Web/API/CSSRule/cssText const styleSheetsApiCss = await page.evaluate(() => { - /* global document */ return [...document.styleSheets] .filter(stylesheet => stylesheet.href === null) .map(stylesheet => @@ -55,6 +61,33 @@ module.exports = async (url, {waitUntil = 'networkidle0'} = {}) => { .join('\n') }) + // Get all inline styles: + // This creates a new CSSRule for every inline style + // attribute it encounters. + // + // Example: + // + // HTML: + //

Text

+ // + // CSSRule: + // [x-inline-style-237a7d] { color: red; } + // ^^^^^^ + // + // The 6-digit hash is based on the actual CSS, so it's not + // necessarily unique! + const inlineCssRules = await page.evaluate(() => { + return [...document.querySelectorAll('[style]')] + .map(element => element.getAttribute('style')) + .filter(Boolean) + }) + const inlineCss = inlineCssRules + .map(rule => { + const hash = hashString(rule).slice(-6) + return `[x-inline-style-${hash}] { ${rule} }` + }) + .join('\n') + await browser.close() // Turn the coverage Array into a single string of CSS @@ -68,7 +101,7 @@ module.exports = async (url, {waitUntil = 'networkidle0'} = {}) => { .map(({text}) => text) .join('\n') - const css = [styleSheetsApiCss, coverageCss] + const css = [styleSheetsApiCss, coverageCss, inlineCss] .filter(Boolean) .join('\n') diff --git a/test/index.js b/test/index.js index 1e0104c..8eb3619 100644 --- a/test/index.js +++ b/test/index.js @@ -83,10 +83,30 @@ test('it does not report the same CSS twice', async t => { t.true(actual.includes('.fixture { color: red; }')) t.true(actual.includes('.style-tag-fixture-js { color: yellow; }')) t.true(actual.includes('.style-tag-fixture-html { color: green; }')) + t.true(actual.includes('border-style: solid')) + t.true(actual.includes('background-color: red')) t.snapshot(actual) }) +test('it finds inline styles - HTML', async t => { + server.get('/inline-style-html.html', serveStatic) + const actual = await extractCss(server.url + '/inline-style-html.html') + + t.true(actual.includes('[x-inline-style-dfc776] { color: red; font-size: 12px; }')) + t.true(actual.includes('[x-inline-style-ea2739] { color: blue }')) + t.snapshot(actual) +}) + +test('it finds inline styles - JS', async t => { + server.get('/inline-style-js.html', serveStatic) + const actual = await extractCss(server.url + '/inline-style-js.html') + + t.true(actual.includes('[x-inline-style-874435] { color: red; font-size: 12px; border-style: solid; }')) + t.true(actual.includes('[x-inline-style-ea1c8f] { border-color: blue; border-width: 1px; }')) + t.snapshot(actual) +}) + test('it rejects if the url has an HTTP error status', async t => { server.get('/404-page', (req, res) => { res.status(404).send() diff --git a/test/inline-style-html.html b/test/inline-style-html.html index 8aa1536..e8c892d 100644 --- a/test/inline-style-html.html +++ b/test/inline-style-html.html @@ -7,5 +7,8 @@

Inline style in HTML

+

Another inline styled element

+

Element with empty style attribute

+

Another empty style attribute

\ No newline at end of file diff --git a/test/inline-style-js.html b/test/inline-style-js.html index 5b5a0b2..d4853ed 100644 --- a/test/inline-style-js.html +++ b/test/inline-style-js.html @@ -7,18 +7,20 @@

Inline styles with JS

+

Another inliner

\ No newline at end of file diff --git a/test/kitchen-sink.html b/test/kitchen-sink.html index c472454..7fada7f 100644 --- a/test/kitchen-sink.html +++ b/test/kitchen-sink.html @@ -15,6 +15,9 @@ +
+
+ + + + \ No newline at end of file diff --git a/test/snapshots/index.js.md b/test/snapshots/index.js.md index 112d7c9..93642f3 100644 --- a/test/snapshots/index.js.md +++ b/test/snapshots/index.js.md @@ -13,7 +13,9 @@ Generated by [AVA](https://ava.li). @import url("imported.css");␊ .fixture { color: red; }␊ @import url("imported.css");␊ - .fixture { color: red; }` + .fixture { color: red; }␊ + [x-inline-style-95ba24] { background-color: red; }␊ + [x-inline-style-d894e5] { border-style: solid; }` ## it finds css in a tag - HTML @@ -44,3 +46,17 @@ Generated by [AVA](https://ava.li). `@import url("imported.css");␊ .fixture { color: red; }␊ .imported { color: blue; }` + +## it finds inline styles - HTML + +> Snapshot 1 + + `[x-inline-style-dfc776] { color: red; font-size: 12px; }␊ + [x-inline-style-ea2739] { color: blue }` + +## it finds inline styles - JS + +> Snapshot 1 + + `[x-inline-style-874435] { color: red; font-size: 12px; border-style: solid; }␊ + [x-inline-style-ea1c8f] { border-color: blue; border-width: 1px; }` diff --git a/test/snapshots/index.js.snap b/test/snapshots/index.js.snap index 4f444c7bcaaa483f0e097fb466e87178ed690c54..19d9be28a4cd30fc2729dd6158b57008b38bf0d2 100644 GIT binary patch literal 486 zcmV5RzVhO~9LrUKHG)Bp-_i00000000Bq z!@$76&QR{3o9h~R^5E7|t}p9!K22m~00BcFb=Q+u|9hU;k4WC8uNM~il`(=vOMqCI zOJ6QZ^^nhQ2kw}!90&F?f<-R@@v%7V`f2m5i`Upr?5LPKF^dr_D$2yb@T&NCf^%+y zWyk^M-~5Z8Phtd%HUqJorNg56*8S}pC4X!TuCqMD2o_ahW?;}xTh6ms%3|lAy#H1I zO0&K(f<+sEm>KAD5MX3w5M)wf)GIEj%t_TPNle#G%d99VElSnRD9O!Hs8&eM&&e;c zQb;dKP0h1bsO7?=IoAitp(E>_aC=F)@e zMQAKaO(9=bbcJqaUQT9SsxHKJmZnLGMkcX9bxDcI+37|3rFkj3__d^1Sem4og0_;ST)7J}&{K^;^K)@M@%l&h6T_aB(+*-=@Wu4BaiHu-T0ic3o zaoY9M=2;i7v7OjaF?V7XBUm&Th=sZI<)Ty%`RsP!j`_-QU@s$BbR!UJr!D7MEM>9t zPu~Bkf2CR97{Q|aObiUn4D4V#8Ce+w8BHBBa|`l|N)$?qax|16?9>#!^HRxuP Date: Sun, 16 Feb 2020 23:35:20 +0100 Subject: [PATCH 15/48] Add note about inline styling --- readme.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/readme.md b/readme.md index a49b0bd..19bc514 100644 --- a/readme.md +++ b/readme.md @@ -44,7 +44,7 @@ This module uses an instance of Chromium to render a page. This has the benefit that most of the styles can be rendered, even when generated by JavaScript. The [Puppeteer CSSCoverage API](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#coveragestartcsscoverageoptions) is the power behind finding most of the CSS. Additionally, the -`document.styleSheets` API is used to get CSS-in-JS styling. +`document.styleSheets` API is used to get CSS-in-JS styling. Lastly, a plain old `document.querySelectorAll('[style]')` finds all inline styling. ## API From 796c88a918815b07c95239745048496c0d0abca6 Mon Sep 17 00:00:00 2001 From: Bart Veneman <1536852+bartveneman@users.noreply.github.com> Date: Sun, 16 Feb 2020 23:36:32 +0100 Subject: [PATCH 16/48] add another note about inline styles --- readme.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/readme.md b/readme.md index 19bc514..ca5681c 100644 --- a/readme.md +++ b/readme.md @@ -36,7 +36,7 @@ Existing packages like [get-css](https://github.com/cssstats/cssstats/tree/master/packages/get-css) look at a server-generated piece of HTML and get all the `` and ` + + + + + +
+
+
+ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/test/fixtures/link-in-html.css b/test/fixtures/link-in-html.css new file mode 100644 index 0000000..0291ecc --- /dev/null +++ b/test/fixtures/link-in-html.css @@ -0,0 +1,3 @@ +@import url("import-in-css.css"); + +.link-in-html { } \ No newline at end of file diff --git a/test/link-tag-html.html b/test/fixtures/link-tag-html.html similarity index 84% rename from test/link-tag-html.html rename to test/fixtures/link-tag-html.html index bce5b55..1a1e59d 100644 --- a/test/link-tag-html.html +++ b/test/fixtures/link-tag-html.html @@ -4,7 +4,7 @@ Document - +

<link> tag in HTML

diff --git a/test/fixtures/link-tag-js.css b/test/fixtures/link-tag-js.css new file mode 100644 index 0000000..b483a84 --- /dev/null +++ b/test/fixtures/link-tag-js.css @@ -0,0 +1,3 @@ +@import url("import-in-css.css"); + +.link-tag-created-with-js {} diff --git a/test/link-tag-js.html b/test/fixtures/link-tag-js.html similarity index 93% rename from test/link-tag-js.html rename to test/fixtures/link-tag-js.html index 7cfe5db..b08cdea 100644 --- a/test/link-tag-js.html +++ b/test/fixtures/link-tag-js.html @@ -12,7 +12,7 @@

<link> tag in JS

imported
diff --git a/test/style-tag-html.html b/test/fixtures/style-tag-html.html similarity index 89% rename from test/style-tag-html.html rename to test/fixtures/style-tag-html.html index 05587b1..26345c3 100644 --- a/test/style-tag-html.html +++ b/test/fixtures/style-tag-html.html @@ -5,7 +5,7 @@ Document diff --git a/test/style-tag-js.html b/test/fixtures/style-tag-js.html similarity index 80% rename from test/style-tag-js.html rename to test/fixtures/style-tag-js.html index ac83e68..049428f 100644 --- a/test/style-tag-js.html +++ b/test/fixtures/style-tag-js.html @@ -9,7 +9,7 @@

<style> tag in JS

diff --git a/test/imported.css b/test/imported.css deleted file mode 100644 index 7fd2bab..0000000 --- a/test/imported.css +++ /dev/null @@ -1 +0,0 @@ -.imported { color: blue; } \ No newline at end of file diff --git a/test/index.js b/test/index.js index 8eb3619..fc8681c 100644 --- a/test/index.js +++ b/test/index.js @@ -1,22 +1,14 @@ const test = require('ava') const createTestServer = require('create-test-server') -const {readFileSync} = require('fs') -const {resolve} = require('path') +const sirv = require('sirv') const extractCss = require('..') let server -function serveStatic(req, res) { - const fileContents = readFileSync(resolve(__dirname, req.path.slice(1)), 'utf8') - res.send(fileContents) -} - test.before(async () => { server = await createTestServer() - - server.get('/fixture.css', serveStatic) - server.get('/imported.css', serveStatic) + server.use(sirv('test/fixtures')) }) test.after(async () => { @@ -24,86 +16,71 @@ test.after(async () => { }) test('it finds css in a tag - HTML', async t => { - // @TODO: during tests, it doesn't find the imported CSS file contents - // but it does work outside of test scope - server.get('/link-tag-html.html', serveStatic) const actual = await extractCss(server.url + '/link-tag-html.html') - t.true(actual.includes('@import url("imported.css");')) - t.true(actual.includes('.fixture { color: red; }')) + t.true(actual.includes('.link-in-html { }')) + t.true(actual.includes('@import url("import-in-css.css")')) + t.true(actual.includes('.css-imported-with-css {}')) t.snapshot(actual) }) test('it finds css in a tag - JS', async t => { - // @TODO: during tests, it doesn't find the imported CSS file contents - // but it does work outside of test scope - server.get('/link-tag-js.html', serveStatic) const actual = await extractCss(server.url + '/link-tag-js.html') - t.true(actual.includes('@import url("imported.css");')) - t.true(actual.includes('.fixture { color: red; }')) + t.true(actual.includes('.link-tag-created-with-js {}')) + t.true(actual.includes('@import url("import-in-css.css")')) + t.true(actual.includes('.css-imported-with-css {}')) t.snapshot(actual) }) test('it finds css in a - - - -
-
- - - - - - - - - - - \ No newline at end of file diff --git a/test/snapshots/index.js.md b/test/snapshots/index.js.md index 93642f3..69c6d1b 100644 --- a/test/snapshots/index.js.md +++ b/test/snapshots/index.js.md @@ -4,59 +4,77 @@ The actual snapshot is saved in `index.js.snap`. Generated by [AVA](https://ava.li). -## it does not report the same CSS twice +## it finds CSS implemented in a mixed methods (inline, links, style tags) > Snapshot 1 - `.style-tag-fixture-html { color: green; }␊ - .style-tag-fixture-js { color: yellow; }␊ - @import url("imported.css");␊ - .fixture { color: red; }␊ - @import url("imported.css");␊ - .fixture { color: red; }␊ - [x-inline-style-95ba24] { background-color: red; }␊ - [x-inline-style-d894e5] { border-style: solid; }` + `@import url("import-in-css.css");␊ + ␊ + .link-in-html { }␊ + .css-imported-with-css {}␊ + @import url("import-in-css.css");␊ + ␊ + .link-tag-created-with-js {}␊ + ␊ + .css-imported-with-css {}␊ + .style-tag-in-html { color: green; }␊ + .js-insertRule { color: red; }␊ + .style-tag-js { }␊ + [x-extract-css-inline-style] { background-image: url('background-image-inline-style-attribute-in-html'); }␊ + [x-extract-css-inline-style] { background-image: url("background-image-inline-style-js-cssText"); }␊ + [x-extract-css-inline-style] { background-image: url("background-image-inline-style-js-with-prop"); }` ## it finds css in a tag - HTML > Snapshot 1 - `@import url("imported.css");␊ - .fixture { color: red; }` + `@import url("import-in-css.css");␊ + ␊ + .link-in-html { }␊ + .css-imported-with-css {}` ## it finds css in a tag - JS > Snapshot 1 - `@import url("imported.css");␊ - .fixture { color: red; }` + `@import url("import-in-css.css");␊ + ␊ + .link-tag-created-with-js {}␊ + ␊ + .css-imported-with-css {}` ## it finds css in a +

<style> tag in HTML

+ \ No newline at end of file diff --git a/test/fixtures/style-tag-js.html b/test/fixtures/style-tag-js.html index 049428f..95578dd 100644 --- a/test/fixtures/style-tag-js.html +++ b/test/fixtures/style-tag-js.html @@ -1,16 +1,19 @@ + Document +

<style> tag in JS

+ \ No newline at end of file diff --git a/test/index.js b/test/index.js index d820fcf..5738ab0 100644 --- a/test/index.js +++ b/test/index.js @@ -1,163 +1,81 @@ -const test = require('ava') +const { suite } = require('uvu') +const assert = require('uvu/assert') const createTestServer = require('create-test-server') const sirv = require('sirv') +const Test = suite('Extract CSS') const extractCss = require('..') let server -test.before(async () => { +Test.before(async () => { server = await createTestServer() server.use(sirv('test/fixtures')) }) -test.after(async () => { +Test.after(async () => { await server.close() }) -test('it finds css in a tag - HTML', async t => { - const actual = await extractCss(server.url + '/link-tag-html.html') - - t.true(actual.includes('.link-in-html { }')) - t.true(actual.includes('@import url("import-in-css.css")')) - t.true(actual.includes('.css-imported-with-css { }')) - t.snapshot(actual) -}) - -test('it finds css in a tag - JS', async t => { - const actual = await extractCss(server.url + '/link-tag-js.html') - - t.true(actual.includes('.link-tag-created-with-js')) - t.true(actual.includes('@import url("import-in-css.css")')) - t.true(actual.includes('.css-imported-with-css { }')) - t.snapshot(actual) -}) - -test('it finds css in a