@chakra-ui/styled-system
Version:
Style function for css-in-js building component libraries
185 lines (141 loc) • 6.63 kB
JavaScript
;
exports.__esModule = true;
exports.getCss = getCss;
exports.css = void 0;
var _utils = require("@chakra-ui/utils");
var _pseudos = require("./pseudos");
var _system = require("./system");
var _expandResponsive = require("./utils/expand-responsive");
function _createForOfIteratorHelperLoose(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; return function () { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } it = o[Symbol.iterator](); return it.next.bind(it); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
var isCSSVariableTokenValue = function isCSSVariableTokenValue(key, value) {
return key.startsWith("--") && (0, _utils.isString)(value) && !(0, _utils.isCssVar)(value);
};
var resolveTokenValue = function resolveTokenValue(theme, value) {
var _ref, _getVar2;
if (value == null) return value;
var getVar = function getVar(val) {
var _theme$__cssMap, _theme$__cssMap$val;
return (_theme$__cssMap = theme.__cssMap) == null ? void 0 : (_theme$__cssMap$val = _theme$__cssMap[val]) == null ? void 0 : _theme$__cssMap$val.varRef;
};
var getValue = function getValue(val) {
var _getVar;
return (_getVar = getVar(val)) != null ? _getVar : val;
};
var valueSplit = value.split(",").map(function (v) {
return v.trim();
});
var tokenValue = valueSplit[0],
fallbackValue = valueSplit[1];
value = (_ref = (_getVar2 = getVar(tokenValue)) != null ? _getVar2 : getValue(fallbackValue)) != null ? _ref : getValue(value);
return value;
};
function getCss(options) {
var _options$configs = options.configs,
configs = _options$configs === void 0 ? {} : _options$configs,
_options$pseudos = options.pseudos,
pseudos = _options$pseudos === void 0 ? {} : _options$pseudos,
theme = options.theme;
var css = function css(stylesOrFn, nested) {
if (nested === void 0) {
nested = false;
}
var _styles = (0, _utils.runIfFn)(stylesOrFn, theme);
var styles = (0, _expandResponsive.expandResponsive)(_styles)(theme);
var computedStyles = {};
for (var key in styles) {
var _config$transform, _config, _config2, _config3, _config4;
var valueOrFn = styles[key];
/**
* allows the user to pass functional values
* boxShadow: theme => `0 2px 2px ${theme.colors.red}`
*/
var value = (0, _utils.runIfFn)(valueOrFn, theme);
/**
* converts pseudo shorthands to valid selector
* "_hover" => "&:hover"
*/
if (key in pseudos) {
key = pseudos[key];
}
/**
* allows the user to use theme tokens in css vars
* { --banner-height: "sizes.md" } => { --banner-height: "var(--chakra-sizes-md)" }
*
* You can also provide fallback values
* { --banner-height: "sizes.no-exist, 40px" } => { --banner-height: "40px" }
*/
if (isCSSVariableTokenValue(key, value)) {
value = resolveTokenValue(theme, value);
}
var config = configs[key];
if (config === true) {
config = {
property: key
};
}
if ((0, _utils.isObject)(value)) {
var _computedStyles$key;
computedStyles[key] = (_computedStyles$key = computedStyles[key]) != null ? _computedStyles$key : {};
computedStyles[key] = (0, _utils.mergeWith)({}, computedStyles[key], css(value, true));
continue;
}
var rawValue = (_config$transform = (_config = config) == null ? void 0 : _config.transform == null ? void 0 : _config.transform(value, theme, _styles)) != null ? _config$transform : value;
/**
* Used for `layerStyle`, `textStyle` and `apply`. After getting the
* styles in the theme, we need to process them since they might
* contain theme tokens.
*
* `processResult` is the config property we pass to `layerStyle`, `textStyle` and `apply`
*/
rawValue = (_config2 = config) != null && _config2.processResult ? css(rawValue, true) : rawValue;
/**
* allows us define css properties for RTL and LTR.
*
* const marginStart = {
* property: theme => theme.direction === "rtl" ? "marginRight": "marginLeft",
* }
*/
var configProperty = (0, _utils.runIfFn)((_config3 = config) == null ? void 0 : _config3.property, theme);
if (!nested && (_config4 = config) != null && _config4["static"]) {
var staticStyles = (0, _utils.runIfFn)(config["static"], theme);
computedStyles = (0, _utils.mergeWith)({}, computedStyles, staticStyles);
}
if (configProperty && Array.isArray(configProperty)) {
for (var _iterator = _createForOfIteratorHelperLoose(configProperty), _step; !(_step = _iterator()).done;) {
var property = _step.value;
computedStyles[property] = rawValue;
}
continue;
}
if (configProperty) {
if (configProperty === "&" && (0, _utils.isObject)(rawValue)) {
computedStyles = (0, _utils.mergeWith)({}, computedStyles, rawValue);
} else {
computedStyles[configProperty] = rawValue;
}
continue;
}
if ((0, _utils.isObject)(rawValue)) {
computedStyles = (0, _utils.mergeWith)({}, computedStyles, rawValue);
continue;
}
computedStyles[key] = rawValue;
}
return computedStyles;
};
return css;
}
var css = function css(styles) {
return function (theme) {
var cssFn = getCss({
theme: theme,
pseudos: _pseudos.pseudoSelectors,
configs: _system.systemProps
});
return cssFn(styles);
};
};
exports.css = css;
//# sourceMappingURL=css.js.map