Issue with CSS Export Using "<StyleProvider hashPriority='high'>" in Antd5 Next.js

[diegoleft]

I am currently using the Antd5 with Next.js example repository available at https://github.com/ant-design/create-next-app-antd for my project.

I have added the <StyleProvider hashPriority="high"> component in order to maintain compatibility with older browsers, as recommended in the Antd documentation and the unit tests within this repository. According to these sources, using this configuration should result in CSS export without the :where tag.

However, even after implementing this change, I am still observing that the CSS is being exported with the :where tag.

I would greatly appreciate any guidance

[paul-vd]

It seems like this is quite outdated or something, even the style overrides do not work, but your issue is here: https://github.com/ant-design/static-style-extract/blob/feat/initial/src/index.tsx#L49

I ended up re-implementing this myself which fixed it.

export const extractCssStyles = () => {
  const blackList: string[] = [
    "ConfigProvider",
    "Drawer",
    "Grid",
    "Modal",
    "Popconfirm",
    "Popover",
    "Tooltip",
    "Tour",
  ];

  const defaultNode = (
    <>
      {Object.keys(antd)
        .filter(
          (name) =>
            !blackList.includes(name) && name[0] === name[0].toUpperCase()
        )
        .map((compName) => {
          const Comp = antd[compName];
          if (compName === "Dropdown") {
            return (
              <Comp key={compName} menu={{ items: [] }}>
                <div />
              </Comp>
            );
          }
          return <Comp key={compName} />;
        })}
    </>
  );

  const cache = createCache();
  renderToString(
    <StyleProvider cache={cache} hashPriority="high">
      <ConfigProvider theme={themeDark}>{defaultNode}</ConfigProvider>
    </StyleProvider>
  );
  return extractStyle(cache, true);
};