fix: apply css properties in shadow dom

Author: nayounsang

.changeset/brave-pigs-carry.md

@@ -0,0 +1,6 @@
+---
+"@msw-dev-tool/react": patch
+---
+
+- Fix bug: tailwind's `@property` is not applied in shadow dom. So, an issue occurred where `border` and `shadow` not applied.
+- So, I parse css style and extract `@property`. And add these to shadow root's style sheet.

packages/react/postcss.config.mjs

@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};

packages/react/src/style/msw-dev-tool.css

@@ -1,6 +1,4 @@
-@layer theme, base, components, utilities;
-@import "tailwindcss/theme.css" layer(theme);
-@import "tailwindcss/utilities.css" layer(utilities);
+@import "tailwindcss";
 
 @source inline("gap-1 gap-2 gap-3 gap-4 gap-5 gap-6 gap-7 gap-8 gap-9 gap-10 gap-11 gap-12");
 @source inline("p-{1,2,3,4,5,6,7,8,9,10,11,12} px-{1,2,3,4,5,6,7,8,9,10,11,12} py-{1,2,3,4,5,6,7,8,9,10,11,12}");
@@ -29,7 +27,6 @@
 /* ===== Misc ===== */
 @source inline("bg-transparent underline");
 
-
 .msw-dt-sub-text {
   @apply text-sm text-gray-800;
 }
@@ -39,7 +36,9 @@
 }
 
 .msw-dt-select-trigger {
-  @apply inline-flex items-center justify-between rounded-md px-4 py-0 text-sm leading-none h-9 gap-1 border border-gray-300 text-gray-700 bg-white box-border;
+  @apply inline-flex items-center justify-between rounded-md gap-1;
+  @apply border border-gray-300 text-gray-700 bg-white;
+  @apply px-4 py-0 text-sm leading-none h-9 box-border;
 }
 
 .msw-dt-select-trigger:hover {
@@ -59,7 +58,8 @@
 }
 
 .msw-dt-select-content {
-  @apply overflow-hidden bg-white rounded-lg shadow-[0px_10px_38px_-10px_rgba(22,23,24,0.35),0px_10px_20px_-15px_rgba(22,23,24,0.2)];
+  @apply overflow-hidden rounded-lg;
+  @apply bg-white shadow-[0px_10px_38px_-10px_rgba(22,23,24,0.35),0px_10px_20px_-15px_rgba(22,23,24,0.2)]
 }
 
 .msw-dt-select-viewport {

packages/react/src/style/trigger.css

@@ -21,7 +21,8 @@
 .msw-dt-default-trigger svg {
   border: 1px solid #c7c7c7;
   border-radius: 1rem;
-  color: #101010;
+  color: #000;
+  transition: color 0.2s ease-in-out;
 }
 
 .msw-dt-default-trigger svg:hover {

packages/react/src/ui/Components/Logo.tsx

@@ -2,8 +2,8 @@ import React from "react";
 
 export const MSWDevToolLogo = ({
   size = "28",
-  backgroundColor = "#101010",
-  color = "#FF6600",
+  backgroundColor = "#000",
+  color = "#FF6A33",
   className,
 }: {
   size?: string | number;

packages/react/src/ui/Components/Select.tsx

@@ -41,7 +41,7 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
   ({ options, placeholder, label, id, style, className, ...rest }, ref) => {
     const container = usePortalContainer()
     return (
-      <_Select data-theme="light" data-radix-color-scheme="light" {...rest}>
+      <_Select {...rest}>
         <SelectTrigger
           className={clsx("msw-dt-select-trigger", className)}
           aria-label={label ?? "select"}
@@ -62,9 +62,6 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
           <SelectPortal container={container}>
             <SelectContent
               className="msw-dt-select-content"
-              style={{ zIndex: 10000 }}
-              data-theme="light"
-              data-radix-color-scheme="light"
             >
               <SelectScrollUpButton className="msw-dt-select-scroll-button">
                 <ChevronUpIcon />

packages/react/src/ui/ThemeProvider.tsx

@@ -1,16 +1,31 @@
-//import { Theme } from "@radix-ui/themes";
-import React, { PropsWithChildren, forwardRef } from "react";
+import React, { PropsWithChildren, forwardRef, useEffect, useRef } from "react";
 import root from "react-shadow";
 import styles from "../style/msw-dev-tool.css";
+import { getCssPropertiesStyleSheet } from "../utils/style";
+
+const shadowSheet = getCssPropertiesStyleSheet(styles);
 
 export const ThemeProvider = forwardRef<HTMLDivElement, PropsWithChildren>(
   ({ children }, ref) => {
+    const shadowHostRef = useRef<HTMLDivElement>(null);
+
+    /**
+     * - `@property` is not supported in shadow dom.
+     * - So we need to use `adoptedStyleSheets` to apply the properties forcefully.
+     */
+    useEffect(() => {
+      if (shadowHostRef?.current?.shadowRoot) {
+        shadowHostRef.current.shadowRoot.adoptedStyleSheets = [shadowSheet];
+      }
+    }, []);
+
     return (
       <>
-        <root.div id="msw-dev-tool-shadow-root">
+        <root.div id="msw-dev-tool-shadow-root" ref={shadowHostRef}>
           <div ref={ref} className="fixed z-[9999] inset-0">
-            {ref && children}
+            {children}
           </div>
+          {/* Currently, size of styles is about 40kb. If it is over 50kb, We have to separate the styles. */}
           <style type="text/css">{styles}</style>
         </root.div>
       </>

packages/react/src/utils/style.ts

@@ -0,0 +1,15 @@
+export const getCssPropertiesStyleSheet = (styles: string) => {
+  const shadowSheet = new CSSStyleSheet();
+  shadowSheet.replaceSync(styles.replace(/:root/gu, ":host"));
+  const properties = [];
+  for (const rule of Array.from(shadowSheet.cssRules)) {
+    if (rule instanceof CSSPropertyRule) {
+      if (rule.initialValue) {
+        properties.push(`${rule.name}: ${rule.initialValue}`);
+      }
+    }
+  }
+
+  shadowSheet.insertRule(`:host { ${properties.join("; ")} }`);
+  return shadowSheet;
+};