[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

Thiry1/rspack-bug-repro@3a294f0

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",
}

[Thiry1]

After some investigation, I found that the following setting in package.json solved the problem in my environment

{
  "style": "./index.scss",
}

ref: https://sass-lang.com/blog/rfc-package-importer/

[stale]

This issue has been automatically marked as stale because it has not had recent activity. If this issue is still affecting you, please leave any comment (for example, "bump"). We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[Thiry1]

bump