Using Plasmo with Mantine

I was able to successfully use https://mantine.dev/ for all my react components in the google extension popup, but I'm not able to get it to properly render the components in the injected react components

AppShell demo

React components and hooks library with native dark theme support and focus on usability, accessibility and developer experience

lab•1/2/23, 7:58 AM

Ooh we have the core maintainer of mantine on the server, and some other who were able to use it in their extension as well

lab•1/2/23, 7:59 AM

We should add an example for it lol

lab•1/2/23, 7:59 AM

But basically, you will need to extract the style from mantine and inject it into the CSUI via the getStyle function

lab•1/2/23, 8:00 AM

Since mantine uses emotion, follow this setup: https://github.com/PlasmoHQ/examples/tree/main/with-emotion

GitHub

examples/with-emotion at main · PlasmoHQ/examples

Example projects that demonstrate how to use the Plasmo Framework and integrate with popular tools - examples/with-emotion at main · PlasmoHQ/examples

Llab We should add an example for it lol

lab•1/2/23, 8:00 AM

Or make an easy to use guide for it, or maybe send a PR to mantine UI with an example on how to use mantine with Plasmo

lab•1/2/23, 8:01 AM

since it's a pretty sizable dependency ;d

MoreThanYourAverageJoe#3911OP•1/2/23, 8:07 AM

how're you able to extract the styles from mantine?

Arcane•1/2/23, 8:07 AM

@MoreThanYourAverageJoe has reached level 3. GG!

lab•1/2/23, 8:11 AM

Apply the Emotion example with this: https://github.com/mantinedev/mantine/blob/master/docs/src/docs/theming/emotion-cache.mdx#configure-emotion

GitHub

mantine/emotion-cache.mdx at master · mantinedev/mantine

React components library with native dark theme support - mantine/emotion-cache.mdx at master · mantinedev/mantine

lab•1/2/23, 8:14 AM

BTW, it would be really nice to add a plasmo guide to mantine in here: https://github.com/mantinedev/mantine/blob/master/docs/src/docs/guides/typescript.mdx

GitHub

mantine/typescript.mdx at master · mantinedev/mantine

React components library with native dark theme support - mantine/typescript.mdx at master · mantinedev/mantine

lab•1/2/23, 8:15 AM

a /guides/plasmo.tsx/guides/plasmo.tsx

MoreThanYourAverageJoe#3911OP•1/2/23, 8:21 AM

i'll come around to doing that within the next couple of days

MoreThanYourAverageJoe#3911OP•1/2/23, 8:21 AM

i'm still trying to figure this out

MoreThanYourAverageJoe#3911OP•1/2/23, 8:26 AM

still kind of confused as how to fully use the getStyle function, would I have to inject the css for every single component?

MoreThanYourAverageJoe#3911OP•1/2/23, 8:27 AM

what about for components like: https://mantine.dev/core/multi-select/

MultiSelect

Custom searchable multi select

MoreThanYourAverageJoe#3911OP•1/2/23, 8:27 AM

I'd have to inject he css for. them all?

MMoreThanYourAverageJoe#3911 still kind of confused as how to fully use the getStyle function, would I have t...

lab•1/2/23, 8:29 AM

no, you only need to return the style from the emotionCache

lab•1/2/23, 8:29 AM

see contents.tsx for the base idea:

lab•1/2/23, 8:29 AM

https://github.com/PlasmoHQ/examples/blob/main/with-emotion/content.tsx

GitHub

examples/content.tsx at main · PlasmoHQ/examples

Example projects that demonstrate how to use the Plasmo Framework and integrate with popular tools - examples/content.tsx at main · PlasmoHQ/examples

lab•1/2/23, 8:30 AM

mantine/emotion will generate the runtime style and send them to that custom cache, which in turn get rendered into the style tag by the getStyle function in CSUI

lab•1/2/23, 8:30 AM

which in turn, get mounted onto the ShadowDOM for you by plasmo

MoreThanYourAverageJoe#3911OP•1/2/23, 8:33 AM

gotchu

MoreThanYourAverageJoe#3911OP•1/2/23, 8:33 AM

okay i get it

MoreThanYourAverageJoe#3911OP•1/2/23, 8:33 AM

I'll create a quick guide within the next few days and submit a PR to mantine

MoreThanYourAverageJoe#3911OP•1/2/23, 8:33 AM

thank you!

lab•1/2/23, 8:34 AM

I just created a rough one here:

lab•1/2/23, 8:34 AM

https://github.com/mantinedev/mantine/pull/3268

GitHub

[@mantine/docs] Add guide for using mantine with plasmo by louisgv ...

WIP, will add more details and flesh it out a bit more next week.
ref: https://discord.com/channels/946290204443025438/1059379372282368010

lab•1/2/23, 8:52 AM

Feel free to add more on top of mine as you experiment with Mantine! Just added the plasmo logo and so on as well to that PR

lab•1/2/23, 8:52 AM

imma head to bed now, peace! XD

lab•1/2/23, 8:59 AM

BTW this is a plasmo extension created by one of mantine core maintainer: https://github.com/EmilMalanczak/linkedin-copy-paste/blob/main/src/content.tsx

GitHub

linkedin-copy-paste/content.tsx at main · EmilMalanczak/linkedin-co...

Manage your copy/paste templates on linkedin to fight with spam job offers

linkedin-copy-paste/content.tsx at main · EmilMalanczak/linkedin-copy-paste

lab•1/2/23, 8:59 AM

He used a pretty old version so the content.tsxcontent.tsx might need some update, but the general idea is all there

Miśit•1/2/23, 7:09 PM

oh hello there

I used to contribute to mantine for a while, sadly I ran out of time for that. I had problems with setup the mantine as well, also I managed to help few folks from this dc with setup mantine. I didn't track recent changes for plasmo so you need experiment a bit I guess. However if there is a need I can create example repo for Plasmo examples with setup with mantine @louis

If yes, I would appreciate few instructions what should I cover

MMiśit oh hello there 😄 I used to contribute to mantine for a while, sadly I ran out o...

lab•1/3/23, 5:57 PM

heyo, I sent Mantine a PR yesterday: https://github.com/mantinedev/mantine/pull/3268 I think that should cover the basic, but if you think there's more that should be added pls do :D

GitHub

[@mantine/docs] Add guide for using mantine with plasmo by louisgv ...

This PR adds a guide to integrating mantine with Plasmo, a framework to build browser extensions with React.
ref: https://discord.com/channels/946290204443025438/1059379372282368010