From 089314b13aeb990cf37e3d6f62ce7b26b0c6678e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?L=E2=9D=A4=EF=B8=8F=20=E2=98=AE=EF=B8=8F=20=E2=9C=8B?= <6723574+louisgv@users.noreply.github.com> Date: Tue, 30 Jan 2024 05:16:48 +0700 Subject: [PATCH] update mantine example --- with-mantine/contents/multiple.tsx | 26 ++++++++++------- with-mantine/contents/overlay.tsx | 37 +++++++++++------------- with-mantine/popup.tsx | 2 +- with-mantine/styles/mantine-override.css | 12 ++++++++ with-mantine/theme.tsx | 16 +++++----- with-mantine/utils.ts | 26 +++++++++++++++++ 6 files changed, 78 insertions(+), 41 deletions(-) create mode 100644 with-mantine/styles/mantine-override.css create mode 100644 with-mantine/utils.ts diff --git a/with-mantine/contents/multiple.tsx b/with-mantine/contents/multiple.tsx index 66d95e64..47a5d4fa 100644 --- a/with-mantine/contents/multiple.tsx +++ b/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 = ({ anchor }) => { - const styleCache = createEmotionCache({ - key: "plasmo-mui-cache", - prepend: true, - container: - anchor.element.nextElementSibling.shadowRoot.querySelector("style") - }) - return ( - + diff --git a/with-mantine/contents/overlay.tsx b/with-mantine/contents/overlay.tsx index a1fd04f1..aee07e10 100644 --- a/with-mantine/contents/overlay.tsx +++ b/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 ( - + Welcome to your{" "} diff --git a/with-mantine/popup.tsx b/with-mantine/popup.tsx index bd64e68a..f8801ce7 100644 --- a/with-mantine/popup.tsx +++ b/with-mantine/popup.tsx @@ -7,7 +7,7 @@ function IndexPopup() { const [data, setData] = useState("") return ( - + Welcome to your{" "} diff --git a/with-mantine/styles/mantine-override.css b/with-mantine/styles/mantine-override.css new file mode 100644 index 00000000..e0827cc3 --- /dev/null +++ b/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); +} diff --git a/with-mantine/theme.tsx b/with-mantine/theme.tsx index 04159230..f5fb54a1 100644 --- a/with-mantine/theme.tsx +++ b/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 { - emotionCache?: EmotionCache -} - -export function ThemeProvider({ emotionCache, children, ...props }: Props) { +const theme = createTheme({}) +export const ThemeProvider = ({ children }) => { return ( - + {children} ) diff --git a/with-mantine/utils.ts b/with-mantine/utils.ts new file mode 100644 index 00000000..a33460ec --- /dev/null +++ b/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 + ) +}