Fixes #323 - variable references being stripped out.

* Advanced optimizations haven't supported CSS variables.

diff --git a/History.md b/History.md
index 0ce49bb..ca96293 100644 (file)
--- a/History.md
+++ b/History.md
@@ -1,6 +1,7 @@
 [2.2.10 / 2014-xx-xx](https://github.com/GoalSmashers/clean-css/compare/v2.2.9...v2.2.10)
 ==================
 
+* Fixed issue [#323](https://github.com/GoalSmashers/clean-css/issues/323) - stripping variable references.
 * Fixed issue [#325](https://github.com/GoalSmashers/clean-css/issues/325) - removing invalid @charset declarations.
 
 [2.2.9 / 2014-07-23](https://github.com/GoalSmashers/clean-css/compare/v2.2.8...v2.2.9)

diff --git a/lib/properties/validator.js b/lib/properties/validator.js
index 714b066..88a1ff5 100644 (file)
--- a/lib/properties/validator.js
+++ b/lib/properties/validator.js
@@ -7,8 +7,9 @@ module.exports = (function () {
   var cssUnitRegexStr = '(\\-?\\.?\\d+\\.?\\d*(px|%|em|rem|in|cm|mm|ex|pt|pc|vw|vh|vmin|vmax|)|auto|inherit)';
   var cssFunctionNoVendorRegexStr = '[A-Z]+(\\-|[A-Z]|[0-9])+\\(([A-Z]|[0-9]|\\ |\\,|\\#|\\+|\\-|\\%|\\.|\\(|\\))*\\)';
   var cssFunctionVendorRegexStr = '\\-(\\-|[A-Z]|[0-9])+\\(([A-Z]|[0-9]|\\ |\\,|\\#|\\+|\\-|\\%|\\.|\\(|\\))*\\)';
-  var cssFunctionAnyRegexStr = '(' + cssFunctionNoVendorRegexStr + '|' + cssFunctionVendorRegexStr + ')';
-  var cssUnitAnyRegexStr = '(none|' + widthKeywords.join('|') + '|' + cssUnitRegexStr + '|' + cssFunctionNoVendorRegexStr + '|' + cssFunctionVendorRegexStr + ')';
+  var cssVariableRegexStr = 'var\\(\\-\\-[^\\)]+\\)';
+  var cssFunctionAnyRegexStr = '(' + cssVariableRegexStr + '|' + cssFunctionNoVendorRegexStr + '|' + cssFunctionVendorRegexStr + ')';
+  var cssUnitAnyRegexStr = '(none|' + widthKeywords.join('|') + '|' + cssUnitRegexStr + '|' + cssVariableRegexStr + '|' + cssFunctionNoVendorRegexStr + '|' + cssFunctionVendorRegexStr + ')';
 
   var backgroundRepeatKeywords = ['repeat', 'no-repeat', 'repeat-x', 'repeat-y', 'inherit'];
   var backgroundAttachmentKeywords = ['inherit', 'scroll', 'fixed', 'local'];
@@ -33,8 +34,11 @@ module.exports = (function () {
       // We don't really check if it's a valid color value, but allow any letters in it
       return s !== 'auto' && (s === 'transparent' || s === 'inherit' || /^[a-zA-Z]+$/.test(s));
     },
+    isValidVariable: function(s) {
+      return new RegExp('^' + cssVariableRegexStr + '$', 'gi').test(s);
+    },
     isValidColor: function (s) {
-      return validator.isValidNamedColor(s) || validator.isValidHexColor(s) || validator.isValidRgbaColor(s) || validator.isValidHslaColor(s);
+      return validator.isValidNamedColor(s) || validator.isValidHexColor(s) || validator.isValidRgbaColor(s) || validator.isValidHslaColor(s) || validator.isValidVariable(s);
     },
     isValidUrl: function (s) {
       // NOTE: at this point all URLs are replaced with placeholders by clean-css, so we check for those placeholders
@@ -56,16 +60,16 @@ module.exports = (function () {
       return new RegExp('^' + cssFunctionAnyRegexStr + '$', 'gi').test(s);
     },
     isValidBackgroundRepeat: function (s) {
-      return backgroundRepeatKeywords.indexOf(s) >= 0;
+      return backgroundRepeatKeywords.indexOf(s) >= 0 || validator.isValidVariable(s);
     },
     isValidBackgroundAttachment: function (s) {
-      return backgroundAttachmentKeywords.indexOf(s) >= 0;
+      return backgroundAttachmentKeywords.indexOf(s) >= 0 || validator.isValidVariable(s);
     },
     isValidBackgroundPositionPart: function (s) {
       if (backgroundPositionKeywords.indexOf(s) >= 0)
         return true;
 
-      return new RegExp('^' + cssUnitRegexStr + '$', 'gi').test(s);
+      return new RegExp('^' + cssUnitRegexStr + '$', 'gi').test(s) || validator.isValidVariable(s);
     },
     isValidBackgroundPosition: function (s) {
       if (s === 'inherit')
@@ -74,23 +78,23 @@ module.exports = (function () {
       return s.split(' ').filter(function (p) {
         return p !== '';
       }).every(function(p) {
-        return validator.isValidBackgroundPositionPart(p);
+        return validator.isValidBackgroundPositionPart(p) || validator.isValidVariable(s);
       });
     },
     isValidListStyleType: function (s) {
-      return listStyleTypeKeywords.indexOf(s) >= 0;
+      return listStyleTypeKeywords.indexOf(s) >= 0 || validator.isValidVariable(s);
     },
     isValidListStylePosition: function (s) {
-      return listStylePositionKeywords.indexOf(s) >= 0;
+      return listStylePositionKeywords.indexOf(s) >= 0 || validator.isValidVariable(s);
     },
     isValidOutlineColor: function (s) {
       return s === 'invert' || validator.isValidColor(s) || validator.isValidVendorPrefixedValue(s);
     },
     isValidOutlineStyle: function (s) {
-      return outlineStyleKeywords.indexOf(s) >= 0;
+      return outlineStyleKeywords.indexOf(s) >= 0 || validator.isValidVariable(s);
     },
     isValidOutlineWidth: function (s) {
-      return validator.isValidUnit(s) || widthKeywords.indexOf(s) >= 0;
+      return validator.isValidUnit(s) || widthKeywords.indexOf(s) >= 0 || validator.isValidVariable(s);
     },
     isValidVendorPrefixedValue: function (s) {
       return /^-([A-Za-z0-9]|-)*$/gi.test(s);

diff --git a/test/unit-test.js b/test/unit-test.js
index 84ae6cd..1b76d27 100644 (file)
--- a/test/unit-test.js
+++ b/test/unit-test.js
@@ -2033,5 +2033,9 @@ title']{display:block}",
   }),
   'viewport units': cssContext({
     'shorthand margin with viewport width not changed': 'div{margin:5vw}'
+  }),
+  'variables': cssContext({
+    'stripping': 'a{--border:#000}.one{border:1px solid var(--border)}',
+    'all values': 'a{--width:1px;--style:solid;--color:#000}.one{border:var(--width) var(--style) var(--color)}'
   })
 }).export(module);