Current Behavior

When using @nx/angular-rspack with SCSS imports that reference external assets (e.g., flag-icon-css), the postcss-cli-resources plugin generates absolute filesystem paths in the CSS output instead of relative paths.

Generated CSS contains:

.flag-icon-us{background-image:url(/some/project/path/dist/bug-demo/browser/media/us.2d0a1dd6.svg)}

Expected Behavior

CSS should contain relative URLs that work in deployed environments.
for example:

.flag-icon-us{background-image:url(media/us.2d0a1dd6.svg)}

GitHub Repo

https://github.com/gizm0bill/nx-angular-rspack-postcss-resource-bug

Steps to Reproduce

1. Clone the repo
2. npm i
3. npx nx build
4. cat dist/bug-demo/browser/styles.*.css | grep "flag-icon-us"

Can also observe the workflow run at this link: https://github.com/gizm0bill/nx-angular-rspack-postcss-resource-bug/actions/runs/20968245403/job/60264416170#step:6:20

Nx Report

Node           : 20.19.2
OS             : darwin-arm64
Native Target  : aarch64-macos
npm            : 10.8.2

nx                     : 22.3.3
@nx/js                 : 22.3.3
@nx/eslint             : 22.3.3
@nx/workspace          : 22.3.3
@nx/angular            : 22.3.3
@nx/devkit             : 22.3.3
@nx/eslint-plugin      : 22.3.3
@nx/module-federation  : 22.3.3
@nx/rspack             : 22.3.3
@nx/web                : 22.3.3
@nx/webpack            : 22.3.3
create-nx-workspace    : 22.3.3
typescript             : 5.9.3
---------------------------------------
Registered Plugins:
@nx/angular/plugin
@nx/eslint/plugin
@nx/rspack/plugin
---------------------------------------
Community plugins:
angular-eslint : 20.7.0
---------------------------------------
Cache Usage: 160.55 KB / 185.82 GB

Failure Logs

Package Manager Version

npm 10.8.2

Operating System

• macOS
• Linux
• Windows
• Other (Please specify)

Additional Information

The issue is in @nx/angular-rspack/src/lib/utils/postcss-cli-resources.js:

buildOptions.outputPath.media is normalized to an absolute path by normalizeOutputPath() in normalize-options.ts
This absolute path is passed to postcss-cli-resources via resourcesOutputPath
The plugin uses this absolute path directly in the CSS output URL

Around line 106:

if (resourcesOutputPath) {
    outputPath = path.posix.join(resourcesOutputPath, outputPath);
}
// ...
let outputUrl = outputPath.replace(/\\/g, '/');

Since resourcesOutputPath is absolute, outputUrl becomes an absolute filesystem path.

Is this a known issue? I've tested with both Nx 22.0.2 and 22.3.3 and the bug persists.
Are there other recommended workarounds besides patching the postcss-cli-resource.js file?
Any guidance would be appreciated!