From 698cc56d1d07bb6b51bfd5d889231effb3ba3e8f Mon Sep 17 00:00:00 2001 From: Jakub Pawlowicz Date: Sun, 27 Jul 2014 01:01:43 +0100 Subject: [PATCH] Fixes #323 - variable references being stripped out. * Advanced optimizations haven't supported CSS variables. --- History.md | 1 + lib/properties/validator.js | 26 +++++++++++++++----------- test/unit-test.js | 4 ++++ 3 files changed, 20 insertions(+), 11 deletions(-) diff --git a/History.md b/History.md index 0ce49bbf..ca962938 100644 --- 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 714b066b..88a1ff59 100644 --- 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 84ae6cd7..1b76d27d 100644 --- 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); -- 2.34.1