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 f5560db

Browse files
tangjinzhoushifeng1993
andauthored
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)

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