154 lines
5.5 KiB
JavaScript
154 lines
5.5 KiB
JavaScript
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
function splitValues(value) {
|
|
if (typeof value === 'number') {
|
|
return [[value], false];
|
|
}
|
|
var rawStyle = String(value).trim();
|
|
var importantCells = rawStyle.match(/(.*)(!important)/);
|
|
var splitStyle = (importantCells ? importantCells[1] : rawStyle).trim().split(/\s+/);
|
|
|
|
// Combine styles split in brackets, like `calc(1px + 2px)`
|
|
var temp = '';
|
|
var brackets = 0;
|
|
return [splitStyle.reduce(function (list, item) {
|
|
if (item.includes('(')) {
|
|
temp += item;
|
|
brackets += item.split('(').length - 1;
|
|
} else if (item.includes(')')) {
|
|
temp += item;
|
|
brackets -= item.split(')').length - 1;
|
|
if (brackets === 0) {
|
|
list.push(temp);
|
|
temp = '';
|
|
}
|
|
} else if (brackets > 0) {
|
|
temp += item;
|
|
} else {
|
|
list.push(item);
|
|
}
|
|
return list;
|
|
}, []), !!importantCells];
|
|
}
|
|
function noSplit(list) {
|
|
list.notSplit = true;
|
|
return list;
|
|
}
|
|
var keyMap = {
|
|
// Inset
|
|
inset: ['top', 'right', 'bottom', 'left'],
|
|
insetBlock: ['top', 'bottom'],
|
|
insetBlockStart: ['top'],
|
|
insetBlockEnd: ['bottom'],
|
|
insetInline: ['left', 'right'],
|
|
insetInlineStart: ['left'],
|
|
insetInlineEnd: ['right'],
|
|
// Margin
|
|
marginBlock: ['marginTop', 'marginBottom'],
|
|
marginBlockStart: ['marginTop'],
|
|
marginBlockEnd: ['marginBottom'],
|
|
marginInline: ['marginLeft', 'marginRight'],
|
|
marginInlineStart: ['marginLeft'],
|
|
marginInlineEnd: ['marginRight'],
|
|
// Padding
|
|
paddingBlock: ['paddingTop', 'paddingBottom'],
|
|
paddingBlockStart: ['paddingTop'],
|
|
paddingBlockEnd: ['paddingBottom'],
|
|
paddingInline: ['paddingLeft', 'paddingRight'],
|
|
paddingInlineStart: ['paddingLeft'],
|
|
paddingInlineEnd: ['paddingRight'],
|
|
// Border
|
|
borderBlock: noSplit(['borderTop', 'borderBottom']),
|
|
borderBlockStart: noSplit(['borderTop']),
|
|
borderBlockEnd: noSplit(['borderBottom']),
|
|
borderInline: noSplit(['borderLeft', 'borderRight']),
|
|
borderInlineStart: noSplit(['borderLeft']),
|
|
borderInlineEnd: noSplit(['borderRight']),
|
|
// Border width
|
|
borderBlockWidth: ['borderTopWidth', 'borderBottomWidth'],
|
|
borderBlockStartWidth: ['borderTopWidth'],
|
|
borderBlockEndWidth: ['borderBottomWidth'],
|
|
borderInlineWidth: ['borderLeftWidth', 'borderRightWidth'],
|
|
borderInlineStartWidth: ['borderLeftWidth'],
|
|
borderInlineEndWidth: ['borderRightWidth'],
|
|
// Border style
|
|
borderBlockStyle: ['borderTopStyle', 'borderBottomStyle'],
|
|
borderBlockStartStyle: ['borderTopStyle'],
|
|
borderBlockEndStyle: ['borderBottomStyle'],
|
|
borderInlineStyle: ['borderLeftStyle', 'borderRightStyle'],
|
|
borderInlineStartStyle: ['borderLeftStyle'],
|
|
borderInlineEndStyle: ['borderRightStyle'],
|
|
// Border color
|
|
borderBlockColor: ['borderTopColor', 'borderBottomColor'],
|
|
borderBlockStartColor: ['borderTopColor'],
|
|
borderBlockEndColor: ['borderBottomColor'],
|
|
borderInlineColor: ['borderLeftColor', 'borderRightColor'],
|
|
borderInlineStartColor: ['borderLeftColor'],
|
|
borderInlineEndColor: ['borderRightColor'],
|
|
// Border radius
|
|
borderStartStartRadius: ['borderTopLeftRadius'],
|
|
borderStartEndRadius: ['borderTopRightRadius'],
|
|
borderEndStartRadius: ['borderBottomLeftRadius'],
|
|
borderEndEndRadius: ['borderBottomRightRadius']
|
|
};
|
|
function wrapImportantAndSkipCheck(value, important) {
|
|
var parsedValue = value;
|
|
if (important) {
|
|
parsedValue = "".concat(parsedValue, " !important");
|
|
}
|
|
return {
|
|
_skip_check_: true,
|
|
value: parsedValue
|
|
};
|
|
}
|
|
|
|
/**
|
|
* Convert css logical properties to legacy properties.
|
|
* Such as: `margin-block-start` to `margin-top`.
|
|
* Transform list:
|
|
* - inset
|
|
* - margin
|
|
* - padding
|
|
* - border
|
|
*/
|
|
var transform = {
|
|
visit: function visit(cssObj) {
|
|
var clone = {};
|
|
Object.keys(cssObj).forEach(function (key) {
|
|
var value = cssObj[key];
|
|
var matchValue = keyMap[key];
|
|
if (matchValue && (typeof value === 'number' || typeof value === 'string')) {
|
|
var _splitValues = splitValues(value),
|
|
_splitValues2 = _slicedToArray(_splitValues, 2),
|
|
_values = _splitValues2[0],
|
|
_important = _splitValues2[1];
|
|
if (matchValue.length && matchValue.notSplit) {
|
|
// not split means always give same value like border
|
|
matchValue.forEach(function (matchKey) {
|
|
clone[matchKey] = wrapImportantAndSkipCheck(value, _important);
|
|
});
|
|
} else if (matchValue.length === 1) {
|
|
// Handle like `marginBlockStart` => `marginTop`
|
|
clone[matchValue[0]] = wrapImportantAndSkipCheck(value, _important);
|
|
} else if (matchValue.length === 2) {
|
|
// Handle like `marginBlock` => `marginTop` & `marginBottom`
|
|
matchValue.forEach(function (matchKey, index) {
|
|
var _values$index;
|
|
clone[matchKey] = wrapImportantAndSkipCheck((_values$index = _values[index]) !== null && _values$index !== void 0 ? _values$index : _values[0], _important);
|
|
});
|
|
} else if (matchValue.length === 4) {
|
|
// Handle like `inset` => `top` & `right` & `bottom` & `left`
|
|
matchValue.forEach(function (matchKey, index) {
|
|
var _ref, _values$index2;
|
|
clone[matchKey] = wrapImportantAndSkipCheck((_ref = (_values$index2 = _values[index]) !== null && _values$index2 !== void 0 ? _values$index2 : _values[index - 2]) !== null && _ref !== void 0 ? _ref : _values[0], _important);
|
|
});
|
|
} else {
|
|
clone[key] = value;
|
|
}
|
|
} else {
|
|
clone[key] = value;
|
|
}
|
|
});
|
|
return clone;
|
|
}
|
|
};
|
|
export default transform; |