Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit a1e0294

Browse files
fix: css var
1 parent e7ec210 commit a1e0294

File tree

7 files changed

+32
-97
lines changed

7 files changed

+32
-97
lines changed

‎components/_theme/context.ts

Lines changed: 11 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -64,39 +64,24 @@ export interface DesignTokenProviderProps {
6464
};
6565
}
6666

67-
export const useDesignTokenInject = () => {
68-
return inject(
69-
DesignTokenContextKey,
70-
computed(() => globalDesignTokenApi.value || defaultConfig),
71-
);
72-
};
73-
74-
export const useDesignTokenProvider = (props: ComputedRef<DesignTokenProviderProps>) => {
75-
const parentContext = useDesignTokenInject();
76-
const context = shallowRef<Partial<DesignTokenProviderProps>>(defaultConfig);
67+
export const useDesignTokenProvider = (value: ComputedRef<DesignTokenProviderProps>) => {
68+
provide(DesignTokenContextKey, value);
7769
watch(
78-
computed(() => [props.value, parentContext.value]),
79-
([propsValue, parentContextValue]) => {
80-
const mergedContext: Partial<DesignTokenProviderProps> = {
81-
...parentContextValue,
82-
};
83-
Object.keys(propsValue).forEach(key => {
84-
const value = propsValue[key];
85-
if (propsValue[key] !== undefined) {
86-
mergedContext[key] = value;
87-
}
88-
});
89-
90-
context.value = mergedContext;
91-
globalDesignTokenApi.value = unref(mergedContext as any);
70+
value,
71+
() => {
72+
globalDesignTokenApi.value = unref(value);
9273
triggerRef(globalDesignTokenApi);
9374
},
9475
{ immediate: true, deep: true },
9576
);
96-
provide(DesignTokenContextKey, context);
97-
return context;
9877
};
9978

79+
export const useDesignTokenInject = () => {
80+
return inject(
81+
DesignTokenContextKey,
82+
computed(() => globalDesignTokenApi.value || defaultConfig),
83+
);
84+
};
10085
export const DesignTokenProvider = defineComponent({
10186
props: {
10287
value: objectType<DesignTokenProviderProps>(),

‎components/_util/_cssinjs/hooks/useCSSVarRegister.ts

Lines changed: 7 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import { updateCSS } from '../../../vc-util/Dom/dynamicCSS';
1+
import { removeCSS,updateCSS } from '../../../vc-util/Dom/dynamicCSS';
22
import { ATTR_MARK, ATTR_TOKEN, CSS_IN_JS_INSTANCE, useStyleInject } from '../StyleContext';
3-
import { isClientSide, token2key,toStyleStr } from '../util';
3+
import { isClientSide, toStyleStr } from '../util';
44
import type { TokenWithCSSVar } from '../util/css-variables';
55
import { transformToken } from '../util/css-variables';
66
import type { ExtractStyle } from './useGlobalCache';
@@ -14,50 +14,10 @@ export const CSS_VAR_PREFIX = 'cssVar';
1414
type CSSVarCacheValue<V, T extends Record<string, V> = Record<string, V>> = [
1515
cssVarToken: TokenWithCSSVar<V, T>,
1616
cssVarStr: string,
17-
tokenKey: string,
1817
styleId: string,
1918
cssVarKey: string,
2019
];
2120

22-
const tokenKeys = new Map<string, number>();
23-
function recordCleanToken(tokenKey: string) {
24-
tokenKeys.set(tokenKey, (tokenKeys.get(tokenKey) || 0) + 1);
25-
}
26-
27-
function removeStyleTags(key: string, instanceId: string) {
28-
if (typeof document !== 'undefined') {
29-
const styles = document.querySelectorAll(`style[${ATTR_MARK}="${key}"]`);
30-
31-
styles.forEach(style => {
32-
if ((style as any)[CSS_IN_JS_INSTANCE] === instanceId) {
33-
style.parentNode?.removeChild(style);
34-
}
35-
});
36-
}
37-
}
38-
39-
const TOKEN_THRESHOLD = 0;
40-
41-
// Remove will check current keys first
42-
function cleanTokenStyle(tokenKey: string, instanceId: string) {
43-
tokenKeys.set(tokenKey, (tokenKeys.get(tokenKey) || 0) - 1);
44-
45-
const tokenKeyList = Array.from(tokenKeys.keys());
46-
const cleanableKeyList = tokenKeyList.filter(key => {
47-
const count = tokenKeys.get(key) || 0;
48-
49-
return count <= 0;
50-
});
51-
52-
// Should keep tokens under threshold for not to insert style too often
53-
if (tokenKeyList.length - cleanableKeyList.length > TOKEN_THRESHOLD) {
54-
cleanableKeyList.forEach(key => {
55-
removeStyleTags(key, instanceId);
56-
tokenKeys.delete(key);
57-
});
58-
}
59-
}
60-
6121
const useCSSVarRegister = <V, T extends Record<string, V>>(
6222
config: ComputedRef<{
6323
path: string[];
@@ -93,25 +53,20 @@ const useCSSVarRegister = <V, T extends Record<string, V>>(
9353
scope: config.value.scope || '',
9454
});
9555

96-
const tokenKey = token2key(mergedToken, '');
97-
9856
const styleId = uniqueHash(stylePath.value, cssVarsStr);
99-
100-
recordCleanToken(tokenKey);
101-
return [mergedToken, cssVarsStr, tokenKey, styleId, config.value.key];
57+
return [mergedToken, cssVarsStr, styleId, config.value.key];
10258
},
103-
([, , tokenKey]) => {
59+
([, , styleId]) => {
10460
if (isClientSide) {
105-
// Remove token will remove all related style
106-
cleanTokenStyle(tokenKey, styleContext.value?.cache?.instanceId);
61+
removeCSS(styleId, { mark: ATTR_MARK });
10762
}
10863
},
109-
([, cssVarsStr, tokenKey]) => {
64+
([, cssVarsStr, styleId]) => {
11065
if (!cssVarsStr) {
11166
return;
11267
}
11368

114-
const style = updateCSS(cssVarsStr, tokenKey, {
69+
const style = updateCSS(cssVarsStr, styleId, {
11570
mark: ATTR_MARK,
11671
prepend: 'queue',
11772
attachTo: styleContext.value.container,

‎components/_util/_cssinjs/hooks/useGlobalCache.tsx

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -49,9 +49,13 @@ export default function useGlobalCache<CacheType>(
4949
});
5050
};
5151

52-
watch(deps, () => {
53-
buildCache();
54-
});
52+
watch(
53+
deps,
54+
() => {
55+
buildCache();
56+
},
57+
{ immediate: true },
58+
);
5559

5660
let cacheEntity = globalCache.value.get(deps.value);
5761

‎components/config-provider/hooks/useCssVarCls.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { useToken } from '../../_theme/internal';
22
import type { Ref } from 'vue';
3+
import { computed } from 'vue';
34

45
/**
56
* This hook is only for cssVar to add root className for components.
@@ -9,7 +10,7 @@ import type { Ref } from 'vue';
910
const useCSSVarCls = (prefixCls: Ref<string>) => {
1011
const [, , , , cssVar] = useToken();
1112

12-
return cssVar.value ? `${prefixCls.value}-css-var` : '';
13+
return computed(()=>(cssVar.value ? `${prefixCls.value}-css-var` : ''));
1314
};
1415

1516
export default useCSSVarCls;

‎components/config-provider/hooks/useTheme.ts

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,14 @@ import type { ThemeConfig } from '../context';
22
import { defaultConfig } from '../../_theme/internal';
33
import type { Ref } from 'vue';
44
import { computed } from 'vue';
5-
import useThemeKey from './useThemeKey';
65
import devWarning from '../../vc-util/warning';
7-
6+
constthemeKey='antdvtheme';
87
export default function useTheme(theme?: Ref<ThemeConfig>, parentTheme?: Ref<ThemeConfig>) {
98
const themeConfig = computed(() => theme?.value || {});
109
const parentThemeConfig = computed<ThemeConfig>(() =>
1110
themeConfig.value.inherit === false || !parentTheme?.value ? defaultConfig : parentTheme.value,
1211
);
1312

14-
const themeKey = useThemeKey();
15-
1613
if (process.env.NODE_ENV !== 'production') {
1714
const cssVarEnabled = themeConfig.value.cssVar || parentThemeConfig.value.cssVar;
1815
const validKey = !!(
@@ -43,6 +40,7 @@ export default function useTheme(theme?: Ref<ThemeConfig>, parentTheme?: Ref<The
4340
});
4441

4542
const cssVarKey = `css-var-${themeKey.replace(/:/g, '')}`;
43+
4644
const mergedCssVar = (themeConfig.value.cssVar ?? parentThemeConfig.value.cssVar) && {
4745
prefix: 'ant', // Default to ant
4846
...(typeof parentThemeConfig.value.cssVar === 'object' ? parentThemeConfig.value.cssVar : {}),
Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,6 @@
1-
import { getCurrentInstance } from 'vue';
2-
import _ from 'lodash';
3-
1+
let uid = 0;
42
const useThemeKey = () => {
5-
const instance = getCurrentInstance();
6-
7-
if (!instance) {
8-
return _.uniqueId() + '';
9-
}
10-
11-
return instance.uid + '';
3+
return 'themekey' + uid++;
124
};
135

146
export default useThemeKey;

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -247,7 +247,7 @@
247247
"tinycolor2": "^1.6.0",
248248
"ts-jest": "^28.0.5",
249249
"ts-loader": "^9.1.0",
250-
"tsx": "^3.12.10",
250+
"tsx": "^4.0.0",
251251
"typedoc": "^0.23.25",
252252
"typescript": "~4.9.3",
253253
"umi-request": "^1.3.5",

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /