CSS leaking

[marviobezerra]

There is CSS leaking after updating from 0.8.0 to 0.9.0. It's setting background color, font, and others on components that are not Jotai Dev tools.

I noticed that it's adding the whole @mantine css to my project.

[arjunvegda]

Thanks for reaching out!

We have a known issue when customers use Mantine in their main app along with Jotai, the theme would not work as expected (light/dark mode). Our recommendation is to sync the theme via props. Please see this warning.

If this issue is different, could you please create a small repro? Happy to look into it.

[marviobezerra]

I don't use Mantine, in my case I use Panda CSS. Moreover, importing the CSS file, based on the documentation, leaks Mantine to all my application affecting all my styles. It also happens if I'm running in dev or prod mode. The devtools is supposed to be available on dev more, correct?

[arjunvegda]

Could you please create a small repro perhaps on CSB?

[arjunvegda]

I think I know what's going on here. We're including global styles that affect the body tag. For now, could you try overriding your style with !important while I look into the fix?

[arjunvegda]

Hey @marviobezerra

Could you test this canary tag and see if that fixes the issue for you? - https://ci.codesandbox.io/status/jotaijs/jotai-devtools/pr/139/builds/496213 (Follow Local Install Instructions)

[marviobezerra]

I'll try tomorrow morning and post back. Thanks for the quick response.

[sebinsua]

@arjunvegda It's still broken because of these styles:

Particularly font-size: inherit is causing the size of my buttons to be wildly off what they should be.

For now I'm making the styling lazily load and putting it behind an environment variable that switches jotai-devtools on. That way, at least we don't get broken styles normally when developing.

[arjunvegda]

@sebinsua - you could also downgrade it to 0.8.0 temporarily until we figure this out. Sorry for the hassle!

Re: css-reset styles, what's a good way to remove them? I think the inherit problem is that Mantine is not designed to be used for libraries 🤔 But it drastically helps us in adding new features without having to maintain our own library.

Should we write our own post css plugin that removes the css reset styles?

[marviobezerra]

I tried and it still leaking. I downgraded to 0.8.0 and it's working.

[arjunvegda]

Could you folks test the latest change https://ci.codesandbox.io/status/jotaijs/jotai-devtools/pr/139/builds/496725 ?

[sebinsua]

Could you folks test the latest change https://ci.codesandbox.io/status/jotaijs/jotai-devtools/pr/139/builds/496725 ?

This seems to be working for me.

[kvnxiao]

@arjunvegda this is still not fixed on https://pkg.csb.dev/jotaijs/jotai-devtools/commit/992cb72f/jotai-devtools. I am using tailwindcss and the default "light" theme is overwriting some default global CSS styling.

1. Affects input elements and applies a black background to them
2. Text selection background highlight color is changed globally to the current chosen jotai devtools theme

[arjunvegda]

Thanks for reporting @kvnxiao! Could you try this tag https://pkg.csb.dev/jotaijs/jotai-devtools/commit/57787cb3/jotai-devtools/_pkg.tgz? If this does not fix the issue, then could you please create a small repro on CodeSandbox?

[pulsedemon]

@arjunvegda I've been having the same issue. installed from https://pkg.csb.dev/jotaijs/jotai-devtools/commit/57787cb3/jotai-devtools/_pkg.tgz and can confirm this fixes it for me

[arjunvegda]

Released the fix in v0.9.1. Please feel free to re-open this issue if the problem persists.

[sebinsua]

thank you for this!

[Elvincth]

The same issue in v0.10.0 it leaks the CSS and alters mantine menu style.