SCSS :global(&.custom-class) does not work

[LowArmour]

Describe the bug

Let's say we have: ChildComponent.svelte <p class="child-component-first-class child-component-second-class">Hello from child!</p>

and

ParentComponent.svelte

<div class="parent-component-class">
<ChildComponent />
</div>

<style lang="scss">
  .parent-component-class {
    :global(.child-component-first-class) {
      color: red;
      :global(&.child-component-second-class) {
        color: green;
      }
  }
}
</style>

Although it is valid scss language, color: green will not be picked.

Reproduction

I cannot reproduce in REPL, I cannot seem to make scss and/or :global() run there.

Logs

No logs produced, neither VS code extension offers an error/warn.

System Info

System:
    OS: Linux 5.15 Ubuntu 22.04.1 LTS 22.04.1 LTS (Jammy Jellyfish)
    CPU: (32) x64 AMD Ryzen 9 5950X 16-Core Processor
    Memory: 57.81 GB / 62.71 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 18.12.0 - ~/.nvm/versions/node/v18.12.0/bin/node
    npm: 8.19.2 - ~/.nvm/versions/node/v18.12.0/bin/npm
  Browsers:
    Chrome: 107.0.5304.87
  npmPackages:
    svelte: ^3.44.0 => 3.52.0

Severity

annoyance

[LowArmour]

Sorry guys, it always happens like this: I search for a whole day, I don't find anything, then I post an issue. Afterwards, I search for another 5 mins and I find a solution :(.

I have found the solution in a CSS modules issue, which also uses :global(), not svelte or svelte-preprocess: https://github.com/css-modules/css-modules/issues/295

The solution is:

:global {
    .child-component-first-class {
      color: red;
      &.child-component-second-class {
        color: green;
      }
}

It is also nicer.