[Bug]: Build failure when using dependency library that provides both JS and CSS files

[Thiry1]

System Info

  System:
    OS: macOS 14.7
    CPU: (8) arm64 Apple M2
    Memory: 161.63 MB / 24.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 20.17.0 - ~/.nodebrew/current/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 10.8.2 - ~/.nodebrew/current/bin/npm
    pnpm: 8.6.6 - ~/.nodebrew/current/bin/pnpm
    bun: 1.0.2 - /opt/homebrew/bin/bun
  Browsers:
    Chrome: 129.0.6668.90
    Edge: 129.0.2792.79
    Safari: 18.0

Details

When attempting to import a library that provides both JS and SCSS files in SCSS using @import, the JS file is imported instead of the SCSS, causing a build error.

@use "deps-lib";

.foo {
    background: deps-lib.$color-primary;
}

ERROR in 
  × Module build failed:
  ╰─▶   × expected "{".
        │   ╷
        │ 2 │   console.log("deps-lib");
        │   │                          ^
        │   ╵
        │   ../deps-lib/index.js 2:26  @use
        │   src/style.scss 1:1         root stylesheet

I am using the following rule:

{
  experiments: {
    css: false,
  },
  module: {
    rules: [
      {
        test: /\.s?css$/,
        type: "javascript/auto",
        use: [
          {
            loader: rspack.CssExtractRspackPlugin.loader,
          },
          {
            loader: "css-loader",
            options: {
              importLoaders: 1,
              modules: {
                exportLocalsConvention: "camelCase",
                localIdentName: "___[local]___[hash:base64:5]",
              },
            },
          },
          {
            loader: "sass-loader",
            options: {
              implementation: sass,
            },
          },
        ],
      },
    ],
  },
}

The same issue occurs even when using the following configuration with experiments.css is true:

{
  experiments: {
    css: true,
  },
  module: {
    rules: [
      {
        test: /\.s?css$/,
        type: "css/module",
        use: [
          {
            loader: "sass-loader",
            options: {
              implementation: sass,
            },
          },
        ],
      },
    ],
  },
}

I have confirmed that the build works without issues when using Webpack.

Reproduce link

https://github.com/Thiry1/rspack-bug-repro/commit/3a294f0056637e5752ef7ccbb079729e5201172e

Reproduce Steps

1. clone repro repo
2. git switch resolve-css-issue
3. npm i
4. npm run build
5. confirm reesult.

[inottn]

Restriction with regex is not yet supported, I guess it's related to this.

[Thiry1]

@inottn Thank you for your response. Is there any workaround for this problem?

[Thiry1]

I investigated the issue, and it has been occurring since version 1.0.0-alpha.3.

[inottn]

@inottn Thank you for your response. Is there any workaround for this problem?

use @use "deps-lib/index" as deps-lib;

[Thiry1]

I might be wrong, but after looking at the changelog, I have a feeling that "feat!: use native resolver in loader by @bvanjoi in #4945" might be related.

[oliver-wymer]

Right now this is the one blocker stopping me from migrating. Unfortunately this didn't work for me either.

use @use "deps-lib/index" as deps-lib;

My configuration was:

{
        test: /\.(sa|sc|c)ss$/,
        use: [
          rspack.CssExtractRspackPlugin.loader,
          "css-loader",
          "sass-loader",
        ],
        type: "javascript/auto",
}