feat(plugin-basic-ui): remove div wrapper in plugin-basic-ui

daangn · Aug 14, 2024 · bff6602 · bff6602
1 parent 1fc97b4
commit bff6602
Show file tree

Hide file tree

Showing 5 changed files with 111 additions and 104 deletions.
diff --git a/extensions/plugin-basic-ui/src/basicUIPlugin.css.ts b/extensions/plugin-basic-ui/src/basicUIPlugin.css.ts
@@ -1,9 +1,7 @@
 import {
   createGlobalTheme,
   createGlobalThemeContract,
-  createTheme,
 } from "@vanilla-extract/css";
-import { recipe } from "@vanilla-extract/recipes";
 
 const GLOBAL_VARS = {
   backgroundColor: "background-color",
@@ -81,13 +79,6 @@ const cupertinoValues: GlobalVars = {
   },
 };
 
-export const android = createTheme(globalVars, {
-  ...androidValues,
-});
-export const cupertino = createTheme(globalVars, {
-  ...cupertinoValues,
-});
-
 createGlobalTheme(
   ":root[data-stackflow-plugin-basic-ui-theme=cupertino]",
   globalVars,
@@ -98,18 +89,3 @@ createGlobalTheme(
   globalVars,
   androidValues,
 );
-
-export const stackWrapper = recipe({
-  base: {},
-  variants: {
-    theme: {
-      android,
-      cupertino,
-    },
-    loading: {
-      true: {
-        pointerEvents: "none",
-      },
-    },
-  },
-});
diff --git a/extensions/plugin-basic-ui/src/basicUIPlugin.tsx b/extensions/plugin-basic-ui/src/basicUIPlugin.tsx
@@ -3,8 +3,9 @@ import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { createContext, useContext } from "react";
 
 import * as css from "./basicUIPlugin.css";
+import { RootStyles } from "./components/RootStyles";
 import type { RecursivePartial } from "./utils";
-import { compact, compactMap, isBrowser } from "./utils";
+import { compactMap } from "./utils";
 
 type BasicUIPluginOptions = RecursivePartial<css.GlobalVars> & {
   theme: "android" | "cupertino";
@@ -50,46 +51,46 @@ export const basicUIPlugin: (
     const _options =
       typeof options === "function" ? options({ initialContext }) : options;
 
+    /**
+     * Assign CSS Variables
+     */
+    const styles: { [key: string]: string | undefined } = assignInlineVars(
+      compactMap({
+        [css.globalVars.backgroundColor]: _options.backgroundColor,
+        [css.globalVars.dimBackgroundColor]: _options.dimBackgroundColor,
+        [css.globalVars.transitionDuration]: `${stack.transitionDuration}ms`,
+        [css.globalVars.computedTransitionDuration]:
+          stack.globalTransitionState === "loading"
+            ? `${stack.transitionDuration}ms`
+            : "0ms",
+        [css.globalVars.appBar.borderColor]: _options.appBar?.borderColor,
+        [css.globalVars.appBar.borderSize]: _options.appBar?.borderSize,
+        [css.globalVars.appBar.height]: _options.appBar?.height,
+        [css.globalVars.appBar.iconColor]: _options.appBar?.iconColor,
+        [css.globalVars.appBar.textColor]: _options.appBar?.textColor,
+        [css.globalVars.appBar.minSafeAreaInsetTop]:
+          _options.appBar?.minSafeAreaInsetTop,
+        [css.globalVars.bottomSheet.borderRadius]:
+          _options.bottomSheet?.borderRadius,
+        [css.globalVars.modal.borderRadius]: _options.modal?.borderRadius,
+      }),
+    );
+
+    /**
+     * Prevent pointer events when transitioning
+     */
+    styles["pointer-events"] =
+      stack.globalTransitionState === "loading" ? "none" : "auto";
+
     return (
       <GlobalOptionsProvider
         value={{
           ...options,
           theme: initialContext?.theme ?? _options.theme,
         }}
       >
-        <div
-          className={compact([
-            css.stackWrapper({
-              theme: initialContext?.theme ?? _options.theme,
-              loading: stack.globalTransitionState === "loading",
-            }),
-            _options.rootClassName,
-          ]).join(" ")}
-          style={assignInlineVars(
-            compactMap({
-              [css.globalVars.backgroundColor]: _options.backgroundColor,
-              [css.globalVars.dimBackgroundColor]: _options.dimBackgroundColor,
-              [css.globalVars.transitionDuration]:
-                `${stack.transitionDuration}ms`,
-              [css.globalVars.computedTransitionDuration]:
-                stack.globalTransitionState === "loading"
-                  ? `${stack.transitionDuration}ms`
-                  : "0ms",
-              [css.globalVars.appBar.borderColor]: _options.appBar?.borderColor,
-              [css.globalVars.appBar.borderSize]: _options.appBar?.borderSize,
-              [css.globalVars.appBar.height]: _options.appBar?.height,
-              [css.globalVars.appBar.iconColor]: _options.appBar?.iconColor,
-              [css.globalVars.appBar.textColor]: _options.appBar?.textColor,
-              [css.globalVars.appBar.minSafeAreaInsetTop]:
-                _options.appBar?.minSafeAreaInsetTop,
-              [css.globalVars.bottomSheet.borderRadius]:
-                _options.bottomSheet?.borderRadius,
-              [css.globalVars.modal.borderRadius]: _options.modal?.borderRadius,
-            }),
-          )}
-        >
-          {stack.render()}
-        </div>
+        <RootStyles theme={_options.theme} styles={styles} />
+        {stack.render()}
       </GlobalOptionsProvider>
     );
   },

diff --git a/extensions/plugin-basic-ui/src/components/AppBar.css.ts b/extensions/plugin-basic-ui/src/components/AppBar.css.ts
@@ -1,7 +1,7 @@
 import { style } from "@vanilla-extract/css";
 import { recipe } from "@vanilla-extract/recipes";
 
-import { android, cupertino, globalVars } from "../basicUIPlugin.css";
+import { globalVars } from "../basicUIPlugin.css";
 import { f } from "../styles";
 import {
   background,
@@ -40,17 +40,18 @@ export const appBar = recipe({
       zIndex: vars.zIndexes.appBar,
       transition: transitions(appBarCommonTransition),
       selectors: {
-        [`${cupertino} &`]: {
+        ":root[data-stackflow-plugin-basic-ui-theme=cupertino] &": {
           position: "absolute",
         },
-        [`${cupertino} ${exitActive} &`]: {
-          transform: "translate3d(100%, 0, 0)",
-          transition: transitions({
-            ...appBarCommonTransition,
-            transform: "0s",
-          }),
-        },
-        [`${android} &`]: {
+        [`:root[data-stackflow-plugin-basic-ui-theme=cupertino] ${exitActive} &`]:
+          {
+            transform: "translate3d(100%, 0, 0)",
+            transition: transitions({
+              ...appBarCommonTransition,
+              transform: "0s",
+            }),
+          },
+        ":root[data-stackflow-plugin-basic-ui-theme=android] &": {
           opacity: 0,
           transform: "translate3d(0, 10rem, 0)",
           transition: transitions({
@@ -60,8 +61,8 @@ export const appBar = recipe({
           }),
         },
         [`
-          ${android} ${enterActive} &,
-          ${android} ${enterDone} &
+          :root[data-stackflow-plugin-basic-ui-theme=android] ${enterActive} &,
+          :root[data-stackflow-plugin-basic-ui-theme=android] ${enterDone} &
         `]: {
           opacity: 1,
           transform: "translate3d(0, 0, 0)",
@@ -78,7 +79,7 @@ export const appBar = recipe({
     modalPresentationStyle: {
       fullScreen: {
         selectors: {
-          [`${cupertino} &`]: {
+          ":root[data-stackflow-plugin-basic-ui-theme=cupertino] &": {
             transform: "translate3d(0, 100vh, 0)",
             transition: transitions({
               ...appBarCommonTransition,
@@ -87,36 +88,38 @@ export const appBar = recipe({
             }),
           },
           [`
-            ${cupertino} ${enterActive} &,
-            ${cupertino} ${enterDone} &
+            :root[data-stackflow-plugin-basic-ui-theme=cupertino] ${enterActive} &,
+            :root[data-stackflow-plugin-basic-ui-theme=cupertino] ${enterDone} &
           `]: {
             transform: "translate3d(0, 0, 0)",
           },
-          [`${cupertino} ${exitActive} &`]: {
-            transform: "translate3d(0, 100vh, 0)",
-            transition: transitions({
-              ...appBarCommonTransition,
-              transform: vars.transitionDuration,
-              opacity: vars.transitionDuration,
-            }),
-          },
+          [`:root[data-stackflow-plugin-basic-ui-theme=cupertino] ${exitActive} &`]:
+            {
+              transform: "translate3d(0, 100vh, 0)",
+              transition: transitions({
+                ...appBarCommonTransition,
+                transform: vars.transitionDuration,
+                opacity: vars.transitionDuration,
+              }),
+            },
         },
       },
     },
     activityEnterStyle: {
       slideInLeft: {
         selectors: {
-          [`${android} &`]: {
+          ":root[data-stackflow-plugin-basic-ui-theme=android] &": {
             opacity: 1,
             transform: "translate3d(0, 0, 0)",
           },
-          [`${android} ${exitActive} &`]: {
-            transform: "translate3d(100%, 0, 0)",
-            transition: transitions({
-              ...appBarCommonTransition,
-              transform: "0s",
-            }),
-          },
+          [`:root[data-stackflow-plugin-basic-ui-theme=android] ${exitActive} &`]:
+            {
+              transform: "translate3d(100%, 0, 0)",
+              transition: transitions({
+                ...appBarCommonTransition,
+                transform: "0s",
+              }),
+            },
         },
       },
     },
@@ -189,7 +192,7 @@ export const centerMain = recipe({
       color: globalVars.appBar.textColorTransitionDuration,
     }),
     selectors: {
-      [`${android} &`]: {
+      ":root[data-stackflow-plugin-basic-ui-theme=android] &": {
         width: "100%",
         justifyContent: "flex-start",
         paddingLeft: "1rem",
@@ -198,7 +201,7 @@ export const centerMain = recipe({
         fontWeight: "bold",
         boxSizing: "border-box",
       },
-      [`${cupertino} &`]: {
+      ":root[data-stackflow-plugin-basic-ui-theme=cupertino] &": {
         position: "absolute",
         display: "flex",
         alignItems: "center",
@@ -221,7 +224,7 @@ export const centerMain = recipe({
     hasLeft: {
       true: {
         selectors: {
-          [`${android} &`]: {
+          ":root[data-stackflow-plugin-basic-ui-theme=android] &": {
             paddingLeft: "0.375rem",
           },
         },
@@ -243,7 +246,7 @@ export const centerMainEdge = style([
     display: "none",
     width: vars.appBar.center.mainWidth,
     selectors: {
-      [`${cupertino} &`]: {
+      ":root[data-stackflow-plugin-basic-ui-theme=cupertino] &": {
         display: "block",
       },
     },
@@ -273,7 +276,7 @@ export const right = style([
       display: "none",
     },
     selectors: {
-      [`${android} &`]: {
+      ":root[data-stackflow-plugin-basic-ui-theme=android] &": {
         padding: "0 0.5rem 0 0",
       },
     },

diff --git a/extensions/plugin-basic-ui/src/components/AppScreen.css.ts b/extensions/plugin-basic-ui/src/components/AppScreen.css.ts
@@ -1,7 +1,7 @@
 import { createThemeContract, style } from "@vanilla-extract/css";
 import { recipe } from "@vanilla-extract/recipes";
 
-import { android, cupertino, globalVars } from "../basicUIPlugin.css";
+import { globalVars } from "../basicUIPlugin.css";
 import { f } from "../styles";
 
 export const vars = createThemeContract({
@@ -59,7 +59,7 @@ export const dim = style([
     opacity: 0,
     zIndex: vars.zIndexes.dim,
     selectors: {
-      [`${android} &`]: {
+      ":root[data-stackflow-plugin-basic-ui-theme=android] &": {
         height: "10rem",
         background: `linear-gradient(${globalVars.dimBackgroundColor}, rgba(0, 0, 0, 0))`,
       },
@@ -92,22 +92,22 @@ export const paper = recipe({
       },
       zIndex: vars.zIndexes.paper,
       selectors: {
-        [`${cupertino} &`]: {
+        ":root[data-stackflow-plugin-basic-ui-theme=cupertino] &": {
           transform: "translate3d(100%, 0, 0)",
         },
         [`
-          ${cupertino} ${enterActive} &,
-          ${cupertino} ${enterDone} &
+          :root[data-stackflow-plugin-basic-ui-theme=cupertino] ${enterActive} &,
+          :root[data-stackflow-plugin-basic-ui-theme=cupertino] ${enterDone} &
         `]: {
           transform: "translate3d(0, 0, 0)",
         },
-        [`${android} &`]: {
+        ":root[data-stackflow-plugin-basic-ui-theme=android] &": {
           opacity: 0,
           transform: "translate3d(0, 10rem, 0)",
         },
         [`
-          ${android} ${enterActive} &,
-          ${android} ${enterDone} &
+          :root[data-stackflow-plugin-basic-ui-theme=android] ${enterActive} &,
+          :root[data-stackflow-plugin-basic-ui-theme=android] ${enterDone} &
         `]: {
           opacity: 1,
           transform: "translate3d(0, 0, 0)",
@@ -146,7 +146,7 @@ export const paper = recipe({
     modalPresentationStyle: {
       fullScreen: {
         selectors: {
-          [`${cupertino} &`]: {
+          ":root[data-stackflow-plugin-basic-ui-theme=cupertino] &": {
             transform: "translate3d(0, 100%, 0)",
           },
         },
@@ -155,7 +155,7 @@ export const paper = recipe({
     activityEnterStyle: {
       slideInLeft: {
         selectors: {
-          [`${android} &`]: {
+          ":root[data-stackflow-plugin-basic-ui-theme=android] &": {
             transform: "translate3d(50%, 0, 0)",
           },
         },

diff --git a/extensions/plugin-basic-ui/src/components/RootStyles.ts b/extensions/plugin-basic-ui/src/components/RootStyles.ts
@@ -0,0 +1,27 @@
+import { useLayoutEffect } from "react";
+
+export type RootStylesProps = {
+  theme: "android" | "cupertino";
+  styles: {
+    [cssVarName: string]: string | undefined;
+  };
+};
+export function RootStyles({ theme, styles }: RootStylesProps) {
+  useLayoutEffect(() => {
+    const root = document.querySelector(":root") as HTMLHtmlElement;
+
+    if (!root) {
+      return;
+    }
+
+    for (const [key, value] of Object.entries(styles)) {
+      if (value) {
+        root.style.setProperty(key, value);
+      }
+    }
+
+    root.dataset.stackflowPluginBasicUiTheme = theme;
+  }, [styles, theme]);
+
+  return null;
+}