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 <[email protected]>

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 {}