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

fix: support shadow dom, close #6912

pull/6941/head
tangjinzhou 2023-09-10 10:36:30 +08:00
parent d0f7c34497
commit a6c945caaa
1 changed files with 11 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
components/_util/cssinjs/StyleContext.tsx
View File

@ -4,7 +4,6 @@ import CacheEntity from './Cache';
import type { Linter } from './linters/interface'; import type { Linter } from './linters/interface';
import type { Transformer } from './transformers/interface'; import type { Transformer } from './transformers/interface';
import { arrayType, booleanType, objectType, someType, stringType, withInstall } from '../type'; import { arrayType, booleanType, objectType, someType, stringType, withInstall } from '../type';
import initDefaultProps from '../props-util/initDefaultProps';
export const ATTR_TOKEN = 'data-token-hash'; export const ATTR_TOKEN = 'data-token-hash';
export const ATTR_MARK = 'data-css-hash'; export const ATTR_MARK = 'data-css-hash';
export const ATTR_CACHE_PATH = 'data-cache-path'; export const ATTR_CACHE_PATH = 'data-cache-path';
@ -25,7 +24,10 @@ export function createCache() {
(style as any)[CSS_IN_JS_INSTANCE] = (style as any)[CSS_IN_JS_INSTANCE] || cssinjsInstanceId; (style as any)[CSS_IN_JS_INSTANCE] = (style as any)[CSS_IN_JS_INSTANCE] || cssinjsInstanceId;
// Not force move if no head // Not force move if no head
document.head.insertBefore(style, firstChild); // Not force move if no head
if ((style as any)[CSS_IN_JS_INSTANCE] === cssinjsInstanceId) {
document.head.insertBefore(style, firstChild);
}
}); });
// Deduplicate of moved styles // Deduplicate of moved styles
@ -83,12 +85,16 @@ const defaultStyleContext: StyleContextProps = {
defaultCache: true, defaultCache: true,
hashPriority: 'low', hashPriority: 'low',
}; };
// fix: https://github.com/vueComponent/ant-design-vue/issues/6912
export const useStyleInject = () => { export const useStyleInject = () => {
return inject(StyleContextKey, shallowRef({ ...defaultStyleContext })); return inject(StyleContextKey, shallowRef({ ...defaultStyleContext, cache: createCache() }));
}; };
export const useStyleProvider = (props: UseStyleProviderProps) => { export const useStyleProvider = (props: UseStyleProviderProps) => {
const parentContext = useStyleInject(); const parentContext = useStyleInject();
const context = shallowRef<Partial<StyleContextProps>>({ ...defaultStyleContext }); const context = shallowRef<Partial<StyleContextProps>>({
...defaultStyleContext,
cache: createCache(),
});
watch( watch(
[() => unref(props), parentContext], [() => unref(props), parentContext],
() => { () => {
@ -144,7 +150,7 @@ export const StyleProvider = withInstall(
defineComponent({ defineComponent({
name: 'AStyleProvider', name: 'AStyleProvider',
inheritAttrs: false, inheritAttrs: false,
props: initDefaultProps(styleProviderProps(), defaultStyleContext), props: styleProviderProps(),
setup(props, { slots }) { setup(props, { slots }) {
useStyleProvider(props); useStyleProvider(props);
return () => slots.default?.(); return () => slots.default?.();