Webc Scoped CSS Breaks CSS Nesting

[dwighthouse]

Say you have a webc component for your header:

<header webc:root="override">
    <h1 @raw="this.$data.settings.siteTitle"></h1>
</header>

<style webc:scoped>
:host {
    color: #fff;

    & h1 {
        padding-bottom: 0.5rem;
    }
}
</style>

The output of the HTML is as you would expect, with a generated class name at the top level:

<header class="w5lbk0hec">
    <h1>My Cool Site</h1>
</header>

However, the bundled CSS that is generated incorrectly adds the generated class name to the front of every nested selector:

.w5lbk0hec {
    color: #fff;

    .w5lbk0hec & h1 {
        padding-bottom: 0.5rem
    }
}

The correct output should be this, without the created class in front of the &:

.w5lbk0hec {
    color: #fff;

    & h1 {
        padding-bottom: 0.5rem
    }
}

I have thus far found no workaround besides just not using scoping at all.

Ideas?