Support minifying extracted css (#237)

* Support minifying extracted css

* Remove broken file reference
This commit is contained in:
George 2018-04-11 14:07:13 -04:00 committed by Ben Zörb
parent c4ec606dc9
commit b6bd8e8c0c
3 changed files with 29 additions and 2 deletions

View File

@ -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)));
}

View File

@ -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}

View File

@ -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');