336 lines
11 KiB
JavaScript
336 lines
11 KiB
JavaScript
var wrapSingle = require('./wrap-for-optimizing').single;
|
|
var InvalidPropertyError = require('./invalid-property-error');
|
|
|
|
var split = require('../utils/split');
|
|
var MULTIPLEX_SEPARATOR = ',';
|
|
|
|
function _colorFilter(validator) {
|
|
return function (value) {
|
|
return value[0] == 'invert' || validator.isValidColor(value[0]);
|
|
};
|
|
}
|
|
|
|
function _styleFilter(validator) {
|
|
return function (value) {
|
|
return value[0] != 'inherit' && validator.isValidStyle(value[0]) && !validator.isValidColorValue(value[0]);
|
|
};
|
|
}
|
|
|
|
function _wrapDefault(name, property, compactable) {
|
|
var descriptor = compactable[name];
|
|
if (descriptor.doubleValues && descriptor.defaultValue.length == 2)
|
|
return wrapSingle([[name, property.important], [descriptor.defaultValue[0]], [descriptor.defaultValue[1]]]);
|
|
else if (descriptor.doubleValues && descriptor.defaultValue.length == 1)
|
|
return wrapSingle([[name, property.important], [descriptor.defaultValue[0]]]);
|
|
else
|
|
return wrapSingle([[name, property.important], [descriptor.defaultValue]]);
|
|
}
|
|
|
|
function _widthFilter(validator) {
|
|
return function (value) {
|
|
return value[0] != 'inherit' && validator.isValidWidth(value[0]) && !validator.isValidStyleKeyword(value[0]) && !validator.isValidColorValue(value[0]);
|
|
};
|
|
}
|
|
|
|
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;
|
|
|
|
if (property.value.length == 1 && property.value[0][0] == '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;
|
|
}
|
|
|
|
for (var i = values.length - 1; i >= 0; i--) {
|
|
var value = values[i];
|
|
|
|
if (validator.isValidBackgroundAttachment(value[0])) {
|
|
attachment.value = [value];
|
|
} else if (validator.isValidBackgroundBox(value[0])) {
|
|
if (clipSet) {
|
|
origin.value = [value];
|
|
originSet = true;
|
|
} else {
|
|
clip.value = [value];
|
|
clipSet = true;
|
|
}
|
|
} else if (validator.isValidBackgroundRepeat(value[0])) {
|
|
if (repeatSet) {
|
|
repeat.value.unshift(value);
|
|
} else {
|
|
repeat.value = [value];
|
|
repeatSet = true;
|
|
}
|
|
} else if (validator.isValidBackgroundPositionPart(value[0]) || validator.isValidBackgroundSizePart(value[0])) {
|
|
if (i > 0) {
|
|
var previousValue = values[i - 1];
|
|
|
|
if (previousValue[0].indexOf('/') > 0) {
|
|
var twoParts = split(previousValue[0], '/');
|
|
// NOTE: we do this slicing as value may contain metadata too, like for source maps
|
|
size.value = [[twoParts.pop()].concat(previousValue.slice(1)), value];
|
|
values[i - 1] = [twoParts.pop()].concat(previousValue.slice(1));
|
|
} else if (i > 1 && values[i - 2][0] == '/') {
|
|
size.value = [previousValue, value];
|
|
i -= 2;
|
|
} else if (previousValue[0] == '/') {
|
|
size.value = [value];
|
|
} else {
|
|
if (!positionSet)
|
|
position.value = [];
|
|
|
|
position.value.unshift(value);
|
|
positionSet = true;
|
|
}
|
|
} else {
|
|
if (!positionSet)
|
|
position.value = [];
|
|
|
|
position.value.unshift(value);
|
|
positionSet = true;
|
|
}
|
|
} else if (validator.isValidBackgroundPositionAndSize(value[0])) {
|
|
var sizeValue = split(value[0], '/');
|
|
// NOTE: we do this slicing as value may contain metadata too, like for source maps
|
|
size.value = [[sizeValue.pop()].concat(value.slice(1))];
|
|
position.value = [[sizeValue.pop()].concat(value.slice(1))];
|
|
} else if ((color.value[0][0] == compactable[color.name].defaultValue || color.value[0][0] == 'none') && validator.isValidColor(value[0])) {
|
|
color.value = [value];
|
|
} else if (validator.isValidUrl(value[0]) || validator.isValidFunction(value[0])) {
|
|
image.value = [value];
|
|
}
|
|
}
|
|
|
|
if (clipSet && !originSet)
|
|
origin.value = clip.value.slice(0);
|
|
|
|
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][0] == '/') {
|
|
splitAt = i;
|
|
break;
|
|
}
|
|
}
|
|
|
|
if (splitAt === 0 || splitAt === values.length - 1) {
|
|
throw new InvalidPropertyError('Invalid border-radius value.');
|
|
}
|
|
|
|
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([[componentNames[i], property.important]]);
|
|
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][0] == ',')
|
|
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([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][0] == '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][0]) || values[index][0] == '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][0])) {
|
|
type.value = [values[index]];
|
|
values.splice(index, 1);
|
|
break;
|
|
}
|
|
}
|
|
|
|
// ... and what's left is a `position`
|
|
if (values.length > 0 && validator.isValidListStylePosition(values[0][0]))
|
|
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][0] == 'inherit') ||
|
|
(property.value.length == 3 && property.value[0][0] == 'inherit' && property.value[1][0] == 'inherit' && property.value[2][0] == '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][0] == 'none' || matches[0][0] == '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
|
|
};
|