@chakra-ui/react
Version:
Responsive and accessible React UI components built with React and Emotion
73 lines (69 loc) • 2.39 kB
JavaScript
;
;
var compact = require('../utils/compact.cjs');
var is = require('../utils/is.cjs');
var memo = require('../utils/memo.cjs');
var merge = require('../utils/merge.cjs');
var walkObject = require('../utils/walk-object.cjs');
var singleton = require('./singleton.cjs');
var sortAtRules = require('./sort-at-rules.cjs');
const importantRegex = /\s*!(important)?/i;
const isImportant = memo.memo(
(v) => is.isString(v) ? importantRegex.test(v) : false
);
const withoutImportant = memo.memo(
(v) => is.isString(v) ? v.replace(importantRegex, "").trim() : v
);
function createCssFn(context) {
const { transform, conditions, normalize } = context;
const mergeFn = mergeCss(context);
return memo.memo(function cssFn(...styleArgs) {
const styles = mergeFn(...styleArgs);
const normalized = normalize(styles);
const result = singleton.createEmptyObject();
walkObject.walkObject(normalized, (value, paths) => {
if (value == null) return;
const [prop, ...selectors] = conditions.sort(paths).map(conditions.resolve);
const important = isImportant(value);
if (important) {
value = withoutImportant(value);
}
let transformed = transform(prop, value) ?? singleton.EMPTY_OBJECT;
transformed = walkObject.walkObject(
transformed,
(v) => is.isString(v) && important ? `${v} !important` : v,
{ getKey: (prop2) => conditions.expandAtRule(prop2) }
);
mergeByPath(result, selectors.flat(), transformed);
});
return sortAtRules.sortAtRules(result);
});
}
function mergeByPath(target, paths, value) {
let acc = target;
for (const path of paths) {
if (!path) continue;
if (!acc[path]) acc[path] = singleton.createEmptyObject();
acc = acc[path];
}
merge.mergeWith(acc, value);
}
function compactFn(...styles) {
return styles.filter((style) => {
if (!is.isObject(style)) return false;
const compacted = compact.compact(style);
const keys = Object.keys(compacted);
return keys.length > 0;
});
}
function mergeCss(ctx) {
function resolve(styles) {
const comp = compactFn(...styles);
if (comp.length === 1) return comp;
return comp.map((style) => ctx.normalize(style));
}
return memo.memo(function mergeFn(...styles) {
return merge.mergeWith({}, ...resolve(styles));
});
}
exports.createCssFn = createCssFn;