When PostCSS processes SCSS files, it merges selectors into :is(...), but only the first class is being processed.

[lyj1994]

web-infra-dev/rsbuild#5405 (comment)

Version

System:
    OS: Linux 6.1 Debian GNU/Linux 11 (bullseye) 11 (bullseye)
    CPU: (2) x64 AMD EPYC
    Memory: 1.50 GB / 4.14 GB
    Container: Yes
    Shell: Unknown
  npmPackages:
    @rsbuild/core: ^1.0.1 => 1.2.3 
    @rsbuild/plugin-react: ^1.0.1 => 1.1.0 
    @rsbuild/plugin-sass: ^1.3.2 => 1.3.2

Details

.browserslistrc

chrome >= 100
edge >= 100

input

.parentA,.parentB {
    :global {
        .sub {
            background-color: aqua;
        }
    }
}

output

:is(.src-test-module__parentA-FUAOlH .sub, .parentB .sub) {
  background-color: #0ff;
}

App.jsx

import "./App.css";
import styles from "./test.module.scss";

const App = () => {
  return (
    <div className="content">
      <h1>Rsbuild with React</h1>
      <p>Start building amazing things with Rsbuild.</p>
      <div className={styles.parentA}>
        <div className="sub">suba</div>
      </div>
      <div className={styles.parentB}>
        <div className="sub">subb</div>
      </div>
    </div>
  );
};

export default App;

Reproduce link

https://codesandbox.io/p/github/rspack-contrib/rsbuild-codesandbox-example/csb-5grpdz/draft/optimistic-http

Reproduce Steps

pnpm dev