critical-css-generator - npm Package Compare versions

Comparing version 0.0.2 to 0.0.3

index.js

@@ -5,3 +5,5 @@ const puppeteer = require('puppeteer');
 const CleanCSS = require('clean-css');
+const cssMinifier = new CleanCSS({ compatibility: '*' });
 const cssSelectorExtract = require('css-selector-extract');
+const urlParse = require('url-parse');
 
@@ -14,3 +16,4 @@ exports.generate = (async (opts) => {
 		viewport: true,
-        cssSelectorFilter: []
+        cssSelectorFilter: [],
+        generateSeparateFiles: false
     }, opts);
@@ -34,7 +37,14 @@
 
-    let criticalCss = "";
+    let criticalCss = '';
+    const criticalCssByUrl = {};
     for (const entry of cssCoverage) {
-        entry.ranges.forEach((range) => {
-            criticalCss += entry.text.substring(range.start, range.end) + "\n";
-        });
+        if (entry.ranges.length > 0) {
+            const url = urlParse(entry.url, true);
+            criticalCssByUrl[url.pathname] = '';
+            entry.ranges.forEach((range) => {
+                const str = entry.text.substring(range.start, range.end).replace("url('", `url('${url.origin}`) + "\n";
+                criticalCss += str;
+                criticalCssByUrl[url.pathname] += str;
+            });
+        }
     }
@@ -86,3 +96,3 @@ criticalCss += "body{width:100vw}";
 
-        // Just add all that have "header" in the name
+        // Just add all with the following selectors in the name
         Object.keys(elementsBySelector).forEach((cssSelector) => {
@@ -109,6 +119,36 @@ if (options.cssSelectorFilter.length > 0) {
 
-    const minifiedCss = new CleanCSS({ compatibility: '*' }).minify(criticalCss).styles;
-    fs.writeFileSync(options.path, minifiedCss, 'utf8');
+    let promises = [(new Promise((resolve, reject) => {
+        const minifiedCss = cssMinifier.minify(criticalCss).styles;
+        fs.writeFile(options.path, minifiedCss, 'utf8', (err) => {
+            if (err) {
+                reject(err);
+            } else {
+                resolve();
+            }
+        });
+    }))];
     
+    if (options.generateSeparateFiles) {
+        fs.mkdirSync('critical');
+        Object.keys(criticalCssByUrl).forEach((url) => {
+            promises.push((new Promise((resolve, reject) => {
+                const arr = url.split('/');
+                const fileName = arr[arr.length - 1];
+                const minifiedCss = cssMinifier.minify(criticalCssByUrl[url]).styles;
+                fs.writeFile(`critical/${fileName}`, minifiedCss, 'utf8', (err) => {
+                    if (err) {
+                        // reject(err);
+                        console.warn(err);
+                        resolve();
+                    } else {
+                        resolve();
+                    }
+                });
+            })));
+        });
+    }
+
+    await Promise.all(promises);
+    
     await browser.close();
 });

package.json

 {
     "name": "critical-css-generator",
-    "version": "0.0.2",
-    "main": "critical",
+    "version": "0.0.3",
+    "main": "index",
+    "repository": {
+        "type" : "git",
+        "url" : "https://github.com/indirap/critical-css-generator.git"
+    },
     "keywords": [
@@ -11,4 +15,5 @@ "puppeteer"
         "css-selector-extract": "^4.0.0",
-        "puppeteer": "^1.7.0"
+        "puppeteer": "^1.7.0",
+        "url-parse": "^1.4.3"
     }
 }

README.md

@@ -22,5 +22,6 @@ # Critical CSS Generator
 * path: Where to output critical CSS. Default is `critical.css`.
-* deviceName: What device to run it on. Default is Pixel 2.
-* waitFor: How long to wait after page navigation before generating critical CSS. Some pages have long load times, so specifying this may be helpful. Default is 20 seconds.
-* viewport: Whether to generate critical CSS (only above the fold content) or generate used CSS for the whole page. Default is true.
-* cssSelectorFilter: An array of CSS selectors (regex) to always include in the generated CSS. For example: [/mobile/]. Default is [].
+* deviceName: What device to run it on. Default is `Pixel 2`.
+* waitFor: How long to wait (in ms) after page navigation before generating critical CSS. Some pages have long load times, so specifying this may be helpful. Default is `20000`.
+* viewport: Whether to generate critical CSS (only above the fold content) or generate used CSS for the whole page. Default is `true`.
+* cssSelectorFilter: An array of CSS selectors (regex) to always include in the generated CSS. For example: [/mobile/]. Default is `[]`.
+* generateSeparateFiles: Generate separate critical CSS files per each CSS file used. The files are stored in a `critical/` directory. Default is `false`.

Fixed alerts

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

174373

increased by2767.51%

Number of package files

6

increased by50%

Lines of code

155

increased by40.91%

Number of lines in readme file

26

increased by4%

Number of low supply chain risk alerts

1

decreased by-50%

Worsened metrics

Dependency count

4

increased by33.33%

Dependency changes

• + Addedurl-parse@^1.4.3

• + Addedquerystringify@2.2.0(transitive)

• + Addedrequires-port@1.0.0(transitive)

• + Addedurl-parse@1.5.10(transitive)