cssinjs
cssinjs copied to clipboard
`legacyLogicalPropertiesTransformer` 没有正确拼接 `calc()`
calc(a + b) 的拼接缺少必要的空格。
Sider 内的折叠 Menu Icon 受到明显的影响,无法居中对齐:

相关问题:
- https://github.com/ant-design/ant-design/issues/40986
- https://github.com/ant-design/cssinjs/issues/92
临时解决方案:
const transformers = [
legacyLogicalPropertiesTransformer,
{
visit(cssObj) {
for (const item of Object.values(cssObj)) {
if (typeof item.value === 'string' && item.value === 'calc(50%-14px)') {
item.value = item.value.split('-').join(' - ');
}
}
},
},
];
临时解决方案:
const transformers = [ legacyLogicalPropertiesTransformer, { visit(cssObj) { for (const item of Object.values(cssObj)) { if (typeof item.value === 'string' && item.value === 'calc(50%-14px)') { item.value = item.value.split('-').join(' - '); } } }, }, ];
这里14px是不固定的, 我改成用正则了
if (
item &&
typeof item === 'object' &&
value' in item &&
typeof item.value === 'string' &&
/calc\(50%-\d+px\)/.test(item.value)
) {
item.value = item.value.split('-').join(' - ');
}