Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Dynamically added classes are not inserted in css

See original GitHub issue

I have a menu that when opened gets the menu-open class (via javascript).

I want this menu to have 10px margin only if it has the menu-open class.

<style>
/ * It works but it's not what I want * /
     li.nav-item
     {
         margin-bottom: 10px;
     }
/* Does not work */
li.nav-item.menu-open, li.menu-open
     {
         margin-bottom: 10px;
     }

</style>

I am using Svelte 3.9.1

Thanks.

Issue Analytics

State:
Created 4 years ago
Comments:6 (2 by maintainers)

Top GitHub Comments

1reaction

tiagodjfcommented, Aug 26, 2019

I just mentioned both options so that the test could be done.

I noticed that in some cases, if the css path is set completely, the style works, otherwise not (this applies to cases where css overwriting is required).

The way you did it works, but when trying to change via javascript, it doesn’t work, eg:

someElement.classList.add ('menu-open');

I thought about the possibility that the compiler is ignoring unused css (initially) inside the component.

0reactions

tiagodjfcommented, Aug 27, 2019

Thanks all!