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

fix: directive not work

Browse Source
pull/6293/head^2
tangjinzhou 2 years ago
parent f39d4894e4
commit 1b51e6ffb3
1 changed files with 109 additions and 106 deletions
Show Stats Download Patch File Download Diff File

215
components/_util/cssinjs/hooks/useStyleRegister.tsx
Unescape View File

@ -1,4 +1,4 @@
import hash from '@emotion/hash'; // import hash from '@emotion/hash';
import type * as CSS from 'csstype'; import type * as CSS from 'csstype';
// @ts-ignore // @ts-ignore
import unitless from '@emotion/unitless'; import unitless from '@emotion/unitless';
@ -10,22 +10,22 @@ import type { Linter } from '../linters';
import { contentQuotesLinter, hashedAnimationLinter } from '../linters'; import { contentQuotesLinter, hashedAnimationLinter } from '../linters';
import type { HashPriority } from '../StyleContext'; import type { HashPriority } from '../StyleContext';
import { import {
useStyleInject, // useStyleInject,
ATTR_DEV_CACHE_PATH, // ATTR_DEV_CACHE_PATH,
ATTR_MARK, ATTR_MARK,
ATTR_TOKEN, ATTR_TOKEN,
CSS_IN_JS_INSTANCE, // CSS_IN_JS_INSTANCE,
CSS_IN_JS_INSTANCE_ID, // CSS_IN_JS_INSTANCE_ID,
} from '../StyleContext'; } from '../StyleContext';
import { supportLayer } from '../util'; 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 type { Ref } from 'vue';
import { computed } from 'vue'; // import { computed } from 'vue';
import type { VueNode } from '../../type'; import type { VueNode } from '../../type';
const isClientSide = canUseDom(); // const isClientSide = canUseDom();
const SKIP_CHECK = '_skip_check_'; const SKIP_CHECK = '_skip_check_';
@ -275,123 +275,126 @@ export const parseStyle = (
// ============================================================================ // ============================================================================
// == Register == // == Register ==
// ============================================================================ // ============================================================================
function uniqueHash(path: (string | number)[], styleStr: string) { // function uniqueHash(path: (string | number)[], styleStr: string) {
return hash(`${path.join('%')}${styleStr}`); // return hash(`${path.join('%')}${styleStr}`);
} // }
function Empty() { // function Empty() {
return null; // return null;
} // }
/** /**
* 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: Ref<{ // eslint-disable-next-line @typescript-eslint/no-unused-vars
_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, // eslint-disable-next-line @typescript-eslint/no-unused-vars
_styleFn: () => CSSInterpolation,
) { ) {
const styleContext = useStyleInject(); // const styleContext = useStyleInject();
const tokenKey = computed(() => info.value.token._tokenKey as string); // const tokenKey = computed(() => info.value.token._tokenKey as string);
const fullPath = computed(() => [tokenKey.value, ...info.value.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;
if (process.env.NODE_ENV !== 'production' && styleContext.mock !== undefined) { // if (process.env.NODE_ENV !== 'production' && styleContext.mock !== undefined) {
isMergedClientSide = styleContext.mock === 'client'; // isMergedClientSide = styleContext.mock === 'client';
} // }
// const [cacheStyle[0], cacheStyle[1], cacheStyle[2]] // const [cacheStyle[0], cacheStyle[1], cacheStyle[2]]
const cacheStyle = useGlobalCache( // const cacheStyle = useGlobalCache(
'style', // 'style',
fullPath, // fullPath,
// Create cache if needed // // Create cache if needed
() => { // () => {
const styleObj = styleFn(); // const styleObj = styleFn();
const { hashPriority, container, transformers, linters } = styleContext; // const { hashPriority, container, transformers, linters } = styleContext;
const { path, hashId, layer } = info.value; // const { path, hashId, layer } = info.value;
const [parsedStyle, effectStyle] = parseStyle(styleObj, { // const [parsedStyle, effectStyle] = parseStyle(styleObj, {
hashId, // hashId,
hashPriority, // hashPriority,
layer, // layer,
path: path.join('-'), // path: path.join('-'),
transformers, // transformers,
linters, // linters,
}); // });
const styleStr = normalizeStyle(parsedStyle); // const styleStr = normalizeStyle(parsedStyle);
const styleId = uniqueHash(fullPath.value, styleStr); // const styleId = uniqueHash(fullPath.value, styleStr);
if (isMergedClientSide) { // if (isMergedClientSide) {
const style = updateCSS(styleStr, styleId, { // const style = updateCSS(styleStr, styleId, {
mark: ATTR_MARK, // mark: ATTR_MARK,
prepend: 'queue', // prepend: 'queue',
attachTo: container, // attachTo: container,
}); // });
(style as any)[CSS_IN_JS_INSTANCE] = CSS_IN_JS_INSTANCE_ID; // (style as any)[CSS_IN_JS_INSTANCE] = CSS_IN_JS_INSTANCE_ID;
// Used for `useCacheToken` to remove on batch when token removed // // Used for `useCacheToken` to remove on batch when token removed
style.setAttribute(ATTR_TOKEN, tokenKey.value); // style.setAttribute(ATTR_TOKEN, tokenKey.value);
// Dev usage to find which cache path made this easily // // Dev usage to find which cache path made this easily
if (process.env.NODE_ENV !== 'production') { // if (process.env.NODE_ENV !== 'production') {
style.setAttribute(ATTR_DEV_CACHE_PATH, fullPath.value.join('|')); // style.setAttribute(ATTR_DEV_CACHE_PATH, fullPath.value.join('|'));
} // }
// Inject client side effect style // // Inject client side effect style
Object.keys(effectStyle).forEach(effectKey => { // Object.keys(effectStyle).forEach(effectKey => {
if (!globalEffectStyleKeys.has(effectKey)) { // if (!globalEffectStyleKeys.has(effectKey)) {
globalEffectStyleKeys.add(effectKey); // globalEffectStyleKeys.add(effectKey);
// Inject // // Inject
updateCSS(normalizeStyle(effectStyle[effectKey]), `_effect-${effectKey}`, { // updateCSS(normalizeStyle(effectStyle[effectKey]), `_effect-${effectKey}`, {
mark: ATTR_MARK, // mark: ATTR_MARK,
prepend: 'queue', // prepend: 'queue',
attachTo: container, // attachTo: container,
}); // });
} // }
}); // });
} // }
return [styleStr, tokenKey.value, styleId]; // return [styleStr, tokenKey.value, styleId];
}, // },
// Remove cache if no need // // Remove cache if no need
([, , styleId], fromHMR) => { // ([, , styleId], fromHMR) => {
if ((fromHMR || styleContext.autoClear) && isClientSide) { // if ((fromHMR || styleContext.autoClear) && isClientSide) {
removeCSS(styleId, { mark: ATTR_MARK }); // removeCSS(styleId, { mark: ATTR_MARK });
} // }
}, // },
); // );
return (node: VueNode) => { return (node: VueNode) => {
let styleNode: VueNode; return node;
if (!styleContext.ssrInline || isMergedClientSide || !styleContext.defaultCache) { // let styleNode: VueNode;
styleNode = <Empty />; // if (!styleContext.ssrInline || isMergedClientSide || !styleContext.defaultCache) {
} else { // styleNode = <Empty />;
styleNode = ( // } else {
<style // styleNode = (
{...{ // <style
[ATTR_TOKEN]: cacheStyle.value[1], // {...{
[ATTR_MARK]: cacheStyle.value[2], // [ATTR_TOKEN]: cacheStyle.value[1],
}} // [ATTR_MARK]: cacheStyle.value[2],
innerHTML={cacheStyle.value[0]} // }}
/> // innerHTML={cacheStyle.value[0]}
); // />
} // );
// }
return (
<> // return (
{styleNode} // <>
{node} // {styleNode}
</> // {node}
); // </>
// );
}; };
} }

Write Preview
Loading…
Cancel
Save