From e3d83fd999d69beefd74af671880763325cdf7e4 Mon Sep 17 00:00:00 2001 From: Derek Date: Thu, 25 Jul 2024 15:18:40 +0800 Subject: [PATCH 1/6] fix: `removeCSS` not work with `container` (cherry picked from commit 2fb097e8ae689009002c1a45c56b2ed8162d6149) --- src/hooks/useCSSVarRegister.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/hooks/useCSSVarRegister.ts b/src/hooks/useCSSVarRegister.ts index b02f1f4..35bc6c8 100644 --- a/src/hooks/useCSSVarRegister.ts +++ b/src/hooks/useCSSVarRegister.ts @@ -58,7 +58,7 @@ const useCSSVarRegister = >( }, ([, , styleId]) => { if (isClientSide) { - removeCSS(styleId, { mark: ATTR_MARK }); + removeCSS(styleId, { mark: ATTR_MARK, attachTo: container }); } }, ([, cssVarsStr, styleId]) => { From 78d059eae0651d20284a3faa2fc611086a678932 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=F0=9D=91=BE=F0=9D=92=96=F0=9D=92=99=F0=9D=92=89?= Date: Thu, 6 Feb 2025 19:03:49 +0800 Subject: [PATCH 2/6] test: add unit test --- tests/index.spec.tsx | 42 +++++++++++++++++++++++++++++++++++++++++- 1 file changed, 41 insertions(+), 1 deletion(-) diff --git a/tests/index.spec.tsx b/tests/index.spec.tsx index 22930e6..ed9fe87 100644 --- a/tests/index.spec.tsx +++ b/tests/index.spec.tsx @@ -1,7 +1,8 @@ import { render } from '@testing-library/react'; import classNames from 'classnames'; +import type { ReactElement, ReactNode } from 'react'; import * as React from 'react'; -import { ReactElement, ReactNode, StrictMode } from 'react'; +import { StrictMode } from 'react'; import { describe, expect } from 'vitest'; import type { CSSInterpolation, DerivativeFunc } from '../src'; import { @@ -426,6 +427,45 @@ describe('csssinjs', () => { expect(container.querySelectorAll('style')).toHaveLength(1); }); + // https://github.com/ant-design/cssinjs/issues/189 + it('should cleanup style when unmount', () => { + const container = document.createElement('div'); + + const CssVarBox = () => { + const [token] = useCacheToken( + theme, + [{ primaryColor: 'red' }], + { + salt: 'test', + }, + ); + + useCSSVarRegister( + { + key: 'color-2', + path: ['cssinjs-cleanup-style-when-unmount'], + token, + }, + () => ({ + token: token.primaryColor, + }), + ); + + return null; + }; + + const { unmount } = render( + + + + , + ); + + expect(container.querySelectorAll('style')).toHaveLength(2); + unmount(); + expect(container.querySelectorAll('style')).toHaveLength(0); + }); + describe('nonce', () => { function test(name: string, nonce: string | (() => string)) { it(name, () => { From bb541112ea29e1a73227da3cf575ee9c2887dd0b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=F0=9D=91=BE=F0=9D=92=96=F0=9D=92=99=F0=9D=92=89?= Date: Thu, 6 Feb 2025 19:07:21 +0800 Subject: [PATCH 3/6] fixup! fix: `removeCSS` not work with `container` --- src/hooks/useCSSVarRegister.ts | 5 +++-- src/hooks/useStyleRegister.tsx | 2 +- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/hooks/useCSSVarRegister.ts b/src/hooks/useCSSVarRegister.ts index 35bc6c8..f072428 100644 --- a/src/hooks/useCSSVarRegister.ts +++ b/src/hooks/useCSSVarRegister.ts @@ -35,6 +35,7 @@ const useCSSVarRegister = >( ) => { const { key, prefix, unitless, ignore, token, scope = '' } = config; const { + autoClear, cache: { instanceId }, container, } = useContext(StyleContext); @@ -56,8 +57,8 @@ const useCSSVarRegister = >( const styleId = uniqueHash(stylePath, cssVarsStr); return [mergedToken, cssVarsStr, styleId, key]; }, - ([, , styleId]) => { - if (isClientSide) { + ([, , styleId], fromHMR) => { + if ((fromHMR || autoClear) && isClientSide) { removeCSS(styleId, { mark: ATTR_MARK, attachTo: container }); } }, diff --git a/src/hooks/useStyleRegister.tsx b/src/hooks/useStyleRegister.tsx index 529d29d..1e9feea 100644 --- a/src/hooks/useStyleRegister.tsx +++ b/src/hooks/useStyleRegister.tsx @@ -462,7 +462,7 @@ export default function useStyleRegister( // Remove cache if no need ([, , styleId], fromHMR) => { if ((fromHMR || autoClear) && isClientSide) { - removeCSS(styleId, { mark: ATTR_MARK }); + removeCSS(styleId, { mark: ATTR_MARK, attachTo: container }); } }, From c9050c307fc3dca935bc1a132c99099d3e98b499 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=F0=9D=91=BE=F0=9D=92=96=F0=9D=92=99=F0=9D=92=89?= Date: Fri, 7 Feb 2025 10:37:45 +0800 Subject: [PATCH 4/6] =?UTF-8?q?=E2=9A=A1=EF=B8=8Fimprove=20perf?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/useCacheToken.tsx | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/src/hooks/useCacheToken.tsx b/src/hooks/useCacheToken.tsx index a5a3a30..4d4fc18 100644 --- a/src/hooks/useCacheToken.tsx +++ b/src/hooks/useCacheToken.tsx @@ -92,15 +92,13 @@ const TOKEN_THRESHOLD = 0; function cleanTokenStyle(tokenKey: string, instanceId: string) { tokenKeys.set(tokenKey, (tokenKeys.get(tokenKey) || 0) - 1); - const tokenKeyList = Array.from(tokenKeys.keys()); - const cleanableKeyList = tokenKeyList.filter((key) => { - const count = tokenKeys.get(key) || 0; - - return count <= 0; - }); + const cleanableKeyList = new Set(); + tokenKeys.forEach((value, key) => { + if (value <= 0) cleanableKeyList.add(key); + }) // Should keep tokens under threshold for not to insert style too often - if (tokenKeyList.length - cleanableKeyList.length > TOKEN_THRESHOLD) { + if (tokenKeys.size - cleanableKeyList.size > TOKEN_THRESHOLD) { cleanableKeyList.forEach((key) => { removeStyleTags(key, instanceId); tokenKeys.delete(key); From 0b64c3d50a3e3590b73c55d9c010a2c955c003a5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=F0=9D=91=BE=F0=9D=92=96=F0=9D=92=99=F0=9D=92=89?= Date: Fri, 7 Feb 2025 10:50:35 +0800 Subject: [PATCH 5/6] Revert "fixup! fix: `removeCSS` not work with `container`" This reverts commit bb541112ea29e1a73227da3cf575ee9c2887dd0b. --- src/hooks/useCSSVarRegister.ts | 5 ++--- src/hooks/useStyleRegister.tsx | 2 +- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/hooks/useCSSVarRegister.ts b/src/hooks/useCSSVarRegister.ts index f072428..35bc6c8 100644 --- a/src/hooks/useCSSVarRegister.ts +++ b/src/hooks/useCSSVarRegister.ts @@ -35,7 +35,6 @@ const useCSSVarRegister = >( ) => { const { key, prefix, unitless, ignore, token, scope = '' } = config; const { - autoClear, cache: { instanceId }, container, } = useContext(StyleContext); @@ -57,8 +56,8 @@ const useCSSVarRegister = >( const styleId = uniqueHash(stylePath, cssVarsStr); return [mergedToken, cssVarsStr, styleId, key]; }, - ([, , styleId], fromHMR) => { - if ((fromHMR || autoClear) && isClientSide) { + ([, , styleId]) => { + if (isClientSide) { removeCSS(styleId, { mark: ATTR_MARK, attachTo: container }); } }, diff --git a/src/hooks/useStyleRegister.tsx b/src/hooks/useStyleRegister.tsx index 1e9feea..529d29d 100644 --- a/src/hooks/useStyleRegister.tsx +++ b/src/hooks/useStyleRegister.tsx @@ -462,7 +462,7 @@ export default function useStyleRegister( // Remove cache if no need ([, , styleId], fromHMR) => { if ((fromHMR || autoClear) && isClientSide) { - removeCSS(styleId, { mark: ATTR_MARK, attachTo: container }); + removeCSS(styleId, { mark: ATTR_MARK }); } }, From f9eff0d3a03c1002ce07c7a70f190b80ba77b345 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=F0=9D=91=BE=F0=9D=92=96=F0=9D=92=99=F0=9D=92=89?= Date: Fri, 7 Feb 2025 10:54:57 +0800 Subject: [PATCH 6/6] fixup! fix: `removeCSS` not work with `container` --- src/hooks/useStyleRegister.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/hooks/useStyleRegister.tsx b/src/hooks/useStyleRegister.tsx index 529d29d..a0b7e7f 100644 --- a/src/hooks/useStyleRegister.tsx +++ b/src/hooks/useStyleRegister.tsx @@ -333,7 +333,6 @@ export const parseStyle = ( if (!root) { styleStr = `{${styleStr}}`; } else if (layer) { - // fixme: https://github.com/thysultan/stylis/pull/339 if (styleStr) { styleStr = `@layer ${layer.name} {${styleStr}}`; @@ -462,7 +461,7 @@ export default function useStyleRegister( // Remove cache if no need ([, , styleId], fromHMR) => { if ((fromHMR || autoClear) && isClientSide) { - removeCSS(styleId, { mark: ATTR_MARK }); + removeCSS(styleId, { mark: ATTR_MARK, attachTo: container }); } },