diff --git a/index.js b/index.js index 9851f35..05a7f95 100644 --- a/index.js +++ b/index.js @@ -89,7 +89,7 @@ module.exports = function (html, styles, options) { minify: true }, options || {}); - const target = o.selector || allLinks.get(0) || $('script').get(0); + const target = o.selector || allLinks.get(0) || $('head script').get(0); const {indent} = detectIndent(html); const targetIndent = getIndent(html, target); const $target = $(target); @@ -112,12 +112,21 @@ module.exports = function (html, styles, options) { styles = new CleanCSS().minify(styles).styles; // eslint-disable-line prefer-destructuring } - // Insert inline styles right before first - $target.before([ - '', '' - ].join('\n' + targetIndent).replace(/(\r\n|\r|\n)[\s\t]+(\r\n|\r|\n)/g, '$1$2')); + if (styles) { + const elements = [ + '', '' + ].join('\n' + targetIndent).replace(/(\r\n|\r|\n)[\s\t]+(\r\n|\r|\n)/g, '$1$2'); + + if ($target.length > 0) { + // Insert inline styles right before first or other target + $target.before(elements); + } else { + // Just append to the head + $('head').append(elements); + } + } if (links.length > 0) { // Modify links and ad clones to noscript block diff --git a/test/expected/index-nostyle.html b/test/expected/index-nostyle.html new file mode 100644 index 0000000..0c1cc3c --- /dev/null +++ b/test/expected/index-nostyle.html @@ -0,0 +1,48 @@ + + + + + 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-nostyle.html b/test/fixtures/index-nostyle.html new file mode 100644 index 0000000..1b07526 --- /dev/null +++ b/test/fixtures/index-nostyle.html @@ -0,0 +1,45 @@ + + + + + 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 fb94afc..d1acdde 100644 --- a/test/index.js +++ b/test/index.js @@ -33,6 +33,18 @@ describe('Module: inline-critical', function () { done(); }); + it('should inline in head if no stylesheets are there', function (done) { + var html = read('test/fixtures/index-nostyle.html'); + var css = read('test/fixtures/critical.css'); + + var expected = read('test/expected/index-nostyle.html'); + var out = inlineCritical(html, css, {minify: true}); + + expect(strip(out.toString('utf-8'))).to.be.equal(strip(expected)); + + done(); + }); + it('should inline absolute css', function (done) { var html = read('test/fixtures/index-absolute.html'); var css = read('test/fixtures/critical.css');