Change styles insertion point in v7

[knotty anvil]

Hello,

in v6, or generally with emotion, you could insert the cache anywhere.
ref: https://v6.mantine.dev/theming/emotion-cache/#change-styles-insertion-point

Now, in v7, style declarations are added to the document's head. Since I'm using Shadow DOM, I'd need the declarations under the Shadow Root.
I checked MantineProvider, and it looks like I can change the root element. But this doesn't help with the injected styles in the document's head.

Is there a way to change the insertion point in v7, so I can exclusively use the styles inside a Shadow DOM and also avoid manipulating the host website?

Thanks! All the best. Mathias

[late arrow]

Mantine v7 does not insert styles into your application, it provides a css file which you can use anywhere based on your requirements.

[austere sedge]

If you are talking about development, you should move style tags into your shadowroot manually. In production, just add link (css file that Mantine provided) in your shadowroot.

[knotty anvil]

@austere sedge Thanks! I ended with something like this:

    const link = document.createElement('link')
    link.rel = 'stylesheet'
    link.href = chrome.runtime.getURL('/styles/mantine/styles.css')

    shadowRoot.append(link)

It works well. My other issue was that webpack's previous configuration used style-loader on the mantine css file. Hence the injection into the document head.

@late arrow When injecting a Shadow DOM into a host website (let's say through a Chrome extension using Mantine), sizing of elements could be different since rem is used for calculations.
Is there a way to tell Mantine to use px instead of rem?
Currently I'm taking the DEFAULT_THEME, convert rem to px, merge it with my theme override, and finally pass it to the Provider.

const convertDefaultTheme = () => {
  const stringified = JSON.stringify(DEFAULT_THEME)
  const replaced = stringified.replace(/(\d*\.?\d+)rem/g, (_, remValue) => {
    const pixels = Math.round(parseFloat(remValue) * 16)
    return `${pixels}px`
  })
  return JSON.parse(replaced)
}

const convertedDefaultTheme = convertDefaultTheme()

const mantineTheme = createTheme({
    colors: {
      brand,
    },
    primaryColor: 'brand',
  })

const merged = mergeMantineTheme(convertedDefaultTheme, mantineTheme)

<MantineProvider theme={merged}></MantineProvider>

Do you think, there's more idiomatic way to go about this?

[late arrow]

No, rem units are hardcoded in css file and cannot be changed. See https://mantine.dev/styles/rem/#rem-units-scaling

[knotty anvil]

Alright, thank you. I'll check out scaling.

[open sable]

were you making chrome extension with the help of content script api to manuplate the DOM of webpage and inserting your react app with mantine ui?

currently I'm also stuck with some problem with css, I'm able to append my react application inside webpage DOM, but only thing which is not working is mantine css

[knotty anvil]

Yes, the use case here is to inject a React app into host websites.
Are you using ShadowDOM?

[open sable]

Yeah I tried shadow dom too. But it didn't worked

Which bundler are you using?

I tried both webpack and vite based chrome extension template but it didn't worked out

Can you please share which template are you using!

[open sable]

@knotty anvil or could you please share your webpack or vite config for this extension that you made