Skip to content

Commit f5560db

Browse files
Feat 4.3 (#8286)
* feat(cssvar): Migrate cssvar features of antd v5.13.2 version (#7220) * feat(cssinjs): update cssinjs to v1.18.1 * feat(theme): update theme dir to V5.12.5 * feat(theme&configprovider): update cssvar to v5.12.5 * feat(site): add site cssvar example * feat(cssinjs): update cssinjs to v1.81.2 * feat(theme): update theme dir to V5.13.2 * fix: component ComponentToken export * fix: cssvar in the component being loaded multiple times. * feat(button): add cssvar to the Button component. * fix: css var * refactor: rename cssinjs folder * feat: alert support cssvar * feat: affix support cssvar * feat: anchor support cssvar * feat: switch support cssvar (#7940) --------- Co-authored-by: 果冻橙 <shifeng199307@gmail.com>
1 parent 35c1ad9 commit f5560db

File tree

102 files changed

+3856
-2135
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

102 files changed

+3856
-2135
lines changed

components/_util/cssinjs/Cache.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
11
export type KeyType = string | number;
22
type ValueType = [number, any]; // [times, realValue]
3+
34
const SPLIT = '%';
5+
46
class Entity {
57
instanceId: string;
68
constructor(instanceId: string) {
79
this.instanceId = instanceId;
810
}
11+
912
/** @private Internal cache map. Do not access this directly */
1013
cache = new Map<string, ValueType>();
1114

components/_util/cssinjs/StyleContext.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,6 @@ export function createCache() {
3131
Array.from(styles).forEach(style => {
3232
(style as any)[CSS_IN_JS_INSTANCE] = (style as any)[CSS_IN_JS_INSTANCE] || cssinjsInstanceId;
3333

34-
// Not force move if no head
3534
// Not force move if no head
3635
if ((style as any)[CSS_IN_JS_INSTANCE] === cssinjsInstanceId) {
3736
document.head.insertBefore(style, firstChild);
Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
import type Cache from './Cache';
2+
import { extract as tokenExtractStyle, TOKEN_PREFIX } from './hooks/useCacheToken';
3+
import { CSS_VAR_PREFIX, extract as cssVarExtractStyle } from './hooks/useCSSVarRegister';
4+
import { extract as styleExtractStyle, STYLE_PREFIX } from './hooks/useStyleRegister';
5+
import { toStyleStr } from './util';
6+
import { ATTR_CACHE_MAP, serialize as serializeCacheMap } from './util/cacheMapUtil';
7+
8+
const ExtractStyleFns = {
9+
[STYLE_PREFIX]: styleExtractStyle,
10+
[TOKEN_PREFIX]: tokenExtractStyle,
11+
[CSS_VAR_PREFIX]: cssVarExtractStyle,
12+
};
13+
14+
type ExtractStyleType = keyof typeof ExtractStyleFns;
15+
16+
function isNotNull<T>(value: T | null): value is T {
17+
return value !== null;
18+
}
19+
20+
export default function extractStyle(
21+
cache: Cache,
22+
options?:
23+
| boolean
24+
| {
25+
plain?: boolean;
26+
types?: ExtractStyleType | ExtractStyleType[];
27+
},
28+
) {
29+
const { plain = false, types = ['style', 'token', 'cssVar'] } =
30+
typeof options === 'boolean' ? { plain: options } : options || {};
31+
32+
const matchPrefixRegexp = new RegExp(
33+
`^(${(typeof types === 'string' ? [types] : types).join('|')})%`,
34+
);
35+
36+
// prefix with `style` is used for `useStyleRegister` to cache style context
37+
const styleKeys = Array.from(cache.cache.keys()).filter(key => matchPrefixRegexp.test(key));
38+
39+
// Common effect styles like animation
40+
const effectStyles: Record<string, boolean> = {};
41+
42+
// Mapping of cachePath to style hash
43+
const cachePathMap: Record<string, string> = {};
44+
45+
let styleText = '';
46+
47+
styleKeys
48+
.map<[number, string] | null>(key => {
49+
const cachePath = key.replace(matchPrefixRegexp, '').replace(/%/g, '|');
50+
const [prefix] = key.split('%');
51+
const extractFn = ExtractStyleFns[prefix as keyof typeof ExtractStyleFns];
52+
const extractedStyle = extractFn(cache.cache.get(key)![1], effectStyles, {
53+
plain,
54+
});
55+
if (!extractedStyle) {
56+
return null;
57+
}
58+
const [order, styleId, styleStr] = extractedStyle;
59+
if (key.startsWith('style')) {
60+
cachePathMap[cachePath] = styleId;
61+
}
62+
return [order, styleStr];
63+
})
64+
.filter(isNotNull)
65+
.sort(([o1], [o2]) => o1 - o2)
66+
.forEach(([, style]) => {
67+
styleText += style;
68+
});
69+
70+
// ==================== Fill Cache Path ====================
71+
styleText += toStyleStr(
72+
`.${ATTR_CACHE_MAP}{content:"${serializeCacheMap(cachePathMap)}";}`,
73+
undefined,
74+
undefined,
75+
{
76+
[ATTR_CACHE_MAP]: ATTR_CACHE_MAP,
77+
},
78+
plain,
79+
);
80+
81+
return styleText;
82+
}
Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
import { removeCSS, updateCSS } from '../../../vc-util/Dom/dynamicCSS';
2+
import { ATTR_MARK, ATTR_TOKEN, CSS_IN_JS_INSTANCE, useStyleInject } from '../StyleContext';
3+
import { isClientSide, toStyleStr } from '../util';
4+
import type { TokenWithCSSVar } from '../util/css-variables';
5+
import { transformToken } from '../util/css-variables';
6+
import type { ExtractStyle } from './useGlobalCache';
7+
import useGlobalCache from './useGlobalCache';
8+
import { uniqueHash } from './useStyleRegister';
9+
import type { ComputedRef } from 'vue';
10+
import { computed } from 'vue';
11+
12+
export const CSS_VAR_PREFIX = 'cssVar';
13+
14+
type CSSVarCacheValue<V, T extends Record<string, V> = Record<string, V>> = [
15+
cssVarToken: TokenWithCSSVar<V, T>,
16+
cssVarStr: string,
17+
styleId: string,
18+
cssVarKey: string,
19+
];
20+
21+
const useCSSVarRegister = <V, T extends Record<string, V>>(
22+
config: ComputedRef<{
23+
path: string[];
24+
key: string;
25+
prefix?: string;
26+
unitless?: Record<string, boolean>;
27+
ignore?: Record<string, boolean>;
28+
scope?: string;
29+
token: any;
30+
}>,
31+
fn: () => T,
32+
) => {
33+
const styleContext = useStyleInject();
34+
35+
const stylePath = computed(() => {
36+
return [
37+
...config.value.path,
38+
config.value.key,
39+
config.value.scope || '',
40+
config.value.token?._tokenKey,
41+
];
42+
});
43+
44+
const cache = useGlobalCache<CSSVarCacheValue<V, T>>(
45+
CSS_VAR_PREFIX,
46+
stylePath,
47+
() => {
48+
const originToken = fn();
49+
const [mergedToken, cssVarsStr] = transformToken<V, T>(originToken, config.value.key, {
50+
prefix: config.value.prefix,
51+
unitless: config.value.unitless,
52+
ignore: config.value.ignore,
53+
scope: config.value.scope || '',
54+
});
55+
56+
const styleId = uniqueHash(stylePath.value, cssVarsStr);
57+
return [mergedToken, cssVarsStr, styleId, config.value.key];
58+
},
59+
([, , styleId]) => {
60+
if (isClientSide) {
61+
removeCSS(styleId, { mark: ATTR_MARK });
62+
}
63+
},
64+
([, cssVarsStr, styleId]) => {
65+
if (!cssVarsStr) {
66+
return;
67+
}
68+
69+
const style = updateCSS(cssVarsStr, styleId, {
70+
mark: ATTR_MARK,
71+
prepend: 'queue',
72+
attachTo: styleContext.value.container,
73+
priority: -999,
74+
});
75+
76+
(style as any)[CSS_IN_JS_INSTANCE] = styleContext.value.cache?.instanceId;
77+
78+
// Used for `useCacheToken` to remove on batch when token removed
79+
style.setAttribute(ATTR_TOKEN, config.value.key);
80+
},
81+
);
82+
83+
return cache;
84+
};
85+
86+
export const extract: ExtractStyle<CSSVarCacheValue<any>> = (cache, _effectStyles, options) => {
87+
const [, styleStr, styleId, cssVarKey] = cache;
88+
const { plain } = options || {};
89+
90+
if (!styleStr) {
91+
return null;
92+
}
93+
94+
const order = -999;
95+
96+
// ====================== Style ======================
97+
// Used for rc-util
98+
const sharedAttrs = {
99+
'data-vc-order': 'prependQueue',
100+
'data-vc-priority': `${order}`,
101+
};
102+
103+
const styleText = toStyleStr(styleStr, cssVarKey, styleId, sharedAttrs, plain);
104+
105+
return [order, styleId, styleText];
106+
};
107+
108+
export default useCSSVarRegister;

0 commit comments

Comments
 (0)