fix: 🐛 修复非开发环境下的 useStyleSheet 错误

src/components/Fab/index.tsx

@@ -40,8 +40,6 @@ export interface FabProps {
  * Fab 按钮
  */
 export const Fab: Component<FabProps> = (_props) => {
-  onMount(() => useStyle(style));
-
   const props = mergeProps(
     { progress: 0, initialShow: true, autoTrans: false },
     _props,
@@ -72,6 +70,7 @@ export const Fab: Component<FabProps> = (_props) => {
 
   return (
     <div
+      ref={(ref) => useStyle(style, ref)}
       class={classes.fabRoot}
       data-show={props.show ?? show()}
       data-trans={props.autoTrans}

src/components/IconButton/index.tsx

@@ -1,4 +1,4 @@
-import { type Component, type JSX, mergeProps, onMount } from 'solid-js';
+import { type Component, type JSX, mergeProps } from 'solid-js';
 import { useStyle } from 'helper';
 
 import classes, { css as style } from './index.module.css';
@@ -24,8 +24,6 @@ interface IconButtonProps {
 
 /** 图标按钮 */
 export const IconButton: Component<IconButtonProps> = (_props) => {
-  onMount(() => useStyle(style));
-
   const props = mergeProps({ placement: 'right' }, _props);
   let buttonRef: HTMLButtonElement;
   const handleClick: EventHandler['on:click'] = (e) => {
@@ -35,7 +33,11 @@ export const IconButton: Component<IconButtonProps> = (_props) => {
   };
 
   return (
-    <div class={classes.iconButtonItem} data-show={props.showTip}>
+    <div
+      ref={(ref) => useStyle(style, ref)}
+      class={classes.iconButtonItem}
+      data-show={props.showTip}
+    >
       <button
         ref={buttonRef!}
         aria-label={props.tip}

src/components/Manga/components/ComicImgFlow.tsx

@@ -5,10 +5,9 @@ import {
   createEffectOn,
   type UseDrag,
   useDrag,
-  useStyleMemo,
-  useStyle,
 } from 'helper';
 
+import { useStyleMemo, useStyle } from '../hooks/useStyle';
 import { refs, setState, store } from '../store';
 import { useHiddenMouse } from '../hooks/useHiddenMouse';
 import {

src/components/Manga/components/Scrollbar.tsx

@@ -5,15 +5,10 @@ import {
   Show,
   onMount,
 } from 'solid-js';
-import {
-  boolDataVal,
-  debounce,
-  createThrottleMemo,
-  useDrag,
-  useStyleMemo,
-} from 'helper';
+import { boolDataVal, debounce, createThrottleMemo, useDrag } from 'helper';
 
 import { refs, store } from '../store';
+import { useStyleMemo } from '../hooks/useStyle';
 import {
   bindRef,
   getPageTip,

src/components/Manga/hooks/useCssVar.ts

@@ -1,9 +1,11 @@
 import { type JSX } from 'solid-js';
-import { t, useStyleMemo } from 'helper';
+import { t } from 'helper';
 
 import { store } from '../store';
 import classes from '../index.module.css';
 
+import { useStyleMemo } from './useStyle';
+
 /** 深色模式 */
 const darkStyle: JSX.CSSProperties = {
   '--hover-bg-color': '#FFF3',

src/components/Manga/hooks/useStyle.ts

@@ -0,0 +1,10 @@
+import { useStyle as _useStyle, useStyleMemo as _useStyleMemo } from 'helper';
+import { onMount } from 'solid-js';
+
+import { refs } from '../store';
+
+export const useStyle: typeof _useStyle = (css) =>
+  onMount(() => _useStyle(css, refs.root));
+
+export const useStyleMemo: typeof _useStyleMemo = (selector, styleMapArg) =>
+  onMount(() => _useStyleMemo(selector, styleMapArg, refs.root));

src/components/Manga/index.tsx

@@ -4,18 +4,19 @@ import {
   enableScheduling,
   onMount,
 } from 'solid-js';
-import { boolDataVal, useStyle } from 'helper';
+import { boolDataVal } from 'helper';
 
 import { ComicImgFlow } from './components/ComicImgFlow';
 import { Toolbar } from './components/Toolbar';
 import { Scrollbar } from './components/Scrollbar';
 import { TouchArea } from './components/TouchArea';
 import { EndPage } from './components/EndPage';
+import { useInit } from './hooks/useInit';
+import { useStyle } from './hooks/useStyle';
 import { useCssVar } from './hooks/useCssVar';
 import { store, type State } from './store/index';
 import { type FillEffect } from './store/image';
 import { type Option } from './store/option';
-import { useInit } from './hooks/useInit';
 import {
   bindRef,
   focus,
@@ -72,15 +73,12 @@ export interface MangaProps {
 
 /** 漫画组件 */
 export const Manga: Component<MangaProps> = (props) => {
-  onMount(() => {
-    useStyle(style);
-    useInit(props);
-  });
+  useStyle(style);
+  useCssVar();
+  onMount(() => useInit(props));
 
   createEffect(() => props.show && focus());
 
-  useCssVar();
-
   return (
     <>
       <div

src/components/Toast/Toaster.tsx

@@ -19,7 +19,7 @@ export const Toaster: Component = () => {
   );
 
   onMount(() => {
-    useStyle(style);
+    useStyle(style, ref());
 
     const handleVisibilityChange = () => {
       setVisible(document.visibilityState === 'visible');

src/helper/useStyle.ts

@@ -1,21 +1,11 @@
-import { getOwner, type Accessor, type JSX } from 'solid-js';
+import { type Accessor, type JSX } from 'solid-js';
 import { createEffectOn, createRootMemo, onAutoMount } from 'helper';
-import type { Computation } from 'solid-js/types/reactive/signal';
 
-const useStyleSheet = () => {
+const useStyleSheet = (e?: Element) => {
   const styleSheet = new CSSStyleSheet();
 
-  onAutoMount((owner) => {
-    let root: Document;
-
-    if (owner) {
-      let _owner = getOwner() as Computation<unknown>;
-      while (_owner && !_owner.value)
-        _owner = _owner.owner as Computation<unknown>;
-      if (_owner === null) throw new Error('owner not found');
-      root = (_owner.value as HTMLElement).getRootNode() as Document;
-    } else root = document;
-
+  onAutoMount(() => {
+    const root = (e?.getRootNode() as Document) ?? document;
     root.adoptedStyleSheets = [...root.adoptedStyleSheets, styleSheet];
     return () => {
       const index = root.adoptedStyleSheets.indexOf(styleSheet);
@@ -26,8 +16,8 @@ const useStyleSheet = () => {
   return styleSheet;
 };
 
-export const useStyle = (css: Accessor<string> | string) => {
-  const styleSheet = useStyleSheet();
+export const useStyle = (css: string | Accessor<string>, e?: Element) => {
+  const styleSheet = useStyleSheet(e);
   if (typeof css === 'string') styleSheet.replaceSync(css);
   else createEffectOn(css, (style) => styleSheet.replaceSync(style));
 };
@@ -40,8 +30,9 @@ export type StyleMap = {
 export const useStyleMemo = (
   selector: string,
   styleMapArg: Array<StyleMap | Accessor<JSX.CSSProperties>> | StyleMap,
+  e?: Element,
 ) => {
-  const styleSheet = useStyleSheet();
+  const styleSheet = useStyleSheet(e);
   styleSheet.insertRule(`${selector} { }`);
 
   const { style } = styleSheet.cssRules[0] as CSSStyleRule;