History.md

@@ -1,3 +1,11 @@
+[4.2.2 / 2020-01-25](https://github.com/jakubpawlowicz/clean-css/compare/v4.2.1...v4.2.2)
+==================
+
+* Fixed error when property block has no value.
+* Fixed issue [#1077](https://github.com/jakubpawlowicz/clean-css/issues/1077) - local fonts with color in name.
+* Fixed issue [#1082](https://github.com/jakubpawlowicz/clean-css/issues/1082) - correctly convert colors if alpha >= 1.
+* Fixed issue [#1085](https://github.com/jakubpawlowicz/clean-css/issues/1085) - prevent unquoting of grid elements.
+
 [4.2.1 / 2018-08-07](https://github.com/jakubpawlowicz/clean-css/compare/v4.2.0...v4.2.1)
 ==================
 

docs/index.html

@@ -22,7 +22,7 @@ <h1 class="logo">
       <form class="settings settings--collapsed js-settings">
         <fieldset class="settings__group">
           <select class="settings__option settings__option--version" name="version">
-            <option value="v4.2.0" selected>4.2.0 (latest)</option>
+            <option value="v4.2.1" selected>4.2.1 (latest)</option>
           </select>
         </fieldset>
         <fieldset class="settings__group settings__group--advanced">

docs/js/optimizer-worker.js

@@ -5,7 +5,7 @@ onmessage = function(event) {
     case 'initialize':
       if (!initialized) {
         initialized = true
-        importScripts('//jakubpawlowicz.github.io/clean-css-builds/v4.2.0.js')
+        importScripts('//jakubpawlowicz.github.io/clean-css-builds/v4.2.1.js')
       }
       break
     case 'optimize':

lib/optimizer/level-1/optimize.js

@@ -37,8 +37,13 @@ var IMPORT_PREFIX_PATTERN = /^@import/i;
 var QUOTED_PATTERN = /^('.*'|".*")$/;
 var QUOTED_BUT_SAFE_PATTERN = /^['"][a-zA-Z][a-zA-Z\d\-_]+['"]$/;
 var URL_PREFIX_PATTERN = /^url\(/i;
+var LOCAL_PREFIX_PATTERN = /^local\(/i;
 var VARIABLE_NAME_PATTERN = /^--\S+$/;
 
+function isLocal(value){
+  return LOCAL_PREFIX_PATTERN.test(value);
+}
+
 function isNegative(value) {
   return value && value[1][0] == '-' && parseFloat(value[1]) < 0;
 }
@@ -89,16 +94,25 @@ function optimizeBorderRadius(property) {
   }
 }
 
+/**
+ * @param {string} name
+ * @param {string} value
+ * @param {Object} compatibility
+ * @return {string}
+ */
 function optimizeColors(name, value, compatibility) {
-  if (value.indexOf('#') === -1 && value.indexOf('rgb') == -1 && value.indexOf('hsl') == -1) {
+  if (!value.match(/#|rgb|hsl/gi)) {
     return shortenHex(value);
   }
 
   value = value
-    .replace(/rgb\((\-?\d+),(\-?\d+),(\-?\d+)\)/g, function (match, red, green, blue) {
+    .replace(/(rgb|hsl)a?\((\-?\d+),(\-?\d+\%?),(\-?\d+\%?),(0*[1-9]+[0-9]*(.?\d*)?)\)/gi, function (match, colorFn, p1, p2, p3, alpha) {
+      return (parseInt(alpha, 10) >= 1 ? colorFn + '(' + [p1,p2,p3].join(',') + ')' : match);
+    })
+    .replace(/rgb\((\-?\d+),(\-?\d+),(\-?\d+)\)/gi, function (match, red, green, blue) {
       return shortenRgb(red, green, blue);
     })
-    .replace(/hsl\((-?\d+),(-?\d+)%?,(-?\d+)%?\)/g, function (match, hue, saturation, lightness) {
+    .replace(/hsl\((-?\d+),(-?\d+)%?,(-?\d+)%?\)/gi, function (match, hue, saturation, lightness) {
       return shortenHsl(hue, saturation, lightness);
     })
     .replace(/(^|[^='"])#([0-9a-f]{6})/gi, function (match, prefix, color, at, inputValue) {
@@ -115,12 +129,13 @@ function optimizeColors(name, value, compatibility) {
     .replace(/(^|[^='"])#([0-9a-f]{3})/gi, function (match, prefix, color) {
       return prefix + '#' + color.toLowerCase();
     })
-    .replace(/(rgb|rgba|hsl|hsla)\(([^\)]+)\)/g, function (match, colorFunction, colorDef) {
+    .replace(/(rgb|rgba|hsl|hsla)\(([^\)]+)\)/gi, function (match, colorFunction, colorDef) {
       var tokens = colorDef.split(',');
-      var applies = (colorFunction == 'hsl' && tokens.length == 3) ||
-        (colorFunction == 'hsla' && tokens.length == 4) ||
-        (colorFunction == 'rgb' && tokens.length == 3 && colorDef.indexOf('%') > 0) ||
-        (colorFunction == 'rgba' && tokens.length == 4 && colorDef.indexOf('%') > 0);
+      var colorFnLowercase = colorFunction && colorFunction.toLowerCase();
+      var applies = (colorFnLowercase == 'hsl' && tokens.length == 3) ||
+        (colorFnLowercase == 'hsla' && tokens.length == 4) ||
+        (colorFnLowercase == 'rgb' && tokens.length === 3 && colorDef.indexOf('%') > 0) ||
+        (colorFnLowercase == 'rgba' && tokens.length == 4 && colorDef.indexOf('%') > 0);
 
       if (!applies) {
         return match;
@@ -336,7 +351,7 @@ function optimizeZeroUnits(name, value) {
 }
 
 function removeQuotes(name, value) {
-  if (name == 'content' || name.indexOf('font-variation-settings') > -1 || name.indexOf('font-feature-settings') > -1 || name.indexOf('grid-') > -1) {
+  if (name == 'content' || name.indexOf('font-variation-settings') > -1 || name.indexOf('font-feature-settings') > -1 || name == 'grid' || name.indexOf('grid-') > -1) {
     return value;
   }
 
@@ -443,7 +458,7 @@ function optimizeBody(rule, properties, context) {
         value = !options.compatibility.properties.urlQuotes ?
           removeUrlQuotes(value) :
           value;
-      } else if (isQuoted(value)) {
+      } else if (isQuoted(value) || isLocal(value)) {
         value = levelOptions.removeQuotes ?
           removeQuotes(name, value) :
           value;

lib/optimizer/validator.js

@@ -6,11 +6,11 @@ var functionAnyRegexStr = '(' + variableRegexStr + '|' + functionNoVendorRegexSt
 var calcRegex = new RegExp('^(\\-moz\\-|\\-webkit\\-)?calc\\([^\\)]+\\)$', 'i');
 var decimalRegex = /[0-9]/;
 var functionAnyRegex = new RegExp('^' + functionAnyRegexStr + '$', 'i');
-var hslColorRegex = /^hsl\(\s{0,31}[\-\.]?\d+\s{0,31},\s{0,31}\.?\d+%\s{0,31},\s{0,31}\.?\d+%\s{0,31}\)|hsla\(\s{0,31}[\-\.]?\d+\s{0,31},\s{0,31}\.?\d+%\s{0,31},\s{0,31}\.?\d+%\s{0,31},\s{0,31}\.?\d+\s{0,31}\)$/;
+var hslColorRegex = /^hsl\(\s{0,31}[\-\.]?\d+\s{0,31},\s{0,31}\.?\d+%\s{0,31},\s{0,31}\.?\d+%\s{0,31}\)|hsla\(\s{0,31}[\-\.]?\d+\s{0,31},\s{0,31}\.?\d+%\s{0,31},\s{0,31}\.?\d+%\s{0,31},\s{0,31}\.?\d+\s{0,31}\)$/i;
 var identifierRegex = /^(\-[a-z0-9_][a-z0-9\-_]*|[a-z][a-z0-9\-_]*)$/i;
 var namedEntityRegex = /^[a-z]+$/i;
 var prefixRegex = /^-([a-z0-9]|-)*$/i;
-var rgbColorRegex = /^rgb\(\s{0,31}[\d]{1,3}\s{0,31},\s{0,31}[\d]{1,3}\s{0,31},\s{0,31}[\d]{1,3}\s{0,31}\)|rgba\(\s{0,31}[\d]{1,3}\s{0,31},\s{0,31}[\d]{1,3}\s{0,31},\s{0,31}[\d]{1,3}\s{0,31},\s{0,31}[\.\d]+\s{0,31}\)$/;
+var rgbColorRegex = /^rgb\(\s{0,31}[\d]{1,3}\s{0,31},\s{0,31}[\d]{1,3}\s{0,31},\s{0,31}[\d]{1,3}\s{0,31}\)|rgba\(\s{0,31}[\d]{1,3}\s{0,31},\s{0,31}[\d]{1,3}\s{0,31},\s{0,31}[\d]{1,3}\s{0,31},\s{0,31}[\.\d]+\s{0,31}\)$/i;
 var timingFunctionRegex = /^(cubic\-bezier|steps)\([^\)]+\)$/;
 var validTimeUnits = ['ms', 's'];
 var urlRegex = /^url\([\s\S]+\)$/i;

lib/writer/helpers.js

@@ -77,7 +77,9 @@ function lastPropertyIndex(tokens) {
 function property(context, tokens, position, lastPropertyAt) {
   var store = context.store;
   var token = tokens[position];
-  var isPropertyBlock = token[2][0] == Token.PROPERTY_BLOCK;
+
+  var propertyValue = token[2];
+  var isPropertyBlock = propertyValue && propertyValue[0] === Token.PROPERTY_BLOCK;
 
   var needsSemicolon;
   if ( context.format ) {
@@ -111,7 +113,9 @@ function property(context, tokens, position, lastPropertyAt) {
     case Token.PROPERTY:
       store(context, token[1]);
       store(context, colon(context));
-      value(context, token);
+      if (propertyValue) {
+        value(context, token);
+      }
       store(context, needsSemicolon ? semicolon(context, Breaks.AfterProperty, isLast) : emptyCharacter);
       break;
     case Token.RAW:

package.json

@@ -1,6 +1,6 @@
 {
   "name": "clean-css",
-  "version": "4.2.1",
+  "version": "4.2.2",
   "author": "Jakub Pawlowicz <contact@jakubpawlowicz.com> (http://twitter.com/jakubpawlowicz)",
   "description": "A well-tested CSS minifier",
   "license": "MIT",

test/fixtures/big-min.css

@@ -189,7 +189,7 @@ body{font-size:13px;line-height:140%;color:#16212c;background:#e9edf0}
 .global{width:1000px;margin:0 auto;padding:20px 0 10px;background:#fff}
 .lmd-header{position:relative;z-index:15}
 .lmd-header #header{margin-bottom:16px}
-.deroule_edito,.deroule_fleuve,.ombre_section,.une_edito{-webkit-box-shadow:0 6px 6px -6px rgba(202,205,209,1);-moz-box-shadow:0 6px 6px -6px rgba(202,205,209,1);box-shadow:0 6px 6px -6px rgba(202,205,209,1);padding-top:0;margin-bottom:16px;margin-top:16px;overflow:hidden}
+.deroule_edito,.deroule_fleuve,.ombre_section,.une_edito{-webkit-box-shadow:0 6px 6px -6px #cacdd1;-moz-box-shadow:0 6px 6px -6px #cacdd1;box-shadow:0 6px 6px -6px #cacdd1;padding-top:0;margin-bottom:16px;margin-top:16px;overflow:hidden}
 a{color:#036;text-decoration:none;cursor:pointer}
 .bg_fonce a{opacity:.85}
 .obf{cursor:pointer;color:#036}

test/integration-test.js

@@ -158,9 +158,13 @@ vows.describe('integration tests')
         'a{text-shadow:rgb(255,0,1) 1px 1px}',
         'a{text-shadow:#ff0001 1px 1px}'
       ],
-      'after rgba': [
+      'after rgba #1': [
+        'a{text-shadow:rgba(255,0,0,.1) 0 1px}',
+        'a{text-shadow:rgba(255,0,0,.1) 0 1px}'
+      ],
+      'after rgba #2': [
         'a{text-shadow:rgba(255,0,0,1) 0 1px}',
-        'a{text-shadow:rgba(255,0,0,1) 0 1px}'
+        'a{text-shadow:red 0 1px}'
       ],
       'after hsl': [
         'a{text-shadow:hsl(240,100%,40%) -1px 1px}',
@@ -215,8 +219,8 @@ vows.describe('integration tests')
         'a{text-shadow:#ff0001 1px 1px}'
       ],
       'after rgba': [
-        'a{text-shadow:rgba(255,0,0,1) 0 1px}',
-        'a{text-shadow:rgba(255,0,0,1) 0 1px}'
+        'a{text-shadow:rgba(255,0,0,.1) 0 1px}',
+        'a{text-shadow:rgba(255,0,0,.1) 0 1px}'
       ],
       'after hsl': [
         'a{text-shadow:hsl(240,100%,40%) -1px 1px}',
@@ -695,8 +699,8 @@ vows.describe('integration tests')
         'a{-webkit-box-shadow:0 0;-moz-box-shadow:0 0}'
       ],
       'zero as .0 #1': [
-        'a{color:rgba(0,0,.0,1)}',
-        'a{color:rgba(0,0,0,1)}'
+        'a{color:rgba(0,0,.0,.1)}',
+        'a{color:rgba(0,0,0,.1)}'
       ],
       'zero as .0 #2': [
         'body{margin:.0}',

test/optimizer/level-0/optimizations-test.js

@@ -11,4 +11,12 @@ vows.describe('level 0')
       ]
     }, { level: 0 })
   )
+  .addBatch(
+    optimizerContext('empty properties', {
+      'are written': [
+        'a{color:#f00;font-weight:;background:red}',
+        'a{color:#f00;font-weight:;background:red}'
+      ]
+    }, { level: 0 })
+  )
   .export(module);

test/optimizer/level-1/optimize-test.js

@@ -540,6 +540,10 @@ vows.describe('level 1 optimizations')
       'with mixed bold weight and variant #2': [
         'a{font:bold normal 17px sans-serif}',
         'a{font:bold normal 17px sans-serif}'
+      ],
+      'with color in local font name': [
+        '@font-face{src:local("Sans Black Italic")}',
+        '@font-face{src:local("Sans Black Italic")}',
       ]
     }, { level: 1 })
   )
@@ -1225,6 +1229,10 @@ vows.describe('level 1 optimizations')
         '.block{-webkit-font-feature-settings:"scmp","swsh" 2}',
         '.block{-webkit-font-feature-settings:"scmp","swsh" 2}'
       ],
+      'grid': [
+        '.block{grid:"header" 20% "nav" auto/auto}',
+        '.block{grid:"header" 20% "nav" auto/auto}'
+      ],
       'grid-template': [
         '.block{grid-template:"header" 20% "nav" auto}',
         '.block{grid-template:"header" 20% "nav" auto}'