@platform/css
Version:
Helpers for working with inline CSS.
299 lines (298 loc) • 9.97 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.format = exports.transform = exports.formatPositionEdges = exports.toPositionEdges = exports.image = exports.MEDIA_QUERY_RETINA = void 0;
var tslib_1 = require("tslib");
var common_1 = require("../common");
var util = require("./util");
tslib_1.__exportStar(require("./util"), exports);
exports.MEDIA_QUERY_RETINA = "@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)";
var image = function (image1x, image2x, options) {
if (options === void 0) { options = { width: 10, height: 10 }; }
if (!image1x) {
throw new Error('Must have at least a 1x image.');
}
var width = options.width, height = options.height;
var result = {
width: width,
height: height,
backgroundImage: "url(".concat(image1x, ")"),
backgroundSize: "".concat(width, "px ").concat(height, "px"),
backgroundRepeat: 'no-repeat',
};
if (image2x) {
result[exports.MEDIA_QUERY_RETINA] = {
backgroundImage: "url(".concat(image2x, ")"),
};
}
return result;
};
exports.image = image;
var mergeAndReplace = function (key, value, target) {
Object.assign(target, value);
delete target[key];
return target;
};
var formatImage = function (key, value, target) {
var image1x = value[0], image2x = value[1], width = value[2], height = value[3];
if (typeof image2x === 'number') {
height = width;
width = image2x;
image2x = undefined;
}
var options = {
width: width,
height: height,
};
var style = (0, exports.image)(image1x, image2x, options);
mergeAndReplace(key, style, target);
};
var toPositionEdges = function (key, value) {
if (value === void 0) { value = undefined; }
var position = key.toLowerCase();
var res = util.toPosition(position, value);
var edges = ['top', 'right', 'bottom', 'left'];
var isEmpty = edges.every(function (edge) { return res[edge] === undefined; });
return isEmpty ? undefined : res;
};
exports.toPositionEdges = toPositionEdges;
var formatPositionEdges = function (key, target) {
var styles = (0, exports.toPositionEdges)(key, target[key]);
mergeAndReplace(key, styles, target);
};
exports.formatPositionEdges = formatPositionEdges;
var formatAbsoluteCenter = function (key, value, target) {
if (value === true) {
value = 'xy';
}
if (value === false || value === undefined || value === null) {
return;
}
var styles = {
position: 'absolute',
left: target.left,
top: target.top,
transform: '',
};
var stringValue = value.toString().trim().toLowerCase();
if (stringValue.includes('x')) {
styles.left = '50%';
}
if (stringValue.includes('y')) {
styles.top = '50%';
}
var transform;
switch (value) {
case 'yx':
case 'xy':
transform = 'translate(-50%, -50%)';
break;
case 'x':
transform = 'translateX(-50%)';
break;
case 'y':
transform = 'translateY(-50%)';
break;
default:
throw new Error("AbsoluteCenter value '".concat(value, "' not supported."));
}
styles.transform = "".concat(target.transform || '', " ").concat(transform).trim();
mergeAndReplace(key, styles, target);
};
function formatSpacingPlane(plane, prefix, key, value, target) {
var styles = {};
var edges = util.toEdges(value);
if (edges && plane.includes('x')) {
styles["".concat(prefix, "Left")] = edges.left;
styles["".concat(prefix, "Right")] = edges.right;
}
if (edges && plane.includes('y')) {
styles["".concat(prefix, "Top")] = edges.top;
styles["".concat(prefix, "Bottom")] = edges.bottom;
}
mergeAndReplace(key, styles, target);
}
function formatScroll(key, value, target) {
if (value === true) {
var styles = {
overflowX: 'hidden',
overflowY: 'scroll',
WebkitOverflowScrolling: 'touch',
};
mergeAndReplace(key, styles, target);
}
if (value === false) {
var styles = {
overflow: 'hidden',
};
mergeAndReplace(key, styles, target);
}
}
function formatSize(key, value, target) {
if (typeof value === 'number' || typeof value === 'string') {
var styles = { width: value, height: value };
mergeAndReplace(key, styles, target);
}
}
var AlignMap = {
center: 'center',
left: 'flex-start',
top: 'flex-start',
start: 'flex-start',
right: 'flex-end',
bottom: 'flex-end',
end: 'flex-end',
full: 'stretch',
stretch: 'stretch',
baseline: 'baseline',
};
function convertCrossAlignToFlex(token) {
return AlignMap[token] || undefined;
}
var MainAlignMap = {
center: 'center',
left: 'flex-start',
top: 'flex-start',
start: 'flex-start',
right: 'flex-end',
bottom: 'flex-end',
end: 'flex-end',
spaceBetween: 'space-between',
spaceAround: 'space-around',
spaceEvenly: 'space-evenly',
};
function convertMainAlignToFlex(token) {
return MainAlignMap[token] || undefined;
}
function formatFlexPosition(key, value, target) {
var direction;
var mainAlignment;
var crossAlignment;
var tokens = value.split('-').map(function (token) { return token.trim(); });
tokens.map(function (token) {
var tokenIsOneOf = function (options) { return options.includes(token); };
if (direction == null && tokenIsOneOf(['horizontal', 'vertical', 'x', 'y'])) {
if (token === 'x')
token = 'horizontal';
if (token === 'y')
token = 'vertical';
direction = token === 'vertical' ? 'column' : 'row';
return;
}
if (tokenIsOneOf(['center', 'start', 'end', 'left', 'right', 'top', 'bottom', 'full', 'baseline'])) {
if (crossAlignment == null) {
if (direction == null && tokenIsOneOf(['left', 'right'])) {
direction = 'column';
}
if (direction == null && tokenIsOneOf(['top', 'bottom'])) {
direction = 'row';
}
crossAlignment = convertCrossAlignToFlex(token);
return;
}
mainAlignment = convertMainAlignToFlex(token);
return;
}
if (tokenIsOneOf(['spaceAround', 'spaceBetween', 'spaceEvenly'])) {
mainAlignment = convertMainAlignToFlex(token);
return;
}
});
var styles = {
display: 'flex',
flexDirection: direction,
alignItems: crossAlignment,
justifyContent: mainAlignment,
};
mergeAndReplace(key, styles, target);
}
var transform = function (style) {
if (style === void 0) { style = {}; }
if (style == null) {
return {};
}
if (style === false) {
return {};
}
if (typeof style !== 'object') {
return style;
}
Object.keys(style).forEach(function (key) {
var value = style[key];
if (value === false || value === null || value === undefined) {
delete style[key];
}
else if (common_1.valueUtil.isPlainObject(value)) {
style[key] = (0, exports.transform)(value);
}
else {
switch (key) {
case 'Image':
formatImage(key, value, style);
break;
case 'Absolute':
(0, exports.formatPositionEdges)(key, style);
break;
case 'Fixed':
(0, exports.formatPositionEdges)(key, style);
break;
case 'AbsoluteCenter':
formatAbsoluteCenter(key, value, style);
break;
case 'Margin':
formatSpacingPlane('xy', 'margin', key, value, style);
break;
case 'MarginX':
formatSpacingPlane('x', 'margin', key, value, style);
break;
case 'MarginY':
formatSpacingPlane('y', 'margin', key, value, style);
break;
case 'Padding':
formatSpacingPlane('xy', 'padding', key, value, style);
break;
case 'PaddingX':
formatSpacingPlane('x', 'padding', key, value, style);
break;
case 'PaddingY':
formatSpacingPlane('y', 'padding', key, value, style);
break;
case 'Flex':
formatFlexPosition(key, value, style);
break;
case 'Scroll':
formatScroll(key, value, style);
break;
case 'Size':
formatSize(key, value, style);
break;
default:
}
}
});
return style;
};
exports.transform = transform;
var isJss = function (input) {
return typeof input === 'object' && typeof input.hash === 'number' && Array.isArray(input.values);
};
var flattenJss = function (input) {
var output = [];
input.forEach(function (item) {
if (isJss(item)) {
flattenJss(item.values).forEach(function (child) { return output.push(child); });
}
else {
output.push((0, exports.transform)(item));
}
});
return output;
};
var formatCss = function () {
var styles = [];
for (var _i = 0; _i < arguments.length; _i++) {
styles[_i] = arguments[_i];
}
return common_1.jss.css.apply(common_1.jss, flattenJss(styles));
};
formatCss.image = exports.image;
exports.format = formatCss;