extract-css-core - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

package.json

 {
   "name": "extract-css-core",
   "description": "Extract all CSS from a given url, both server side and client side rendered.",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "homepage": "https://www.projectwallace.com/oss",
@@ -17,3 +17,3 @@ "repository": "https://github.com/bartveneman/extract-css-core",
   "scripts": {
-    "test": "xo && ava test"
+    "test": "xo && ava"
   },
@@ -49,12 +49,12 @@ "files": [
   "devDependencies": {
-    "ava": "^1.3.1",
+    "ava": "^2.1.0",
     "chromium": "^2.1.0",
-    "create-test-server": "^2.4.0",
-    "prettier": "^1.16.4",
-    "puppeteer-core": "^1.13.0",
+    "create-test-server": "^3.0.1",
+    "prettier": "^1.18.2",
+    "puppeteer-core": "^1.18.1",
     "xo": "^0.24.0"
   },
   "dependencies": {
-    "puppeteer": "^1.13.0"
+    "puppeteer": "^1.18.1"
   }
 }

readme.md

@@ -30,12 +30,5 @@ <div align="center">
 [Puppeteer CSSCoverage API](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#coveragestartcsscoverageoptions)
-is the power behind finding most of the CSS.
+is the power behind finding most of the CSS. Additionally, the
+`document.styleSheets` API is used.
 
-### Shortcomings
-
-Currently, there is no solution to get the CSS from modules that use
-[Styled Components](https://www.styled-components.com) or something similar. Any
-help resolving this issue will be very much appreciated. Please contribute to
-the relevant
-[GitHub issue](https://github.com/bartveneman/extract-css-core/issues/1).
-
 ## Installation
@@ -45,4 +38,3 @@
 npm install extract-css-core
-
-# Or with Yarn
+# or
 yarn add extract-css-core
@@ -56,3 +48,3 @@ ```
 
-extractCss('http://www.projectwallace.com').then(css => console.log(css))
+const css = await extractCss('http://www.projectwallace.com')
 ```
@@ -73,11 +65,2 @@
 
-#### debug
-
-Type: `Boolean`
-
-Default: `false`
-
-Set to `true` if you want a Chromium window to open as it works to get all the
-CSS from the page.
-
 #### waitUntil
@@ -92,22 +75,19 @@
 
-#### browserOverride
+#### customBrowser
 
-Type: `Object`
+Type: `Browser`
 
 Default: `null`
 
-An object consisting of the following fields:
+A
+[Puppeteer Browser](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#class-browser)
+instance. See the `test` directory for implementation examples. This option
+exists primarily for use with
+[extract-css](https://github.com/bartveneman/extract-css)
 
-- `executablePath`: the path to a Chromium binary
-- `puppeteer`: a Puppeteer instance
-- `args`: arguments to start Chromium with
-
-See the `test` directory for implementation examples. This option exists
-primarily for use with [extract-css.now.sh](https://extract-css.now.sh)
-
 ## Related
 
-- [extract-css lambda](https://github.com/bartveneman/extract-css) - Extract CSS
+- [extract-css](https://github.com/bartveneman/extract-css) - Extract CSS
   running as a serverless function
 - [get-css](https://github.com/cssstats/cssstats/tree/master/packages/get-css) -
   The original get-css

src/index.js

 const puppeteer = require('puppeteer')
-const {validateBrowserOverride} = require('./validate')
 
@@ -13,23 +12,15 @@ function InvalidUrlError({url, statusCode, statusText}) {
 	url,
-	{debug = false, waitUntil = 'networkidle2', browserOverride = null} = {}
+	{waitUntil = 'networkidle2', customBrowser = null} = {}
 ) => {
-	// Basic validation for browserOverride
-	if (browserOverride !== null) {
-		validateBrowserOverride(browserOverride)
+	if (
+		customBrowser !== null &&
+		(!customBrowser.isConnected || !customBrowser.isConnected())
+	) {
+		return Promise.reject(
+			new TypeError('The `customBrowser` option is invalid')
+		)
 	}
 
-	// Setup the minimal browser options that we need to launch
-	const browserOptions = {
-		headless: debug !== true,
-		executablePath: browserOverride
-			? browserOverride.executablePath
-			: puppeteer.executablePath(),
-		args: browserOverride ? browserOverride.args : []
-	}
-
 	// Setup a browser instance
-	const browser = await (
-		(browserOverride && browserOverride.puppeteer) ||
-		puppeteer
-	).launch(browserOptions)
+	const browser = customBrowser || (await puppeteer.launch())
 
@@ -61,13 +52,15 @@ // Create a new page and navigate to it
 
-	// Fetch all <style> tags from the page, because the coverage
-	// API may have missed some JS-generated <style> tags.
-	// Some of them *were* already caught by the coverage API,
-	// but they will be removed later on to prevent duplicates.
-	const styleTagsCss = (await page.$$eval('style', styles => {
-		// Get the text inside each <style> tag and trim() the
-		// results to prevent all the inside-html indentation
-		// clogging up the results and making it look
-		// bigger than it actually is
-		return styles.map(style => style.innerHTML.trim())
-	})).join('')
+	// Get all CSS generated with the CSSStyleSheet API
+	// 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 =>
+				[...stylesheet.cssRules]
+					.map(cssStyleRule => cssStyleRule.cssText)
+					.join('')
+			)
+			.join('')
+	})
 
@@ -87,3 +80,3 @@ await browser.close()
 
-	return Promise.resolve(coverageCss + styleTagsCss)
+	return Promise.resolve(styleSheetsApiCss + coverageCss)
 }

No alert changes

Worsened metrics

Total package byte prevSize

7639

-18.82%

Number of package files

4

-20%

Lines of code

66

-30.53%

Number of lines in readme file

89

-18.35%

Dependency changes

• Updated

  puppeteer@^1.18.1