From b6bd8e8c0c8774a45c627e10ed506c7bc7c9020e Mon Sep 17 00:00:00 2001 From: George Date: Wed, 11 Apr 2018 14:07:13 -0400 Subject: [PATCH] Support minifying extracted css (#237) * Support minifying extracted css * Remove broken file reference --- index.js | 17 +++++++++++++++-- test/expected/cartoon-expected-minified.css | 1 + test/index.js | 13 +++++++++++++ 3 files changed, 29 insertions(+), 2 deletions(-) create mode 100644 test/expected/cartoon-expected-minified.css diff --git a/index.js b/index.js index b67c21c..19548cc 100644 --- a/index.js +++ b/index.js @@ -71,6 +71,14 @@ function getIndent(html, $el) { return detectIndent(lines.join('\n')).indent; } +/** + * Minify CSS + * @param {string} styles + */ +function minifyCSS(styles) { + return new CleanCSS().minify(styles).styles; // eslint-disable-line prefer-destructuring +} + module.exports = function (html, styles, options) { if (!_.isString(html)) { html = String(html); @@ -109,7 +117,7 @@ module.exports = function (html, styles, options) { // Minify if minify option is set if (o.minify) { - styles = new CleanCSS().minify(styles).styles; // eslint-disable-line prefer-destructuring + styles = minifyCSS(styles); } if (styles) { @@ -142,7 +150,12 @@ module.exports = function (html, styles, options) { const href = $el.attr('href'); const file = path.resolve(path.join(o.basePath, href)); if (fs.existsSync(file)) { - const diff = normalizeNewline(cave(file, {css: styles})); + let diff = normalizeNewline(cave(file, {css: styles})); + + if (o.minify) { + diff = minifyCSS(diff); + } + fs.writeFileSync(reaver.rev(file, diff), diff); $el.attr('href', normalizePath(reaver.rev(href, diff))); } diff --git a/test/expected/cartoon-expected-minified.css b/test/expected/cartoon-expected-minified.css new file mode 100644 index 0000000..725f110 --- /dev/null +++ b/test/expected/cartoon-expected-minified.css @@ -0,0 +1 @@ +.cool{color:red}#not{color:red}body{color:red}@media screen and (min-width:768px){.container{max-width:730px}.header{padding-left:0;padding-right:0}.header{margin-bottom:30px}.jumbotron{border-bottom:0}}a{background:0 0}@media print{*{color:#000!important;text-shadow:none!important;background:0 0!important;box-shadow:none!important}}:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html{font-size:62.5%;-webkit-tap-highlight-color:transparent}body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.42857143;color:#333;background-color:#fff}@media (min-width:768px){.lead{font-size:21px}}@media (min-width:768px){.container{width:750px}}@media (min-width:992px){.container{width:970px}}@media (min-width:1200px){.container{width:1170px}}.btn{display:inline-block;padding:6px 12px;margin-bottom:0;font-size:14px;font-weight:400;line-height:1.42857143;text-align:center;white-space:nowrap;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-image:none;border:1px solid transparent;border-radius:4px}.nav>li{position:relative;display:block}.nav>li>a{position:relative;display:block;padding:10px 15px}.nav-pills>li{float:left}.nav-pills>li>a{border-radius:4px}.nav-pills>li+li{margin-left:2px}.nav-pills>li.active>a{color:#fff;background-color:#428bca}@media screen and (min-width:768px){.jumbotron{padding-top:48px;padding-bottom:48px}.container .jumbotron{padding-right:60px;padding-left:60px}.jumbotron h1{font-size:63px}}.pull-right{float:right!important}.foo{color:red} \ No newline at end of file diff --git a/test/index.js b/test/index.js index d1acdde..0581653 100644 --- a/test/index.js +++ b/test/index.js @@ -83,6 +83,19 @@ describe('Module: inline-critical', function () { done(); }); + + it('should extract and minify css', function (done) { + var html = read('test/fixtures/cartoon.html'); + var css = read('test/fixtures/critical.css'); + var expected = read('test/expected/cartoon-expected-minified.css'); + + var out = inlineCritical(html, css, {minify: true, extract: true, basePath: 'test/fixtures'}); + + expect(read(reaver.rev('test/fixtures/css/cartoon.css', expected))).to.be.equal(expected); + + 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');