fix: layout

package.json

@@ -55,7 +55,7 @@
     "typescript": "^5.2.2",
     "unplugin-icons": "^0.18.5",
     "vite": "^5.2.8",
-    "vite-plugin-stylex-dev": "^0.6.0"
+    "vite-plugin-stylex-dev": "^0.7.0"
   },
   "license": "MIT",
   "author": "kanno",

src/client/components/drawer/backdrop.tsx

@@ -1,6 +1,7 @@
 import React, { useRef } from 'react'
 import type { MouseEvent } from 'react'
 import * as stylex from '@stylexjs/stylex'
+import { injectGlobalStyle } from '@stylex-extend/core'
 import { CSSTransition } from '../css-transition'
 import { useClasses } from '../../composables'
 
@@ -44,19 +45,7 @@ const styles = stylex.create({
       height: '100%',
       verticalAlign: 'middle',
       content: ''
-    },
-    ':not(#__unused__).backdrop-enter .layer': {
-      opacity: 0
-    },
-    ':not(#__unused__).backdrop-enter-active .layer': {
-      opacity: 0.25
-    },
-    ':not(#__unused__).backdrop-leave .layer': {
-      opacity: 0.25
-    },
-    ':not(#__unused__).backdrop-leave-active .layer': {
-      opacity: 0
-    } 
+    }
   },
   position: (width: string) => ({
     position: 'relative',
@@ -84,6 +73,23 @@ const styles = stylex.create({
   }
 })
 
+injectGlobalStyle({
+  '.backdrop': {
+    '&.backdrop-wrapper-enter .layer': {
+      opacity: 0
+    },
+    '&.backdrop-wrapper-enter-active .layer': {
+      opacity: 0.25
+    },
+    '&.backdrop-wrapper-leave .layer': {
+      opacity: 0.25
+    },
+    '&.backdrop-wrapper-leave-active .layer': {
+      opacity: 0
+    }
+  }
+})
+
 const Backdrop: React.FC<React.PropsWithChildren<BackdropProps>> = React.memo(
   ({
     children,
@@ -116,7 +122,7 @@ const Backdrop: React.FC<React.PropsWithChildren<BackdropProps>> = React.memo(
       <CSSTransition name="backdrop-wrapper" visible={visible} clearTime={300}>
         <div
           role="presentation"
-          className={useClasses(stylex.props(styles.backdrop).className, backdropClassName)}
+          className={useClasses(stylex.props(styles.backdrop).className, backdropClassName, 'backdrop')}
           onClick={handleClick}
           onMouseUp={handleMouseUp}
           {...props}

src/client/main.tsx

@@ -5,21 +5,21 @@ import { App } from './application'
 
 injectGlobalStyle({
   '#app,html,body': {
-    margin: 0,
-    padding: 0,
+    margin: '0',
+    padding: '0',
     overflow: 'hidden',
     height: '100%',
     width: '100%'
   },
   p: {
-    margin: 0
+    margin: '0'
   },
   'button,input,select,textarea': {
     fontFamily: 'inherit',
     fontSize: 'inherit',
     lineHeight: 'inherit',
     color: 'inherit',
-    margin: 0,
+    margin: '0',
     '&:focus': {
       outline: 'none'
     }

yarn.lock

@@ -6439,20 +6439,19 @@ __metadata:
     typescript: "npm:^5.2.2"
     unplugin-icons: "npm:^0.18.5"
     vite: "npm:^5.2.8"
-    vite-plugin-stylex-dev: "npm:^0.6.0"
+    vite-plugin-stylex-dev: "npm:^0.7.0"
   languageName: unknown
   linkType: soft
 
-"vite-plugin-stylex-dev@npm:^0.6.0":
-  version: 0.6.0
-  resolution: "vite-plugin-stylex-dev@npm:0.6.0"
+"vite-plugin-stylex-dev@npm:^0.7.0":
+  version: 0.7.0
+  resolution: "vite-plugin-stylex-dev@npm:0.7.0"
   dependencies:
     "@babel/core": "npm:^7.23.9"
     "@rollup/pluginutils": "npm:^5.1.0"
     "@stylex-extend/babel-plugin": "npm:^0.2.2"
     "@stylexjs/babel-plugin": "npm:^0.6.1"
-    magic-string: "npm:^0.30.5"
-  checksum: 10/02728ef7283deea88c07cf123494ad701b18bea606175fa9b7a4105dc6a67a169234b000888400f71170e9e14a951fd31af43caa477bb6993463588d9634f942
+  checksum: 10/46d1fc563d2b1b55cd5e2855a405f273ed347c55c0bc6882d41f30f39c11778cbf3fd136a3f9eab0c6ce78e054d574f06a127ed8898fb871dbc33e2d28ba35f9
   languageName: node
   linkType: hard