Nested SCSS selectors global by default

[SamMousa]

Is your feature request related to a problem? Please describe. I'm always frustrated when I use nested SCSS and have to apply :global() at all nested levels.

Describe the solution you'd like CSS scoping already happens at the top level of my selector, so there's no need to also scope any child selectors since they are already scoped to the component by their parent selector.

Describe alternatives you've considered Currently I wrap everything in :global():

.imagemap {
        min-height: 200px;
        background-color: red;
        width: 100%;
        position: relative;
        canvas {
            width: 100% !important;
            height: 100% !important;
            min-width: 100%;
            max-width: 100%;
            min-height: 100%;
            max-height: 100%;
        }

        :global(.canvas-wrapper) {
            z-index: 10;
            display: none;
        }

        :global(.canvas-wrapper.loaded) {
            display: block;
        }

        &[data-hover] {
            cursor: pointer;
        }
    }

How important is this feature to you? There is a workable workaround; it just doesn't feel clean. I'm writing code that works but its meaning is different from what is conveyed. I'm not creating global styles; I'm creating component scoped styles that happen to have multiple selectors.

Additional context