Error with compilation of @at-root .is-activated#{&} #671
Description
In one project we see a >self in the generated CSS:
Shopware 6, generated using scssphp, not working:
.header__navigation--site .flyout__item .is-activated.flyout__list>self {
-webkit-transition: font-size 150ms 0ms ease-in-out,line-height 150ms 0ms ease-in-out,opacity 150ms 150ms ease-in-out,padding-bottom 150ms 0ms ease-in-out,padding-top 150ms 0ms ease-in-out;
transition: font-size 150ms 0ms ease-in-out,line-height 150ms 0ms ease-in-out,opacity 150ms 150ms ease-in-out,padding-bottom 150ms 0ms ease-in-out,padding-top 150ms 0ms ease-in-out;
}Whereas this, compiled using webpack & friends, works fine:
.header__navigation--site .flyout__item .is-activated.flyout__list>.flyout__item>.flyout__node {
transition: font-size .15s ease-in-out 0ms,line-height .15s ease-in-out 0ms,opacity .15s ease-in-out .15s,padding-bottom .15s ease-in-out 0ms,padding-top .15s ease-in-out 0ms
}We fixed this by rewriting the SCSS in a few places from
@at-root .is-activated#{&} {to
$parent: &;
@at-root .is-activated#{$parent} {The relevant change is the use of $parent instead of & directly.
There are some rules in those defintions that are identical, but the transition also differs, in a way that does not change how it works, but still: font-size 150ms 0ms ease-in-out is what is in the SCSS source, webpack & friends transform this into font-size .15s ease-in-out 0ms.