Scoping SCSS under a different body class breaks some components

[cal-smith]

To preview experimental carbon in carbon-components-angular we generate two preview.scss files and import carbon under two different containing classes (.carbon and .experimental).

As expected some tweaks are required to make this work (manually scoping the reset and fonts for example) ... but strangely enough some component styles also break (mainly padding/margins) ... see these lines for what I mean. It doesn't appear to be an issue for X, but it's definitely unexpected behavior.

[joshblack]

cc @alisonjoseph did you run into this issue with bringing in v10 and core components in the same page?

[alisonjoseph]

I wasn't able to just use a wrapper class, I had to actually use a different prefix when using v9/v10 together on our current site. https://www.carbondesignsystem.com/experimental/breadcrumb/code

https://github.com/carbon-design-system/carbon-website/blob/master/src/styles/experimental.scss#L13

[cal-smith]

We considered swapping out the prefix, but that would have been a pretty massive change. Definitly would have side-stepped the issue though.

[asudoh]

Selector scoping is not a perfect approach, though it works to some extent, and it's the only viable way until Shadow DOM is supported by all browsers we support. That said, we expect some of the glitches that @cal-smith pointed out. If we see some of those can be solved by carbon-components side in a reasonable way we can definitely consider fixing, though. @cal-smith please feel free to share more details if you like - Thanks!

[cal-smith]

For sure! I'll make some time to look into it closer and see if there's a reasonable fix

[cal-smith]

So I seem to have narrowed it down: if & is used as a second level selector, it inherits the entire first level selector. So .#{$prefix}--structured-list-row becomes .carbon .bx--structured-list-row and

.#{$prefix}--structured-list--selection &:hover:not(.#{$prefix}--structured-list-row--header-row)

becomes

.bx--structured-list--selection .carbon .bx--structured-list-row:hover:not(.bx--structured-list-row--header-row)

instead of

.carbon .bx--structured-list--selection .bx--structured-list-row:hover:not(.bx--structured-list-row--header-row)

This isn't an issue for most & situations, where you absolutely do want to retain the entire selector. It also isn't an issue (as far as I can see) if you're using & in a third level selector from a second level selector with no misplaced &.

I'll open a PR for the 3 cases I'm aware of right now

[carbon-bot]

🎉 This issue has been resolved in version 9.70.1 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