update mantine example

with-mantine/contents/multiple.tsx

@@ -1,35 +1,39 @@
 // Convo ref: https://discord.com/channels/946290204443025438/946290204904390693/1064744093109977148
 // See this for another example: https://gist.github.com/joeelmahallawy/2cd5f879485d01170f316be8e585a2ed
 
-import { Button, createEmotionCache } from "@mantine/core"
+import { Button } from "@mantine/core"
+import mantineCssText from "data-text:@mantine/core/styles.css"
+import mantineOverrideCssText from "data-text:~styles/mantine-override.css"
 import type {
   PlasmoCSConfig,
   PlasmoCSUIProps,
-  PlasmoGetInlineAnchorList
+  PlasmoGetInlineAnchorList,
+  PlasmoGetStyle
 } from "plasmo"
 import type { FC } from "react"
 
 import { ThemeProvider } from "~theme"
 
-export const getStyle = () => document.createElement("style")
+import "@mantine/core/styles.css"
+//see https://github.com/PlasmoHQ/plasmo/issues/776#issuecomment-1811072653
+import "~styles/mantine-override.css"
 
 export const config: PlasmoCSConfig = {
   matches: ["https://www.plasmo.com/*"]
 }
 
+export const getStyle: PlasmoGetStyle = () => {
+  const style = document.createElement("style")
+  style.textContent = mantineCssText + mantineOverrideCssText
+  return style
+}
+
 export const getInlineAnchorList: PlasmoGetInlineAnchorList = async () =>
   document.querySelectorAll(`button`)
 
 const PlasmoInline: FC<PlasmoCSUIProps> = ({ anchor }) => {
-  const styleCache = createEmotionCache({
-    key: "plasmo-mui-cache",
-    prepend: true,
-    container:
-      anchor.element.nextElementSibling.shadowRoot.querySelector("style")
-  })
-
   return (
-    <ThemeProvider emotionCache={styleCache}>
+    <ThemeProvider>
       <Button component="a" href="https://docs.plasmo.com" target="_blank">
         View Docs
       </Button>

with-mantine/contents/overlay.tsx

@@ -1,35 +1,32 @@
-import {
-  Anchor,
-  Button,
-  createEmotionCache,
-  Input,
-  Stack,
-  Text
-} from "@mantine/core"
-import type { PlasmoCSConfig } from "plasmo"
+import { Anchor, Button, Input, Stack, Text } from "@mantine/core"
+import mantineCssText from "data-text:@mantine/core/styles.css"
+import mantineOverrideCssText from "data-text:~styles/mantine-override.css"
+import type { PlasmoCSConfig, PlasmoGetStyle } from "plasmo"
 import { useState } from "react"
 
 import { ThemeProvider } from "~theme"
 
+import "@mantine/core/styles.css"
+//see https://github.com/PlasmoHQ/plasmo/issues/776#issuecomment-1811072653
+import "~styles/mantine-override.css"
+
+import { setMantineColorScheme } from "~utils"
+
 export const config: PlasmoCSConfig = {
   matches: ["https://www.plasmo.com/*"]
 }
 
-const styleElement = document.createElement("style")
-
-const styleCache = createEmotionCache({
-  key: "plasmo-mantine-cache",
-  prepend: true,
-  container: styleElement
-})
-
-export const getStyle = () => styleElement
+export const getStyle: PlasmoGetStyle = () => {
+  const style = document.createElement("style")
+  style.textContent = mantineCssText + mantineOverrideCssText
+  return style
+}
 
 function PlasmoOverlay() {
   const [data, setData] = useState("")
-
+  setMantineColorScheme("light")
   return (
-    <ThemeProvider emotionCache={styleCache}>
+    <ThemeProvider>
       <Stack miw={240} bg="white" p="lg">
         <Text fw="bold" size="xl">
           Welcome to your{" "}

with-mantine/popup.tsx

@@ -7,7 +7,7 @@ function IndexPopup() {
   const [data, setData] = useState("")
 
   return (
-    <ThemeProvider withNormalizeCSS withGlobalStyles>
+    <ThemeProvider>
       <Stack miw={240} p="lg">
         <Text fw="bold" size="xl">
           Welcome to your{" "}

with-mantine/styles/mantine-override.css

@@ -0,0 +1,12 @@
+:host {
+  height: 100%;
+  margin: 0;
+  color-scheme: var(--mantine-color-scheme);
+  font-family: var(--mantine-font-family);
+  font-size: var(--mantine-font-size-md);
+  line-height: var(--mantine-line-height);
+  background-color: var(--mantine-color-body);
+  color: var(--mantine-color-text);
+  -webkit-font-smoothing: var(--mantine-webkit-font-smoothing);
+  -moz-osx-font-smoothing: var(--mantine-moz-font-smoothing);
+}

with-mantine/theme.tsx

@@ -1,14 +1,12 @@
-import type { EmotionCache, MantineProviderProps } from "@mantine/core"
-import { MantineProvider } from "@mantine/core"
-import type { PropsWithChildren } from "react"
+import { createTheme, MantineProvider } from "@mantine/core"
 
-interface Props extends PropsWithChildren<MantineProviderProps> {
-  emotionCache?: EmotionCache
-}
-
-export function ThemeProvider({ emotionCache, children, ...props }: Props) {
+const theme = createTheme({})
+export const ThemeProvider = ({ children }) => {
   return (
-    <MantineProvider emotionCache={emotionCache} {...props}>
+    <MantineProvider
+      //https://github.com/PlasmoHQ/plasmo/issues/776#issuecomment-1811072653
+      cssVariablesSelector=":host"
+      theme={theme}>
       {children}
     </MantineProvider>
   )

with-mantine/utils.ts

@@ -0,0 +1,26 @@
+import type { MantineColorScheme } from "@mantine/core"
+
+function getPlasmoShadowRoot() {
+  return document.querySelector("plasmo-csui")?.shadowRoot
+}
+
+export function getPlasmoShadowContainer() {
+  return getPlasmoShadowRoot()?.querySelector(
+    "#plasmo-shadow-container"
+  ) as HTMLElement
+}
+
+//see https://github.com/PlasmoHQ/plasmo/issues/652
+export function injectCssText(cssText: string) {
+  const plasmoCsui = getPlasmoShadowRoot()
+  const style = document.createElement("style")
+  style.textContent = cssText
+  plasmoCsui.appendChild(style)
+}
+
+export function setMantineColorScheme(colorScheme: MantineColorScheme) {
+  getPlasmoShadowContainer()?.setAttribute(
+    "data-mantine-color-scheme",
+    colorScheme
+  )
+}