ruby-clean-css 0.0.2

data/lib/javascript/clean-css/lib/properties/optimizer.js

@@ -0,0 +1,276 @@
+
+var processableInfo = require('./processable');
+var overrideCompactor = require('./override-compactor');
+var shorthandCompactor = require('./shorthand-compactor');
+
+module.exports = function Optimizer(compatibility, aggressiveMerging) {
+  var overridable = {
+    'animation-delay': ['animation'],
+    'animation-direction': ['animation'],
+    'animation-duration': ['animation'],
+    'animation-fill-mode': ['animation'],
+    'animation-iteration-count': ['animation'],
+    'animation-name': ['animation'],
+    'animation-play-state': ['animation'],
+    'animation-timing-function': ['animation'],
+    '-moz-animation-delay': ['-moz-animation'],
+    '-moz-animation-direction': ['-moz-animation'],
+    '-moz-animation-duration': ['-moz-animation'],
+    '-moz-animation-fill-mode': ['-moz-animation'],
+    '-moz-animation-iteration-count': ['-moz-animation'],
+    '-moz-animation-name': ['-moz-animation'],
+    '-moz-animation-play-state': ['-moz-animation'],
+    '-moz-animation-timing-function': ['-moz-animation'],
+    '-o-animation-delay': ['-o-animation'],
+    '-o-animation-direction': ['-o-animation'],
+    '-o-animation-duration': ['-o-animation'],
+    '-o-animation-fill-mode': ['-o-animation'],
+    '-o-animation-iteration-count': ['-o-animation'],
+    '-o-animation-name': ['-o-animation'],
+    '-o-animation-play-state': ['-o-animation'],
+    '-o-animation-timing-function': ['-o-animation'],
+    '-webkit-animation-delay': ['-webkit-animation'],
+    '-webkit-animation-direction': ['-webkit-animation'],
+    '-webkit-animation-duration': ['-webkit-animation'],
+    '-webkit-animation-fill-mode': ['-webkit-animation'],
+    '-webkit-animation-iteration-count': ['-webkit-animation'],
+    '-webkit-animation-name': ['-webkit-animation'],
+    '-webkit-animation-play-state': ['-webkit-animation'],
+    '-webkit-animation-timing-function': ['-webkit-animation'],
+    'background-attachment': ['background'],
+    'background-clip': ['background'],
+    'background-color': ['background'],
+    'background-image': ['background'],
+    'background-origin': ['background'],
+    'background-position': ['background'],
+    'background-repeat': ['background'],
+    'background-size': ['background'],
+    'border-color': ['border'],
+    'border-style': ['border'],
+    'border-width': ['border'],
+    'border-bottom': ['border'],
+    'border-bottom-color': ['border-bottom', 'border-color', 'border'],
+    'border-bottom-style': ['border-bottom', 'border-style', 'border'],
+    'border-bottom-width': ['border-bottom', 'border-width', 'border'],
+    'border-left': ['border'],
+    'border-left-color': ['border-left', 'border-color', 'border'],
+    'border-left-style': ['border-left', 'border-style', 'border'],
+    'border-left-width': ['border-left', 'border-width', 'border'],
+    'border-right': ['border'],
+    'border-right-color': ['border-right', 'border-color', 'border'],
+    'border-right-style': ['border-right', 'border-style', 'border'],
+    'border-right-width': ['border-right', 'border-width', 'border'],
+    'border-top': ['border'],
+    'border-top-color': ['border-top', 'border-color', 'border'],
+    'border-top-style': ['border-top', 'border-style', 'border'],
+    'border-top-width': ['border-top', 'border-width', 'border'],
+    'font-family': ['font'],
+    'font-size': ['font'],
+    'font-style': ['font'],
+    'font-variant': ['font'],
+    'font-weight': ['font'],
+    'list-style-image': ['list-style'],
+    'list-style-position': ['list-style'],
+    'list-style-type': ['list-style'],
+    'margin-bottom': ['margin'],
+    'margin-left': ['margin'],
+    'margin-right': ['margin'],
+    'margin-top': ['margin'],
+    'outline-color': ['outline'],
+    'outline-style': ['outline'],
+    'outline-width': ['outline'],
+    'padding-bottom': ['padding'],
+    'padding-left': ['padding'],
+    'padding-right': ['padding'],
+    'padding-top': ['padding'],
+    'transition-delay': ['transition'],
+    'transition-duration': ['transition'],
+    'transition-property': ['transition'],
+    'transition-timing-function': ['transition'],
+    '-moz-transition-delay': ['-moz-transition'],
+    '-moz-transition-duration': ['-moz-transition'],
+    '-moz-transition-property': ['-moz-transition'],
+    '-moz-transition-timing-function': ['-moz-transition'],
+    '-o-transition-delay': ['-o-transition'],
+    '-o-transition-duration': ['-o-transition'],
+    '-o-transition-property': ['-o-transition'],
+    '-o-transition-timing-function': ['-o-transition'],
+    '-webkit-transition-delay': ['-webkit-transition'],
+    '-webkit-transition-duration': ['-webkit-transition'],
+    '-webkit-transition-property': ['-webkit-transition'],
+    '-webkit-transition-timing-function': ['-webkit-transition']
+  };
+
+  var IE_BACKSLASH_HACK = '\\9';
+
+  var overrides = {};
+  for (var granular in overridable) {
+    for (var i = 0; i < overridable[granular].length; i++) {
+      var coarse = overridable[granular][i];
+      var list = overrides[coarse];
+
+      if (list)
+        list.push(granular);
+      else
+        overrides[coarse] = [granular];
+    }
+  }
+
+  var tokenize = function(body) {
+    var tokens = body.split(';');
+    var keyValues = [];
+
+    if (tokens.length === 0 || (tokens.length == 1 && tokens[0].indexOf(IE_BACKSLASH_HACK) == -1))
+      return;
+
+    for (var i = 0, l = tokens.length; i < l; i++) {
+      var token = tokens[i];
+      if (token === '')
+        continue;
+
+      var firstColon = token.indexOf(':');
+      keyValues.push([
+        token.substring(0, firstColon),
+        token.substring(firstColon + 1),
+        token.indexOf('!important') > -1,
+        token.indexOf(IE_BACKSLASH_HACK, firstColon + 1) === token.length - IE_BACKSLASH_HACK.length
+      ]);
+    }
+
+    return keyValues;
+  };
+
+  var optimize = function(tokens, allowAdjacent) {
+    var merged = [];
+    var properties = [];
+    var lastProperty = null;
+    var rescanTrigger = {};
+
+    var removeOverridenBy = function(property, isImportant) {
+      var overrided = overrides[property];
+      for (var i = 0, l = overrided.length; i < l; i++) {
+        for (var j = 0; j < properties.length; j++) {
+          if (properties[j] != overrided[i] || (merged[j][2] && !isImportant))
+            continue;
+
+          merged.splice(j, 1);
+          properties.splice(j, 1);
+          j -= 1;
+        }
+      }
+    };
+
+    var mergeablePosition = function(position) {
+      if (allowAdjacent === false || allowAdjacent === true)
+        return allowAdjacent;
+
+      return allowAdjacent.indexOf(position) > -1;
+    };
+
+    tokensLoop:
+    for (var i = 0, l = tokens.length; i < l; i++) {
+      var token = tokens[i];
+      var property = token[0];
+      var value = token[1];
+      var isImportant = token[2];
+      var isIEHack = token[3];
+      var _property = (property == '-ms-filter' || property == 'filter') ?
+        (lastProperty == 'background' || lastProperty == 'background-image' ? lastProperty : property) :
+        property;
+      var toOverridePosition = 0;
+
+      if (!compatibility && isIEHack)
+        continue;
+
+      // comment is necessary - we assume that if two properties are one after another
+      // then it is intentional way of redefining property which may not be widely supported
+      // e.g. a{display:inline-block;display:-moz-inline-box}
+      // however if `mergeablePosition` yields true then the rule does not apply
+      // (e.g merging two adjacent selectors: `a{display:block}a{display:block}`)
+      if (aggressiveMerging && _property != lastProperty || mergeablePosition(i)) {
+        while (true) {
+          toOverridePosition = properties.indexOf(_property, toOverridePosition);
+          if (toOverridePosition == -1)
+            break;
+
+          var lastToken = merged[toOverridePosition];
+          var wasImportant = lastToken[2];
+          var wasIEHack = lastToken[3];
+
+          if (wasImportant && !isImportant)
+            continue tokensLoop;
+
+          if (compatibility && !wasIEHack && isIEHack)
+            break;
+
+          var _info = processableInfo.processable[_property];
+          if (!isIEHack && !wasIEHack && _info && _info.canOverride && !_info.canOverride(tokens[toOverridePosition][1], value))
+            break;
+
+          merged.splice(toOverridePosition, 1);
+          properties.splice(toOverridePosition, 1);
+        }
+      }
+
+      merged.push(token);
+      properties.push(_property);
+
+      // certain properties (see values of `overridable`) should trigger removal of
+      // more granular properties (see keys of `overridable`)
+      if (rescanTrigger[_property])
+        removeOverridenBy(_property, isImportant);
+
+      // add rescan triggers - if certain property appears later in the list a rescan needs
+      // to be triggered, e.g 'border-top' triggers a rescan after 'border-top-width' and
+      // 'border-top-color' as they can be removed
+      for (var j = 0, list = overridable[_property] || [], m = list.length; j < m; j++)
+        rescanTrigger[list[j]] = true;
+
+      lastProperty = _property;
+    }
+
+    return merged;
+  };
+
+  var rebuild = function(tokens) {
+    var flat = [];
+
+
+    for (var i = 0, l = tokens.length; i < l; i++) {
+      flat.push(tokens[i][0] + ':' + tokens[i][1]);
+    }
+
+    return flat.join(';');
+  };
+
+  var compact = function (input) {
+    var processable = processableInfo.processable;
+    var Token = processableInfo.Token;
+
+    var tokens = Token.tokenize(input);
+
+    tokens = overrideCompactor.compactOverrides(tokens, processable);
+    tokens = shorthandCompactor.compactShorthands(tokens, false, processable, Token);
+    tokens = shorthandCompactor.compactShorthands(tokens, true, processable, Token);
+
+    return Token.detokenize(tokens);
+  };
+
+  return {
+    process: function(body, allowAdjacent, skipCompacting) {
+      var result = body;
+
+      var tokens = tokenize(body);
+      if (tokens) {
+        var optimized = optimize(tokens, allowAdjacent);
+        result = rebuild(optimized);
+      }
+
+      if (!skipCompacting && processableInfo.implementedFor.test(result)) {
+        result = compact(result);
+      }
+
+      return result;
+    }
+  };
+};

