🐛[BUG] 开启 babel-plugin-antd-style 插件后内部 cx 生成的类名和导出的不一致

[pokerboard]

🐛 bug 描述

控制台输出：
cx(label): acss-17f3slo
styles.label: acss-1o3nxki-pages-Home-label

💻 复现代码

const useStyles = createStyles(({ css, cx }) => {
  const label = css`
    color: red;
  `;

  const box1 = css`
    &:hover {
      font-weight: 600;

      .${cx(label)} {
        color: green;
      }
    }
  `;

  const box2 = css`
    &:hover {
      font-weight: 600;

      .${cx(label)} {
        color: blue;
      }
    }
  `;

  console.log('cx(label):', cx(label));

  return {
    box1,
    box2,
    label,
  };
});

const Home: React.FC = () => {
  const { styles } = useStyles();

  console.log('styles.label:', styles.label);

  return (
    <>
      <div className={styles.box1}>
        <span className={styles.label}>box1-lable</span>
      </div>
      <div className={styles.box2}>
        <span className={styles.label}>box2-lable</span>
      </div>
    </>
  );
};

© 版本信息

• antd-style 版本: 3.4.3
• babel-plugin-antd-style 版本: 1.0.4

[Arvin Xu]

@chenshuai2144 这个要咋处理？

[陈帅]

我想想办法

[FrankFan]

@chenshuai2144 请问有解决办法了吗？ 遇到了同样的问题

[Arvin Xu]

@FrankFan 可能可以尝试下的方式：

const useStyles = createStyles(({ css, cx }) => {
+  const label = cx(css`
    color: red;
  `);



  const box2 = css`
    &:hover {
      font-weight: 600;

+      .${label} {
        color: blue;
      }
    }
  `;


  return {
    box1,
    box2,
    label,
  };
});

[pokerboard]

@arvinxx 虽然可以解决问题，但是用 cx 生成的类名都会缺少定位信息，这个插件根本就不能和 cx 搭配使用

[Arvin Xu]

用 cx 生成的类名都会缺少定位信息

直接用cx 生成的类名应该不会太多，虽然瘸了点但还是能用的。

babel 插件和 cx 的搭配问题，我们再研究研究。

[红]

有什么更新吗，遇到同样的问题了。