critical - npm Package Compare versions

Comparing version 0.1.5 to 0.1.6

index.js

@@ -13,3 +13,13 @@ /*
 var inliner = require('./inline-styles');
+var Promise = require("bluebird");
+var os = require('os');
 
+
+// promisify fs
+Promise.promisifyAll(fs);
+
+var penthouseAsync = Promise.promisify(penthouse);
+
+var TMPCSS = '.tmp.css';
+
 /**
@@ -23,3 +33,4 @@ * Critical path CSS generation
     opts = opts || {};
-    cb = cb || function () {};
+    cb = cb || function () {
+    };
 
@@ -40,43 +51,67 @@ if (!opts.src || !opts.base) {
 
-    fs.readFile(url, function (err, html) {
-        if (err) {
-            cb(err);
-            return;
+    // read html file to get css files
+    fs.readFileAsync(url).then(function (html) {
+        // consider opts.css and map to array if it's a string
+        if (opts.css) {
+            return (typeof opts.css === 'string') ? [opts.css] : opts.css;
+        } else {
+            // Oust extracts a list of your stylesheets
+            return oust(html.toString('utf8'), 'stylesheets').map(function (href) {
+                return path.join(opts.base, href);
+            });
         }
 
-        // Oust extracts a list of your stylesheets
-        var hrefs = oust(html, 'stylesheets');
-        // Penthouse then determines your critical
-        // path CSS using these as input.
-        penthouse({
+    // combine all css files to one bid stylesheet
+    }).reduce(function (total, fileName) {
+        return fs.readFileAsync(fileName, "utf8").then(function (contents) {
+            return total + os.EOL + contents;
+        });
+
+
+    // write contents to tmp file
+    }, '').then(function (css) {
+        return fs.writeFileAsync(TMPCSS, css);
+
+
+    // let penthouseAsync do the rest
+    }).then(function () {
+        return penthouseAsync({
             url: url,
-            css: path.join(opts.base, hrefs[0]),
+            css: TMPCSS,
             // What viewports do you care about?
             width: opts.width,   // viewport width
             height: opts.height  // viewport height
-        }, function (err, criticalCSS) {
-            if (err) {
-                cb(err);
-                return;
-            }
+        });
 
-            if (opts.minify === true) {
-                criticalCSS = new CleanCSS().minify(criticalCSS);
-            }
+    // cleanup tmp css
+    }).then(function (criticalCSS) {
+        return fs.unlinkAsync(TMPCSS).then(function () {
+            return criticalCSS;
+        });
 
-            if (opts.dest) {
-                // Write critical-path CSS
-                fs.writeFile(path.join(opts.base, opts.dest), criticalCSS, function (err) {
-                    if (err) {
-                        cb(err);
-                        return;
-                    }
 
-                    cb(null, criticalCSS.toString());
-                });
-            } else {
-                cb(null, criticalCSS.toString());
-            }
-        });
-    });
+    // Penthouse callback
+    }).then(function (criticalCSS) {
+        if (opts.minify === true) {
+            criticalCSS = new CleanCSS().minify(criticalCSS);
+        }
+
+        if (opts.dest) {
+            // Write critical-path CSS
+            return fs.writeFileAsync(path.join(opts.base, opts.dest), criticalCSS).then(function () {
+                return criticalCSS;
+            });
+        } else {
+            return criticalCSS;
+        }
+
+    // return err on error
+    }).catch(function (err) {
+        cb(err);
+
+    // callback success
+    }).then(function (criticalCSS) {
+        cb(null, criticalCSS.toString());
+
+    }).done();
 };
@@ -92,3 +127,4 @@
     opts = opts || {};
-    cb = cb || function () {};
+    cb = cb || function () {
+    };
 
@@ -132,3 +168,4 @@ if (!opts.src || !opts.base) {
     opts = opts || {};
-    cb = cb || function () {};
+    cb = cb || function () {
+    };
 
@@ -135,0 +172,0 @@ if (!opts.styleTarget || !opts.htmlTarget) {

inline-styles.js

@@ -26,3 +26,3 @@ /*
       if (el.attr('rel') === 'stylesheet' && isLocal(href)) {
-        var dir = path.dirname(href);
+        var dir = base + path.dirname(href);
         var file = path.join(base, href);
@@ -29,0 +29,0 @@ var style = fs.readFileSync(file);

package.json

 {
   "name": "critical",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "Extract & Inline Critical-path CSS from HTML",
@@ -25,2 +25,3 @@ "author": "Addy Osmani",
   "dependencies": {
+    "bluebird": "^2.2.2",
     "cheerio": "^0.17.0",
@@ -30,3 +31,3 @@ "clean-css": "^2.2.4",
     "oust": "^0.2.0",
-    "penthouse": "^0.2.1"
+    "penthouse": "^0.2.5"
   },
@@ -33,0 +34,0 @@ "devDependencies": {

README.md

@@ -13,2 +13,8 @@ # critical [![Build Status](https://travis-ci.org/addyosmani/critical.svg?branch=master)](https://travis-ci.org/addyosmani/critical)
 
+## Demo projects
+
+* [Optimize a basic page with Gulp](https://github.com/addyosmani/critical-path-css-demo) with a [tutorial](https://github.com/addyosmani/critical-path-css-demo#tutorial)
+* [Optimize an Angular boilerplate with Gulp](https://github.com/addyosmani/critical-path-angular-demo)
+* [Optimize a Weather app with Gulp](https://github.com/addyosmani/critical-css-weather-app)
+
 ## Usage
@@ -26,9 +32,25 @@
 critical.generateInline({
-    base: 'dist/', // Your base directory
-    src: 'index.html', // HTML source
-    htmlTarget: 'index-critical.html', // Target for final HTML output
-    styleTarget: 'styles/main.css', // Target for generated critical-path CSS (which we inline)
-    width: 320, // Viewport width
-    height: 480, // Viewport height
-    minify: true // Minify critical-path CSS when inlining
+    // Your base directory
+    base: 'dist/',
+    
+    // HTML source
+    src: 'index.html',
+
+    // Your CSS Files (optional)
+    css: ['dist/styles/main.css'],
+    
+    // Viewport width
+    width: 320,
+    
+    // Viewport height
+    height: 480,
+    
+    // Target for final HTML output
+    htmlTarget: 'index-critical.html',
+    
+    // Target for generated critical-path CSS (which we inline)
+    styleTarget: 'styles/main.css',
+    
+    // Minify critical-path CSS when inlining
+    minify: true
 });
@@ -120,2 +142,3 @@ ```
 | dest          | `string`      | Location of where to save the output of an operation |
+| css           | `array`       | Use this CSS files instead of the ones exctracted from the HTML |
 | width         | `integer`     | (Generation only) Width of the target viewport |
@@ -122,0 +145,0 @@ | height        | `integer`     | (Generation only) Height of the target viewport |

No alert changes

Improved metrics

Total package byte prevSize

13157

increased by13.15%

Lines of code

189

increased by15.24%

Number of lines in readme file

207

increased by12.5%

Worsened metrics

Dependency count

6

increased by20%

Dependency changes

• + Addedbluebird@^2.2.2

• + Addedbluebird@2.11.0(transitive)

• Updatedpenthouse@^0.2.5