@nex-ui/system
Version:
A lightweight and performant styling library based on Emotion, focusing on component architecture and developer experience.
106 lines (103 loc) • 3.12 kB
JavaScript
import { mergeWith, isArray, isPlainObject, isString, every, memoize, isNumber } from '@nex-ui/utils';
import serialize from '@x1ngyu/serialize-javascript';
function pathToTokenName(path) {
return path.join('.');
}
function camelToKebab(str) {
return str.replace(/([A-Z])/g, (match)=>{
return `-${match.toLowerCase()}`;
});
}
function isPositiveFloatNumber(str) {
return /^\d+\.\d+$/.test(str);
}
function createCssVarName(prefix, path) {
return `--${prefix}-${path.map((k)=>{
if (isPositiveFloatNumber(k)) {
return k.split('.').join('-');
}
return camelToKebab(k);
}).join('-')}`;
}
function isResponsiveColor(value) {
return isPlainObject(value) && (value._light || value._dark || value._DEFAULT);
}
function isValidTokenValue(value) {
if (!isString(value) && !isNumber(value)) {
return false;
}
return true;
}
function isValidSemanticTokenValue(value) {
if (!isString(value) && !isNumber(value) && !isResponsiveColor(value)) {
return false;
}
return true;
}
function isValidTokenCategory(category) {
if (!isString(category)) {
return false;
}
switch(category){
case 'colors':
case 'fontFamilies':
case 'fontSizes':
case 'fontWeights':
case 'sizes':
case 'spaces':
case 'lineHeights':
case 'borders':
case 'radii':
case 'breakpoints':
case 'shadows':
case 'transitions':
case 'borderWidths':
case 'zIndexes':
return true;
default:
return false;
}
}
function isValidAliasValue(value) {
if (isString(value) || isArray(value) && every(value, isString)) {
return true;
}
return false;
}
function isValidBreakpointValue(value) {
if (isString(value) && parseInt(value, 10) >= 0) {
return true;
}
return false;
}
function memoizeFn(fn) {
return memoize(fn, (...args)=>serialize(args));
}
function extractTokenPlaceholders(value) {
const regex = /\{(.*?)\}/g;
const matches = value.matchAll(regex);
return [
...matches
];
}
// TODO 明确 CSS 合并规则
function mergeRecipeConfigs(...args) {
return mergeWith({}, ...args, (targetValue, srcValue, key)=>{
if (key === 'compoundVariants') {
if (targetValue === undefined) {
return srcValue;
}
if (isArray(targetValue) && isArray(srcValue)) {
return [
...targetValue,
...srcValue
];
}
return targetValue;
}
if (typeof targetValue !== typeof srcValue || isArray(targetValue) !== isArray(srcValue) || isPlainObject(targetValue) !== isPlainObject(srcValue)) {
return srcValue;
}
});
}
export { camelToKebab, createCssVarName, extractTokenPlaceholders, isResponsiveColor, isValidAliasValue, isValidBreakpointValue, isValidSemanticTokenValue, isValidTokenCategory, isValidTokenValue, memoizeFn, mergeRecipeConfigs, pathToTokenName };