github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

refactor: cssinjs

pull/6213/head
tangjinzhou 2023-01-25 10:28:10 +08:00
parent 10b52e0072
commit c0d7d041b4
4 changed files with 91 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
components/_util/cssinjs/hooks/useStyleRegister.tsx
View File

@ -21,6 +21,7 @@ import { supportLayer } from '../util';
import useGlobalCache from './useGlobalCache'; import useGlobalCache from './useGlobalCache';
import canUseDom from '../../canUseDom'; import canUseDom from '../../canUseDom';
import { removeCSS, updateCSS } from '../../../vc-util/Dom/dynamicCSS'; import { removeCSS, updateCSS } from '../../../vc-util/Dom/dynamicCSS';
import type { Ref } from 'vue';
import { computed } from 'vue'; import { computed } from 'vue';
import type { VueNode } from '../../type'; import type { VueNode } from '../../type';
@ -286,20 +287,20 @@ function Empty() {
* Register a style to the global style sheet. * Register a style to the global style sheet.
*/ */
export default function useStyleRegister( export default function useStyleRegister(
info: { info: Ref<{
theme: Theme<any, any>; theme: Theme<any, any>;
token: any; token: any;
path: string[]; path: string[];
hashId?: string; hashId?: string;
layer?: string; layer?: string;
}, }>,
styleFn: () => CSSInterpolation, styleFn: () => CSSInterpolation,
) { ) {
const styleContext = useStyleInject(); const styleContext = useStyleInject();
const tokenKey = computed(() => info.token._tokenKey as string); const tokenKey = computed(() => info.value.token._tokenKey as string);
const fullPath = computed(() => [tokenKey.value, ...info.path]); const fullPath = computed(() => [tokenKey.value, ...info.value.path]);
// Check if need insert style // Check if need insert style
let isMergedClientSide = isClientSide; let isMergedClientSide = isClientSide;
@ -315,7 +316,7 @@ export default function useStyleRegister(
() => { () => {
const styleObj = styleFn(); const styleObj = styleFn();
const { hashPriority, container, transformers, linters } = styleContext; const { hashPriority, container, transformers, linters } = styleContext;
const { path, hashId, layer } = info; const { path, hashId, layer } = info.value;
const [parsedStyle, effectStyle] = parseStyle(styleObj, { const [parsedStyle, effectStyle] = parseStyle(styleObj, {
hashId, hashId,
hashPriority, hashPriority,
@ -371,17 +372,16 @@ export default function useStyleRegister(
return (node: VueNode) => { return (node: VueNode) => {
let styleNode: VueNode; let styleNode: VueNode;
if (!styleContext.ssrInline || isMergedClientSide || !styleContext.defaultCache) { if (!styleContext.ssrInline || isMergedClientSide || !styleContext.defaultCache) {
styleNode = <Empty />; styleNode = <Empty />;
} else { } else {
styleNode = ( styleNode = (
<style <style
{...{ {...{
[ATTR_TOKEN]: cacheStyle[1], [ATTR_TOKEN]: cacheStyle.value[1],
[ATTR_MARK]: cacheStyle[2], [ATTR_MARK]: cacheStyle.value[2],
}} }}
innerHTML={cacheStyle[0]} innerHTML={cacheStyle.value[0]}
/> />
); );
} }

45
components/alert/index.tsx
View File

@ -17,6 +17,7 @@ import { tuple, withInstall } from '../_util/type';
import { cloneElement } from '../_util/vnode'; import { cloneElement } from '../_util/vnode';
import type { NodeMouseEventHandler } from '../vc-tree/contextTypes'; import type { NodeMouseEventHandler } from '../vc-tree/contextTypes';
import useConfigInject from '../_util/hooks/useConfigInject'; import useConfigInject from '../_util/hooks/useConfigInject';
import useStyle from './style';
const iconMapFilled = { const iconMapFilled = {
success: CheckCircleFilled, success: CheckCircleFilled,
@ -69,6 +70,7 @@ const Alert = defineComponent({
props: alertProps(), props: alertProps(),
setup(props, { slots, emit, attrs, expose }) { setup(props, { slots, emit, attrs, expose }) {
const { prefixCls, direction } = useConfigInject('alert', props); const { prefixCls, direction } = useConfigInject('alert', props);
const [wrapSSR, hashId] = useStyle(prefixCls);
const closing = ref(false); const closing = ref(false);
const closed = ref(false); const closed = ref(false);
const alertNode = ref(); const alertNode = ref();
@ -125,6 +127,7 @@ const Alert = defineComponent({
[`${prefixClsValue}-banner`]: !!banner, [`${prefixClsValue}-banner`]: !!banner,
[`${prefixClsValue}-closable`]: closable, [`${prefixClsValue}-closable`]: closable,
[`${prefixClsValue}-rtl`]: direction.value === 'rtl', [`${prefixClsValue}-rtl`]: direction.value === 'rtl',
[hashId.value]: true,
}); });
const closeIcon = closable ? ( const closeIcon = closable ? (
@ -164,27 +167,29 @@ const Alert = defineComponent({
node.style.maxHeight = '0px'; node.style.maxHeight = '0px';
}, },
}); });
return closed.value ? null : ( return wrapSSR(
<Transition {...transitionProps}> closed.value ? null : (
<div <Transition {...transitionProps}>
role="alert" <div
{...attrs} role="alert"
style={[attrs.style as CSSProperties, motionStyle.value]} {...attrs}
v-show={!closing.value} style={[attrs.style as CSSProperties, motionStyle.value]}
class={[attrs.class, alertCls]} v-show={!closing.value}
data-show={!closing.value} class={[attrs.class, alertCls]}
ref={alertNode} data-show={!closing.value}
> ref={alertNode}
{showIcon ? iconNode : null} >
<div class={`${prefixClsValue}-content`}> {showIcon ? iconNode : null}
{message ? <div class={`${prefixClsValue}-message`}>{message}</div> : null} <div class={`${prefixClsValue}-content`}>
{description ? ( {message ? <div class={`${prefixClsValue}-message`}>{message}</div> : null}
<div class={`${prefixClsValue}-description`}>{description}</div> {description ? (
) : null} <div class={`${prefixClsValue}-description`}>{description}</div>
) : null}
</div>
{closeIcon}
</div> </div>
{closeIcon} </Transition>
</div> ),
</Transition>
); );
}; };
}, },

4
components/theme/internal.ts
View File

@ -19,7 +19,7 @@ import type { FullToken } from './util/genComponentStyleHook';
import genComponentStyleHook from './util/genComponentStyleHook'; import genComponentStyleHook from './util/genComponentStyleHook';
import statisticToken, { merge as mergeToken, statistic } from './util/statistic'; import statisticToken, { merge as mergeToken, statistic } from './util/statistic';
import type { VueNode } from '../_util/type'; import type { VueNode } from '../_util/type';
import type { ComputedRef, InjectionKey } from 'vue'; import type { ComputedRef, InjectionKey, Ref } from 'vue';
import { computed, inject } from 'vue'; import { computed, inject } from 'vue';
const defaultTheme = createTheme(defaultDerivative); const defaultTheme = createTheme(defaultDerivative);
@ -89,7 +89,7 @@ export function useToken(): [
]; ];
} }
export type UseComponentStyleResult = [(node: VueNode) => VueNode, string]; export type UseComponentStyleResult = [(node: VueNode) => VueNode, Ref<string>];
export type GenerateStyle< export type GenerateStyle<
ComponentToken extends object = AliasToken, ComponentToken extends object = AliasToken,

112
components/theme/util/genComponentStyleHook.ts
View File

@ -7,6 +7,8 @@ import type { UseComponentStyleResult } from '../internal';
import { mergeToken, statisticToken, useToken } from '../internal'; import { mergeToken, statisticToken, useToken } from '../internal';
import type { ComponentTokenMap, GlobalToken } from '../interface'; import type { ComponentTokenMap, GlobalToken } from '../interface';
import useConfigInject from 'ant-design-vue/es/_util/hooks/useConfigInject'; import useConfigInject from 'ant-design-vue/es/_util/hooks/useConfigInject';
import type { Ref } from 'vue';
import { computed } from 'vue';
export type OverrideTokenWithoutDerivative = ComponentTokenMap; export type OverrideTokenWithoutDerivative = ComponentTokenMap;
export type OverrideComponent = keyof OverrideTokenWithoutDerivative; export type OverrideComponent = keyof OverrideTokenWithoutDerivative;
@ -42,70 +44,66 @@ export default function genComponentStyleHook<ComponentName extends OverrideComp
| OverrideTokenWithoutDerivative[ComponentName] | OverrideTokenWithoutDerivative[ComponentName]
| ((token: GlobalToken) => OverrideTokenWithoutDerivative[ComponentName]), | ((token: GlobalToken) => OverrideTokenWithoutDerivative[ComponentName]),
) { ) {
return (prefixCls: string): UseComponentStyleResult => { return (prefixCls: Ref<string>): UseComponentStyleResult => {
const [theme, token, hashId] = useToken(); const [theme, token, hashId] = useToken();
const { getPrefixCls, iconPrefixCls } = useConfigInject('', {}); const { rootPrefixCls, iconPrefixCls } = useConfigInject('', {});
const rootPrefixCls = getPrefixCls(); const sharedInfo = computed(() => {
return {
// Generate style for all a tags in antd component.
useStyleRegister(
{
theme: theme.value, theme: theme.value,
token: token.value, token: token.value,
hashId: hashId.value, hashId: hashId.value,
path: ['Shared', rootPrefixCls], path: ['Shared', rootPrefixCls.value],
};
});
// Generate style for all a tags in antd component.
useStyleRegister(sharedInfo, () => [
{
// Link
'&': genLinkStyle(token.value),
}, },
() => [ ]);
{ const componentInfo = computed(() => {
// Link return {
'&': genLinkStyle(token.value), theme: theme.value,
}, token: token.value,
], hashId: hashId.value,
); path: [component, prefixCls.value, iconPrefixCls.value],
};
});
return [ return [
useStyleRegister( useStyleRegister(componentInfo, () => {
{ const { token: proxyToken, flush } = statisticToken(token.value);
theme: theme.value,
token: token.value, const defaultComponentToken =
typeof getDefaultToken === 'function'
? (getDefaultToken as any)(proxyToken)
: getDefaultToken;
const mergedComponentToken = { ...defaultComponentToken, ...token.value[component] };
const componentCls = `.${prefixCls.value}`;
const mergedToken = mergeToken<
TokenWithCommonCls<GlobalTokenWithComponent<OverrideComponent>>
>(
proxyToken,
{
componentCls,
prefixCls: prefixCls.value,
iconCls: `.${iconPrefixCls.value}`,
antCls: `.${rootPrefixCls.value}`,
},
mergedComponentToken,
);
const styleInterpolation = styleFn(mergedToken as unknown as FullToken<ComponentName>, {
hashId: hashId.value, hashId: hashId.value,
path: [component, prefixCls, iconPrefixCls.value], prefixCls: prefixCls.value,
}, rootPrefixCls: rootPrefixCls.value,
() => { iconPrefixCls: iconPrefixCls.value,
const { token: proxyToken, flush } = statisticToken(token.value); overrideComponentToken: token.value[component],
});
const defaultComponentToken = flush(component, mergedComponentToken);
typeof getDefaultToken === 'function' return [genCommonStyle(token.value, prefixCls.value), styleInterpolation];
? (getDefaultToken as any)(proxyToken) }),
: getDefaultToken; hashId,
const mergedComponentToken = { ...defaultComponentToken, ...token.value[component] };
const componentCls = `.${prefixCls}`;
const mergedToken = mergeToken<
TokenWithCommonCls<GlobalTokenWithComponent<OverrideComponent>>
>(
proxyToken,
{
componentCls,
prefixCls,
iconCls: `.${iconPrefixCls}`,
antCls: `.${rootPrefixCls}`,
},
mergedComponentToken,
);
const styleInterpolation = styleFn(mergedToken as unknown as FullToken<ComponentName>, {
hashId: hashId.value,
prefixCls,
rootPrefixCls,
iconPrefixCls: iconPrefixCls.value,
overrideComponentToken: token.value[component],
});
flush(component, mergedComponentToken);
return [genCommonStyle(token.value, prefixCls), styleInterpolation];
},
),
hashId.value,
]; ];
}; };
} }