You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1063 lines
26 KiB
1063 lines
26 KiB
// 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);
|
|
|