75 lines
2.3 KiB
JavaScript
75 lines
2.3 KiB
JavaScript
|
import hyphenateProperty from 'css-in-js-utils/lib/hyphenateProperty';
|
||
|
|
import isPrefixedValue from 'css-in-js-utils/lib/isPrefixedValue';
|
||
|
|
|
||
|
|
import capitalizeString from '../utils/capitalizeString';
|
||
|
|
|
||
|
|
var properties = {
|
||
|
|
transition: true,
|
||
|
|
transitionProperty: true,
|
||
|
|
WebkitTransition: true,
|
||
|
|
WebkitTransitionProperty: true,
|
||
|
|
MozTransition: true,
|
||
|
|
MozTransitionProperty: true
|
||
|
|
};
|
||
|
|
|
||
|
|
var prefixMapping = {
|
||
|
|
Webkit: '-webkit-',
|
||
|
|
Moz: '-moz-',
|
||
|
|
ms: '-ms-'
|
||
|
|
};
|
||
|
|
|
||
|
|
function prefixValue(value, propertyPrefixMap) {
|
||
|
|
if (isPrefixedValue(value)) {
|
||
|
|
return value;
|
||
|
|
}
|
||
|
|
|
||
|
|
// only split multi values, not cubic beziers
|
||
|
|
var multipleValues = value.split(/,(?![^()]*(?:\([^()]*\))?\))/g);
|
||
|
|
|
||
|
|
for (var i = 0, len = multipleValues.length; i < len; ++i) {
|
||
|
|
var singleValue = multipleValues[i];
|
||
|
|
var values = [singleValue];
|
||
|
|
for (var property in propertyPrefixMap) {
|
||
|
|
var dashCaseProperty = hyphenateProperty(property);
|
||
|
|
|
||
|
|
if (singleValue.indexOf(dashCaseProperty) > -1 && dashCaseProperty !== 'order') {
|
||
|
|
var prefixes = propertyPrefixMap[property];
|
||
|
|
for (var j = 0, pLen = prefixes.length; j < pLen; ++j) {
|
||
|
|
// join all prefixes and create a new value
|
||
|
|
values.unshift(singleValue.replace(dashCaseProperty, prefixMapping[prefixes[j]] + dashCaseProperty));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
multipleValues[i] = values.join(',');
|
||
|
|
}
|
||
|
|
|
||
|
|
return multipleValues.join(',');
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function transition(property, value, style, propertyPrefixMap) {
|
||
|
|
// also check for already prefixed transitions
|
||
|
|
if (typeof value === 'string' && properties.hasOwnProperty(property)) {
|
||
|
|
var outputValue = prefixValue(value, propertyPrefixMap);
|
||
|
|
// if the property is already prefixed
|
||
|
|
var webkitOutput = outputValue.split(/,(?![^()]*(?:\([^()]*\))?\))/g).filter(function (val) {
|
||
|
|
return !/-moz-|-ms-/.test(val);
|
||
|
|
}).join(',');
|
||
|
|
|
||
|
|
if (property.indexOf('Webkit') > -1) {
|
||
|
|
return webkitOutput;
|
||
|
|
}
|
||
|
|
|
||
|
|
var mozOutput = outputValue.split(/,(?![^()]*(?:\([^()]*\))?\))/g).filter(function (val) {
|
||
|
|
return !/-webkit-|-ms-/.test(val);
|
||
|
|
}).join(',');
|
||
|
|
|
||
|
|
if (property.indexOf('Moz') > -1) {
|
||
|
|
return mozOutput;
|
||
|
|
}
|
||
|
|
|
||
|
|
style['Webkit' + capitalizeString(property)] = webkitOutput;
|
||
|
|
style['Moz' + capitalizeString(property)] = mozOutput;
|
||
|
|
return outputValue;
|
||
|
|
}
|
||
|
|
}
|