jobiqo-cl
Version:
[](https://circleci.com/gh/jobiqo/jobiqo-cl)
202 lines (175 loc) • 6.29 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var _scales;
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
// based on https://github.com/developit/dlv
var get = function get(obj, key, def, p, undef) {
key = key && key.split ? key.split('.') : [key];
for (p = 0; p < key.length; p++) {
obj = obj ? obj[key[p]] : undef;
}
return obj === undef ? def : obj;
};
var defaultBreakpoints = [40, 52, 64].map(function (n) {
return n + 'em';
});
var defaultTheme = {
space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72]
};
var aliases = {
bg: 'backgroundColor',
m: 'margin',
mt: 'marginTop',
mr: 'marginRight',
mb: 'marginBottom',
ml: 'marginLeft',
mx: 'marginX',
my: 'marginY',
p: 'padding',
pt: 'paddingTop',
pr: 'paddingRight',
pb: 'paddingBottom',
pl: 'paddingLeft',
px: 'paddingX',
py: 'paddingY'
};
var multiples = {
marginX: ['marginLeft', 'marginRight'],
marginY: ['marginTop', 'marginBottom'],
paddingX: ['paddingLeft', 'paddingRight'],
paddingY: ['paddingTop', 'paddingBottom'],
size: ['width', 'height']
};
var scales = (_scales = {
color: 'colors',
backgroundColor: 'colors',
borderColor: 'colors',
margin: 'space',
marginTop: 'space',
marginRight: 'space',
marginBottom: 'space',
marginLeft: 'space',
marginX: 'space',
marginY: 'space',
padding: 'space',
paddingTop: 'space',
paddingRight: 'space',
paddingBottom: 'space',
paddingLeft: 'space',
paddingX: 'space',
paddingY: 'space',
top: 'space',
right: 'space',
bottom: 'space',
left: 'space',
gridGap: 'space',
gridColumnGap: 'space',
gridRowGap: 'space',
gap: 'space',
columnGap: 'space',
rowGap: 'space',
fontFamily: 'fonts',
fontSize: 'fontSizes',
fontWeight: 'fontWeights',
lineHeight: 'lineHeights',
letterSpacing: 'letterSpacings',
border: 'borders',
borderTop: 'borders',
borderRight: 'borders',
borderBottom: 'borders',
borderLeft: 'borders',
borderWidth: 'borderWidths',
borderStyle: 'borderStyles',
borderRadius: 'radii',
borderTopRightRadius: 'radii',
borderTopLeftRadius: 'radii',
borderBottomRightRadius: 'radii',
borderBottomLeftRadius: 'radii',
borderTopWidth: 'borderWidths',
borderTopColor: 'colors',
borderTopStyle: 'borderStyles'
}, _scales["borderTopLeftRadius"] = 'radii', _scales["borderTopRightRadius"] = 'radii', _scales.borderBottomWidth = 'borderWidths', _scales.borderBottomColor = 'colors', _scales.borderBottomStyle = 'borderStyles', _scales["borderBottomLeftRadius"] = 'radii', _scales["borderBottomRightRadius"] = 'radii', _scales.borderLeftWidth = 'borderWidths', _scales.borderLeftColor = 'colors', _scales.borderLeftStyle = 'borderStyles', _scales.borderRightWidth = 'borderWidths', _scales.borderRightColor = 'colors', _scales.borderRightStyle = 'borderStyles', _scales.boxShadow = 'shadows', _scales.textShadow = 'shadows', _scales.zIndex = 'zIndices', _scales.width = 'sizes', _scales.minWidth = 'sizes', _scales.maxWidth = 'sizes', _scales.height = 'sizes', _scales.minHeight = 'sizes', _scales.maxHeight = 'sizes', _scales.flexBasis = 'sizes', _scales.size = 'sizes', _scales.fill = 'colors', _scales.stroke = 'colors', _scales);
var positiveOrNegative = function positiveOrNegative(scale, value) {
if (typeof value !== 'number' || value >= 0) {
return get(scale, value, value);
}
var absolute = Math.abs(value);
var n = get(scale, absolute, absolute);
if (typeof n === 'string') return '-' + n;
return n * -1;
};
var transforms = ['margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY', 'top', 'bottom', 'left', 'right'].reduce(function (acc, curr) {
var _extends2;
return _extends({}, acc, (_extends2 = {}, _extends2[curr] = positiveOrNegative, _extends2));
}, {});
var responsive = function responsive(styles) {
return function (theme) {
var next = {};
var breakpoints = get(theme, 'breakpoints', defaultBreakpoints);
var mediaQueries = [null].concat(breakpoints.map(function (n) {
return "@media screen and (min-width: " + n + ")";
}));
for (var key in styles) {
var value = typeof styles[key] === 'function' ? styles[key](theme) : styles[key];
if (value == null) continue;
if (!Array.isArray(value)) {
next[key] = value;
continue;
}
for (var i = 0; i < value.slice(0, mediaQueries.length).length; i++) {
var media = mediaQueries[i];
if (value[i] == null) continue;
if (!media) {
next[key] = value[i];
continue;
}
next[media] = next[media] || {};
next[media][key] = value[i];
}
}
return next;
};
};
var css = function css(args) {
return function (props) {
if (props === void 0) {
props = {};
}
var theme = _extends({}, defaultTheme, {}, props.theme || props);
var result = {};
var obj = typeof args === 'function' ? args(theme) : args;
var styles = responsive(obj)(theme);
for (var key in styles) {
var x = styles[key];
var val = typeof x === 'function' ? x(theme) : x;
if (key === 'variant') {
var variant = css(get(theme, val))(theme);
result = _extends({}, result, {}, variant);
continue;
}
if (val && typeof val === 'object') {
result[key] = css(val)(theme);
continue;
}
var prop = get(aliases, key, key);
var scaleName = get(scales, prop);
var scale = get(theme, scaleName, get(theme, prop, {}));
var transform = get(transforms, prop, get);
var value = transform(scale, val, val);
if (multiples[prop]) {
var dirs = multiples[prop];
for (var i = 0; i < dirs.length; i++) {
result[dirs[i]] = value;
}
} else {
result[prop] = value;
}
}
return result;
};
};
exports.css = css;
exports.default = css;
exports.get = get;
exports.responsive = responsive;