Merge pull request #51897 from ant-design/fix/duplicate-style-tags

fix: the icon style is being created repeatedly

components/app/__tests__/index.test.tsx

@@ -202,10 +202,12 @@ describe('App', () => {
 
       expect(container.querySelector('.anticon')).toBeTruthy();
       const dynamicStyles = Array.from(document.querySelectorAll('style[data-css-hash]'));
+      // Self-contained .anticon style
+      const regex = /(?:^|\})\s*\.anticon\s*{[^}]*}/;
       expect(
         dynamicStyles.some((style) => {
           const { innerHTML } = style;
-          return innerHTML.startsWith('.anticon');
+          return regex.test(innerHTML);
         }),
       ).toBeTruthy();
     });

components/style/index.tsx

@@ -1,6 +1,5 @@
 import { unit } from '@ant-design/cssinjs';
 import type { CSSObject } from '@ant-design/cssinjs';
-
 import type { AliasToken } from '../theme/internal';
 
 export const textEllipsis: CSSObject = {
@@ -144,6 +143,15 @@ export const genFocusStyle = (token: AliasToken): CSSObject => ({
   },
 });
 
+export const genIconStyle = (iconPrefixCls: string): CSSObject => ({
+  [`.${iconPrefixCls}`]: {
+    ...resetIcon(),
+    [`.${iconPrefixCls} .${iconPrefixCls}-icon`]: {
+      display: 'block',
+    },
+  },
+});
+
 export const operationUnit = (token: AliasToken): CSSObject => ({
   // FIXME: This use link but is a operation unit. Seems should be a colorPrimary.
   // And Typography use this to generate link style which should not do this.

components/theme/util/genStyleUtils.ts

@@ -2,11 +2,10 @@ import { useContext } from 'react';
 import { genStyleUtils } from '@ant-design/cssinjs-utils';
 import type { GetCompUnitless } from '@ant-design/cssinjs-utils/es/util/genStyleUtils';
 
-import { ConfigContext } from '../../config-provider/context';
+import { ConfigContext, defaultIconPrefixCls } from '../../config-provider/context';
-import { genCommonStyle, genLinkStyle } from '../../style';
+import { genCommonStyle, genLinkStyle, genIconStyle } from '../../style';
 import type { AliasToken, ComponentTokenMap, SeedToken } from '../interface';
 import useLocalToken, { unitless } from '../useToken';
-import useResetIconStyle from './useResetIconStyle';
 
 export const { genStyleHooks, genComponentStyleHook, genSubStyleComponent } = genStyleUtils<
   ComponentTokenMap,
@@ -28,14 +27,13 @@ export const { genStyleHooks, genComponentStyleHook, genSubStyleComponent } = ge
     return { theme, realToken, hashId, token, cssVar };
   },
   useCSP: () => {
-    const { csp, iconPrefixCls } = useContext(ConfigContext);
+    const { csp } = useContext(ConfigContext);
-
-    // Generate style for icons
-    useResetIconStyle(iconPrefixCls, csp);
-
     return csp ?? {};
   },
-  getResetStyles: (token) => [{ '&': genLinkStyle(token) }],
+  getResetStyles: (token, config) => [
+    { '&': genLinkStyle(token) },
+    genIconStyle(config?.prefix.iconPrefixCls ?? defaultIconPrefixCls),
+  ],
   getCommonStyle: genCommonStyle,
   getCompUnitless: (() => unitless) as GetCompUnitless<ComponentTokenMap, AliasToken>,
 });

components/theme/util/useResetIconStyle.ts

@@ -1,7 +1,7 @@
 import { useStyleRegister } from '@ant-design/cssinjs';
 
 import type { CSPConfig } from '../../config-provider';
-import { resetIcon } from '../../style';
+import { genIconStyle } from '../../style';
 import useToken from '../useToken';
 
 const useResetIconStyle = (iconPrefixCls: string, csp?: CSPConfig) => {
@@ -19,16 +19,7 @@ const useResetIconStyle = (iconPrefixCls: string, csp?: CSPConfig) => {
         name: 'antd',
       },
     },
-    () => [
+    () => [genIconStyle(iconPrefixCls)],
-      {
-        [`.${iconPrefixCls}`]: {
-          ...resetIcon(),
-          [`.${iconPrefixCls} .${iconPrefixCls}-icon`]: {
-            display: 'block',
-          },
-        },
-      },
-    ],
   );
 };