data/lib/javascript/clean-css/lib/properties/override-compactor.js

@@ -0,0 +1,116 @@
+
+// Compacts the given tokens according to their ability to override each other.
+
+module.exports = (function () {
+  // Default override function: only allow overrides when the two values are the same
+  var sameValue = function (val1, val2) {
+    return val1 === val2;
+  };
+
+  var compactOverrides = function (tokens, processable) {
+    var result, can, token, t, i, ii, oldResult, matchingComponent;
+
+    // Used when searching for a component that matches token
+    var nameMatchFilter1 = function (x) {
+      return x.prop === token.prop;
+    };
+    // Used when searching for a component that matches t
+    var nameMatchFilter2 = function (x) {
+      return x.prop === t.prop;
+    };
+
+    // Go from the end and always take what the current token can't override as the new result set
+    // NOTE: can't cache result.length here because it will change with every iteration
+    for (result = tokens, i = 0; (ii = result.length - 1 - i) >= 0; i++) {
+      token = result[ii];
+      can = (processable[token.prop] && processable[token.prop].canOverride) || sameValue;
+      oldResult = result;
+      result = [];
+
+      // Special flag which indicates that the current token should be removed
+      var removeSelf = false;
+      var oldResultLength = oldResult.length;
+
+      for (var iii = 0; iii < oldResultLength; iii++) {
+        t = oldResult[iii];
+
+        // A token can't override itself (checked by reference, not by value)
+        // NOTE: except when we explicitly tell it to remove itself
+        if (t === token && !removeSelf) {
+          result.push(t);
+          continue;
+        }
+
+        // Only an important token can even try to override tokens that come after it
+        if (iii > ii && !token.isImportant) {
+          result.push(t);
+          continue;
+        }
+
+        // A nonimportant token can never override an important one
+        if (t.isImportant && !token.isImportant) {
+          result.push(t);
+          continue;
+        }
+
+        if (token.isShorthand && !t.isShorthand && t.isComponentOf(token)) {
+          // token (a shorthand) is trying to override t (a component)
+
+          // Find the matching component in the shorthand
+          matchingComponent = token.components.filter(nameMatchFilter2)[0];
+          can = (processable[t.prop] && processable[t.prop].canOverride) || sameValue;
+          if (!can(t.value, matchingComponent.value)) {
+            // The shorthand can't override the component
+            result.push(t);
+          }
+        } else if (t.isShorthand && !token.isShorthand && token.isComponentOf(t)) {
+          // token (a component) is trying to override a component of t (a shorthand)
+
+          // Find the matching component in the shorthand
+          matchingComponent = t.components.filter(nameMatchFilter1)[0];
+          if (can(matchingComponent.value, token.value)) {
+            // The component can override the matching component in the shorthand
+
+            if (!token.isImportant || token.isImportant && matchingComponent.isImportant) {
+              // The overriding component is non-important which means we can simply include it into the shorthand
+              // NOTE: stuff that can't really be included, like inherit, is taken care of at the final step, not here
+              matchingComponent.value = token.value;
+              // We use the special flag to get rid of the component
+              removeSelf = true;
+            } else {
+              // The overriding component is important; sadly we can't get rid of it,
+              // but we can still mark the matching component in the shorthand as irrelevant
+              matchingComponent.isIrrelevant = true;
+            }
+            t.isDirty = true;
+          }
+          result.push(t);
+        } else if (token.isShorthand && t.isShorthand && token.prop === t.prop) {
+          // token is a shorthand and is trying to override another instance of the same shorthand
+
+          // Can only override other shorthand when each of its components can override each of the other's components
+          for (var iiii = 0; iiii < t.components.length; iiii++) {
+            can = (processable[t.components[iiii].prop] && processable[t.components[iiii].prop].canOverride) || sameValue;
+            if (!can(t.components[iiii].value, token.components[iiii].value)) {
+              result.push(t);
+              break;
+            }
+          }
+        } else if (t.prop !== token.prop || !can(t.value, token.value)) {
+          // in every other case, use the override mechanism
+          result.push(t);
+        }
+      }
+      if (removeSelf) {
+        i--;
+      }
+    }
+
+    return result;
+  };
+
+  return {
+    compactOverrides: compactOverrides
+  };
+
+})();

