fix: mantine css leak #157
Conversation
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. |
| @@ -1,5 +1,15 @@ | |||
| module.exports = { | |||
| plugins: { | |||
| 'postcss-preset-mantine': {}, | |||
| 'postcss-prefix-selector': { | |||
There was a problem hiding this comment.
Were we able to figure out the issues with data-mantine-* attribute?
There was a problem hiding this comment.
Currently this plugin can't fix the data-mantine-* attribute issue, as I searched the mantine source code data-mantine-color-scheme are hardcoded in some parts
There was a problem hiding this comment.
For this issue I have opened a discussion in https://github.com/orgs/mantinedev/discussions/6573
There was a problem hiding this comment.
@arjunvegda What do u think if we merge this fix first and provide a fix for data-mantine-* attribute issue later?
There was a problem hiding this comment.
Does the dark/light mode + everything else work as expected with this change?
There was a problem hiding this comment.
I agree with the sentiment, we should look into migrating away from Mantine. ShadCN is a good alternative, would anyone like to give it a shot? Ideally, we'd want to have 1:1 migration (with theme, look, etc.) with zero impact on the userland.
There was a problem hiding this comment.
Not sure if we even need tailwind (not that I'm against using it, or other CSS libraries) -- as long as the devtools can be styled with dark and light theme support, it should be sufficient.
There was a problem hiding this comment.
But using shadcn can reduce the overhead of migration. A great thing is that it is built on top of Radix, meaning it’s unstyled, so breaking changes are less likely to occur.
There was a problem hiding this comment.
I agree with the sentiment, we should look into migrating away from Mantine. ShadCN is a good alternative, would anyone like to give it a shot? Ideally, we'd want to have 1:1 migration (with theme, look, etc.) with zero impact on the userland.
Actually, I am interested in the migration task as I would like to make the same kind of devtool for zustand.
There was a problem hiding this comment.
Sorry, I've been a little occupied lately. Let me DM you later this week @Elvincth
This pull request fixes the issue of CSS leakage from the Mantine component library by scoping its styles within a specific root element.
Details:
We used the
postcss-prefix-selectorplugin to add a prefix (#jotai-devtools-root) to all Mantine styles. This ensures that Mantine styles are contained and do not affect other parts of the application.Result of generated
index.css:Testing Instructions:
Test the fix in this repository: Jotai Devtool Test CSS Leak. Use
pnpm linkto link the dev package.Thank you!