Edit File: compactable.js
// 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);
Back to File Manager