Modal elements class conflict with DaisyUI library

[ktecho]

When trying to use the library and the demos, I found that in InsertImageDialog, the class "modal" of the modal was being taken by DaisyUI's "modal" class (see https://daisyui.com/components/modal/). That file was in the demo directory, so when I copied that to my code, I removed the "modal" class that was not being used, and it worked.

But then it seems that InsertImageUriDialogBody.svelte and InsertImageUriDialogBody.svelte in packages/svelte-lexical/src/components/toolbar/dialogs are also using this "modal" class. Those files are not in a demo, but in the library itself, so I would need to fork it to change it.

Would you rename the class from those modals, since it's not being used in the .css files, but only in the section that is as follows?

<style>
  .modal {
    width: 15em;
  }
</style>

Maybe it could be renamed, so it has a more specific name, the same as you did with Modal__title, Modal__content or Button__root.

[umaranis]

Hi @ktecho , In all three cases, the style is scoped to the component, so svelte should take care of applying scoping class to make it more specific.

Wondering why are you having a conflict. Could you share more details or a working example (github repo)?

Thanks.

[ktecho]

@umaranis the style is affecting the outer components somehow. I'm importing it like this:

import '$lib/components/pagebuilder/lexical-editor/index.css';

But that would be another problem. The one I was reporting is DaisyUI styles (defined for the whole project) affecting the modals in this library, because the modal class is also a DaisyUI one.

[ktecho]

@umaranis if you have access to the Svelte discord:

https://discord.com/channels/457912077277855764/1023340103071965194/threads/1199685510394814554

If not, what they told me is that importing a CSS will make the style global, so this is wrong: https://github.com/umaranis/svelte-lexical/blob/master/demos/sveltekit/src/routes/%2Bpage.svelte

[umaranis]

Hi @ktecho , Styles cannot leak out of the component because svelte scopes it as shown below.

I believe what's happening is the style leaking in because you have some global css from DaisyUI. I would suggest either

• scope your css using svelte style tag
• or use a prefix for DaisyUI classes

Seems like DaisyUI does have a way to add a custm prefix.

[umaranis]

@umaranis if you have access to the Svelte discord:

https://discord.com/channels/457912077277855764/1023340103071965194/threads/1199685510394814554

If not, what they told me is that importing a CSS will make the style global, so this is wrong: https://github.com/umaranis/svelte-lexical/blob/master/demos/sveltekit/src/routes/%2Bpage.svelte

It is not wrong, depends on what we are trying to do. In a library, if the styles are scoped within the components, it would not be possible for library users to change any styles. Global stylesheet is provided so that the library users can modify styles and scoped it the way they want.

[ktecho]

I solved that problem using Solution #1 from here: https://erdemgonul.medium.com/styling-custom-components-in-svelte-3723ad752cd2

But remember the other problem: components having so standard names that other CSS libraries style them. So in this case it would be better to fix it here in this library, that add prefixes to apps that already use CSS libs, right?

[ktecho]

I mean, it's easy renaming .modal to .lexical-modal, right?

I can do a PR, if you want.

[umaranis]

Yes, please submit a PR

[ktecho]

Yes, please submit a PR

I probably will, but for now I'm using this https://github.com/bowlineai/svelte-lexical by @stayradiated, (sadly archived last week) until this repository supports Svelte 4, SvelteKit 2.

[umaranis]

Hi @ktecho , With the latest release, svelte-lexical is upgraded to svelte 4

[ktecho]

Ahh, I guess that's why he archived it...

Do you think this could be useful to take it from there to here?

https://github.com/umaranis/svelte-lexical/commit/0afbc90ea9b1ba11f5959bb4f1cfe0b71cea2a2c

I started using it, but if it's not useful, I can just copy it to my code.

[ktecho]

Hi @ktecho , With the latest release, svelte-lexical is upgraded to svelte 4

Oh, I'm getting this, so I think I must wait until migration to SvelteKit 2 is completed:

https://github.com/umaranis/svelte-lexical/issues/69#issuecomment-1927361704

[umaranis]

HI @ktecho ,

Upgrade to sveltekit2 is blocked because of this issue with lexical https://github.com/facebook/lexical/issues/1707. You can find more details from the perspective of svelte-lexical here #68

There is still a workaround to upgrade to sveltekit2 but it uses the older CJS module system which disables tree-shaking and increases the download size of the library. Using this technique, I have completed the sveltekit2 upgrade in this branch upgrade-to-sveltekit2. But I am not merging it into the master yet because of the impact on the download size.

I would appreciate if you could upvote the blocking issue at https://github.com/facebook/lexical/issues/1707