inline-critical - npm Package Compare versions

Comparing version 0.0.4 to 0.0.5

index.js

@@ -12,6 +12,11 @@ /**
 'use strict';
+
+var fs = require('fs');
+var path = require('path');
+var cave = require('cave');
+var reaver = require('reaver');
 var cheerio = require('cheerio');
 var CleanCSS = require('clean-css');
 
-module.exports = function(html, styles, minify) {
+module.exports = function(html, styles, options) {
 
@@ -21,5 +26,6 @@ var $ = cheerio.load(String(html));
   var noscript = $('<noscript>\n</noscript>');
+  var o = options || {};
 
   // minify if minify option is set
-  if (minify) {
+  if (o.minify) {
     styles = new CleanCSS().minify(styles);
@@ -33,9 +39,29 @@ }
 
+  var hrefs = links.map(function(idx, el) {
+    return $(this).attr('href');
+  }).toArray();
+
+  // extract styles from stylesheets if extract option is set
+  if (o.extract) {
+    if (!o.basePath) {
+      throw new Error('Option `basePath` is missing and required when using `extract`!');
+    }
+    hrefs = hrefs.map(function(href) {
+      var file = path.resolve(o.basePath, href);
+      if (!fs.existsSync(file)) {
+        return;
+      }
+      var diff = cave(file, { css: styles });
+      fs.writeFileSync(reaver.rev(file, diff), diff);
+      return reaver.rev(href, diff);
+    });
+  }
+
   // wrap links to stylesheets in noscript block so that they will evaluated when js is turned off
-  var hrefs = links.map(function(idx, el) {
-    el = $(el);
+  links.each(function (idx) {
+    var el = $(this);
+    el.attr('href', hrefs[idx]);
     noscript.append(el);
     noscript.append('\n');
-    return el.attr('href');
-  }).toArray();
+  });
 
@@ -42,0 +68,0 @@ // build js block to load blocking stylesheets

package.json

 {
   "name": "inline-critical",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "Inline critical-path css and load the existing stylesheets asynchronously",
@@ -22,4 +22,6 @@ "main": "index.js",
   "dependencies": {
+    "cave": "^2.0.0",
     "cheerio": "^0.17.0",
-    "clean-css": "^2.2.12"
+    "clean-css": "^2.2.12",
+    "reaver": "^1.2.0"
   },
@@ -26,0 +28,0 @@ "devDependencies": {

README.md

 # inline-critical
 
 Inline critical-path css and load the existing stylesheets asynchronously.
-Existing link tags will also be wrapped in <noscript> so the users with javscript disabled will see the site rendered normally.
+Existing link tags will also be wrapped in ```<noscript>``` so the users with javscript disabled will see the site rendered normally.
 
@@ -25,1 +25,14 @@ [![build status](https://secure.travis-ci.org/bezoerb/inline-critical.svg)](http://travis-ci.org/bezoerb/inline-critical)
 ```
+
+## `inline(html, styles, options?)
+
+- `html` is the HTML you want to use to inline your critical styles, or any other styles
+- `styles` are the styles you're looking to inline
+- `options` is an optional configuration object
+  - `minify` will minify the styles before inlining
+  - `extract` will remove the inlined styles from any stylesheets referenced in the HTML
+  - `basePath` will be used when extracting styles to find the files references by `href` attributes
+
+## License
+
+MIT

test/index.js

@@ -1,39 +0,58 @@
-var expect = require('chai').expect,
-    fs = require('fs'),
-    inlineCritical = require('..');
+'use strict';
 
-/**
- * Strip whitespaces, tabs and newlines and replace with one space.
- * Usefull when comparing string contents.
- * @param string
- */
-function stripWhitespace(string) {
-    return string.replace(/[\r\n]+/mg,' ').replace(/\s+/gm,'');
+var expect = require('chai').expect;
+var reaver = require('reaver');
+var fs = require('fs');
+var inlineCritical = require('..');
+
+function strip(string) {
+  return string.replace(/[\r\n]+/mg,' ').replace(/\s+/gm,'');
 }
 
+function read (file) {
+  return fs.readFileSync(file, 'utf8');
+}
+
+function write (file, data) {
+  fs.writeFileSync(file, data);
+}
+
 describe('inline-critical', function() {
-    it('should inline css', function(done) {
-        var html = fs.readFileSync('test/fixtures/index.html', 'utf8');
-        var css = fs.readFileSync('test/fixtures/critical.css', 'utf8');
+  it('should inline css', function(done) {
+    var html = read('test/fixtures/index.html');
+    var css = read('test/fixtures/critical.css');
 
-        var expected = fs.readFileSync('test/fixtures/index-inlined-async-final.html', 'utf8');
-        var out = inlineCritical(html, css);
+    var expected = read('test/fixtures/index-inlined-async-final.html');
+    var out = inlineCritical(html, css);
 
-        expect(stripWhitespace(out.toString('utf-8'))).to.be.equal(stripWhitespace(expected));
+    expect(strip(out.toString('utf-8'))).to.be.equal(strip(expected));
 
-        done();
-    });
+    done();
+  });
 
 
-    it('should inline and minify css', function(done) {
-        var html = fs.readFileSync('test/fixtures/index.html', 'utf8');
-        var css = fs.readFileSync('test/fixtures/critical.css', 'utf8');
+  it('should inline and minify css', function(done) {
+    var html = read('test/fixtures/index.html');
+    var css = read('test/fixtures/critical.css');
 
-        var expected = fs.readFileSync('test/fixtures/index-inlined-async-minified-final.html', 'utf8');
-        var out = inlineCritical(html, css, true);
+    var expected = read('test/fixtures/index-inlined-async-minified-final.html');
+    var out = inlineCritical(html, css, { minify: true });
 
-        expect(stripWhitespace(out.toString('utf-8'))).to.be.equal(stripWhitespace(expected));
+    expect(strip(out.toString('utf-8'))).to.be.equal(strip(expected));
 
-        done();
-    });
+    done();
+  });
+
+
+  it('should inline and extract css', function(done) {
+    var html = read('test/fixtures/cartoon.html');
+    var css = read('test/fixtures/critical.css');
+    var expected = read('test/fixtures/cartoon-expected.css');
+
+    inlineCritical(html, css, { extract: true, basePath: 'test/fixtures' });
+
+    expect(read(reaver.rev('test/fixtures/cartoon.css', expected))).to.be.equal(expected);
+
+    done();
+  });
 });

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

78482

increased by29.6%

Number of package files

29

increased by16%

Lines of code

731

increased by85.53%

Number of lines in readme file

38

increased by52%

Worsened metrics

Dependency count

4

increased by100%

Number of low supply chain risk alerts

2

increased by100%

Dependency changes

• + Addedcave@^2.0.0

• + Addedreaver@^1.2.0

• + Addedatob@2.1.2(transitive)

• + Addedcave@2.0.0(transitive)

• + Addedcss@2.2.4(transitive)

• + Addeddecode-uri-component@0.2.2(transitive)

• + Addedget-stdin@3.0.2(transitive)

• + Addedminimist@1.2.8(transitive)

• + Addedreaver@1.2.0(transitive)

• + Addedresolve-url@0.2.1(transitive)

• + Addedsource-map@0.6.1(transitive)

• + Addedsource-map-resolve@0.5.3(transitive)

• + Addedsource-map-url@0.4.1(transitive)

• + Addedurix@0.1.0(transitive)