From db551189b747c20b4a0a41b34ae86f5e3b42a714 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=F0=9F=8F=8E=EF=B8=8F=20Yumo?= Date: Wed, 4 Dec 2024 21:02:22 +0800 Subject: [PATCH 1/7] fix: useResetIconStyle is being called repeatedly --- components/theme/util/genStyleUtils.ts | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/components/theme/util/genStyleUtils.ts b/components/theme/util/genStyleUtils.ts index 6ce7af0413..df21460538 100644 --- a/components/theme/util/genStyleUtils.ts +++ b/components/theme/util/genStyleUtils.ts @@ -6,7 +6,6 @@ import { ConfigContext } from '../../config-provider/context'; import { genCommonStyle, genLinkStyle } 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,11 +27,7 @@ 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) }], From 8a82e55197cdee8e2b9bdad15366dba351a9aa1d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=F0=9F=8F=8E=EF=B8=8F=20Yumo?= Date: Fri, 6 Dec 2024 01:24:12 +0800 Subject: [PATCH 2/7] refactor: fixed the issue of icon styles being duplicated. --- components/theme/util/genStyleUtils.ts | 3 ++- components/theme/util/useResetIconStyle.ts | 25 +++++++++++----------- package.json | 2 +- 3 files changed, 16 insertions(+), 14 deletions(-) diff --git a/components/theme/util/genStyleUtils.ts b/components/theme/util/genStyleUtils.ts index df21460538..4d92365e75 100644 --- a/components/theme/util/genStyleUtils.ts +++ b/components/theme/util/genStyleUtils.ts @@ -6,6 +6,7 @@ import { ConfigContext } from '../../config-provider/context'; import { genCommonStyle, genLinkStyle } from '../../style'; import type { AliasToken, ComponentTokenMap, SeedToken } from '../interface'; import useLocalToken, { unitless } from '../useToken'; +import { genIconStyle } from './useResetIconStyle'; export const { genStyleHooks, genComponentStyleHook, genSubStyleComponent } = genStyleUtils< ComponentTokenMap, @@ -30,7 +31,7 @@ export const { genStyleHooks, genComponentStyleHook, genSubStyleComponent } = ge const { csp } = useContext(ConfigContext); return csp ?? {}; }, - getResetStyles: (token) => [{ '&': genLinkStyle(token) }], + getResetStyles: (token) => [{ '&': genLinkStyle(token) }, genIconStyle()], getCommonStyle: genCommonStyle, getCompUnitless: (() => unitless) as GetCompUnitless, }); diff --git a/components/theme/util/useResetIconStyle.ts b/components/theme/util/useResetIconStyle.ts index d34569df80..56eae028cf 100644 --- a/components/theme/util/useResetIconStyle.ts +++ b/components/theme/util/useResetIconStyle.ts @@ -1,34 +1,35 @@ import { useStyleRegister } from '@ant-design/cssinjs'; +import type { CSSObject } from '@ant-design/cssinjs'; import type { CSPConfig } from '../../config-provider'; import { resetIcon } from '../../style'; import useToken from '../useToken'; +export const genIconStyle = (iconPrefixCls = 'anticon'): CSSObject => ({ + [`.${iconPrefixCls}`]: { + ...resetIcon(), + [`.${iconPrefixCls} .${iconPrefixCls}-icon`]: { + display: 'block', + }, + }, +}); + const useResetIconStyle = (iconPrefixCls: string, csp?: CSPConfig) => { - const [theme, token] = useToken(); + const [theme, token, hashId] = useToken(); // Generate style for icons return useStyleRegister( { theme, token, - hashId: '', + hashId, path: ['ant-design-icons', iconPrefixCls], nonce: () => csp?.nonce!, layer: { name: 'antd', }, }, - () => [ - { - [`.${iconPrefixCls}`]: { - ...resetIcon(), - [`.${iconPrefixCls} .${iconPrefixCls}-icon`]: { - display: 'block', - }, - }, - }, - ], + () => [genIconStyle(iconPrefixCls)], ); }; diff --git a/package.json b/package.json index c78f032338..6c80e44cba 100644 --- a/package.json +++ b/package.json @@ -107,7 +107,7 @@ "dependencies": { "@ant-design/colors": "^7.1.0", "@ant-design/cssinjs": "^1.21.1", - "@ant-design/cssinjs-utils": "^1.1.1", + "@ant-design/cssinjs-utils": "^1.1.3", "@ant-design/icons": "^5.5.2", "@ant-design/react-slick": "~1.1.2", "@babel/runtime": "^7.25.7", From f9301952f288a1199e220f67c14a9e5837b1c5d3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=F0=9F=8F=8E=EF=B8=8F=20Yumo?= Date: Fri, 6 Dec 2024 01:30:34 +0800 Subject: [PATCH 3/7] refactor: use defaultIconPrefixCls instead of string --- components/theme/util/useResetIconStyle.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/components/theme/util/useResetIconStyle.ts b/components/theme/util/useResetIconStyle.ts index 56eae028cf..237f62a41a 100644 --- a/components/theme/util/useResetIconStyle.ts +++ b/components/theme/util/useResetIconStyle.ts @@ -1,11 +1,12 @@ import { useStyleRegister } from '@ant-design/cssinjs'; import type { CSSObject } from '@ant-design/cssinjs'; +import { defaultIconPrefixCls } from '../../config-provider'; import type { CSPConfig } from '../../config-provider'; import { resetIcon } from '../../style'; import useToken from '../useToken'; -export const genIconStyle = (iconPrefixCls = 'anticon'): CSSObject => ({ +export const genIconStyle = (iconPrefixCls = defaultIconPrefixCls): CSSObject => ({ [`.${iconPrefixCls}`]: { ...resetIcon(), [`.${iconPrefixCls} .${iconPrefixCls}-icon`]: { From 6ee4ea5b898f6adf09bf33b3666057453c504f32 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=F0=9F=8F=8E=EF=B8=8F=20Yumo?= Date: Fri, 6 Dec 2024 01:31:54 +0800 Subject: [PATCH 4/7] chore: reverted unnecessary changes. --- components/theme/util/useResetIconStyle.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/theme/util/useResetIconStyle.ts b/components/theme/util/useResetIconStyle.ts index 237f62a41a..96f3b03f96 100644 --- a/components/theme/util/useResetIconStyle.ts +++ b/components/theme/util/useResetIconStyle.ts @@ -16,14 +16,14 @@ export const genIconStyle = (iconPrefixCls = defaultIconPrefixCls): CSSObject => }); const useResetIconStyle = (iconPrefixCls: string, csp?: CSPConfig) => { - const [theme, token, hashId] = useToken(); + const [theme, token] = useToken(); // Generate style for icons return useStyleRegister( { theme, token, - hashId, + hashId: '', path: ['ant-design-icons', iconPrefixCls], nonce: () => csp?.nonce!, layer: { From 807cca1997af71f07702527de60446b223a21ccd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=F0=9F=8F=8E=EF=B8=8F=20Yumo?= Date: Fri, 6 Dec 2024 14:13:34 +0800 Subject: [PATCH 5/7] chore: fix circular dependency --- components/style/index.tsx | 12 +++++++++++- components/theme/util/genStyleUtils.ts | 3 +-- components/theme/util/useResetIconStyle.ts | 13 +------------ 3 files changed, 13 insertions(+), 15 deletions(-) diff --git a/components/style/index.tsx b/components/style/index.tsx index 624ef2c11f..46850fe069 100644 --- a/components/style/index.tsx +++ b/components/style/index.tsx @@ -1,6 +1,7 @@ import { unit } from '@ant-design/cssinjs'; -import type { CSSObject } from '@ant-design/cssinjs'; +import { defaultIconPrefixCls } from '../config-provider'; +import type { CSSObject } from '@ant-design/cssinjs'; import type { AliasToken } from '../theme/internal'; export const textEllipsis: CSSObject = { @@ -144,6 +145,15 @@ export const genFocusStyle = (token: AliasToken): CSSObject => ({ }, }); +export const genIconStyle = (iconPrefixCls = defaultIconPrefixCls): 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 4d92365e75..487a48d7c0 100644 --- a/components/theme/util/genStyleUtils.ts +++ b/components/theme/util/genStyleUtils.ts @@ -3,10 +3,9 @@ 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 { genCommonStyle, genLinkStyle, genIconStyle } from '../../style'; import type { AliasToken, ComponentTokenMap, SeedToken } from '../interface'; import useLocalToken, { unitless } from '../useToken'; -import { genIconStyle } from './useResetIconStyle'; export const { genStyleHooks, genComponentStyleHook, genSubStyleComponent } = genStyleUtils< ComponentTokenMap, diff --git a/components/theme/util/useResetIconStyle.ts b/components/theme/util/useResetIconStyle.ts index 96f3b03f96..43ec8d47b9 100644 --- a/components/theme/util/useResetIconStyle.ts +++ b/components/theme/util/useResetIconStyle.ts @@ -1,20 +1,9 @@ import { useStyleRegister } from '@ant-design/cssinjs'; -import type { CSSObject } from '@ant-design/cssinjs'; -import { defaultIconPrefixCls } from '../../config-provider'; import type { CSPConfig } from '../../config-provider'; -import { resetIcon } from '../../style'; +import { genIconStyle } from '../../style'; import useToken from '../useToken'; -export const genIconStyle = (iconPrefixCls = defaultIconPrefixCls): CSSObject => ({ - [`.${iconPrefixCls}`]: { - ...resetIcon(), - [`.${iconPrefixCls} .${iconPrefixCls}-icon`]: { - display: 'block', - }, - }, -}); - const useResetIconStyle = (iconPrefixCls: string, csp?: CSPConfig) => { const [theme, token] = useToken(); From eb28df8430e454ad6a1b584d150092e5ddbf2491 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=F0=9F=8F=8E=EF=B8=8F=20Yumo?= Date: Fri, 6 Dec 2024 17:48:03 +0800 Subject: [PATCH 6/7] chore: fix circular dependency --- components/style/index.tsx | 4 +--- components/theme/util/genStyleUtils.ts | 7 +++++-- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/components/style/index.tsx b/components/style/index.tsx index 46850fe069..b79230410a 100644 --- a/components/style/index.tsx +++ b/components/style/index.tsx @@ -1,6 +1,4 @@ import { unit } from '@ant-design/cssinjs'; -import { defaultIconPrefixCls } from '../config-provider'; - import type { CSSObject } from '@ant-design/cssinjs'; import type { AliasToken } from '../theme/internal'; @@ -145,7 +143,7 @@ export const genFocusStyle = (token: AliasToken): CSSObject => ({ }, }); -export const genIconStyle = (iconPrefixCls = defaultIconPrefixCls): CSSObject => ({ +export const genIconStyle = (iconPrefixCls: string): CSSObject => ({ [`.${iconPrefixCls}`]: { ...resetIcon(), [`.${iconPrefixCls} .${iconPrefixCls}-icon`]: { diff --git a/components/theme/util/genStyleUtils.ts b/components/theme/util/genStyleUtils.ts index 487a48d7c0..a95724285f 100644 --- a/components/theme/util/genStyleUtils.ts +++ b/components/theme/util/genStyleUtils.ts @@ -2,7 +2,7 @@ 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, genIconStyle } from '../../style'; import type { AliasToken, ComponentTokenMap, SeedToken } from '../interface'; import useLocalToken, { unitless } from '../useToken'; @@ -30,7 +30,10 @@ export const { genStyleHooks, genComponentStyleHook, genSubStyleComponent } = ge const { csp } = useContext(ConfigContext); return csp ?? {}; }, - getResetStyles: (token) => [{ '&': genLinkStyle(token) }, genIconStyle()], + getResetStyles: (token, config) => [ + { '&': genLinkStyle(token) }, + genIconStyle(config?.prefix.iconPrefixCls ?? defaultIconPrefixCls), + ], getCommonStyle: genCommonStyle, getCompUnitless: (() => unitless) as GetCompUnitless, }); From 2aa44403806a0e035ac1f079aeea878a51a223ee Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=F0=9F=8F=8E=EF=B8=8F=20Yumo?= Date: Fri, 6 Dec 2024 18:33:02 +0800 Subject: [PATCH 7/7] test: use regex check Self-contained .anticon style --- components/app/__tests__/index.test.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) 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(); });