var tokens = Token.tokenize(input);
- tokens = overrideCompactor.compactOverrides(tokens, processable);
+ tokens = overrideCompactor.compactOverrides(tokens, processable, Token);
tokens = shorthandCompactor.compactShorthands(tokens, false, processable, Token);
tokens = shorthandCompactor.compactShorthands(tokens, true, processable, Token);
return val1 === val2;
};
- var compactOverrides = function (tokens, processable) {
+ var compactOverrides = function (tokens, processable, Token) {
var result, can, token, t, i, ii, oldResult, matchingComponent;
// Used when searching for a component that matches token
return x.prop === t.prop;
};
+ function willResultInShorterValue (shorthand, token) {
+ var shorthandCopy = shorthand.clone();
+ shorthandCopy.isDirty = true;
+ shorthandCopy.isShorthand = true;
+ shorthandCopy.components = [];
+
+ shorthand.components.forEach(function (component) {
+ var componentCopy = component.clone();
+ if (component.prop == token.prop)
+ componentCopy.value = token.value;
+
+ shorthandCopy.components.push(componentCopy);
+ });
+
+ return Token.getDetokenizedLength([shorthand, token]) >= Token.getDetokenizedLength([shorthandCopy]);
+ }
+
// 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++) {
if (can(matchingComponent.value, token.value)) {
// The component can override the matching component in the shorthand
- if (!token.isImportant || token.isImportant && matchingComponent.isImportant) {
+ if ((!token.isImportant || token.isImportant && matchingComponent.isImportant) && willResultInShorterValue(t, token)) {
// 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;
'a{background:url(1.png) 0 0/28px 28px}'
]
}),
+ 'multiple backgrounds': cssContext({
+ 'should not produce longer values': 'p{background:no-repeat;background-position:100% 0,0 100%,100% 100%,50% 50%}'
+ }),
'misc advanced': cssContext({
'outline auto': [
'a{outline:5px auto -webkit-focus-ring-color}',