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

fix: directive not work

pull/6293/head^2
tangjinzhou 2 years ago
parent
f39d4894e4
commit
1b51e6ffb3
1 changed files with 109 additions and 106 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 215
      components/_util/cssinjs/hooks/useStyleRegister.tsx

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