diff --git a/components/app/__tests__/index.test.tsx b/components/app/__tests__/index.test.tsx index 6000db19a2..cd785522ca 100644 --- a/components/app/__tests__/index.test.tsx +++ b/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(); }); diff --git a/components/style/index.tsx b/components/style/index.tsx index 624ef2c11f..b79230410a 100644 --- a/components/style/index.tsx +++ b/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. diff --git a/components/theme/util/genStyleUtils.ts b/components/theme/util/genStyleUtils.ts index 6ce7af0413..a95724285f 100644 --- a/components/theme/util/genStyleUtils.ts +++ b/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 { genCommonStyle, genLinkStyle } from '../../style'; +import { ConfigContext, defaultIconPrefixCls } from '../../config-provider/context'; +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); - - // Generate style for icons - useResetIconStyle(iconPrefixCls, csp); - + const { csp } = useContext(ConfigContext); return csp ?? {}; }, - getResetStyles: (token) => [{ '&': genLinkStyle(token) }], + getResetStyles: (token, config) => [ + { '&': genLinkStyle(token) }, + genIconStyle(config?.prefix.iconPrefixCls ?? defaultIconPrefixCls), + ], getCommonStyle: genCommonStyle, getCompUnitless: (() => unitless) as GetCompUnitless, }); diff --git a/components/theme/util/useResetIconStyle.ts b/components/theme/util/useResetIconStyle.ts index d34569df80..43ec8d47b9 100644 --- a/components/theme/util/useResetIconStyle.ts +++ b/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', }, }, - () => [ - { - [`.${iconPrefixCls}`]: { - ...resetIcon(), - [`.${iconPrefixCls} .${iconPrefixCls}-icon`]: { - display: 'block', - }, - }, - }, - ], + () => [genIconStyle(iconPrefixCls)], ); };