- Notifications
You must be signed in to change notification settings - Fork35
fix: mantine css leak#157
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.
Already on GitHub?Sign in to your account
base:main
Are you sure you want to change the base?
Uh oh!
There was an error while loading.Please reload this page.
Conversation
This pull request is automatically built and testable inCodeSandbox. To see build info of the built libraries, clickhere or the icon next to each commit SHA. |
arjunvegda left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
Thanks again for working on this!
| module.exports={ | ||
| plugins:{ | ||
| 'postcss-preset-mantine':{}, | ||
| 'postcss-prefix-selector':{ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
Were we able to figure out the issues withdata-mantine-* attribute?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
Currently this plugin can't fix thedata-mantine-* attribute issue, as I searched the mantine source codedata-mantine-color-scheme are hardcoded in some parts
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
For this issue I have opened a discussion inhttps://github.com/orgs/mantinedev/discussions/6573
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
@arjunvegda What do u think if we merge this fix first and provide a fix fordata-mantine-* attribute issue later?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
Does the dark/light mode + everything else work as expected with this change?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
Sorry, I've been a little occupied lately. Let me DM you later this week@Elvincth
Naveentvm commentedMay 13, 2025
@arjunvegda@Elvincth What happened? Is this fixed? |
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!