From c1d54f63d74342f7e4badd1487430879f5c4a8ec Mon Sep 17 00:00:00 2001
From: CCherry07 <2405693142@qq.com>
Date: Fri, 31 Mar 2023 11:18:43 +0800
Subject: [PATCH 1/3] feat(StyleProvider): StyleProvider

---
 components/_util/cssinjs/StyleContext.tsx | 29 +++++++++++++++++------
 components/components.ts                  |  2 +-
 site/src/App.vue                          |  8 ++++---
 typings/global.d.ts                       |  2 ++
 4 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/components/_util/cssinjs/StyleContext.tsx b/components/_util/cssinjs/StyleContext.tsx
index 9cb9252156..969ede3f5a 100644
--- a/components/_util/cssinjs/StyleContext.tsx
+++ b/components/_util/cssinjs/StyleContext.tsx
@@ -1,5 +1,6 @@
-import type { InjectionKey, Ref } from 'vue';
-import { unref, computed, inject } from 'vue';
+import type { App, InjectionKey, Ref } from 'vue';
+import { provide, defineComponent, unref, computed, inject } from 'vue';
+import { objectType } from '../type';
 import CacheEntity from './Cache';
 import type { Linter } from './linters/interface';
 import type { Transformer } from './transformers/interface';
@@ -81,11 +82,11 @@ export const useStyleInject = () => {
     defaultCache: true,
   });
 };
