critical-css-parser - npm Package Compare versions

Comparing version 0.2.0 to 0.2.1

dist/index.js

@@ -46,3 +46,3 @@ "use strict";
             if (!(options.type === 'HTML')) {
-              _context3.next = 35;
+              _context3.next = 39;
               break;
@@ -63,2 +63,6 @@ }
             _context3.next = 10;
+            return page.setDefaultNavigationTimeout(60000);
+
+          case 10:
+            _context3.next = 12;
             return page.setContent(html, {
@@ -68,4 +72,4 @@ waitUntil: 'networkidle2'
 
-          case 10:
-            _context3.next = 12;
+          case 12:
+            _context3.next = 14;
             return page.addStyleTag({
@@ -75,4 +79,4 @@ content: css
 
-          case 12:
-            _context3.next = 14;
+          case 14:
+            _context3.next = 16;
             return page.setViewport({
@@ -83,9 +87,13 @@ width: 1920,
 
-          case 14:
-            _context3.next = 16;
+          case 16:
+            _context3.next = 18;
             return browser.newPage();
 
-          case 16:
+          case 18:
             page2 = _context3.sent;
-            _context3.next = 19;
+            _context3.next = 21;
+            return page2.setDefaultNavigationTimeout(60000);
+
+          case 21:
+            _context3.next = 23;
             return page2.setContent(html, {
@@ -95,4 +103,4 @@ waitUntil: 'networkidle2'
 
-          case 19:
-            _context3.next = 21;
+          case 23:
+            _context3.next = 25;
             return page2.addStyleTag({
@@ -102,4 +110,4 @@ content: css
 
-          case 21:
-            _context3.next = 23;
+          case 25:
+            _context3.next = 27;
             return page2.setViewport({
@@ -112,23 +120,23 @@ width: 480,
 
-          case 23:
-            _context3.next = 25;
+          case 27:
+            _context3.next = 29;
             return aboveTheFoldHTML(page, 1200);
 
-          case 25:
+          case 29:
             aboveTheFold = _context3.sent;
-            _context3.next = 28;
+            _context3.next = 32;
             return aboveTheFoldHTML(page2, 650);
 
-          case 28:
+          case 32:
             aboveTheFoldMob = _context3.sent;
-            _context3.next = 31;
+            _context3.next = 35;
             return browser.close();
 
-          case 31:
+          case 35:
             result = extract(aboveTheFold, aboveTheFoldMob, css, whitelist, minify);
             return _context3.abrupt("return", result);
 
-          case 35:
+          case 39:
             if (!(options.type === 'URL')) {
-              _context3.next = 73;
+              _context3.next = 81;
               break;
@@ -138,13 +146,17 @@ }
             _options$URL = options.URL, URL = _options$URL === void 0 ? '' : _options$URL, _options$enableGoogle = options.enableGoogleFonts, enableGoogleFonts = _options$enableGoogle === void 0 ? 0 : _options$enableGoogle, _options$whitelist2 = options.whitelist, _whitelist = _options$whitelist2 === void 0 ? /#fooBazBarAboveTheFold8917/ : _options$whitelist2, _options$minify2 = options.minify, _minify = _options$minify2 === void 0 ? false : _options$minify2;
-            _context3.next = 39;
+            _context3.next = 43;
             return puppeteer.launch();
 
-          case 39:
+          case 43:
             _browser = _context3.sent;
-            _context3.next = 42;
+            _context3.next = 46;
             return _browser.newPage();
 
-          case 42:
+          case 46:
             _page = _context3.sent;
-            _context3.next = 45;
+            _context3.next = 49;
+            return _page.setDefaultNavigationTimeout(60000);
+
+          case 49:
+            _context3.next = 51;
             return _page["goto"](URL, {
@@ -154,4 +166,4 @@ waitUntil: 'networkidle2'
 
-          case 45:
-            _context3.next = 47;
+          case 51:
+            _context3.next = 53;
             return _page.setViewport({
@@ -162,4 +174,4 @@ width: 1920,
 
-          case 47:
-            _context3.next = 49;
+          case 53:
+            _context3.next = 55;
             return _page.$$eval('link[rel=stylesheet]', function (els) {
@@ -171,3 +183,3 @@ return Array.from(els).map(function (s) {
 
-          case 49:
+          case 55:
             styleHrefs = _context3.sent;
@@ -182,8 +194,12 @@
 
-            _context3.next = 53;
+            _context3.next = 59;
             return _browser.newPage();
 
-          case 53:
+          case 59:
             _page2 = _context3.sent;
-            _context3.next = 56;
+            _context3.next = 62;
+            return _page2.setDefaultNavigationTimeout(60000);
+
+          case 62:
+            _context3.next = 64;
             return _page2["goto"](URL, {
@@ -193,4 +209,4 @@ waitUntil: 'networkidle2'
 
-          case 56:
-            _context3.next = 58;
+          case 64:
+            _context3.next = 66;
             return _page2.setViewport({
@@ -203,20 +219,20 @@ width: 480,
 
-          case 58:
-            _context3.next = 60;
+          case 66:
+            _context3.next = 68;
             return aboveTheFoldHTML(_page, 1200);
 
-          case 60:
+          case 68:
             _aboveTheFold = _context3.sent;
-            _context3.next = 63;
+            _context3.next = 71;
             return aboveTheFoldHTML(_page2, 650);
 
-          case 63:
+          case 71:
             _aboveTheFoldMob = _context3.sent;
-            _context3.next = 66;
+            _context3.next = 74;
             return _browser.close();
 
-          case 66:
+          case 74:
             // Concatenate all styles 
             _css = '';
-            _context3.next = 69;
+            _context3.next = 77;
             return Promise.all(styleHrefs.map(
@@ -255,9 +271,9 @@ /*#__PURE__*/
 
-          case 69:
+          case 77:
             _result = extract(_aboveTheFold, _aboveTheFoldMob, _css, _whitelist, _minify);
             return _context3.abrupt("return", _result);
 
-          case 73:
+          case 81:
             if (!(options.type === 'localServer')) {
-              _context3.next = 112;
+              _context3.next = 124;
               break;
@@ -272,13 +288,17 @@ }
             server.listen(6543);
-            _context3.next = 79;
+            _context3.next = 87;
             return puppeteer.launch();
 
-          case 79:
+          case 87:
             _browser2 = _context3.sent;
-            _context3.next = 82;
+            _context3.next = 90;
             return _browser2.newPage();
 
-          case 82:
+          case 90:
             _page3 = _context3.sent;
-            _context3.next = 85;
+            _context3.next = 93;
+            return _page3.setDefaultNavigationTimeout(60000);
+
+          case 93:
+            _context3.next = 95;
             return _page3["goto"]("http://127.0.0.1:6543/".concat(filename), {
@@ -288,4 +308,4 @@ waitUntil: 'networkidle2'
 
-          case 85:
-            _context3.next = 87;
+          case 95:
+            _context3.next = 97;
             return _page3.setViewport({
@@ -296,4 +316,4 @@ width: 1920,
 
-          case 87:
-            _context3.next = 89;
+          case 97:
+            _context3.next = 99;
             return _page3.$$eval('link[rel=stylesheet]', function (els) {
@@ -305,3 +325,3 @@ return Array.from(els).map(function (s) {
 
-          case 89:
+          case 99:
             _styleHrefs = _context3.sent;
@@ -316,8 +336,12 @@
 
-            _context3.next = 93;
+            _context3.next = 103;
             return _browser2.newPage();
 
-          case 93:
+          case 103:
             _page4 = _context3.sent;
-            _context3.next = 96;
+            _context3.next = 106;
+            return _page4.setDefaultNavigationTimeout(60000);
+
+          case 106:
+            _context3.next = 108;
             return _page4["goto"]("http://127.0.0.1:6543/".concat(filename), {
@@ -327,4 +351,4 @@ waitUntil: 'networkidle2'
 
-          case 96:
-            _context3.next = 98;
+          case 108:
+            _context3.next = 110;
             return _page4.setViewport({
@@ -337,20 +361,20 @@ width: 480,
 
-          case 98:
-            _context3.next = 100;
+          case 110:
+            _context3.next = 112;
             return aboveTheFoldHTML(_page3, 1200);
 
-          case 100:
+          case 112:
             _aboveTheFold2 = _context3.sent;
-            _context3.next = 103;
+            _context3.next = 115;
             return aboveTheFoldHTML(_page4, 650);
 
-          case 103:
+          case 115:
             _aboveTheFoldMob2 = _context3.sent;
-            _context3.next = 106;
+            _context3.next = 118;
             return _browser2.close();
 
-          case 106:
+          case 118:
             // Concatenate all styles 
             _css2 = '';
-            _context3.next = 109;
+            _context3.next = 121;
             return Promise.all(_styleHrefs.map(
@@ -389,3 +413,3 @@ /*#__PURE__*/
 
-          case 109:
+          case 121:
             server.close();
@@ -395,3 +419,3 @@ _result2 = extract(_aboveTheFold2, _aboveTheFoldMob2, _css2, _whitelist2, _minify2);
 
-          case 112:
+          case 124:
           case "end":
@@ -398,0 +422,0 @@ return _context3.stop();

package.json

 {
   "name": "critical-css-parser",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Get critical (above-the-fold) and rest CSS using Puppeteer.",
@@ -25,3 +25,3 @@ "main": "index.js",
     "build": "babel src -d dist",
-    "test": "mocha --timeout 120000"
+    "test": "mocha --timeout 150000"
   },
@@ -32,3 +32,3 @@ "dependencies": {
     "csso": "^3.5.1",
-    "dropcss": "^1.0.8",
+    "dropcss": "^1.0.10",
     "http-server": "^0.11.1",
@@ -35,0 +35,0 @@ "puppeteer": "^1.16.0"

README.md

 # critical-css-parser
 
-**Critical-css-parser** allows you to receive critical (above-the-fold) and rest CSS.
-It might be helpful to speed up initial rendering of a web page. [More information](https://web.dev/defer-non-critical-css/)
+**Critical-css-parser** allows you to receive critical (**above-the-fold**) and the rest CSS.
+It might be helpful to speed up initial rendering of a web page. **[More information](https://web.dev/defer-non-critical-css/)**.
 
-Critical-css-parser uses [Puppeteer](https://github.com/GoogleChrome/puppeteer) and [DropCSS](https://github.com/leeoniya/dropcss) under the hood, so it also supports **adaptive design**.
+There are 3 types of input information: **HTML and CSS**, **URL** and **localServer**.
 
+**Critical-css-parser** uses [Puppeteer](https://github.com/GoogleChrome/puppeteer) and [DropCSS](https://github.com/leeoniya/dropcss) under the hood, so it also supports **adaptive design** (both desktop and mobile versions).
+It also supports minifying (by [CSSO](https://github.com/css/csso)).
+
 ### Installation
@@ -17,35 +20,46 @@
 ```
-## Usage
+## Examples
 
-### criticalCSSParser
+### URL
 
-Pass options to `criticalCSSParser({ ... })`.
+```js
+const criticalCSSParser = require('critical-css-parser');
 
-**Parameters**
+(async () => {
 
--   `options`  
+    const result = await criticalCSSParser({
+        type: 'URL',
+        URL: 'https://enigmatic-dawn-63122.herokuapp.com/', // try to check your site
+        enableGoogleFonts: false,
+        whitelist: /#foo|\.bar/
+    });
 
-**Properties**
+    console.log(result.critical); // ''
 
--   `type` **[String](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** One of: **_HTML_**, **_URL_** or **_localServer_**. **REQUIRED**
--   `html` **[String](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** Your custom html code _(default: '')_ **REQUIRED FOR type === HTML**
--   `css` **[String](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** Your custom css code _(default: '')_ **REQUIRED FOR type === HTML**
--   `whitelist` **[RegExp](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/RegExp)** Whitelist of the critical CSS _(default: `/#fooBazBarAboveTheFold8917/`)_
--   `URL` **[String](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** URL of the page you need to optimize _(default: '')_ **REQUIRED FOR type === URL**
--   `enableGoogleFonts` **[Boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** Set _true_ to except Google Font styles _(default: `false`)_
--   `entrypoint` **[String](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** Root of your application _(default: '')_ **REQUIRED FOR type === localServer**
--   `filename` **[String](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** Your index file _(default: 'index.html')_
--   `minify` **[Boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** Set _true_ to minify resulting styles _(default: `false`)_
+    console.log(result.rest); // '.Toastify__toast-container{z-index:9999;position:fixed; ...'
 
-### criticalCSSParser({...}) returns:
+})();
+```
 
-```<Promise<{ critical, rest }>>```
+### localServer
 
-**_critical_** - above-the-fold CSS. These styles you can put into your `<style>` tag.
+```js
+const criticalCSSParser = require('critical-css-parser');
 
-**_rest_** - other CSS. You can lazy-load the rest like [this](https://web.dev/defer-non-critical-css/).
+(async () => {
 
----
-## Examples
+    const result = await criticalCSSParser({
+        type: 'localServer',
+        entrypoint: './www',
+        filename: 'index.html',
+        enableGoogleFonts: true
+    });
 
+    console.log(result.critical); // 'html{font-size: 10pt;}div{color: red;}'
+
+    console.log(result.rest); // 'p{color: red;}'
+
+})();
+```
+
 ### HTML and CSS
@@ -81,3 +95,3 @@
         css,
-        minify: true
+        minify: true // good way to optimize size
     });
@@ -87,3 +101,3 @@
 
-    console.log(result.rest); // '.card{padding: 8px;}'
+    console.log(result.rest); // '.card{padding:8px}'
 
@@ -93,45 +107,42 @@ })();
 
-### URL
+---
 
-```js
-const criticalCSSParser = require('critical-css-parser');
+## Usage
 
-(async () => {
+### criticalCSSParser
 
-    const result = await criticalCSSParser({
-        type: 'URL',
-        URL: 'https://enigmatic-dawn-63122.herokuapp.com/',
-        enableGoogleFonts: false
-    });
+Pass options to `criticalCSSParser({ ... })`.
 
-    console.log(result.critical); // ''
+**Parameters**
 
-    console.log(result.rest); // '.Toastify__toast-container{z-index:9999;position:fixed; ...'
+-   `options`  
 
-})();
-```
+**Properties**
 
-### localServer
+-   `type` **[String](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** One of: **_HTML_**, **_URL_** or **_localServer_**. **REQUIRED**
 
-```js
-const criticalCSSParser = require('critical-css-parser');
+-   `html` **[String](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** Your custom html code _(default: '')_ **REQUIRED FOR type === HTML**
+-   `css` **[String](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** Your custom css code _(default: '')_ **REQUIRED FOR type === HTML**
 
-(async () => {
+-   `URL` **[String](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** URL of the page you need to optimize _(default: '')_ **REQUIRED FOR type === URL**
 
-    const result = await criticalCSSParser({
-        type: 'localServer',
-        entrypoint: './www',
-        filename: 'index.html',
-        enableGoogleFonts: false
-    });
+-   `entrypoint` **[String](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** Root of your application _(default: '')_ **REQUIRED FOR type === localServer**
+-   `filename` **[String](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** Your index file _(default: 'index.html')_
 
-    console.log(result.critical); // 'html{font-size: 10pt;}div{color: red;}'
+-   `enableGoogleFonts` **[Boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** Set _true_ to except Google Font styles _(default: `false`)_
+-   `whitelist` **[RegExp](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/RegExp)** Whitelist of the critical CSS _(default: `/#fooBazBarAboveTheFold8917/`)_
+-   `minify` **[Boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** Set _true_ to minify resulting styles _(default: `false`)_
 
-    console.log(result.rest); // 'p{color: red;}'
+### criticalCSSParser({...}) returns:
 
-})();
-```
+```<Promise<{ critical, rest }>>```
 
+**_critical_** - above-the-fold CSS. These styles you can put into your `<style>` tag.
+
+**_rest_** - other CSS. You can lazy-load the rest like [this](https://web.dev/defer-non-critical-css/).
+
+---
+
 ## License
 
 MIT license

No alert changes

Improved metrics

Total package byte prevSize

23439

increased by4.5%

Lines of code

434

increased by4.33%

Number of lines in readme file

144

increased by8.27%

Dependency changes

• Updateddropcss@^1.0.10