CSS leaking override mantine styles

[Elvincth]

CSS from "jotai-devtools/styles.css" leaks and overrides my current project mantine styles (downgraded to v0.8.0 works fine) Package version: v0.10.0

Before importing "jotai-devtools/styles.css":

After importing "jotai-devtools/styles.css":

[arjunvegda]

Thanks for reporting! Could you paste the output of pn why @mantine/core? I wonder if this is a conflict between the Mantine versions of your project and Jotai DevTools 🤔

[Elvincth]

Thanks for reporting! Could you paste the output of pn why @mantine/core? I wonder if this is a conflict between the Mantine versions of your project and Jotai DevTools 🤔

Here you go, please let me know if you need anything else to debug

dependencies:
@aokiapp/rjsf-mantine-theme 0.4.0
├── @mantine/core 7.10.1 peer
└─┬ @mantine/dates 7.10.1 peer
  └── @mantine/core 7.10.1 peer
@mantine/core 7.10.1
@mantine/dates 7.10.1
└── @mantine/core 7.10.1 peer
@mantine/dropzone 7.10.1
└── @mantine/core 7.10.1 peer
@mantine/modals 7.10.1
└── @mantine/core 7.10.1 peer
@mantine/nprogress 7.10.1
└── @mantine/core 7.10.1 peer
@mantine/tiptap 7.10.1
└── @mantine/core 7.10.1 peer
jotai-devtools 0.10.0
├─┬ @mantine/code-highlight 7.10.1
│ └── @mantine/core 7.10.1 peer
└── @mantine/core 7.10.1
mantine-datatable 7.10.1
└── @mantine/core 7.10.1 peer

[Elvincth]

I am wondering is it related CSS layering in https://mantine.dev/styles/mantine-styles/? As currently I am using next.js it does not guarantee styles import order.

[arjunvegda]

Thanks! The versions look good to me. I wonder if the culprit is this file 🤔. Mantine does not let us isolate styles so using it for library has become harder since Mantine v6 😓.

Could you create a small repro on CSB or Stackblitz please?

[Elvincth]

Hey @arjunvegda I had successfully repro it in stackblitz, please take a look. It is using vite and react.

[arjunvegda]

Thanks for the repro! This seems like a bug. Ideally, the styles should not create a conflict.

I wonder if this is a sign to move off of Mantine. 😓 Would you like to help with this?

For now, does swapping the order of the imports fix the issue?

-import "@mantine/core/styles.css";
import "jotai-devtools/styles.css";
+import "@mantine/core/styles.css";

[Elvincth]

Thanks for the repro! This seems like a bug. Ideally, the styles should not create a conflict.

I wonder if this is a sign to move off of Mantine. 😓 Would you like to help with this?

For now, does swapping the order of the imports fix the issue?

-import "@mantine/core/styles.css";

import "jotai-devtools/styles.css";

+import "@mantine/core/styles.css";

Swapping import doesn't fix the problem, I could try investigate and fix it 👍

[arjunvegda]

Weird, it works fine on Stackblitz when I swap it. There are probably conflicts in other components too.

And thanks a lot @Elvincth! We can connect over Discord if you'd like to help migrate the UI away from Mantine.

[Elvincth]

Weird, it works fine on Stackblitz when I swap it. There are probably conflicts in other components too.

And thanks a lot @Elvincth! We can connect over Discord if you'd like to help migrate the UI away from Mantine.

Hey @arjunvegda, that sounds good where can I connect you through Discord?

[arjunvegda]

What's your discord username? I'll send you an invite.

[Elvincth]

What's your discord username? I'll send you an invite.

@elvincth thanks!

[kvnxiao]

Just checking in, is this still an issue?

[Elvincth]

Just checking in, is this still an issue?

Fixed in https://github.com/jotaijs/jotai-devtools/pull/157