Skip to content

Commit

Permalink
minify URLs within CSS
Browse files Browse the repository at this point in the history 
fixes #535
  • Loading branch information
@alexlamsl
alexlamsl committed Apr 14, 2016
1 parent e9697c3 commit 2a4d356
Show file tree
Hide file tree
Showing 2 changed files with 43 additions and 16 deletions.
13 changes: 11 additions & 2 deletions src/htmlminifier.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -295,7 +295,7 @@ function cleanAttributeValue(tag, attrName, attrValue, options, attrs) {
attrValue = attrValue.replace(/\s*;$/, '');
}
if (options.minifyCSS) {
return minifyCSS(attrValue, options.minifyCSS, true);
return minifyStyles(attrValue, options, true);
}
return attrValue;
}
Expand Down Expand Up @@ -663,6 +663,15 @@ function minifyCSS(text, options, inline) {
}
}

function minifyStyles(text, options, inline) {
if (options.minifyURLs) {
text = text.replace(/(url\s*\(\s*)("|'|)(.*?)\2(\s*\))/ig, function(match, prefix, quote, url, suffix) {
return prefix + quote + minifyURLs(url, options.minifyURLs) + quote + suffix;
});
}
return minifyCSS(text, options.minifyCSS, inline);
}

function uniqueId(value) {
var id;
do {
Expand Down Expand Up @@ -1077,7 +1086,7 @@ function minify(value, options, partialMarkup) {
}
}
if (options.minifyCSS && isStyleSheet(currentTag, currentAttrs)) {
text = minifyCSS(text, options.minifyCSS);
text = minifyStyles(text, options);
}
if (options.removeOptionalTags && text) {
// <html> may be omitted if first thing inside is not comment
Expand Down
46 changes: 32 additions & 14 deletions tests/minifier.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -535,34 +535,34 @@ test('remove CDATA sections from scripts/styles', function() {
output = '<script>alert(11)</script>';
equal(minify(input, { minifyJS: true }), output);

input = '<style><![CDATA[\np.a{backgourd:red}\n]]></style>';
input = '<style><![CDATA[\np.a{background:red}\n]]></style>';
equal(minify(input), input);
output = '<style><![CDATA[ p.a{backgourd:red}\n]]></style>';
output = '<style><![CDATA[ p.a{background:red}\n]]></style>';
equal(minify(input, { minifyCSS: true }), output);

input = '<style><![CDATA[p.b{backgourd:red}]]></style>';
input = '<style><![CDATA[p.b{background:red}]]></style>';
equal(minify(input), input);
output = '<style><![CDATA[p.b{backgourd:red}]]></style>';
output = '<style><![CDATA[p.b{background:red}]]></style>';
equal(minify(input, { minifyCSS: true }), output);

input = '<style><![CDATA[p.c{backgourd:red}\n]]></style>';
input = '<style><![CDATA[p.c{background:red}\n]]></style>';
equal(minify(input), input);
output = '<style><![CDATA[p.c{backgourd:red}\n]]></style>';
output = '<style><![CDATA[p.c{background:red}\n]]></style>';
equal(minify(input, { minifyCSS: true }), output);

input = '<style><![CDATA[\np.d{backgourd:red}]]></style>';
input = '<style><![CDATA[\np.d{background:red}]]></style>';
equal(minify(input), input);
output = '<style><![CDATA[ p.d{backgourd:red}]]></style>';
output = '<style><![CDATA[ p.d{background:red}]]></style>';
equal(minify(input, { minifyCSS: true }), output);

input = '<style><![CDATA[p.e{backgourd:red}\np.f{backgourd:red}\np.g{backgourd:red}]]></style>';
input = '<style><![CDATA[p.e{background:red}\np.f{background:red}\np.g{background:red}]]></style>';
equal(minify(input), input);
output = '<style><![CDATA[p.e{backgourd:red}p.f{backgourd:red}p.g{backgourd:red}]]></style>';
output = '<style><![CDATA[p.e{background:red}p.f{background:red}p.g{background:red}]]></style>';
equal(minify(input, { minifyCSS: true }), output);

input = '<style>p.h{backgourd:red}<![CDATA[\np.i{backgourd:red}\n]]>p.j{backgourd:red}</style>';
input = '<style>p.h{background:red}<![CDATA[\np.i{background:red}\n]]>p.j{background:red}</style>';
equal(minify(input), input);
output = '<style>p.h{backgourd:red}<![CDATA[ p.i{backgourd:red}]]>p.j{backgourd:red}</style>';
output = '<style>p.h{background:red}<![CDATA[ p.i{background:red}]]>p.j{background:red}</style>';
equal(minify(input, { minifyCSS: true }), output);

input = '<style>/* <![CDATA[ */p { color: red } // ]]></style>';
Expand Down Expand Up @@ -1761,12 +1761,30 @@ test('style attribute minification', function() {
test('url attribute minification', function() {
input = '<link rel="stylesheet" href="http://website.com/style.css"><form action="http://website.com/folder/folder2/index.html"><a href="http://website.com/folder/file.html">link</a></form>';
output = '<link rel="stylesheet" href="/style.css"><form action="folder2/"><a href="file.html">link</a></form>';

equal(minify(input, { minifyURLs: { site: 'http://website.com/folder/' } }), output);

input = '<link rel="canonical" href="http://website.com/">';
equal(minify(input, { minifyURLs: { site: 'http://website.com/' } }), input);

input = '<style>body { background: url(\'http://website.com/bg.png\') }</style>';
equal(minify(input, { minifyURLs: { site: 'http://website.com/' } }), input);
output = '<style>body{background:url(http://website.com/bg.png)}</style>';
equal(minify(input, { minifyCSS: true }), output);
output = '<style>body{background:url(bg.png)}</style>';
equal(minify(input, {
minifyCSS: true,
minifyURLs: { site: 'http://website.com/' }
}), output);

input = '<style>body { background: url("http://website.com/foo bar/bg.png") }</style>';
equal(minify(input, { minifyURLs: { site: 'http://website.com/foo bar/' } }), input);
output = '<style>body{background:url("http://website.com/foo bar/bg.png")}</style>';
equal(minify(input, { minifyCSS: true }), output);
output = '<style>body{background:url(bg.png)}</style>';
equal(minify(input, {
minifyCSS: true,
minifyURLs: { site: 'http://website.com/foo bar/' }
}), output);
});

test('valueless attributes', function() {
Expand Down Expand Up @@ -1938,7 +1956,7 @@ test('ignore', function() {
'<div class="blah" style="color: red">\n test <span> <input disabled/> foo </span>\n\n </div>';

output = '<div class="blah" style="color: red">\n test <span> <input disabled/> foo </span>\n\n </div>' +
'<div class="blah" style="color: red">test <span><input disabled="disabled"> foo</span></div>';
'<div class="blah" style="color: red">test <span><input disabled="disabled"> foo</span></div>';

equal(minify(input, { collapseWhitespace: true }), output);

Expand Down

0 comments on commit 2a4d356

Please sign in to comment.