Improve tests and coverage of extracting (#25)

* rewrite extracting logic to ditch coverage API

* oopsie

* oopsie

* omg

* improve cssfinding

* fix tests

Co-authored-by: Bart Veneman <bartveneman@users.noreply.github.com>

Author: bartveneman

package-lock.json

@@ -27,7 +27,8 @@
 		"@bartveneman/eslint-config-bv": "0.0.2",
 		"ava": "^2.4.0",
 		"create-test-server": "^3.0.1",
-		"eslint": "^6.7.2"
+		"eslint": "^6.7.2",
+		"sirv": "^0.4.2"
 	},
 	"dependencies": {
 		"puppeteer": "^2.0.0"

package.json

@@ -57,7 +57,7 @@ String.
 
 Type: `Object`
 
-Default: `null`
+Default: `{}`
 
 #### waitUntil
 

readme.md

@@ -1,11 +1,5 @@
 /* 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'
@@ -17,15 +11,14 @@ InvalidUrlError.prototype = Error.prototype
 /**
  * @param {string} url URL to get CSS from
  * @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'} = {}) => {
 	// Setup a browser instance
 	const browser = await puppeteer.launch()
 
 	// Create a new page and navigate to it
 	const page = await browser.newPage()
-
-	// Start CSS coverage. This is the meat and bones of this module
 	await page.coverage.startCSSCoverage()
 	const response = await page.goto(url, {waitUntil})
 
@@ -43,22 +36,22 @@ module.exports = async (url, {waitUntil = 'networkidle0'} = {}) => {
 		)
 	}
 
-	// Coverage contains a lot of <style> and <link> CSS,
-	// but not all...
 	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(() => {
 		return [...document.styleSheets]
+			// Only take the stylesheets without href (BUT WHY)
 			.filter(stylesheet => stylesheet.href === null)
-			.map(stylesheet =>
-				[...stylesheet.cssRules]
-					.map(cssStyleRule => cssStyleRule.cssText)
-					.join('\n')
-			)
-			.join('\n')
+			.map(stylesheet => {
+				return {
+					type: stylesheet.ownerNode.tagName.toLowerCase(),
+					href: stylesheet.href || document.location.href,
+					css: [...stylesheet.cssRules].map(({cssText}) => cssText).join('\n')
+				}
+			})
 	})
 
 	// Get all inline styles: <element style="">
@@ -71,38 +64,36 @@ module.exports = async (url, {waitUntil = 'networkidle0'} = {}) => {
 	//    <h1 style="color: red;">Text</h1>
 	//
 	// CSSRule:
-	//    [x-inline-style-237a7d] { color: red; }
-	//                    ^^^^^^
+	//    [x-extract-css-inline-style] { 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 out empty style="" attributes
 			.filter(Boolean)
 	})
 	const inlineCss = inlineCssRules
-		.map(rule => {
-			const hash = hashString(rule).slice(-6)
-			return `[x-inline-style-${hash}] { ${rule} }`
-		})
-		.join('\n')
+		.map(rule => `[x-extract-css-inline-style] { ${rule} }`)
+		.map(css => ({type: 'inline', href: url, css}))
 
-	await browser.close()
-
-	// Turn the coverage Array into a single string of CSS
-	const coverageCss = coverage
+	const links = coverage
 		// Filter out the <style> tags that were found in the coverage
 		// report since we've conducted our own search for them.
 		// A coverage CSS item with the same url as the url of the page
 		// we requested is an indication that this was a <style> tag
-		.filter(styles => styles.url !== url)
-		// The `text` property contains the actual CSS
-		.map(({text}) => text)
-		.join('\n')
+		.filter(entry => entry.url !== url)
+		.map(entry => ({
+			href: entry.url,
+			css: entry.text,
+			type: 'link-or-import'
+		}))
+
+	await browser.close()
 
-	const css = [styleSheetsApiCss, coverageCss, inlineCss]
-		.filter(Boolean)
+	const css = links
+		.concat(styleSheetsApiCss)
+		.concat(inlineCss)
+		.map(({css}) => css)
 		.join('\n')
 
 	return Promise.resolve(css)

src/index.js

@@ -0,0 +1 @@
+.css-imported-with-css {}

test/fixture.css

@@ -0,0 +1 @@
+.css-imported-with-js {}

test/css-in-js.html renamed to test/fixtures/css-in-js.html

@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Document</title>
+
+	<!-- <link> in HTML -->
+	<link rel="stylesheet" href="/link-in-html.css">
+
+	<!-- <style> in HTML -->
+	<style>
+		.style-tag-in-html { color: green; }
+	</style>
+
+	<style id="js-insertRule"></style>
+</head>
+<body>
+
+	<div style="background-image: url('background-image-inline-style-attribute-in-html');"></div>
+	<div id="inline-csstext"></div>
+	<div id="inline-prop"></div>
+
+	<!-- <link> tag in JS -->
+	<script>
+		var style = document.createElement('link')
+		style.href = 'link-tag-js.css'
+		style.rel = 'stylesheet'
+		document.head.appendChild(style)
+	</script>
+
+	<!-- <style> tag in JS -->
+	<script>
+		var style = document.createElement('style')
+		style.textContent = '.style-tag-js { }'
+		document.body.appendChild(style)
+	</script>
+
+	<!-- inline styles via JS -->
+	<script>
+		var element = document.querySelector('#inline-prop')
+		element.style.backgroundImage = 'url(background-image-inline-style-js-with-prop)';
+	</script>
+	<script>
+		var element = document.querySelector('#inline-csstext')
+		element.style.cssText = 'background-image: url(background-image-inline-style-js-cssText)';
+	</script>
+
+	<!-- Add styles via CSSStyleSheet.insertRule() -->
+	<script>
+		var sheet = document.querySelector('#js-insertRule').sheet
+		sheet.insertRule('.js-insertRule { color: red; }')
+	</script>
+</body>
+</html>

test/fixtures/import-in-css.css

@@ -0,0 +1,3 @@
+@import url("import-in-css.css");
+
+.link-in-html { }

test/fixtures/import-in-js.css

@@ -4,7 +4,7 @@
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<title>Document</title>
-	<link rel="stylesheet" href="/fixture.css">
+	<link rel="stylesheet" href="/link-in-html.css">
 </head>
 <body>
 	<h1 class="fixture">&lt;link> tag in HTML</h1>

test/inline-style-html.html renamed to test/fixtures/inline-style-html.html

@@ -0,0 +1,3 @@
+@import url("import-in-css.css");
+
+.link-tag-created-with-js {}

test/inline-style-js.html renamed to test/fixtures/inline-style-js.html

@@ -12,7 +12,7 @@ <h1 class="fixture">&lt;link> tag in JS</h1>
 		<div class="imported">imported</div>
 		<script>
 			var style = document.createElement('link')
-			style.href = 'fixture.css'
+			style.href = 'link-tag-js.css'
 			style.rel = 'stylesheet'
 			document.head.appendChild(style)
 		</script>

test/fixtures/kitchen-sink.html

@@ -5,7 +5,7 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<title>Document</title>
 	<style>
-@import url('imported.css');
+@import url('import-in-css.css');
 .fixture { color: red; }
 	</style>
 </head>

test/fixtures/link-in-html.css

@@ -9,7 +9,7 @@
 	<h1 class="fixture">&lt;style> tag in JS</h1>
 	<script>
 		var style = document.createElement('style')
-		style.textContent = '@import url("imported.css");.fixture { color: red; }'
+		style.textContent = '@import url("import-in-js.css");.fixture { color: red; }'
 		document.body.appendChild(style)
 	</script>
 </body>