`legacyLogicalPropertiesTransformer` 没有正确拼接 `calc()`

Airkro commented 1 year ago

calc(a + b) 的拼接缺少必要的空格。

Sider 内的折叠 Menu Icon 受到明显的影响，无法居中对齐：

相关问题：

Airkro commented 1 year ago

临时解决方案：

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(' - ');
        }
      }
    },
  },
];

susususutie commented 1 year ago

临时解决方案：

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(' - ');
}

ant-design / cssinjs

`legacyLogicalPropertiesTransformer` 没有正确拼接 `calc()` #96