Is there a way to avoid to use !important CSS mode?

[frederikhors]

Is there a way to avoid to use !important CSS mode?

Can we move outerDivClass to the end?

I need my css classes to override yours.

Am I wrong?

[janosh]

Could you clarify? outerDivClass already comes after class multiselect. Or do you mean after all other classes?

<div
- class="multiselect {outerDivClass}"
  class:readonly
  class:single={maxSelect == 1}
  class:open={showOptions}
+ class="multiselect {outerDivClass}"
  on:mouseup|stopPropagation={() => setOptionsVisible(true)}
  use:onClickOutside={() => setOptionsVisible(false)}
  use:onClickOutside={() => dispatch(`blur`)}
>

[frederikhors]

I mean after all others.

[janosh]

I just noticed that Svelte always applies the conditional classes last, no matter in what order I specify them. So now I'm not sure if this issue is actually solved and if not, how it can be solved.

  <MultiSelect
    id="fav-web-tool"
    options={webFrameworks}
    bind:selectedLabels={selectedWeb}
    bind:activeOption={activeWeb}
    maxSelect={6}
    {placeholder}
    {filterFunc}
    liActiveOptionClass="foobar"
  />

@frederikhors Will release a new version tomorrow. Perhaps you can let me know if this problem persists.

[frederikhors]

Ok. I'll try ASAP.

[frederikhors]

Pleas re-open it.

[janosh]

I just released v3.3.0 with all the changes we discussed. Let me know how it works for you.

[frederikhors]

I will try in a few hours.

[frederikhors]

I tried with the 4.0.0. This is still an issue.

[egdegauperaa]

@frederikhors doesn't it work to be more specific in the css, for instance adding a class in your statements that is outside the svelte component?

[frederikhors]

Yep maybe. But I need to try, and I cannot right now.

[janosh]

@frederikhors Have you had a chance to try @egdegauperaa's suggestion? If so does it help?

[frederikhors]

We can close. I don't have time right now. I'll re-open if this is still an issue. Thanks both.