data/lib/javascript/clean-css/lib/properties/processable.js

@@ -0,0 +1,859 @@
+
+// Contains the interpretation of CSS properties, as used by the property optimizer
+
+module.exports = (function () {
+
+  var tokenModule = require('./token');
+  var validator = require('./validator');
+  var Splitter = require('../text/splitter');
+
+  // Functions that decide what value can override what.
+  // The main purpose is to disallow removing CSS fallbacks.
+  // A separate implementation is needed for every different kind of CSS property.
+  // -----
+  // The generic idea is that properties that have wider browser support are 'more understandable'
+  // than others and that 'less understandable' values can't override more understandable ones.
+  var canOverride = {
+    // Use when two tokens of the same property can always be merged
+    always: function () {
+      // NOTE: We could have (val1, val2) parameters here but jshint complains because we don't use them
+      return true;
+    },
+    // Use when two tokens of the same property can only be merged if they have the same value
+    sameValue: function(val1, val2) {
+      return val1 === val2;
+    },
+    sameFunctionOrValue: function(val1, val2) {
+      // Functions with the same name can override each other
+      if (validator.areSameFunction(val1, val2)) {
+        return true;
+      }
+
+      return val1 === val2;
+    },
+    // Use for properties containing CSS units (margin-top, padding-left, etc.)
+    unit: function(val1, val2) {
+      // The idea here is that 'more understandable' values override 'less understandable' values, but not vice versa
+      // Understandability: (unit without functions) > (same functions | standard functions) > anything else
+      // NOTE: there is no point in having different vendor-specific functions override each other or standard functions,
+      //       or having standard functions override vendor-specific functions, but standard functions can override each other
+      // NOTE: vendor-specific property values are not taken into consideration here at the moment
+
+      if (validator.isValidUnitWithoutFunction(val2))
+        return true;
+      if (validator.isValidUnitWithoutFunction(val1))
+        return false;
+
+      // Standard non-vendor-prefixed functions can override each other
+      if (validator.isValidFunctionWithoutVendorPrefix(val2) && validator.isValidFunctionWithoutVendorPrefix(val1)) {
+        return true;
+      }
+
+      // Functions with the same name can override each other; same values can override each other
+      return canOverride.sameFunctionOrValue(val1, val2);
+    },
+    // Use for color properties (color, background-color, border-color, etc.)
+    color: function(val1, val2) {
+      // The idea here is that 'more understandable' values override 'less understandable' values, but not vice versa
+      // Understandability: (hex | named) > (rgba | hsla) > (same function name) > anything else
+      // NOTE: at this point rgb and hsl are replaced by hex values by clean-css
+
+      // (hex | named)
+      if (validator.isValidNamedColor(val2) || validator.isValidHexColor(val2))
+        return true;
+      if (validator.isValidNamedColor(val1) || validator.isValidHexColor(val1))
+        return false;
+
+      // (rgba|hsla)
+      if (validator.isValidRgbaColor(val2) || validator.isValidHslaColor(val2))
+        return true;
+      if (validator.isValidRgbaColor(val1) || validator.isValidHslaColor(val1))
+        return false;
+
+      // Functions with the same name can override each other; same values can override each other
+      return canOverride.sameFunctionOrValue(val1, val2);
+    },
+    // Use for background-image
+    backgroundImage: function(val1, val2) {
+      // The idea here is that 'more understandable' values override 'less understandable' values, but not vice versa
+      // Understandability: (none | url | inherit) > (same function) > (same value)
+
+      // (none | url)
+      if (val2 === 'none' || val2 === 'inherit' || validator.isValidUrl(val2))
+        return true;
+      if (val1 === 'none' || val1 === 'inherit' || validator.isValidUrl(val1))
+        return false;
+
+      // Functions with the same name can override each other; same values can override each other
+      return canOverride.sameFunctionOrValue(val1, val2);
+    },
+    border: function(val1, val2) {
+      var brokenUp1 = breakUp.border(Token.tokenizeOne(val1));
+      var brokenUp2 = breakUp.border(Token.tokenizeOne(val2));
+
+      return canOverride.color(brokenUp1[2].value, brokenUp2[2].value);
+    }
+  };
+  canOverride = Object.freeze(canOverride);
+
+  // Functions for breaking up shorthands to components
+  var breakUp = {};
+  breakUp.takeCareOfFourValues = function (splitfunc) {
+    return function (token) {
+      var descriptor = processable[token.prop];
+      var result = [];
+      var splitval = splitfunc(token.value);
+
+      if (splitval.length === 0 || (splitval.length < descriptor.components.length && descriptor.components.length > 4)) {
+        // This token is malformed and we have no idea how to fix it. So let's just keep it intact
+        return [token];
+      }
+
+      // Fix those that we do know how to fix
+      if (splitval.length < descriptor.components.length && splitval.length < 2) {
+        // foo{margin:1px} -> foo{margin:1px 1px}
+        splitval[1] = splitval[0];
+      }
+      if (splitval.length < descriptor.components.length && splitval.length < 3) {
+        // foo{margin:1px 2px} -> foo{margin:1px 2px 1px}
+        splitval[2] = splitval[0];
+      }
+      if (splitval.length < descriptor.components.length && splitval.length < 4) {
+        // foo{margin:1px 2px 3px} -> foo{margin:1px 2px 3px 2px}
+        splitval[3] = splitval[1];
+      }
+
+      // Now break it up to its components
+      for (var i = 0; i < descriptor.components.length; i++) {
+        var t = new Token(descriptor.components[i], splitval[i], token.isImportant);
+        result.push(t);
+      }
+
+      return result;
+    };
+  };
+  // Use this when you simply want to break up four values along spaces
+  breakUp.fourBySpaces = breakUp.takeCareOfFourValues(function (val) {
+    return new Splitter(' ').split(val).filter(function (v) { return v; });
+  });
+  // Breaks up a background property value
+  breakUp.commaSeparatedMulitpleValues = function (splitfunc) {
+    return function (token) {
+      if (token.value.indexOf(',') === -1)
+        return splitfunc(token);
+
+      var values = new Splitter(',').split(token.value);
+      var components = [];
+
+      for (var i = 0, l = values.length; i < l; i++) {
+        token.value = values[i];
+        components.push(splitfunc(token));
+      }
+
+      for (var j = 0, m = components[0].length; j < m; j++) {
+        for (var k = 0, n = components.length, newValues = []; k < n; k++) {
+          newValues.push(components[k][j].value);
+        }
+
+        components[0][j].value = newValues.join(',');
+      }
+
+      return components[0];
+    };
+  };
+  breakUp.background = function (token) {
+    // Default values
+    var result = Token.makeDefaults(['background-image', 'background-position', 'background-size', 'background-repeat', 'background-attachment', 'background-color'], token.isImportant);
+    var image = result[0];
+    var position = result[1];
+    var size = result[2];
+    var repeat = result[3];
+    var attachment = result[4];
+    var color = result[5];
+
+    // Take care of inherit
+    if (token.value === 'inherit') {
+      // NOTE: 'inherit' is not a valid value for background-attachment so there we'll leave the default value
+      color.value = image.value =  repeat.value = position.value = size.value = attachment.value = 'inherit';
+      return result;
+    }
+
+    // Break the background up into parts
+    var parts = new Splitter(' ').split(token.value);
+    if (parts.length === 0)
+      return result;
+
+    // Iterate over all parts and try to fit them into positions
+    for (var i = parts.length - 1; i >= 0; i--) {
+      var currentPart = parts[i];
+
+      if (validator.isValidBackgroundAttachment(currentPart)) {
+        attachment.value = currentPart;
+      } else if (validator.isValidBackgroundRepeat(currentPart)) {
+        repeat.value = currentPart;
+      } else if (validator.isValidBackgroundPositionPart(currentPart) || validator.isValidBackgroundSizePart(currentPart)) {
+        if (i > 0) {
+          var previousPart = parts[i - 1];
+
+          if (previousPart.indexOf('/') > 0) {
+            var twoParts = new Splitter('/').split(previousPart);
+            size.value = twoParts.pop() + ' ' + currentPart;
+            parts[i - 1] = twoParts.pop();
+          } else if (i > 1 && parts[i - 2] == '/') {
+            size.value = previousPart + ' ' + currentPart;
+            i -= 2;
+          } else if (parts[i - 1] == '/') {
+            size.value = currentPart;
+            position.value = previousPart;
+            i--;
+          } else {
+            position.value = previousPart + ' ' + currentPart;
+            i--;
+          }
+        } else {
+          position.value = currentPart;
+        }
+      } else if (validator.isValidBackgroundPositionAndSize(currentPart)) {
+        var sizeValue = new Splitter('/').split(currentPart);
+        size.value = sizeValue.pop();
+        position.value = sizeValue.pop();
+      } else if ((color.value == processable[color.prop].defaultValue || color.value == 'none') && validator.isValidColor(currentPart)) {
+        color.value = currentPart;
+      } else if (validator.isValidUrl(currentPart) || validator.isValidFunction(currentPart)) {
+        image.value = currentPart;
+      }
+    }
+
+    return result;
+  };
+  // Breaks up a list-style property value
+  breakUp.listStyle = function (token) {
+    // Default values
+    var result = Token.makeDefaults(['list-style-type', 'list-style-position', 'list-style-image'], token.isImportant);
+    var type = result[0], position = result[1], image = result[2];
+
+    if (token.value === 'inherit') {
+      type.value = position.value = image.value = 'inherit';
+      return result;
+    }
+
+    var parts = new Splitter(' ').split(token.value);
+    var ci = 0;
+
+    // Type
+    if (ci < parts.length && validator.isValidListStyleType(parts[ci])) {
+      type.value = parts[ci];
+      ci++;
+    }
+    // Position
+    if (ci < parts.length && validator.isValidListStylePosition(parts[ci])) {
+      position.value = parts[ci];
+      ci++;
+    }
+    // Image
+    if (ci < parts.length) {
+      image.value = parts.splice(ci, parts.length - ci + 1).join(' ');
+    }
+
+    return result;
+  };
+
+  breakUp._widthStyleColor = function(token, prefix, order) {
+    // Default values
+    var components = order.map(function(prop) {
+      return prefix + '-' + prop;
+    });
+    var result = Token.makeDefaults(components, token.isImportant);
+    var color = result[order.indexOf('color')];
+    var style = result[order.indexOf('style')];
+    var width = result[order.indexOf('width')];
+
+    // Take care of inherit
+    if (token.value === 'inherit' || token.value === 'inherit inherit inherit') {
+      color.value = style.value = width.value = 'inherit';
+      return result;
+    }
+
+    // NOTE: usually users don't follow the required order of parts in this shorthand,
+    // so we'll try to parse it caring as little about order as possible
+
+    var parts = new Splitter(' ').split(token.value), w;
+
+    if (parts.length === 0) {
+      return result;
+    }
+
+    if (parts.length >= 1) {
+      // Try to find -width, excluding inherit because that can be anything
+      w = parts.filter(function(p) { return p !== 'inherit' && validator.isValidOutlineWidth(p); });
+      if (w.length) {
+        width.value = w[0];
+        parts.splice(parts.indexOf(w[0]), 1);
+      }
+    }
+    if (parts.length >= 1) {
+      // Try to find -style, excluding inherit because that can be anything
+      w = parts.filter(function(p) { return p !== 'inherit' && validator.isValidOutlineStyle(p); });
+      if (w.length) {
+        style.value = w[0];
+        parts.splice(parts.indexOf(w[0]), 1);
+      }
+    }
+    if (parts.length >= 1) {
+      // Find -color but this time can catch inherit
+      w = parts.filter(function(p) { return validator.isValidOutlineColor(p); });
+      if (w.length) {
+        color.value = w[0];
+        parts.splice(parts.indexOf(w[0]), 1);
+      }
+    }
+
+    return result;
+  };
+
+  breakUp.outline = function(token) {
+    return breakUp._widthStyleColor(token, 'outline', ['color', 'style', 'width']);
+  };
+
+  breakUp.border = function(token) {
+    return breakUp._widthStyleColor(token, 'border', ['width', 'style', 'color']);
+  };
+
+  breakUp.borderRadius = function(token) {
+    var parts = token.value.split('/');
+    if (parts.length == 1)
+      return breakUp.fourBySpaces(token);
+
+    var horizontalPart = token.clone();
+    var verticalPart = token.clone();
+
+    horizontalPart.value = parts[0];
+    verticalPart.value = parts[1];
+
+    var horizontalBreakUp = breakUp.fourBySpaces(horizontalPart);
+    var verticalBreakUp = breakUp.fourBySpaces(verticalPart);
+
+    for (var i = 0; i < 4; i++) {
+      horizontalBreakUp[i].value = [horizontalBreakUp[i].value, verticalBreakUp[i].value];
+    }
+
+    return horizontalBreakUp;
+  };
+
+  // Contains functions that can put together shorthands from their components
+  // NOTE: correct order of tokens is assumed inside these functions!
+  var putTogether = {
+    // Use this for properties which have four unit values (margin, padding, etc.)
+    // NOTE: optimizes to shorter forms too (that only specify 1, 2, or 3 values)
+    fourUnits: function (prop, tokens, isImportant) {
+      // See about irrelevant tokens
+      // NOTE: This will enable some crazy optimalizations for us.
+      if (tokens[0].isIrrelevant)
+        tokens[0].value = tokens[2].value;
+      if (tokens[2].isIrrelevant)
+        tokens[2].value = tokens[0].value;
+      if (tokens[1].isIrrelevant)
+        tokens[1].value = tokens[3].value;
+      if (tokens[3].isIrrelevant)
+        tokens[3].value = tokens[1].value;
+
+      if (tokens[0].isIrrelevant && tokens[2].isIrrelevant) {
+        if (tokens[1].value === tokens[3].value)
+          tokens[0].value = tokens[2].value = tokens[1].value;
+        else
+          tokens[0].value = tokens[2].value = '0';
+      }
+      if (tokens[1].isIrrelevant && tokens[3].isIrrelevant) {
+        if (tokens[0].value === tokens[2].value)
+          tokens[1].value = tokens[3].value = tokens[0].value;
+        else
+          tokens[1].value = tokens[3].value = '0';
+      }
+
+      var result = new Token(prop, tokens[0].value, isImportant);
+      result.granularValues = [];
+      result.granularValues[tokens[0].prop] = tokens[0].value;
+      result.granularValues[tokens[1].prop] = tokens[1].value;
+      result.granularValues[tokens[2].prop] = tokens[2].value;
+      result.granularValues[tokens[3].prop] = tokens[3].value;
+
+      // If all of them are irrelevant
+      if (tokens[0].isIrrelevant && tokens[1].isIrrelevant && tokens[2].isIrrelevant && tokens[3].isIrrelevant) {
+        result.value = processable[prop].shortestValue || processable[prop].defaultValue;
+        return result;
+      }
+
+      // 1-value short form: all four components are equal
+      if (tokens[0].value === tokens[1].value && tokens[0].value === tokens[2].value && tokens[0].value === tokens[3].value) {
+        return result;
+      }
+      result.value += ' ' + tokens[1].value;
+      // 2-value short form: first and third; second and fourth values are equal
+      if (tokens[0].value === tokens[2].value && tokens[1].value === tokens[3].value) {
+        return result;
+      }
+      result.value += ' ' + tokens[2].value;
+      // 3-value short form: second and fourth values are equal
+      if (tokens[1].value === tokens[3].value) {
+        return result;
+      }
+      // 4-value form (none of the above optimalizations could be accomplished)
+      result.value += ' ' + tokens[3].value;
+      return result;
+    },
+    // Puts together the components by spaces and omits default values (this is the case for most shorthands)
+    bySpacesOmitDefaults: function (prop, tokens, isImportant, meta) {
+      var result = new Token(prop, '', isImportant);
+
+      // Get irrelevant tokens
+      var irrelevantTokens = tokens.filter(function (t) { return t.isIrrelevant; });
+
+      // If every token is irrelevant, return shortest possible value, fallback to default value
+      if (irrelevantTokens.length === tokens.length) {
+        result.isIrrelevant = true;
+        result.value = processable[prop].shortestValue || processable[prop].defaultValue;
+        return result;
+      }
+
+      // This will be the value of the shorthand if all the components are default
+      var valueIfAllDefault = processable[prop].defaultValue;
+
+      // Go through all tokens and concatenate their values as necessary
+      for (var i = 0; i < tokens.length; i++) {
+        var token = tokens[i];
+
+        // Set granular value so that other parts of the code can use this for optimalization opportunities
+        result.granularValues = result.granularValues || { };
+        result.granularValues[token.prop] = token.value;
+
+        // Use irrelevant tokens for optimalization opportunity
+        if (token.isIrrelevant) {
+          // Get shortest possible value, fallback to default value
+          var tokenShortest = processable[token.prop].shortestValue || processable[token.prop].defaultValue;
+          // If the shortest possible value of this token is shorter than the default value of the shorthand, use it instead
+          if (tokenShortest.length < valueIfAllDefault.length) {
+            valueIfAllDefault = tokenShortest;
+          }
+        }
+
+        // Omit default / irrelevant value
+        if (token.isIrrelevant || (processable[token.prop] && processable[token.prop].defaultValue === token.value)) {
+          continue;
+        }
+
+        if (meta && meta.partsCount && meta.position < meta.partsCount - 1 && processable[token.prop].multiValueLastOnly)
+          continue;
+
+        var requiresPreceeding = processable[token.prop].shorthandFollows;
+        if (requiresPreceeding && (tokens[i - 1].value == processable[requiresPreceeding].defaultValue)) {
+          result.value += ' ' + tokens[i - 1].value;
+        }
+
+        result.value += (processable[token.prop].prefixShorthandValueWith || ' ') + token.value;
+      }
+
+      result.value = result.value.trim();
+      if (!result.value) {
+        result.value = valueIfAllDefault;
+      }
+
+      return result;
+    },
+    commaSeparatedMulitpleValues: function (assembleFunction) {
+      return function(prop, tokens, isImportant) {
+        var tokenSplitLengths = tokens.map(function (token) {
+          return new Splitter(',').split(token.value).length;
+        });
+        var partsCount = Math.max.apply(Math, tokenSplitLengths);
+
+        if (partsCount == 1)
+          return assembleFunction(prop, tokens, isImportant);
+
+        var merged = [];
+
+        for (var i = 0; i < partsCount; i++) {
+          merged.push([]);
+
+          for (var j = 0; j < tokens.length; j++) {
+            var split = new Splitter(',').split(tokens[j].value);
+            merged[i].push(split[i] || split[0]);
+          }
+        }
+
+        var mergedValues = [];
+        var firstProcessed;
+        for (i = 0; i < partsCount; i++) {
+          for (var k = 0, n = merged[i].length; k < n; k++) {
+            tokens[k].value = merged[i][k];
+          }
+
+          var meta = {
+            partsCount: partsCount,
+            position: i
+          };
+          var processed = assembleFunction(prop, tokens, isImportant, meta);
+          mergedValues.push(processed.value);
+
+          if (!firstProcessed)
+            firstProcessed = processed;
+        }
+
+        firstProcessed.value = mergedValues.join(',');
+        return firstProcessed;
+      };
+    },
+    // Handles the cases when some or all the fine-grained properties are set to inherit
+    takeCareOfInherit: function (innerFunc) {
+      return function (prop, tokens, isImportant, meta) {
+        // Filter out the inheriting and non-inheriting tokens in one iteration
+        var inheritingTokens = [];
+        var nonInheritingTokens = [];
+        var result2Shorthandable = [];
+        var i;
+        for (i = 0; i < tokens.length; i++) {
+          if (tokens[i].value === 'inherit') {
+            inheritingTokens.push(tokens[i]);
+
+            // Indicate that this property is irrelevant and its value can safely be set to anything else
+            var r2s = new Token(tokens[i].prop, tokens[i].isImportant);
+            r2s.isIrrelevant = true;
+            result2Shorthandable.push(r2s);
+          } else {
+            nonInheritingTokens.push(tokens[i]);
+            result2Shorthandable.push(tokens[i]);
+          }
+        }
+
+        if (nonInheritingTokens.length === 0) {
+          // When all the tokens are 'inherit'
+          return new Token(prop, 'inherit', isImportant);
+        } else if (inheritingTokens.length > 0) {
+          // When some (but not all) of the tokens are 'inherit'
+
+          // Result 1. Shorthand just the inherit values and have it overridden with the non-inheriting ones
+          var result1 = [new Token(prop, 'inherit', isImportant)].concat(nonInheritingTokens);
+
+          // Result 2. Shorthand every non-inherit value and then have it overridden with the inheriting ones
+          var result2 = [innerFunc(prop, result2Shorthandable, isImportant, meta)].concat(inheritingTokens);
+
+          // Return whichever is shorter
+          var dl1 = Token.getDetokenizedLength(result1);
+          var dl2 = Token.getDetokenizedLength(result2);
+
+          return dl1 < dl2 ? result1 : result2;
+        } else {
+          // When none of tokens are 'inherit'
+          return innerFunc(prop, tokens, isImportant, meta);
+        }
+      };
+    },
+    borderRadius: function (prop, tokens, isImportant) {
+      var verticalTokens = [];
+
+      for (var i = 0, l = tokens.length; i < l; i++) {
+        var token = tokens[i];
+        if (!Array.isArray(token.value))
+          continue;
+
+        if (token.value.length > 1) {
+          verticalTokens.push({
+            prop: token.prop,
+            value: token.value[1],
+            isImportant: token.isImportant
+          });
+        }
+
+        token.value = token.value[0];
+      }
+
+      var result = putTogether.takeCareOfInherit(putTogether.fourUnits)(prop, tokens, isImportant);
+      if (verticalTokens.length > 0) {
+        var verticalResult = putTogether.takeCareOfInherit(putTogether.fourUnits)(prop, verticalTokens, isImportant);
+        if (result.value != verticalResult.value)
+          result.value += '/' + verticalResult.value;
+      }
+
+      return result;
+    }
+  };
+
+  // Properties to process
+  // Extend this object in order to add support for more properties in the optimizer.
+  //
+  // Each key in this object represents a CSS property and should be an object.
+  // Such an object contains properties that describe how the represented CSS property should be handled.
+  // Possible options:
+  //
+  // * components: array (Only specify for shorthand properties.)
+  //   Contains the names of the granular properties this shorthand compacts.
+  //
+  // * canOverride: function (Default is canOverride.sameValue - meaning that they'll only be merged if they have the same value.)
+  //   Returns whether two tokens of this property can be merged with each other.
+  //   This property has no meaning for shorthands.
+  //
+  // * defaultValue: string
+  //   Specifies the default value of the property according to the CSS standard.
+  //   For shorthand, this is used when every component is set to its default value, therefore it should be the shortest possible default value of all the components.
+  //
+  // * shortestValue: string
+  //   Specifies the shortest possible value the property can possibly have.
+  //   (Falls back to defaultValue if unspecified.)
+  //
+  // * breakUp: function (Only specify for shorthand properties.)
+  //   Breaks the shorthand up to its components.
+  //
+  // * putTogether: function (Only specify for shorthand properties.)
+  //   Puts the shorthand together from its components.
+  //
+  var processable = {
+    'color': {
+      canOverride: canOverride.color,
+      defaultValue: 'transparent',
+      shortestValue: 'red'
+    },
+    // background ------------------------------------------------------------------------------
+    'background': {
+      components: [
+        'background-image',
+        'background-position',
+        'background-size',
+        'background-repeat',
+        'background-attachment',
+        'background-color'
+      ],
+      breakUp: breakUp.commaSeparatedMulitpleValues(breakUp.background),
+      putTogether: putTogether.commaSeparatedMulitpleValues(
+        putTogether.takeCareOfInherit(putTogether.bySpacesOmitDefaults)
+      ),
+      defaultValue: '0 0',
+      shortestValue: '0'
+    },
+    'background-color': {
+      canOverride: canOverride.color,
+      defaultValue: 'transparent',
+      multiValueLastOnly: true,
+      shortestValue: 'red'
+    },
+    'background-image': {
+      canOverride: canOverride.backgroundImage,
+      defaultValue: 'none'
+    },
+    'background-repeat': {
+      canOverride: canOverride.always,
+      defaultValue: 'repeat'
+    },
+    'background-position': {
+      canOverride: canOverride.always,
+      defaultValue: '0 0',
+      shortestValue: '0'
+    },
+    'background-size': {
+      canOverride: canOverride.always,
+      defaultValue: 'auto',
+      shortestValue: '0 0',
+      prefixShorthandValueWith: '/',
+      shorthandFollows: 'background-position'
+    },
+    'background-attachment': {
+      canOverride: canOverride.always,
+      defaultValue: 'scroll'
+    },
+    'border': {
+      breakUp: breakUp.border,
+      canOverride: canOverride.border,
+      components: [
+        'border-width',
+        'border-style',
+        'border-color'
+      ],
+      defaultValue: 'none',
+      putTogether: putTogether.takeCareOfInherit(putTogether.bySpacesOmitDefaults)
+    },
+    'border-color': {
+      canOverride: canOverride.color,
+      defaultValue: 'none'
+    },
+    'border-style': {
+      canOverride: canOverride.always,
+      defaultValue: 'none'
+    },
+    'border-width': {
+      canOverride: canOverride.unit,
+      defaultValue: 'medium',
+      shortestValue: '0'
+    },
+    // list-style ------------------------------------------------------------------------------
+    'list-style': {
+      components: [
+        'list-style-type',
+        'list-style-position',
+        'list-style-image'
+      ],
+      canOverride: canOverride.always,
+      breakUp: breakUp.listStyle,
+      putTogether: putTogether.takeCareOfInherit(putTogether.bySpacesOmitDefaults),
+      defaultValue: 'outside', // can't use 'disc' because that'd override default 'decimal' for <ol>
+      shortestValue: 'none'
+    },
+    'list-style-type' : {
+      canOverride: canOverride.always,
+      shortestValue: 'none',
+      defaultValue: '__hack'
+      // NOTE: we can't tell the real default value here, it's 'disc' for <ul> and 'decimal' for <ol>
+      //       -- this is a hack, but it doesn't matter because this value will be either overridden or it will disappear at the final step anyway
+    },
+    'list-style-position' : {
+      canOverride: canOverride.always,
+      defaultValue: 'outside',
+      shortestValue: 'inside'
+    },
+    'list-style-image' : {
+      canOverride: canOverride.always,
+      defaultValue: 'none'
+    },
+    // outline ------------------------------------------------------------------------------
+    'outline': {
+      components: [
+        'outline-color',
+        'outline-style',
+        'outline-width'
+      ],
+      breakUp: breakUp.outline,
+      putTogether: putTogether.takeCareOfInherit(putTogether.bySpacesOmitDefaults),
+      defaultValue: '0'
+    },
+    'outline-color': {
+      canOverride: canOverride.color,
+      defaultValue: 'invert',
+      shortestValue: 'red'
+    },
+    'outline-style': {
+      canOverride: canOverride.always,
+      defaultValue: 'none'
+    },
+    'outline-width': {
+      canOverride: canOverride.unit,
+      defaultValue: 'medium',
+      shortestValue: '0'
+    },
+    // transform
+    '-moz-transform': {
+      canOverride: canOverride.sameFunctionOrValue
+    },
+    '-ms-transform': {
+      canOverride: canOverride.sameFunctionOrValue
+    },
+    '-webkit-transform': {
+      canOverride: canOverride.sameFunctionOrValue
+    },
+    'transform': {
+      canOverride: canOverride.sameFunctionOrValue
+    }
+  };
+
+  var addFourValueShorthand = function (prop, components, options) {
+    options = options || {};
+    processable[prop] = {
+      components: components,
+      breakUp: options.breakUp || breakUp.fourBySpaces,
+      putTogether: options.putTogether || putTogether.takeCareOfInherit(putTogether.fourUnits),
+      defaultValue: options.defaultValue || '0',
+      shortestValue: options.shortestValue
+    };
+    for (var i = 0; i < components.length; i++) {
+      processable[components[i]] = {
+        breakUp: options.breakUp || breakUp.fourBySpaces,
+        canOverride: options.canOverride || canOverride.unit,
+        defaultValue: options.defaultValue || '0',
+        shortestValue: options.shortestValue
+      };
+    }
+  };
+
+  ['', '-moz-', '-o-', '-webkit-'].forEach(function (prefix) {
+    addFourValueShorthand(prefix + 'border-radius', [
+      prefix + 'border-top-left-radius',
+      prefix + 'border-top-right-radius',
+      prefix + 'border-bottom-right-radius',
+      prefix + 'border-bottom-left-radius'
+    ], {
+      breakUp: breakUp.borderRadius,
+      putTogether: putTogether.borderRadius
+    });
+  });
+
+  addFourValueShorthand('border-color', [
+    'border-top-color',
+    'border-right-color',
+    'border-bottom-color',
+    'border-left-color'
+  ], {
+    breakUp: breakUp.fourBySpaces,
+    canOverride: canOverride.color,
+    defaultValue: 'currentColor',
+    shortestValue: 'red'
+  });
+
+  addFourValueShorthand('border-style', [
+    'border-top-style',
+    'border-right-style',
+    'border-bottom-style',
+    'border-left-style'
+  ], {
+    breakUp: breakUp.fourBySpaces,
+    canOverride: canOverride.always,
+    defaultValue: 'none'
+  });
+
+  addFourValueShorthand('border-width', [
+    'border-top-width',
+    'border-right-width',
+    'border-bottom-width',
+    'border-left-width'
+  ], {
+    defaultValue: 'medium',
+    shortestValue: '0'
+  });
+
+  addFourValueShorthand('padding', [
+    'padding-top',
+    'padding-right',
+    'padding-bottom',
+    'padding-left'
+  ]);
+
+  addFourValueShorthand('margin', [
+    'margin-top',
+    'margin-right',
+    'margin-bottom',
+    'margin-left'
+  ]);
+
+  // Set some stuff iteratively
+  for (var proc in processable) {
+    if (!processable.hasOwnProperty(proc))
+      continue;
+
+    var currDesc = processable[proc];
+
+    if (!(currDesc.components instanceof Array) || currDesc.components.length === 0)
+      continue;
+
+    currDesc.isShorthand = true;
+
+    for (var cI = 0; cI < currDesc.components.length; cI++) {
+      if (!processable[currDesc.components[cI]]) {
+        throw new Error('"' + currDesc.components[cI] + '" is defined as a component of "' + proc + '" but isn\'t defined in processable.');
+      }
+      processable[currDesc.components[cI]].componentOf = proc;
+    }
+  }
+
+  var Token = tokenModule.createTokenPrototype(processable);
+
+  return {
+    implementedFor: /background|border|color|list|margin|outline|padding|transform/,
+    processable: processable,
+    Token: Token
+  };
+})();