[Bug]: Broken CSS compilation on Yarn's PNP resolution engine

[kubijo]

System Info

  System:
    OS: Linux 6.11 Ubuntu 24.10 24.10 (Oracular Oriole)
    Shell: 5.2.32 - /bin/bash
  Binaries:
    Node: 22.14.0 - ~/.volta/tools/image/node/22.14.0/bin/node
    Yarn: 4.9.0 - ~/.volta/tools/image/yarn/4.7.0/bin/yarn

Details

make dev
yarn run rsbuild dev --open
  Rsbuild v1.3.5

  ➜ Local:    http://localhost:3000/
  ➜ Network:  http://192.168.8.132:3000/
  ➜ Network:  http://172.17.0.1:3000/
  ➜ Network:  http://10.20.105.18:3000/
  ➜ press h + enter to show shortcuts

start   build started...
error   Failed to open start URL.
error   spawn ENOTDIR
    at ChildProcess.spawn (node:internal/child_process:420:11)
    at Object.spawn (node:child_process:753:9)
    at baseOpen (/home/kubijo/dev/braiins/rspack-pnp-bug/.yarn/cache/@rsbuild-core-npm-1.3.5-9e7119832c-38b576e174.zip/node_modules/@rsbuild/core/compiled/open/index.js:264:41)
    at async openBrowser (file:///home/kubijo/dev/braiins/rspack-pnp-bug/.yarn/cache/@rsbuild-core-npm-1.3.5-9e7119832c-38b576e174.zip/node_modules/@rsbuild/core/dist/index.js:3806:16)
error   Build error: 
File: /home/kubijo/dev/braiins/rspack-pnp-bug/src/App.scss:1:1
  × Module build failed:
  ╰─▶   × (0 , _yarn_cache_rsbuild_core_npm_1_3_5_9e7119832c_38b576e174_zip_node_modules_rsbuild_core_compiled_css_loader_api_js__WEBPACK_IMPORTED_MODULE_1__.default) is not a function
      
 @ ./src/App.tsx
 @ ./src/index.tsx

^Cmake: *** [Makefile:13: dev] Error 130

Reproduce link

https://github.com/kubijo/rspack-pnp-css-build-bug

Reproduce Steps

Clone the repo and run

yarn install
make dev

If you switch to the branch node_modules and repeat, it's working

[stormslowly]

root cause analysis

With css-extract feature enabled, a css file will be loaded as a JS module containing below code, then transformed to CJS execute in node env.

https://github.com/webpack-contrib/css-loader/blob/master/src/index.js#L214-L218

import ___CSS_LOADER_API_IMPORT___ from "../.yarn/cache/@rsbuild-core-npm-1.3.5-9e7119832c-38b576e174.zip/node_modules/@rsbuild/core/compiled/css-loader/api.js"

the api.js can be resolved successfully when yarn PnP is enabled, then rspack-resolver goes to find its (the api.js's ) package.json file by trying every parent of the resolved path. In this step, rspack resolver asks the File system, if .../@rsbuild/core/compiled/css-loader is a dir, by calling pnp-rs's Zip#file_type API.
In pnp-rs's implementation, the self.dirs contains all slash ended dir paths. So the .../@rsbuild/core/compiled/css-loader will be considered as NotFound, either .../@rsbuild/core/compiled.

pub fn file_type(&self, p: &str) -> Result<FileType, std::io::Error> {  
    if self.dirs.contains(p) {  
        Ok(FileType::Directory)  
    } else if self.files.contains_key(p) {  
        Ok(FileType::File)  
    } else {  
        Err(std::io::Error::from(std::io::ErrorKind::NotFound))  
    }  
}

At last Rspack resolver will treat project's package.json as api.js's package.json.
in the project package.json says all its files are ESModule. So the import statement of api.js will not be transformed with CJS interop. So the default fields of exports will be undefined.

So we need pnp-rs to support calling the file_type with unslash ended path to determine its file type.
here is PR for this.