-export const useStyleProvider = (props: StyleContextProps) => {
+export const useStyleProvider = (props: StyleProviderProps) => {
   const parentContext = useStyleInject();
 
-  const context = computed<StyleContextProps>(() => {
-    const mergedContext: StyleContextProps = {
+  const context = computed<StyleProviderProps>(() => {
+    const mergedContext: StyleProviderProps = {
       ...parentContext,
     };
     const propsValue = unref(props);
@@ -102,10 +103,24 @@ export const useStyleProvider = (props: StyleContextProps) => {
 
     return mergedContext;
   });
-
+  provide(StyleContextKey, context.value);
   return context;
 };
-
+export const StyleProvider = defineComponent({
+  name: 'AStyleProvider',
+  props: {
+    value: objectType<StyleProviderProps>(),
+  },
+  setup(props, { slots }) {
+    const config = computed(() => unref(props.value));
+    useStyleProvider(config);
+    return () => slots.default?.();
+  },
+});
+
+StyleProvider.install = function (app: App) {
+  app.component(StyleProvider.name, StyleProvider);
+};
 export default {
   useStyleInject,
   useStyleProvider,
diff --git a/components/components.ts b/components/components.ts
index bcd3dfeca6..044b5d71a5 100644
--- a/components/components.ts
+++ b/components/components.ts
@@ -48,7 +48,7 @@ export { default as Comment } from './comment';
 
 export type { ConfigProviderProps } from './config-provider';
 export { default as ConfigProvider } from './config-provider';
-
+export { StyleProvider } from './_util/cssinjs/StyleContext';
 export type { DatePickerProps } from './date-picker';
 export {
   default as DatePicker,
diff --git a/site/src/App.vue b/site/src/App.vue
index fccccf433b..e406a358c0 100644
--- a/site/src/App.vue
+++ b/site/src/App.vue
@@ -1,8 +1,10 @@
 <template>
   <a-config-provider :locale="locale" :theme="themeConfig">
-    <SiteToken>
-      <router-view />
-    </SiteToken>
+    <a-style-provider :value="{ hashPriority: 'high' }">
+      <SiteToken>
+        <router-view />
+      </SiteToken>
+    </a-style-provider>
   </a-config-provider>
 </template>
 
diff --git a/typings/global.d.ts b/typings/global.d.ts
index b94bba26af..5e2106b6e1 100644
--- a/typings/global.d.ts
+++ b/typings/global.d.ts
@@ -63,6 +63,8 @@ declare module 'vue' {
 
     AConfigProvider: typeof import('ant-design-vue')['ConfigProvider'];
 
+    AStyleProvider: typeof import('ant-design-vue')['StyleProvider'];
+
     ADatePicker: typeof import('ant-design-vue')['DatePicker'];
 
     ADescriptions: typeof import('ant-design-vue')['Descriptions'];

From 75e741b1ec41fbd310f66e5ef41eec528b6f80d8 Mon Sep 17 00:00:00 2001
From: CCherry07 <2405693142@qq.com>
Date: Sun, 2 Apr 2023 14:11:48 +0800
Subject: [PATCH 2/3] feat(StyleProvider): refactor to  use context

---
 components/_util/cssinjs/StyleContext.tsx | 79 +++++++++++++++++------
 1 file changed, 59 insertions(+), 20 deletions(-)

diff --git a/components/_util/cssinjs/StyleContext.tsx b/components/_util/cssinjs/StyleContext.tsx
index 969ede3f5a..22a85f111f 100644
--- a/components/_util/cssinjs/StyleContext.tsx
+++ b/components/_util/cssinjs/StyleContext.tsx
@@ -1,10 +1,11 @@
 import type { App, InjectionKey, Ref } from 'vue';
-import { provide, defineComponent, unref, computed, inject } from 'vue';
-import { objectType } from '../type';
+import { watch, reactive, provide, defineComponent, unref, computed, inject } from 'vue';
 import CacheEntity from './Cache';
 import type { Linter } from './linters/interface';
 import type { Transformer } from './transformers/interface';
-
+import { arrayType, objectType } from '../type';
+import PropTypes from '../vue-types';
+import initDefaultProps from '../props-util/initDefaultProps';
 export const ATTR_TOKEN = 'data-token-hash';
 export const ATTR_MARK = 'data-css-hash';
 export const ATTR_DEV_CACHE_PATH = 'data-dev-cache-path';
@@ -72,48 +73,86 @@ export interface StyleContextProps {
   linters?: Linter[];
 }
 
-const StyleContextKey: InjectionKey<StyleContextProps> = Symbol('StyleContextKey');
+const StyleContextKey: InjectionKey<Partial<StyleContextProps>> = Symbol('StyleContextKey');
 
 export type StyleProviderProps = Partial<StyleContextProps> | Ref<Partial<StyleContextProps>>;
+const defaultStyleContext: StyleContextProps = {
+  cache: createCache(),
+  defaultCache: true,
+  hashPriority: 'low',
+};
 export const useStyleInject = () => {
-  return inject(StyleContextKey, {
-    hashPriority: 'low',
-    cache: createCache(),
-    defaultCache: true,
-  });
+  return inject(StyleContextKey, defaultStyleContext);
 };
 export const useStyleProvider = (props: StyleProviderProps) => {
   const parentContext = useStyleInject();
 
-  const context = computed<StyleProviderProps>(() => {
-    const mergedContext: StyleProviderProps = {
+  const context = computed<Partial<StyleContextProps>>(() => {
+    const mergedContext: Partial<StyleContextProps> = {
       ...parentContext,
     };
     const propsValue = unref(props);
-    (Object.keys(propsValue) as (keyof StyleContextProps)[]).forEach(key => {
+    Object.keys(propsValue).forEach(key => {
       const value = propsValue[key];
       if (propsValue[key] !== undefined) {
-        (mergedContext as any)[key] = value;
+        mergedContext[key] = value;
       }
     });
 
     const { cache } = propsValue;
     mergedContext.cache = mergedContext.cache || createCache();
     mergedContext.defaultCache = !cache && parentContext.defaultCache;
-
     return mergedContext;
   });
-  provide(StyleContextKey, context.value);
+
   return context;
 };
+const AStyleProviderProps = () => ({
+  autoClear: PropTypes.bool,
+  /** @private Test only. Not work in production. */
+  mock: PropTypes.oneOf(['server', 'client'] as const),
+  /**
+   * Only set when you need ssr to extract style on you own.
+   * If not provided, it will auto create <style /> on the end of Provider in server side.
+   */
+  cache: objectType<CacheEntity>(),
+  /** Tell children that this context is default generated context */
+  defaultCache: PropTypes.bool,
+  /** Use `:where` selector to reduce hashId css selector priority */
+  hashPriority: PropTypes.oneOf(['low', 'high'] as const),
+  /** Tell cssinjs where to inject style in */
+  container: PropTypes.any,
+  /** Component wil render inline  `<style />` for fallback in SSR. Not recommend. */
+  ssrInline: PropTypes.bool,
+  /** Transform css before inject in document. Please note that `transformers` do not support dynamic update */
+  transformers: arrayType<Transformer[]>(),
+  /**
+   * Linters to lint css before inject in document.
+   * Styles will be linted after transforming.
+   * Please note that `linters` do not support dynamic update.
+   */
+  linters: arrayType<Linter[]>(),
+});
+
 export const StyleProvider = defineComponent({
   name: 'AStyleProvider',
-  props: {
-    value: objectType<StyleProviderProps>(),
-  },
+  props: initDefaultProps(AStyleProviderProps(), defaultStyleContext),
   setup(props, { slots }) {
-    const config = computed(() => unref(props.value));
-    useStyleProvider(config);
+    const providerProps = computed(() => ({ ...props }));
+    const context = useStyleProvider(providerProps);
+    const state = reactive<Partial<StyleContextProps>>({
+      ...context.value,
+    });
+    provide(StyleContextKey, state);
+    watch(
+      props,
+      newValue => {
+        Object.keys(newValue).forEach(key => {
+          state[key] = newValue[key];
+        });
+      },
+      { immediate: true },
+    );
     return () => slots.default?.();
   },
 });

From fb9de3ba1b95e2fa09a1b2716a8ff08ae7a10198 Mon Sep 17 00:00:00 2001
From: CCherry07 <2405693142@qq.com>
Date: Sun, 2 Apr 2023 23:52:14 +0800
Subject: [PATCH 3/3] chore(StyleProvider): update AStyleProviderProps type

---
 components/_util/cssinjs/StyleContext.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/components/_util/cssinjs/StyleContext.tsx b/components/_util/cssinjs/StyleContext.tsx
index 22a85f111f..5dbff11302 100644
--- a/components/_util/cssinjs/StyleContext.tsx
+++ b/components/_util/cssinjs/StyleContext.tsx
@@ -121,7 +121,7 @@ const AStyleProviderProps = () => ({
   /** Use `:where` selector to reduce hashId css selector priority */
   hashPriority: PropTypes.oneOf(['low', 'high'] as const),
   /** Tell cssinjs where to inject style in */
-  container: PropTypes.any,
+  container: PropTypes.oneOfType([objectType<Element>(), objectType<ShadowRoot>()]),
   /** Component wil render inline  `<style />` for fallback in SSR. Not recommend. */
   ssrInline: PropTypes.bool,
   /** Transform css before inject in document. Please note that `transformers` do not support dynamic update */
@@ -138,8 +138,7 @@ export const StyleProvider = defineComponent({
   name: 'AStyleProvider',
   props: initDefaultProps(AStyleProviderProps(), defaultStyleContext),
   setup(props, { slots }) {
-    const providerProps = computed(() => ({ ...props }));
-    const context = useStyleProvider(providerProps);
+    const context = useStyleProvider(props);
     const state = reactive<Partial<StyleContextProps>>({
       ...context.value,
     });