Can't scope "toggle" component

[ghost]

I am opening an issue for

Styles (CSS, SCSS, ...)

Package version

@mozaic-ds/freemarker@4.35.0

Description

When we scope the SCSS import of the toggle @import "components/toggle" into a selector (referenced in the example as #my-selector), the toggle doesn't works anymore (can't be switched).

GitHub repository

No response

Mock-up(s)

No response

What happened?

When we scope the SCSS import of the toggle, we can't use them: they stay visually in unchecked state.

What is expected?

We expect to be able to scope the toggle import to prevent unexpected change on others components in the page.

To Reproduce

Just import the components/toggle in a selector (scss).

Code example

#my-selector {
  @import "components/toggle";
}

Is this a regression?

• [ ] Yes
• [X] No
• [ ] I don't know

Additional comments

It seems to be caused by the "+" operator in @mozaic-ds/styles/components/_c.toggle.scss that don't take the whole selector but only the first world.

When not scoped, the toggle is fine and the scss file gives one of the following css (OK):

:checked+.mc-toggle__label:before {
    background-color: #46a610
}

When it is scoped, the toggle doesn't works and gives the following css (KO because only #my-selector is taken after "checked" istead of #my-selector .mc-toggle__label):

:checked+#my-selector .mc-toggle__label:before {
    background-color: #46a610
}

But if we change the file (manually), we can make the selector correct (OK):

#my-selector :checked+.mc-toggle__label:before {
    background-color: #46a610
}