123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362 |
- var InvalidPropertyError = require('./invalid-property-error');
- var wrapSingle = require('../wrap-for-optimizing').single;
- var Token = require('../../tokenizer/token');
- var formatPosition = require('../../utils/format-position');
- var MULTIPLEX_SEPARATOR = ',';
- function _colorFilter(validator) {
- return function (value) {
- return value[1] == 'invert' || validator.isValidColor(value[1]) || validator.isValidVendorPrefixedValue(value[1]);
- };
- }
- function _styleFilter(validator) {
- return function (value) {
- return value[1] != 'inherit' && validator.isValidStyle(value[1]) && !validator.isValidColorValue(value[1]);
- };
- }
- function _wrapDefault(name, property, compactable) {
- var descriptor = compactable[name];
- if (descriptor.doubleValues && descriptor.defaultValue.length == 2) {
- return wrapSingle([
- Token.PROPERTY,
- [Token.PROPERTY_NAME, name],
- [Token.PROPERTY_VALUE, descriptor.defaultValue[0]],
- [Token.PROPERTY_VALUE, descriptor.defaultValue[1]]
- ]);
- } else if (descriptor.doubleValues && descriptor.defaultValue.length == 1) {
- return wrapSingle([
- Token.PROPERTY,
- [Token.PROPERTY_NAME, name],
- [Token.PROPERTY_VALUE, descriptor.defaultValue[0]]
- ]);
- } else {
- return wrapSingle([
- Token.PROPERTY,
- [Token.PROPERTY_NAME, name],
- [Token.PROPERTY_VALUE, descriptor.defaultValue]
- ]);
- }
- }
- function _widthFilter(validator) {
- return function (value) {
- return value[1] != 'inherit' && validator.isValidWidth(value[1]) && !validator.isValidStyle(value[1]) && !validator.isValidColorValue(value[1]);
- };
- }
- function background(property, compactable, validator) {
- var image = _wrapDefault('background-image', property, compactable);
- var position = _wrapDefault('background-position', property, compactable);
- var size = _wrapDefault('background-size', property, compactable);
- var repeat = _wrapDefault('background-repeat', property, compactable);
- var attachment = _wrapDefault('background-attachment', property, compactable);
- var origin = _wrapDefault('background-origin', property, compactable);
- var clip = _wrapDefault('background-clip', property, compactable);
- var color = _wrapDefault('background-color', property, compactable);
- var components = [image, position, size, repeat, attachment, origin, clip, color];
- var values = property.value;
- var positionSet = false;
- var clipSet = false;
- var originSet = false;
- var repeatSet = false;
- var anyValueSet = false;
- if (property.value.length == 1 && property.value[0][1] == 'inherit') {
- // NOTE: 'inherit' is not a valid value for background-attachment
- color.value = image.value = repeat.value = position.value = size.value = origin.value = clip.value = property.value;
- return components;
- }
- if (property.value.length == 1 && property.value[0][1] == '0 0') {
- return components;
- }
- for (var i = values.length - 1; i >= 0; i--) {
- var value = values[i];
- if (validator.isValidBackgroundAttachment(value[1])) {
- attachment.value = [value];
- anyValueSet = true;
- } else if (validator.isValidBackgroundClip(value[1]) || validator.isValidBackgroundOrigin(value[1])) {
- if (clipSet) {
- origin.value = [value];
- originSet = true;
- } else {
- clip.value = [value];
- clipSet = true;
- }
- anyValueSet = true;
- } else if (validator.isValidBackgroundRepeat(value[1])) {
- if (repeatSet) {
- repeat.value.unshift(value);
- } else {
- repeat.value = [value];
- repeatSet = true;
- }
- anyValueSet = true;
- } else if (validator.isValidBackgroundPositionPart(value[1]) || validator.isValidBackgroundSizePart(value[1])) {
- if (i > 0) {
- var previousValue = values[i - 1];
- if (previousValue[1] == '/') {
- size.value = [value];
- } else if (i > 1 && values[i - 2][1] == '/') {
- size.value = [previousValue, value];
- i -= 2;
- } else {
- if (!positionSet)
- position.value = [];
- position.value.unshift(value);
- positionSet = true;
- }
- } else {
- if (!positionSet)
- position.value = [];
- position.value.unshift(value);
- positionSet = true;
- }
- anyValueSet = true;
- } else if ((color.value[0][1] == compactable[color.name].defaultValue || color.value[0][1] == 'none') && (validator.isValidColor(value[1]) || validator.isValidVendorPrefixedValue(value[1]))) {
- color.value = [value];
- anyValueSet = true;
- } else if (validator.isValidUrl(value[1]) || validator.isValidFunction(value[1])) {
- image.value = [value];
- anyValueSet = true;
- }
- }
- if (clipSet && !originSet)
- origin.value = clip.value.slice(0);
- if (!anyValueSet) {
- throw new InvalidPropertyError('Invalid background value at ' + formatPosition(values[0][2][0]) + '. Ignoring.');
- }
- return components;
- }
- function borderRadius(property, compactable) {
- var values = property.value;
- var splitAt = -1;
- for (var i = 0, l = values.length; i < l; i++) {
- if (values[i][1] == '/') {
- splitAt = i;
- break;
- }
- }
- if (splitAt === 0 || splitAt === values.length - 1) {
- throw new InvalidPropertyError('Invalid border-radius value at ' + formatPosition(values[0][2][0]) + '. Ignoring.');
- }
- var target = _wrapDefault(property.name, property, compactable);
- target.value = splitAt > -1 ?
- values.slice(0, splitAt) :
- values.slice(0);
- target.components = fourValues(target, compactable);
- var remainder = _wrapDefault(property.name, property, compactable);
- remainder.value = splitAt > -1 ?
- values.slice(splitAt + 1) :
- values.slice(0);
- remainder.components = fourValues(remainder, compactable);
- for (var j = 0; j < 4; j++) {
- target.components[j].multiplex = true;
- target.components[j].value = target.components[j].value.concat(remainder.components[j].value);
- }
- return target.components;
- }
- function fourValues(property, compactable) {
- var componentNames = compactable[property.name].components;
- var components = [];
- var value = property.value;
- if (value.length < 1)
- return [];
- if (value.length < 2)
- value[1] = value[0].slice(0);
- if (value.length < 3)
- value[2] = value[0].slice(0);
- if (value.length < 4)
- value[3] = value[1].slice(0);
- for (var i = componentNames.length - 1; i >= 0; i--) {
- var component = wrapSingle([
- Token.PROPERTY,
- [Token.PROPERTY_NAME, componentNames[i]]
- ]);
- component.value = [value[i]];
- components.unshift(component);
- }
- return components;
- }
- function multiplex(splitWith) {
- return function (property, compactable, validator) {
- var splitsAt = [];
- var values = property.value;
- var i, j, l, m;
- // find split commas
- for (i = 0, l = values.length; i < l; i++) {
- if (values[i][1] == ',')
- splitsAt.push(i);
- }
- if (splitsAt.length === 0)
- return splitWith(property, compactable, validator);
- var splitComponents = [];
- // split over commas, and into components
- for (i = 0, l = splitsAt.length; i <= l; i++) {
- var from = i === 0 ? 0 : splitsAt[i - 1] + 1;
- var to = i < l ? splitsAt[i] : values.length;
- var _property = _wrapDefault(property.name, property, compactable);
- _property.value = values.slice(from, to);
- splitComponents.push(splitWith(_property, compactable, validator));
- }
- var components = splitComponents[0];
- // group component values from each split
- for (i = 0, l = components.length; i < l; i++) {
- components[i].multiplex = true;
- for (j = 1, m = splitComponents.length; j < m; j++) {
- components[i].value.push([Token.PROPERTY_VALUE, MULTIPLEX_SEPARATOR]);
- Array.prototype.push.apply(components[i].value, splitComponents[j][i].value);
- }
- }
- return components;
- };
- }
- function listStyle(property, compactable, validator) {
- var type = _wrapDefault('list-style-type', property, compactable);
- var position = _wrapDefault('list-style-position', property, compactable);
- var image = _wrapDefault('list-style-image', property, compactable);
- var components = [type, position, image];
- if (property.value.length == 1 && property.value[0][1] == 'inherit') {
- type.value = position.value = image.value = [property.value[0]];
- return components;
- }
- var values = property.value.slice(0);
- var total = values.length;
- var index = 0;
- // `image` first...
- for (index = 0, total = values.length; index < total; index++) {
- if (validator.isValidUrl(values[index][1]) || values[index][1] == '0') {
- image.value = [values[index]];
- values.splice(index, 1);
- break;
- }
- }
- // ... then `type`...
- for (index = 0, total = values.length; index < total; index++) {
- if (validator.isValidListStyleType(values[index][1])) {
- type.value = [values[index]];
- values.splice(index, 1);
- break;
- }
- }
- // ... and what's left is a `position`
- if (values.length > 0 && validator.isValidListStylePosition(values[0][1]))
- position.value = [values[0]];
- return components;
- }
- function widthStyleColor(property, compactable, validator) {
- var descriptor = compactable[property.name];
- var components = [
- _wrapDefault(descriptor.components[0], property, compactable),
- _wrapDefault(descriptor.components[1], property, compactable),
- _wrapDefault(descriptor.components[2], property, compactable)
- ];
- var color, style, width;
- for (var i = 0; i < 3; i++) {
- var component = components[i];
- if (component.name.indexOf('color') > 0)
- color = component;
- else if (component.name.indexOf('style') > 0)
- style = component;
- else
- width = component;
- }
- if ((property.value.length == 1 && property.value[0][1] == 'inherit') ||
- (property.value.length == 3 && property.value[0][1] == 'inherit' && property.value[1][1] == 'inherit' && property.value[2][1] == 'inherit')) {
- color.value = style.value = width.value = [property.value[0]];
- return components;
- }
- var values = property.value.slice(0);
- var match, matches;
- // 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
- if (values.length > 0) {
- matches = values.filter(_widthFilter(validator));
- match = matches.length > 1 && (matches[0][1] == 'none' || matches[0][1] == 'auto') ? matches[1] : matches[0];
- if (match) {
- width.value = [match];
- values.splice(values.indexOf(match), 1);
- }
- }
- if (values.length > 0) {
- match = values.filter(_styleFilter(validator))[0];
- if (match) {
- style.value = [match];
- values.splice(values.indexOf(match), 1);
- }
- }
- if (values.length > 0) {
- match = values.filter(_colorFilter(validator))[0];
- if (match) {
- color.value = [match];
- values.splice(values.indexOf(match), 1);
- }
- }
- return components;
- }
- module.exports = {
- background: background,
- border: widthStyleColor,
- borderRadius: borderRadius,
- fourValues: fourValues,
- listStyle: listStyle,
- multiplex: multiplex,
- outline: widthStyleColor
- };
|