Add option to exclude inline styles (#51)

Author: bartveneman

readme.md

@@ -56,9 +56,9 @@ npm install extract-css-core
 yarn add extract-css-core
 ```
 
-## Problem, solution and shortcomings
+## Motivation, solution and shortcomings
 
-### Problem
+### Motivation
 
 Existing packages like
 [get-css](https://github.com/cssstats/cssstats/tree/master/packages/get-css)
@@ -95,6 +95,14 @@ Default: `exclude`
 
 Possible values: `exclude`, `include`
 
+#### inlineStyles
+
+Type: `String`
+
+Default: `include`
+
+Possible values: `exclude`, `include`
+
 #### waitUntil
 
 Type: `String`

src/index.js

@@ -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()
 
@@ -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 <style> tags that were found in the coverage
@@ -108,7 +111,7 @@ module.exports = async (url, {waitUntil = 'networkidle0', origins = 'exclude'} =
 
 	const css = links
 		.concat(styleSheetsApiCss)
-		.concat(inlineCss)
+		.concat(inlineStyles === 'exclude' ? [] : inlineCss)
 
 	// Return the complete structure ...
 	if (origins === 'include') {

test/index.js

@@ -87,6 +87,16 @@ test('it finds inline styles - HTML', async t => {
 	t.snapshot(actual)
 })
 
+test('it ignores inline styles when `inlineStyles !== "include"`', async t => {
+	const actual = await extractCss(server.url + '/inline-style-html.html', {
+		inlineStyles: 'exclude'
+	})
+
+	t.false(actual.includes('[x-extract-css-inline-style] { color: red; font-size: 12px; }'))
+	t.false(actual.includes('[x-extract-css-inline-style] { color: blue }'))
+	t.is(actual, '')
+})
+
 test('it finds inline styles - JS', async t => {
 	const actual = await extractCss(server.url + '/inline-style-js.html')