2024-02-16 08:48:00 +00:00
|
|
|
import ObjectUtils from '../../utils/ObjectUtils';
|
|
|
|
|
|
|
|
export const getDeclaration = (property, value) => {
|
|
|
|
return [property]
|
|
|
|
.flat()
|
|
|
|
.map((prop) => ObjectUtils.css.getDeclaration(ObjectUtils.toKebabCase(prop), value))
|
|
|
|
.join('');
|
|
|
|
};
|
|
|
|
|
2024-02-16 14:34:35 +00:00
|
|
|
const importantRegex = /.*!$/;
|
|
|
|
|
2024-02-16 08:48:00 +00:00
|
|
|
export const token = {
|
|
|
|
spacing: (property, options) => {
|
|
|
|
return {
|
|
|
|
type: 'spacing',
|
|
|
|
property,
|
|
|
|
transform(value) {
|
2024-02-16 14:34:35 +00:00
|
|
|
return importantRegex.test(value) ? value + 'important' : value;
|
2024-02-16 08:48:00 +00:00
|
|
|
},
|
|
|
|
toString(value, options) {
|
|
|
|
return getDeclaration(property, this.transform(value));
|
|
|
|
}
|
|
|
|
};
|
|
|
|
},
|
|
|
|
sizing: (property) => {
|
|
|
|
return {
|
|
|
|
type: 'sizing',
|
|
|
|
property,
|
|
|
|
declaration: (value) => declaration(property, value)
|
|
|
|
};
|
|
|
|
},
|
|
|
|
prop: (property) => {
|
|
|
|
return {
|
|
|
|
property
|
|
|
|
};
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2024-02-16 14:34:35 +00:00
|
|
|
export const defineDeclarations = (data = {}) => {
|
|
|
|
return Object.entries(data).reduce((acc, [key, value]) => ((acc[key] = { key, ...value }), acc), {});
|
2024-02-16 08:48:00 +00:00
|
|
|
};
|
|
|
|
|
2024-02-16 14:34:35 +00:00
|
|
|
export const useDeclarations = (...args) => {
|
|
|
|
const declarations = Object.assign({}, ...args);
|
|
|
|
const keys = Object.keys(declarations);
|
2024-02-16 08:48:00 +00:00
|
|
|
const props = keys.reduce((acc, k) => ((acc[k] = undefined), acc), {});
|
|
|
|
|
|
|
|
return {
|
|
|
|
keys,
|
|
|
|
props,
|
2024-02-16 14:34:35 +00:00
|
|
|
declarations,
|
|
|
|
getStyleDeclarations(options) {},
|
|
|
|
filterP(_props) {
|
|
|
|
const __props = Object.entries(_props)
|
2024-02-16 08:48:00 +00:00
|
|
|
.filter(([key]) => keys.includes(key))
|
2024-02-16 14:34:35 +00:00
|
|
|
.reduce((acc, [k, v]) => ((acc[k] = v), acc), {});
|
|
|
|
const __ks = Object.keys(__props);
|
|
|
|
const __declarations = Object.entries(__props).reduce((acc, [key]) => ((acc[key] = declarations[key]), acc), {});
|
|
|
|
|
|
|
|
/*const declarations = props.reduce((acc, [key, value]) => {
|
2024-02-16 08:48:00 +00:00
|
|
|
if (ObjectUtils.isNotEmpty(value)) {
|
|
|
|
const rule = ObjectUtils.toKebabCase(key);
|
|
|
|
|
|
|
|
acc.push(rules[key].toString(ObjectUtils.css.getVariableValue(value, rule)));
|
|
|
|
}
|
|
|
|
|
|
|
|
return acc;
|
|
|
|
}, [])
|
2024-02-16 14:34:35 +00:00
|
|
|
.join('');*/
|
|
|
|
|
|
|
|
return {
|
|
|
|
keys: __ks,
|
|
|
|
props: __props,
|
|
|
|
declarations: __declarations,
|
|
|
|
getStyleDeclarations(options) {
|
|
|
|
return Object.entries(__declarations)
|
|
|
|
.reduce((acc, [, value]) => {
|
|
|
|
const { key, toString } = value;
|
|
|
|
|
|
|
|
const v = __props[key];
|
|
|
|
|
|
|
|
ObjectUtils.isNotEmpty(v) && acc.push(value.toString(v, options));
|
|
|
|
|
|
|
|
return acc;
|
|
|
|
}, [])
|
|
|
|
.join('');
|
|
|
|
}
|
|
|
|
};
|
2024-02-16 08:48:00 +00:00
|
|
|
}
|
|
|
|
};
|
|
|
|
};
|