supply context to minifyCSS custom processor (#909)

kangax · Apr 16, 2018 · a2ae883 · a2ae883
1 parent 78ae1a0
commit a2ae883
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 13 deletions.
diff --git a/README.md b/README.md
@@ -58,7 +58,7 @@ Most of the options are disabled by default.
 | `includeAutoGeneratedTags`     | Insert tags generated by HTML parser | `true` |
 | `keepClosingSlash`             | Keep the trailing slash on singleton elements | `false` |
 | `maxLineLength`                | Specify a maximum line length. Compressed output will be split by newlines at valid HTML split-points |
-| `minifyCSS`                    | Minify CSS in style elements and style attributes (uses [clean-css](https://github.com/jakubpawlowicz/clean-css)) | `false` (could be `true`, `Object`, `Function(text)`) |
+| `minifyCSS`                    | Minify CSS in style elements and style attributes (uses [clean-css](https://github.com/jakubpawlowicz/clean-css)) | `false` (could be `true`, `Object`, `Function(text, type)`) |
 | `minifyJS`                     | Minify JavaScript in script elements and event attributes (uses [UglifyJS](https://github.com/mishoo/UglifyJS2)) | `false` (could be `true`, `Object`, `Function(text, inline)`) |
 | `minifyURLs`                   | Minify URLs in various attributes (uses [relateurl](https://github.com/stevenvachon/relateurl)) | `false` (could be `String`, `Object`, `Function(text)`) |
 | `preserveLineBreaks`           | Always collapse to 1 line break (never remove it entirely) when whitespace between tags include a line break. Must be used in conjunction with `collapseWhitespace=true` | `false` |

diff --git a/src/htmlminifier.js b/src/htmlminifier.js
@@ -285,7 +285,7 @@ function cleanAttributeValue(tag, attrName, attrValue, options, attrs) {
       if (/;$/.test(attrValue) && !/&#?[0-9a-zA-Z]+;$/.test(attrValue)) {
         attrValue = attrValue.replace(/\s*;$/, ';');
       }
-      attrValue = unwrapInlineCSS(options.minifyCSS(wrapInlineCSS(attrValue)));
+      attrValue = options.minifyCSS(attrValue, 'inline');
     }
     return attrValue;
   }
@@ -322,7 +322,7 @@ function cleanAttributeValue(tag, attrName, attrValue, options, attrs) {
   }
   else if (isMediaQuery(tag, attrs, attrName)) {
     attrValue = trimWhitespace(attrValue);
-    return unwrapMediaQuery(options.minifyCSS(wrapMediaQuery(attrValue)));
+    return options.minifyCSS(attrValue, 'media');
   }
   return attrValue;
 }
@@ -694,12 +694,25 @@ function processOptions(options) {
     if (typeof minifyCSS !== 'object') {
       minifyCSS = {};
     }
-    options.minifyCSS = function(text) {
+    options.minifyCSS = function(text, type) {
       text = text.replace(/(url\s*\(\s*)("|'|)(.*?)\2(\s*\))/ig, function(match, prefix, quote, url, suffix) {
         return prefix + quote + options.minifyURLs(url) + quote + suffix;
       });
       try {
-        return new CleanCSS(minifyCSS).minify(text).styles;
+        if (type === 'inline') {
+          text = wrapInlineCSS(text);
+        }
+        else if (type === 'media') {
+          text = wrapMediaQuery(text);
+        }
+        text = new CleanCSS(minifyCSS).minify(text).styles;
+        if (type === 'inline') {
+          text = unwrapInlineCSS(text);
+        }
+        else if (type === 'media') {
+          text = unwrapMediaQuery(text);
+        }
+        return text;
       }
       catch (err) {
         options.log(err);
@@ -867,8 +880,8 @@ function minify(value, options, partialMarkup) {
         uidPattern = new RegExp('(\\s*)' + uidAttr + '([0-9]+)(\\s*)', 'g');
         var minifyCSS = options.minifyCSS;
         if (minifyCSS) {
-          options.minifyCSS = function(text) {
-            return minifyCSS(escapeFragments(text));
+          options.minifyCSS = function(text, type) {
+            return minifyCSS(escapeFragments(text), type);
           };
         }
         var minifyJS = options.minifyJS;

diff --git a/tests/minifier.js b/tests/minifier.js
@@ -776,36 +776,36 @@ QUnit.test('remove CDATA sections from scripts/styles', function(assert) {
 QUnit.test('custom processors', function(assert) {
   var input, output;
 
-  function css() {
-    return 'Some CSS';
+  function css(text, type) {
+    return (type || 'Normal') + ' CSS';
   }
 
   input = '<style>\n.foo { font: 12pt "bar" } </style>';
   assert.equal(minify(input), input);
   assert.equal(minify(input, { minifyCSS: null }), input);
   assert.equal(minify(input, { minifyCSS: false }), input);
-  output = '<style>Some CSS</style>';
+  output = '<style>Normal CSS</style>';
   assert.equal(minify(input, { minifyCSS: css }), output);
 
   input = '<p style="font: 12pt \'bar\'"></p>';
   assert.equal(minify(input), input);
   assert.equal(minify(input, { minifyCSS: null }), input);
   assert.equal(minify(input, { minifyCSS: false }), input);
-  output = '<p style="Some CSS"></p>';
+  output = '<p style="inline CSS"></p>';
   assert.equal(minify(input, { minifyCSS: css }), output);
 
   input = '<link rel="stylesheet" href="css/style-mobile.css" media="(max-width: 737px)">';
   assert.equal(minify(input), input);
   assert.equal(minify(input, { minifyCSS: null }), input);
   assert.equal(minify(input, { minifyCSS: false }), input);
-  output = '<link rel="stylesheet" href="css/style-mobile.css" media="Some CSS">';
+  output = '<link rel="stylesheet" href="css/style-mobile.css" media="media CSS">';
   assert.equal(minify(input, { minifyCSS: css }), output);
 
   input = '<style media="(max-width: 737px)"></style>';
   assert.equal(minify(input), input);
   assert.equal(minify(input, { minifyCSS: null }), input);
   assert.equal(minify(input, { minifyCSS: false }), input);
-  output = '<style media="Some CSS">Some CSS</style>';
+  output = '<style media="media CSS">Normal CSS</style>';
   assert.equal(minify(input, { minifyCSS: css }), output);
 
   function js(text, inline) {