From c4e43274a81532d1703f316137ee3b33469d6829 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ben=20Z=C3=B6rb?= Date: Wed, 10 Jun 2015 18:07:48 +0200 Subject: [PATCH] Fix #9 --- index.js | 25 +- test/expected/cartoon-absolute-expected.html | 350 +++++++++++++++++++ test/expected/index-inlined-absolute.html | 350 +++++++++++++++++++ test/fixtures/cartoon-absolute.html | 58 +++ test/fixtures/index-absolute.html | 52 +++ test/index.js | 26 ++ 6 files changed, 847 insertions(+), 14 deletions(-) create mode 100644 test/expected/cartoon-absolute-expected.html create mode 100644 test/expected/index-inlined-absolute.html create mode 100644 test/fixtures/cartoon-absolute.html create mode 100644 test/fixtures/index-absolute.html diff --git a/index.js b/index.js index b731797..3bba0c2 100644 --- a/index.js +++ b/index.js @@ -23,7 +23,7 @@ var CleanCSS = require('clean-css'); var slash = require('slash'); var normalizeNewline = require('normalize-newline'); // get loadCSS -var loadCSS = read(path.join(__dirname,'vendor','loadCSS.js')); +var loadCSS = read(path.join(__dirname, 'vendor', 'loadCSS.js')); loadCSS = UglifyJS.minify(loadCSS, {fromString: true}).code; /** @@ -40,20 +40,18 @@ function normalizePath(str) { * @param {string} file * @returns {string} */ -function read (file) { +function read(file) { return fs.readFileSync(file, 'utf8'); } - - -module.exports = function(html, styles, options) { +module.exports = function (html, styles, options) { var $ = cheerio.load(String(html), { decodeEntities: false }); - var links = $('link[rel="stylesheet"]').filter(function(){ + var links = $('link[rel="stylesheet"]').filter(function () { return !$(this).parents('noscript').length; }); var noscript = $(''); @@ -64,9 +62,9 @@ module.exports = function(html, styles, options) { } if (o.ignore) { - links = links.filter(function() { + links = links.filter(function () { var href = $(this).attr('href'); - return _.findIndex(o.ignore, function(arg) { + return _.findIndex(o.ignore, function (arg) { return _.isRegExp(arg) && arg.test(href) || arg === href; }) === -1; }); @@ -82,23 +80,22 @@ module.exports = function(html, styles, options) { // insert noscript block right after stylesheets links.eq(0).first().after(noscript); - var hrefs = links.map(function(idx, el) { + 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) ) { + hrefs = hrefs.map(function (href) { + var file = path.resolve(path.join(o.basePath, href)); + if (!fs.existsSync(file)) { return href; } - var diff = normalizeNewline(cave(file, { css: styles })); + var diff = normalizeNewline(cave(file, {css: styles})); fs.writeFileSync(reaver.rev(file, diff), diff); return normalizePath(reaver.rev(href, diff)); }); diff --git a/test/expected/cartoon-absolute-expected.html b/test/expected/cartoon-absolute-expected.html new file mode 100644 index 0000000..bef9e49 --- /dev/null +++ b/test/expected/cartoon-absolute-expected.html @@ -0,0 +1,350 @@ + + + + + critical css test + + + + + + + + + + + + + + + +
+
+ +

critical css test

+
+ +
+

'Allo, 'Allo!

+

Always a pleasure scaffolding your apps.

+

Splendid!

+
+ +
+
+

HTML5 Boilerplate

+

HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites.

+ +

Bootstrap

+

Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.

+
+
+ +
+

♥ from the Yeoman team

+
+
+ + diff --git a/test/expected/index-inlined-absolute.html b/test/expected/index-inlined-absolute.html new file mode 100644 index 0000000..eac3849 --- /dev/null +++ b/test/expected/index-inlined-absolute.html @@ -0,0 +1,350 @@ + + + + +critical css test + + + + + + + + + + + + + + + +
+
+ +

critical css test

+
+ +
+

'Allo, 'Allo!

+

Always a pleasure scaffolding your apps.

+

Splendid!

+
+ +
+
+

HTML5 Boilerplate

+

HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites.

+ +

Bootstrap

+

Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.

+
+
+ +
+

♥ from the Yeoman team

+
+
+ + diff --git a/test/fixtures/cartoon-absolute.html b/test/fixtures/cartoon-absolute.html new file mode 100644 index 0000000..427b372 --- /dev/null +++ b/test/fixtures/cartoon-absolute.html @@ -0,0 +1,58 @@ + + + + + critical css test + + + + + + + + + + + + + +
+
+ +

critical css test

+
+ +
+

'Allo, 'Allo!

+ +

Always a pleasure scaffolding your apps.

+ +

Splendid!

+
+ +
+
+

HTML5 Boilerplate

+ +

HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or + sites.

+ +

Bootstrap

+ +

Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.

+
+
+ +
+

♥ from the Yeoman team

+
+
+ + diff --git a/test/fixtures/index-absolute.html b/test/fixtures/index-absolute.html new file mode 100644 index 0000000..4ed01e3 --- /dev/null +++ b/test/fixtures/index-absolute.html @@ -0,0 +1,52 @@ + + + + + critical css test + + + + + + + + + + + + + +
+
+ +

critical css test

+
+ +
+

'Allo, 'Allo!

+

Always a pleasure scaffolding your apps.

+

Splendid!

+
+ +
+
+

HTML5 Boilerplate

+

HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites.

+ +

Bootstrap

+

Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.

+
+
+ +
+

♥ from the Yeoman team

+
+
+ + diff --git a/test/index.js b/test/index.js index 1a6ad40..2f5d734 100644 --- a/test/index.js +++ b/test/index.js @@ -30,6 +30,18 @@ describe('inline-critical', function() { done(); }); + it('should inline absolute css', function(done) { + var html = read('test/fixtures/index-absolute.html'); + var css = read('test/fixtures/critical.css'); + + var expected = read('test/expected/index-inlined-absolute.html'); + var out = inlineCritical(html, css); + + expect(strip(out.toString('utf-8'))).to.be.equal(strip(expected)); + + done(); + }); + it('should inline and minify css', function(done) { var html = read('test/fixtures/index.html'); @@ -58,6 +70,20 @@ describe('inline-critical', function() { done(); }); + it('should inline and extract css correctly with absolute paths', function(done) { + var html = read('test/fixtures/cartoon-absolute.html'); + var css = read('test/fixtures/critical.css'); + var expected = read('test/expected/cartoon-expected.css'); + var expectedHtml = read('test/expected/cartoon-absolute-expected.html'); + + var out = inlineCritical(html, css, { extract: true, basePath: 'test/fixtures' }); + + expect(read(reaver.rev('test/fixtures/css/cartoon.css', expected))).to.be.equal(expected); + expect(strip(out.toString('utf-8'))).to.be.equal(strip(expectedHtml)); + + done(); + }); + it('should not strip of svg closing tags', function(done) { var html = read('test/fixtures/entities.html'); var out = inlineCritical(html, '');