| // Contains the interpretation of CSS properties, as used by the property optimizer |
| |
| var breakUp = require('./break-up'); |
| var canOverride = require('./can-override'); |
| var restore = require('./restore'); |
| |
| var override = require('../../utils/override'); |
| |
| // 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 |
| // 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. |
| // |
| // * restore: function (Only specify for shorthand properties.) |
| // Puts the shorthand together from its components. |
| // |
| var compactable = { |
| 'animation': { |
| canOverride: canOverride.generic.components([ |
| canOverride.generic.time, |
| canOverride.generic.timingFunction, |
| canOverride.generic.time, |
| canOverride.property.animationIterationCount, |
| canOverride.property.animationDirection, |
| canOverride.property.animationFillMode, |
| canOverride.property.animationPlayState, |
| canOverride.property.animationName |
| ]), |
| components: [ |
| 'animation-duration', |
| 'animation-timing-function', |
| 'animation-delay', |
| 'animation-iteration-count', |
| 'animation-direction', |
| 'animation-fill-mode', |
| 'animation-play-state', |
| 'animation-name' |
| ], |
| breakUp: breakUp.multiplex(breakUp.animation), |
| defaultValue: 'none', |
| restore: restore.multiplex(restore.withoutDefaults), |
| shorthand: true, |
| vendorPrefixes: [ |
| '-moz-', |
| '-o-', |
| '-webkit-' |
| ] |
| }, |
| 'animation-delay': { |
| canOverride: canOverride.generic.time, |
| componentOf: [ |
| 'animation' |
| ], |
| defaultValue: '0s', |
| intoMultiplexMode: 'real', |
| vendorPrefixes: [ |
| '-moz-', |
| '-o-', |
| '-webkit-' |
| ] |
| }, |
| 'animation-direction': { |
| canOverride: canOverride.property.animationDirection, |
| componentOf: [ |
| 'animation' |
| ], |
| defaultValue: 'normal', |
| intoMultiplexMode: 'real', |
| vendorPrefixes: [ |
| '-moz-', |
| '-o-', |
| '-webkit-' |
| ] |
| }, |
| 'animation-duration': { |
| canOverride: canOverride.generic.time, |
| componentOf: [ |
| 'animation' |
| ], |
| defaultValue: '0s', |
| intoMultiplexMode: 'real', |
| keepUnlessDefault: 'animation-delay', |
| vendorPrefixes: [ |
| '-moz-', |
| '-o-', |
| '-webkit-' |
| ] |
| }, |
| 'animation-fill-mode': { |
| canOverride: canOverride.property.animationFillMode, |
| componentOf: [ |
| 'animation' |
| ], |
| defaultValue: 'none', |
| intoMultiplexMode: 'real', |
| vendorPrefixes: [ |
| '-moz-', |
| '-o-', |
| '-webkit-' |
| ] |
| }, |
| 'animation-iteration-count': { |
| canOverride: canOverride.property.animationIterationCount, |
| componentOf: [ |
| 'animation' |
| ], |
| defaultValue: '1', |
| intoMultiplexMode: 'real', |
| vendorPrefixes: [ |
| '-moz-', |
| '-o-', |
| '-webkit-' |
| ] |
| }, |
| 'animation-name': { |
| canOverride: canOverride.property.animationName, |
| componentOf: [ |
| 'animation' |
| ], |
| defaultValue: 'none', |
| intoMultiplexMode: 'real', |
| vendorPrefixes: [ |
| '-moz-', |
| '-o-', |
| '-webkit-' |
| ] |
| }, |
| 'animation-play-state': { |
| canOverride: canOverride.property.animationPlayState, |
| componentOf: [ |
| 'animation' |
| ], |
| defaultValue: 'running', |
| intoMultiplexMode: 'real', |
| vendorPrefixes: [ |
| '-moz-', |
| '-o-', |
| '-webkit-' |
| ] |
| }, |
| 'animation-timing-function': { |
| canOverride: canOverride.generic.timingFunction, |
| componentOf: [ |
| 'animation' |
| ], |
| defaultValue: 'ease', |
| intoMultiplexMode: 'real', |
| vendorPrefixes: [ |
| '-moz-', |
| '-o-', |
| '-webkit-' |
| ] |
| }, |
| 'background': { |
| canOverride: canOverride.generic.components([ |
| canOverride.generic.image, |
| canOverride.property.backgroundPosition, |
| canOverride.property.backgroundSize, |
| canOverride.property.backgroundRepeat, |
| canOverride.property.backgroundAttachment, |
| canOverride.property.backgroundOrigin, |
| canOverride.property.backgroundClip, |
| canOverride.generic.color |
| ]), |
| components: [ |
| 'background-image', |
| 'background-position', |
| 'background-size', |
| 'background-repeat', |
| 'background-attachment', |
| 'background-origin', |
| 'background-clip', |
| 'background-color' |
| ], |
| breakUp: breakUp.multiplex(breakUp.background), |
| defaultValue: '0 0', |
| restore: restore.multiplex(restore.background), |
| shortestValue: '0', |
| shorthand: true |
| }, |
| 'background-attachment': { |
| canOverride: canOverride.property.backgroundAttachment, |
| componentOf: [ |
| 'background' |
| ], |
| defaultValue: 'scroll', |
| intoMultiplexMode: 'real' |
| }, |
| 'background-clip': { |
| canOverride: canOverride.property.backgroundClip, |
| componentOf: [ |
| 'background' |
| ], |
| defaultValue: 'border-box', |
| intoMultiplexMode: 'real', |
| shortestValue: 'border-box' |
| }, |
| 'background-color': { |
| canOverride: canOverride.generic.color, |
| componentOf: [ |
| 'background' |
| ], |
| defaultValue: 'transparent', |
| intoMultiplexMode: 'real', // otherwise real color will turn into default since color appears in last multiplex only |
| multiplexLastOnly: true, |
| nonMergeableValue: 'none', |
| shortestValue: 'red' |
| }, |
| 'background-image': { |
| canOverride: canOverride.generic.image, |
| componentOf: [ |
| 'background' |
| ], |
| defaultValue: 'none', |
| intoMultiplexMode: 'default' |
| }, |
| 'background-origin': { |
| canOverride: canOverride.property.backgroundOrigin, |
| componentOf: [ |
| 'background' |
| ], |
| defaultValue: 'padding-box', |
| intoMultiplexMode: 'real', |
| shortestValue: 'border-box' |
| }, |
| 'background-position': { |
| canOverride: canOverride.property.backgroundPosition, |
| componentOf: [ |
| 'background' |
| ], |
| defaultValue: ['0', '0'], |
| doubleValues: true, |
| intoMultiplexMode: 'real', |
| shortestValue: '0' |
| }, |
| 'background-repeat': { |
| canOverride: canOverride.property.backgroundRepeat, |
| componentOf: [ |
| 'background' |
| ], |
| defaultValue: ['repeat'], |
| doubleValues: true, |
| intoMultiplexMode: 'real' |
| }, |
| 'background-size': { |
| canOverride: canOverride.property.backgroundSize, |
| componentOf: [ |
| 'background' |
| ], |
| defaultValue: ['auto'], |
| doubleValues: true, |
| intoMultiplexMode: 'real', |
| shortestValue: '0 0' |
| }, |
| 'bottom': { |
| canOverride: canOverride.property.bottom, |
| defaultValue: 'auto' |
| }, |
| 'border': { |
| breakUp: breakUp.border, |
| canOverride: canOverride.generic.components([ |
| canOverride.generic.unit, |
| canOverride.property.borderStyle, |
| canOverride.generic.color |
| ]), |
| components: [ |
| 'border-width', |
| 'border-style', |
| 'border-color' |
| ], |
| defaultValue: 'none', |
| overridesShorthands: [ |
| 'border-bottom', |
| 'border-left', |
| 'border-right', |
| 'border-top' |
| ], |
| restore: restore.withoutDefaults, |
| shorthand: true, |
| shorthandComponents: true |
| }, |
| 'border-bottom': { |
| breakUp: breakUp.border, |
| canOverride: canOverride.generic.components([ |
| canOverride.generic.unit, |
| canOverride.property.borderStyle, |
| canOverride.generic.color |
| ]), |
| components: [ |
| 'border-bottom-width', |
| 'border-bottom-style', |
| 'border-bottom-color' |
| ], |
| defaultValue: 'none', |
| restore: restore.withoutDefaults, |
| shorthand: true |
| }, |
| 'border-bottom-color': { |
| canOverride: canOverride.generic.color, |
| componentOf: [ |
| 'border-bottom', |
| 'border-color' |
| ], |
| defaultValue: 'none' |
| }, |
| 'border-bottom-left-radius': { |
| canOverride: canOverride.generic.unit, |
| componentOf: [ |
| 'border-radius' |
| ], |
| defaultValue: '0', |
| vendorPrefixes: [ |
| '-moz-', |
| '-o-' |
| ] |
| }, |
| 'border-bottom-right-radius': { |
| canOverride: canOverride.generic.unit, |
| componentOf: [ |
| 'border-radius' |
| ], |
| defaultValue: '0', |
| vendorPrefixes: [ |
| '-moz-', |
| '-o-' |
| ] |
| }, |
| 'border-bottom-style': { |
| canOverride: canOverride.property.borderStyle, |
| componentOf: [ |
| 'border-bottom', |
| 'border-style' |
| ], |
| defaultValue: 'none' |
| }, |
| 'border-bottom-width': { |
| canOverride: canOverride.generic.unit, |
| componentOf: [ |
| 'border-bottom', |
| 'border-width' |
| ], |
| defaultValue: 'medium', |
| oppositeTo: 'border-top-width', |
| shortestValue: '0' |
| }, |
| 'border-collapse': { |
| canOverride: canOverride.property.borderCollapse, |
| defaultValue: 'separate' |
| }, |
| 'border-color': { |
| breakUp: breakUp.fourValues, |
| canOverride: canOverride.generic.components([ |
| canOverride.generic.color, |
| canOverride.generic.color, |
| canOverride.generic.color, |
| canOverride.generic.color |
| ]), |
| componentOf: [ |
| 'border' |
| ], |
| components: [ |
| 'border-top-color', |
| 'border-right-color', |
| 'border-bottom-color', |
| 'border-left-color' |
| ], |
| defaultValue: 'none', |
| restore: restore.fourValues, |
| shortestValue: 'red', |
| shorthand: true |
| }, |
| 'border-left': { |
| breakUp: breakUp.border, |
| canOverride: canOverride.generic.components([ |
| canOverride.generic.unit, |
| canOverride.property.borderStyle, |
| canOverride.generic.color |
| ]), |
| components: [ |
| 'border-left-width', |
| 'border-left-style', |
| 'border-left-color' |
| ], |
| defaultValue: 'none', |
| restore: restore.withoutDefaults, |
| shorthand: true |
| }, |
| 'border-left-color': { |
| canOverride: canOverride.generic.color, |
| componentOf: [ |
| 'border-color', |
| 'border-left' |
| ], |
| defaultValue: 'none' |
| }, |
| 'border-left-style': { |
| canOverride: canOverride.property.borderStyle, |
| componentOf: [ |
| 'border-left', |
| 'border-style' |
| ], |
| defaultValue: 'none' |
| }, |
| 'border-left-width': { |
| canOverride: canOverride.generic.unit, |
| componentOf: [ |
| 'border-left', |
| 'border-width' |
| ], |
| defaultValue: 'medium', |
| oppositeTo: 'border-right-width', |
| shortestValue: '0' |
| }, |
| 'border-radius': { |
| breakUp: breakUp.borderRadius, |
| canOverride: canOverride.generic.components([ |
| canOverride.generic.unit, |
| canOverride.generic.unit, |
| canOverride.generic.unit, |
| canOverride.generic.unit |
| ]), |
| components: [ |
| 'border-top-left-radius', |
| 'border-top-right-radius', |
| 'border-bottom-right-radius', |
| 'border-bottom-left-radius' |
| ], |
| defaultValue: '0', |
| restore: restore.borderRadius, |
| shorthand: true, |
| vendorPrefixes: [ |
| '-moz-', |
| '-o-' |
| ] |
| }, |
| 'border-right': { |
| breakUp: breakUp.border, |
| canOverride: canOverride.generic.components([ |
| canOverride.generic.unit, |
| canOverride.property.borderStyle, |
| canOverride.generic.color |
| ]), |
| components: [ |
| 'border-right-width', |
| 'border-right-style', |
| 'border-right-color' |
| ], |
| defaultValue: 'none', |
| restore: restore.withoutDefaults, |
| shorthand: true |
| }, |
| 'border-right-color': { |
| canOverride: canOverride.generic.color, |
| componentOf: [ |
| 'border-color', |
| 'border-right' |
| ], |
| defaultValue: 'none' |
| }, |
| 'border-right-style': { |
| canOverride: canOverride.property.borderStyle, |
| componentOf: [ |
| 'border-right', |
| 'border-style' |
| ], |
| defaultValue: 'none' |
| }, |
| 'border-right-width': { |
| canOverride: canOverride.generic.unit, |
| componentOf: [ |
| 'border-right', |
| 'border-width' |
| ], |
| defaultValue: 'medium', |
| oppositeTo: 'border-left-width', |
| shortestValue: '0' |
| }, |
| 'border-style': { |
| breakUp: breakUp.fourValues, |
| canOverride: canOverride.generic.components([ |
| canOverride.property.borderStyle, |
| canOverride.property.borderStyle, |
| canOverride.property.borderStyle, |
| canOverride.property.borderStyle |
| ]), |
| componentOf: [ |
| 'border' |
| ], |
| components: [ |
| 'border-top-style', |
| 'border-right-style', |
| 'border-bottom-style', |
| 'border-left-style' |
| ], |
| defaultValue: 'none', |
| restore: restore.fourValues, |
| shorthand: true |
| }, |
| 'border-top': { |
| breakUp: breakUp.border, |
| canOverride: canOverride.generic.components([ |
| canOverride.generic.unit, |
| canOverride.property.borderStyle, |
| canOverride.generic.color |
| ]), |
| components: [ |
| 'border-top-width', |
| 'border-top-style', |
| 'border-top-color' |
| ], |
| defaultValue: 'none', |
| restore: restore.withoutDefaults, |
| shorthand: true |
| }, |
| 'border-top-color': { |
| canOverride: canOverride.generic.color, |
| componentOf: [ |
| 'border-color', |
| 'border-top' |
| ], |
| defaultValue: 'none' |
| }, |
| 'border-top-left-radius': { |
| canOverride: canOverride.generic.unit, |
| componentOf: [ |
| 'border-radius' |
| ], |
| defaultValue: '0', |
| vendorPrefixes: [ |
| '-moz-', |
| '-o-' |
| ] |
| }, |
| 'border-top-right-radius': { |
| canOverride: canOverride.generic.unit, |
| componentOf: [ |
| 'border-radius' |
| ], |
| defaultValue: '0', |
| vendorPrefixes: [ |
| '-moz-', |
| '-o-' |
| ] |
| }, |
| 'border-top-style': { |
| canOverride: canOverride.property.borderStyle, |
| componentOf: [ |
| 'border-style', |
| 'border-top' |
| ], |
| defaultValue: 'none' |
| }, |
| 'border-top-width': { |
| canOverride: canOverride.generic.unit, |
| componentOf: [ |
| 'border-top', |
| 'border-width' |
| ], |
| defaultValue: 'medium', |
| oppositeTo: 'border-bottom-width', |
| shortestValue: '0' |
| }, |
| 'border-width': { |
| breakUp: breakUp.fourValues, |
| canOverride: canOverride.generic.components([ |
| canOverride.generic.unit, |
| canOverride.generic.unit, |
| canOverride.generic.unit, |
| canOverride.generic.unit |
| ]), |
| componentOf: [ |
| 'border' |
| ], |
| components: [ |
| 'border-top-width', |
| 'border-right-width', |
| 'border-bottom-width', |
| 'border-left-width' |
| ], |
| defaultValue: 'medium', |
| restore: restore.fourValues, |
| shortestValue: '0', |
| shorthand: true |
| }, |
| 'clear': { |
| canOverride: canOverride.property.clear, |
| defaultValue: 'none' |
| }, |
| 'color': { |
| canOverride: canOverride.generic.color, |
| defaultValue: 'transparent', |
| shortestValue: 'red' |
| }, |
| 'cursor': { |
| canOverride: canOverride.property.cursor, |
| defaultValue: 'auto' |
| }, |
| 'display': { |
| canOverride: canOverride.property.display, |
| }, |
| 'float': { |
| canOverride: canOverride.property.float, |
| defaultValue: 'none' |
| }, |
| 'font': { |
| breakUp: breakUp.font, |
| canOverride: canOverride.generic.components([ |
| canOverride.property.fontStyle, |
| canOverride.property.fontVariant, |
| canOverride.property.fontWeight, |
| canOverride.property.fontStretch, |
| canOverride.generic.unit, |
| canOverride.generic.unit, |
| canOverride.property.fontFamily |
| ]), |
| components: [ |
| 'font-style', |
| 'font-variant', |
| 'font-weight', |
| 'font-stretch', |
| 'font-size', |
| 'line-height', |
| 'font-family' |
| ], |
| restore: restore.font, |
| shorthand: true |
| }, |
| 'font-family': { |
| canOverride: canOverride.property.fontFamily, |
| defaultValue: 'user|agent|specific' |
| }, |
| 'font-size': { |
| canOverride: canOverride.generic.unit, |
| defaultValue: 'medium', |
| shortestValue: '0' |
| }, |
| 'font-stretch': { |
| canOverride: canOverride.property.fontStretch, |
| defaultValue: 'normal' |
| }, |
| 'font-style': { |
| canOverride: canOverride.property.fontStyle, |
| defaultValue: 'normal' |
| }, |
| 'font-variant': { |
| canOverride: canOverride.property.fontVariant, |
| defaultValue: 'normal' |
| }, |
| 'font-weight': { |
| canOverride: canOverride.property.fontWeight, |
| defaultValue: 'normal', |
| shortestValue: '400' |
| }, |
| 'height': { |
| canOverride: canOverride.generic.unit, |
| defaultValue: 'auto', |
| shortestValue: '0' |
| }, |
| 'left': { |
| canOverride: canOverride.property.left, |
| defaultValue: 'auto' |
| }, |
| 'line-height': { |
| canOverride: canOverride.generic.unitOrNumber, |
| defaultValue: 'normal', |
| shortestValue: '0' |
| }, |
| 'list-style': { |
| canOverride: canOverride.generic.components([ |
| canOverride.property.listStyleType, |
| canOverride.property.listStylePosition, |
| canOverride.property.listStyleImage |
| ]), |
| components: [ |
| 'list-style-type', |
| 'list-style-position', |
| 'list-style-image' |
| ], |
| breakUp: breakUp.listStyle, |
| restore: restore.withoutDefaults, |
| defaultValue: 'outside', // can't use 'disc' because that'd override default 'decimal' for <ol> |
| shortestValue: 'none', |
| shorthand: true |
| }, |
| 'list-style-image' : { |
| canOverride: canOverride.generic.image, |
| componentOf: [ |
| 'list-style' |
| ], |
| defaultValue: 'none' |
| }, |
| 'list-style-position' : { |
| canOverride: canOverride.property.listStylePosition, |
| componentOf: [ |
| 'list-style' |
| ], |
| defaultValue: 'outside', |
| shortestValue: 'inside' |
| }, |
| 'list-style-type' : { |
| canOverride: canOverride.property.listStyleType, |
| componentOf: [ |
| 'list-style' |
| ], |
| // 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 |
| defaultValue: 'decimal|disc', |
| shortestValue: 'none' |
| }, |
| 'margin': { |
| breakUp: breakUp.fourValues, |
| canOverride: canOverride.generic.components([ |
| canOverride.generic.unit, |
| canOverride.generic.unit, |
| canOverride.generic.unit, |
| canOverride.generic.unit |
| ]), |
| components: [ |
| 'margin-top', |
| 'margin-right', |
| 'margin-bottom', |
| 'margin-left' |
| ], |
| defaultValue: '0', |
| restore: restore.fourValues, |
| shorthand: true |
| }, |
| 'margin-bottom': { |
| canOverride: canOverride.generic.unit, |
| componentOf: [ |
| 'margin' |
| ], |
| defaultValue: '0', |
| oppositeTo: 'margin-top' |
| }, |
| 'margin-left': { |
| canOverride: canOverride.generic.unit, |
| componentOf: [ |
| 'margin' |
| ], |
| defaultValue: '0', |
| oppositeTo: 'margin-right' |
| }, |
| 'margin-right': { |
| canOverride: canOverride.generic.unit, |
| componentOf: [ |
| 'margin' |
| ], |
| defaultValue: '0', |
| oppositeTo: 'margin-left' |
| }, |
| 'margin-top': { |
| canOverride: canOverride.generic.unit, |
| componentOf: [ |
| 'margin' |
| ], |
| defaultValue: '0', |
| oppositeTo: 'margin-bottom' |
| }, |
| 'outline': { |
| canOverride: canOverride.generic.components([ |
| canOverride.generic.color, |
| canOverride.property.outlineStyle, |
| canOverride.generic.unit |
| ]), |
| components: [ |
| 'outline-color', |
| 'outline-style', |
| 'outline-width' |
| ], |
| breakUp: breakUp.outline, |
| restore: restore.withoutDefaults, |
| defaultValue: '0', |
| shorthand: true |
| }, |
| 'outline-color': { |
| canOverride: canOverride.generic.color, |
| componentOf: [ |
| 'outline' |
| ], |
| defaultValue: 'invert', |
| shortestValue: 'red' |
| }, |
| 'outline-style': { |
| canOverride: canOverride.property.outlineStyle, |
| componentOf: [ |
| 'outline' |
| ], |
| defaultValue: 'none' |
| }, |
| 'outline-width': { |
| canOverride: canOverride.generic.unit, |
| componentOf: [ |
| 'outline' |
| ], |
| defaultValue: 'medium', |
| shortestValue: '0' |
| }, |
| 'overflow': { |
| canOverride: canOverride.property.overflow, |
| defaultValue: 'visible' |
| }, |
| 'overflow-x': { |
| canOverride: canOverride.property.overflow, |
| defaultValue: 'visible' |
| }, |
| 'overflow-y': { |
| canOverride: canOverride.property.overflow, |
| defaultValue: 'visible' |
| }, |
| 'padding': { |
| breakUp: breakUp.fourValues, |
| canOverride: canOverride.generic.components([ |
| canOverride.generic.unit, |
| canOverride.generic.unit, |
| canOverride.generic.unit, |
| canOverride.generic.unit |
| ]), |
| components: [ |
| 'padding-top', |
| 'padding-right', |
| 'padding-bottom', |
| 'padding-left' |
| ], |
| defaultValue: '0', |
| restore: restore.fourValues, |
| shorthand: true |
| }, |
| 'padding-bottom': { |
| canOverride: canOverride.generic.unit, |
| componentOf: [ |
| 'padding' |
| ], |
| defaultValue: '0', |
| oppositeTo: 'padding-top' |
| }, |
| 'padding-left': { |
| canOverride: canOverride.generic.unit, |
| componentOf: [ |
| 'padding' |
| ], |
| defaultValue: '0', |
| oppositeTo: 'padding-right' |
| }, |
| 'padding-right': { |
| canOverride: canOverride.generic.unit, |
| componentOf: [ |
| 'padding' |
| ], |
| defaultValue: '0', |
| oppositeTo: 'padding-left' |
| }, |
| 'padding-top': { |
| canOverride: canOverride.generic.unit, |
| componentOf: [ |
| 'padding' |
| ], |
| defaultValue: '0', |
| oppositeTo: 'padding-bottom' |
| }, |
| 'position': { |
| canOverride: canOverride.property.position, |
| defaultValue: 'static' |
| }, |
| 'right': { |
| canOverride: canOverride.property.right, |
| defaultValue: 'auto' |
| }, |
| 'text-align': { |
| canOverride: canOverride.property.textAlign, |
| // NOTE: we can't tell the real default value here, as it depends on default text direction |
| // this is a hack, but it doesn't matter because this value will be either overridden or |
| // it will disappear anyway |
| defaultValue: 'left|right' |
| }, |
| 'text-decoration': { |
| canOverride: canOverride.property.textDecoration, |
| defaultValue: 'none' |
| }, |
| 'text-overflow': { |
| canOverride: canOverride.property.textOverflow, |
| defaultValue: 'none' |
| }, |
| 'text-shadow': { |
| canOverride: canOverride.property.textShadow, |
| defaultValue: 'none' |
| }, |
| 'top': { |
| canOverride: canOverride.property.top, |
| defaultValue: 'auto' |
| }, |
| 'transform': { |
| canOverride: canOverride.property.transform, |
| vendorPrefixes: [ |
| '-moz-', |
| '-ms-', |
| '-webkit-' |
| ] |
| }, |
| 'transition': { |
| breakUp: breakUp.multiplex(breakUp.transition), |
| canOverride: canOverride.generic.components([ |
| canOverride.property.transitionProperty, |
| canOverride.generic.time, |
| canOverride.generic.timingFunction, |
| canOverride.generic.time |
| ]), |
| components: [ |
| 'transition-property', |
| 'transition-duration', |
| 'transition-timing-function', |
| 'transition-delay' |
| ], |
| defaultValue: 'none', |
| restore: restore.multiplex(restore.withoutDefaults), |
| shorthand: true, |
| vendorPrefixes: [ |
| '-moz-', |
| '-o-', |
| '-webkit-' |
| ] |
| }, |
| 'transition-delay': { |
| canOverride: canOverride.generic.time, |
| componentOf: [ |
| 'transition' |
| ], |
| defaultValue: '0s', |
| intoMultiplexMode: 'real', |
| vendorPrefixes: [ |
| '-moz-', |
| '-o-', |
| '-webkit-' |
| ] |
| }, |
| 'transition-duration': { |
| canOverride: canOverride.generic.time, |
| componentOf: [ |
| 'transition' |
| ], |
| defaultValue: '0s', |
| intoMultiplexMode: 'real', |
| vendorPrefixes: [ |
| '-moz-', |
| '-o-', |
| '-webkit-' |
| ] |
| }, |
| 'transition-property': { |
| canOverride: canOverride.generic.propertyName, |
| componentOf: [ |
| 'transition' |
| ], |
| defaultValue: 'all', |
| intoMultiplexMode: 'placeholder', |
| placeholderValue: '_', // it's a short value that won't match any property and still be a valid `transition-property` |
| vendorPrefixes: [ |
| '-moz-', |
| '-o-', |
| '-webkit-' |
| ] |
| }, |
| 'transition-timing-function': { |
| canOverride: canOverride.generic.timingFunction, |
| componentOf: [ |
| 'transition' |
| ], |
| defaultValue: 'ease', |
| intoMultiplexMode: 'real', |
| vendorPrefixes: [ |
| '-moz-', |
| '-o-', |
| '-webkit-' |
| ] |
| }, |
| 'vertical-align': { |
| canOverride: canOverride.property.verticalAlign, |
| defaultValue: 'baseline' |
| }, |
| 'visibility': { |
| canOverride: canOverride.property.visibility, |
| defaultValue: 'visible' |
| }, |
| 'white-space': { |
| canOverride: canOverride.property.whiteSpace, |
| defaultValue: 'normal' |
| }, |
| 'width': { |
| canOverride: canOverride.generic.unit, |
| defaultValue: 'auto', |
| shortestValue: '0' |
| }, |
| 'z-index': { |
| canOverride: canOverride.property.zIndex, |
| defaultValue: 'auto' |
| } |
| }; |
| |
| function cloneDescriptor(propertyName, prefix) { |
| var clonedDescriptor = override(compactable[propertyName], {}); |
| |
| if ('componentOf' in clonedDescriptor) { |
| clonedDescriptor.componentOf = clonedDescriptor.componentOf.map(function (shorthandName) { |
| return prefix + shorthandName; |
| }); |
| } |
| |
| if ('components' in clonedDescriptor) { |
| clonedDescriptor.components = clonedDescriptor.components.map(function (longhandName) { |
| return prefix + longhandName; |
| }); |
| } |
| |
| if ('keepUnlessDefault' in clonedDescriptor) { |
| clonedDescriptor.keepUnlessDefault = prefix + clonedDescriptor.keepUnlessDefault; |
| } |
| |
| return clonedDescriptor; |
| } |
| |
| // generate vendor-prefixed properties |
| var vendorPrefixedCompactable = {}; |
| |
| for (var propertyName in compactable) { |
| var descriptor = compactable[propertyName]; |
| |
| if (!('vendorPrefixes' in descriptor)) { |
| continue; |
| } |
| |
| for (var i = 0; i < descriptor.vendorPrefixes.length; i++) { |
| var prefix = descriptor.vendorPrefixes[i]; |
| var clonedDescriptor = cloneDescriptor(propertyName, prefix); |
| delete clonedDescriptor.vendorPrefixes; |
| |
| vendorPrefixedCompactable[prefix + propertyName] = clonedDescriptor; |
| } |
| |
| delete descriptor.vendorPrefixes; |
| } |
| |
| module.exports = override(compactable, vendorPrefixedCompactable); |
