feat(components): add two params for dynamicStyles, wrap processStringStyle for context styles, change CSSStyleSheet watchEffect

Author: lejunyang

packages/components/index.ts

@@ -2,6 +2,8 @@ export * from './src/custom';
 export * from './src/components';
 // export * from './src/hooks';
 export * from './src/utils';
+export * from './src/hooks/useBreakpoint';
+export * from './src/hooks/useNameSpace';
 export { themeColors, locales, grayColors, statuses } from './src/common';
 
 export { useForm } from '@lun/core';

packages/components/src/components/config/config.context.ts

@@ -14,8 +14,12 @@ export const GlobalContextConfig = reactive({
     const original = openShadowComponents.reduce((result, name) => {
       result[name] = [];
       return result;
-    }, {} as Record<'common' | OpenShadowComponentKey, ((vm: ComponentInternalInstance) => string)[]>);
-    const commonStyles = [] as ((vm: ComponentInternalInstance) => string)[];
+    }, {} as Record<'common' | OpenShadowComponentKey, ((vm: ComponentInternalInstance, compName: OpenShadowComponentKey, context: any) => string)[]>);
+    const commonStyles = [] as ((
+      vm: ComponentInternalInstance,
+      compName: OpenShadowComponentKey,
+      context: any,
+    ) => string)[];
     return new Proxy(original, {
       get(target, p, receiver) {
         if (p === 'common') return commonStyles;

packages/components/src/hooks/useStyles.ts

@@ -1,43 +1,60 @@
-import { copyCSSStyleSheetsIfNeed, isFunction, isSupportCSSStyleSheet, toArrayIfNotNil } from '@lun/utils';
+import { copyCSSStyleSheetsIfNeed, runIfFn, isSupportCSSStyleSheet, toArrayIfNotNil } from '@lun/utils';
 import type { OpenShadowComponentKey } from 'config';
 import { GlobalStaticConfig, componentsWithTeleport, useContextConfig } from 'config';
 import { computed, getCurrentInstance, h, watchEffect } from 'vue';
 import { onCEMount } from './shadowDom';
 import { error } from '../utils/console';
+import { processStringStyle } from 'utils';
 
 export function useContextStyles(name: OpenShadowComponentKey) {
   const vm = getCurrentInstance()!;
   if (__DEV__ && !vm) {
     error('useContextStyles must be called inside setup()');
     return;
   }
-  const dynamicStyles = useContextConfig('dynamicStyles');
-  const styles = toArrayIfNotNil(dynamicStyles[name]).concat(() => (vm.props.innerStyle as string) || '');
+  const context = useContextConfig();
+  const { dynamicStyles } = context;
+  const styles = toArrayIfNotNil(dynamicStyles[name]).concat(
+    () => (vm.props.innerStyle as string) || '',
+  );
   if (name === 'teleport-holder') {
     styles.push(...componentsWithTeleport.flatMap((name) => dynamicStyles[name]));
   }
-  let sheets: CSSStyleSheet[] = [];
+  const sheets: (CSSStyleSheet & { _clone?: CSSStyleSheet; _css: () => string })[] = [];
   const textStyles: (() => string)[] = [];
   const adopt = isSupportCSSStyleSheet() && GlobalStaticConfig.preferCSSStyleSheet;
   styles.forEach((s) => {
     if (!s) return;
-    const css = !isFunction(s) ? () => String(s) : s;
+    const css = () => processStringStyle(runIfFn(s, vm, name, context), true);
     if (adopt) {
-      const sheet = new CSSStyleSheet();
-      watchEffect(() => {
-        const result = css(vm);
-        result && sheet.replaceSync(String(result));
-      });
+      const sheet = new CSSStyleSheet() as CSSStyleSheet & { _clone?: CSSStyleSheet; _css: () => string };
+      sheet._css = css;
       sheets.push(sheet);
     } else {
-      textStyles.push(() => css(vm));
+      textStyles.push(css);
     }
   });
+  watchEffect(() => {
+    sheets.forEach((s) => {
+      s.replaceSync(s._css());
+      if (s._clone) {
+        s._clone.replaceSync(s._css());
+      }
+    });
+  });
   onCEMount(({ shadowRoot }) => {
     if (sheets.length) {
+      // TODO 或许不用管clone，或许可以通过vm.CE去获取window的CSSStyleSheet，这样就不用克隆了
       // copyCSSStyleSheetsIfNeed is for doc-pip component. when custom-element is moved to another document, it will throw an error: Sharing constructed stylesheets in multiple documents is not allowed
       // so we must check if the stylesheets are shared between documents, if so, we must clone them
-      shadowRoot.adoptedStyleSheets.push(...copyCSSStyleSheetsIfNeed(sheets, shadowRoot));
+      const cloned = copyCSSStyleSheetsIfNeed(sheets, shadowRoot);
+      // attach cloned sheet to original sheet, so that it can be updated in watchEffect
+      cloned.forEach((s, i) => {
+        if (s !== sheets[i]) {
+          sheets[i]._clone = s;
+        }
+      });
+      shadowRoot.adoptedStyleSheets.push(...cloned);
     }
   });
   return computed(() => textStyles.map((i) => h('style', { type: 'text/css' }, i())));

packages/components/src/utils/style.ts

@@ -2,15 +2,20 @@ import { isString, isSupportCSSStyleSheet, supportCSSLayer } from '@lun/utils';
 import { GlobalStaticConfig } from 'config';
 import { mergeProps } from 'vue';
 
-export function processStringStyle(style: string) {
+export function processStringStyle<B extends boolean>(
+  style: string,
+  noSheet?: B,
+): B extends true ? string : string | CSSStyleSheet {
+  style = String(style || '');
   const { wrapCSSLayer, preferCSSStyleSheet, stylePreprocessor } = GlobalStaticConfig;
   if (supportCSSLayer && wrapCSSLayer) {
     style = `@layer ${isString(wrapCSSLayer) ? wrapCSSLayer : 'lun'} {${style}}`;
   }
   style = stylePreprocessor(style);
-  if (isSupportCSSStyleSheet() && preferCSSStyleSheet) {
+  if (isSupportCSSStyleSheet() && preferCSSStyleSheet && !noSheet) {
     const sheet = new CSSStyleSheet();
     sheet.replaceSync(style);
+    // @ts-ignore
     return sheet;
   } else return style;
 }