[Bug] Cannot work when using with `@import 'tailwindcss/utilities.css'` in .scss

[colinaaa]

Versions

pnpm dlx envinfo --system --npmPackages
  System:
    OS: macOS 14.6.1
    CPU: (12) arm64 Apple M2 Max
    Memory: 2.34 GB / 96.00 GB
    Shell: 3.7.1 - /opt/homebrew/bin/fish
  npmPackages:
    @rsbuild/core: ^1.1.8 => 1.1.10 
    @rsbuild/plugin-sass: ^1.1.2 => 1.1.2 
    @rsdoctor/rspack-plugin: ^0.4.12 => 0.4.12 
    rsbuild-plugin-tailwindcss: ^0.0.3 => 0.0.3 
    tailwindcss: ^3.4.17 => 3.4.17 

Details

When using this plugin with:

1. @rsbuild/plugin-sass
2. Using @import in .scss
3. Disabling lightningcss-loader

@import 'tailwindcss/utilities.css';

.foo {
  color: red;
}

The tailwindcss could not work properly.

Debugging with Rsdoctor, it shows that the semicolon is removed by sass-loader.

Reproduce

https://github.com/colinaaa-reproductions/rsbuild-plugin-tailwindcss-scss-import

• pnpm install
• pnpm build

Then, checkout the output CSS in dist, it would be something like:

@tailwind utilities.foo{color:red}