cssinjs icon indicating copy to clipboard operation
cssinjs copied to clipboard

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

Open Airkro opened this issue 2 years ago • 2 comments

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

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

image image

相关问题:

  • https://github.com/ant-design/ant-design/issues/40986
  • https://github.com/ant-design/cssinjs/issues/92

Airkro avatar Mar 07 '23 02:03 Airkro

临时解决方案:

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

Airkro avatar Mar 08 '23 06:03 Airkro

临时解决方案:

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

susususutie avatar Apr 11 '23 03:04 susususutie