Skip to content

fix(angular-rspack): use relative path for postcss-cli-resources output#34681

Merged
FrozenPandaz merged 1 commit intomasterfrom
gh-34092
Mar 3, 2026
Merged

fix(angular-rspack): use relative path for postcss-cli-resources output#34681
FrozenPandaz merged 1 commit intomasterfrom
gh-34092

Conversation

@leosvelperez
Copy link
Copy Markdown
Member

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 CSS url() values:

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

This happens because normalizeOutputPath() makes outputPath.media absolute, and this absolute path is passed directly as resourcesOutputPath to postcss-cli-resources.

Expected Behavior

CSS url() values contain relative paths:

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

Related Issue(s)

Fixes #34092

The resourcesOutputPath passed to postcss-cli-resources was an absolute
filesystem path, causing CSS url() values to contain absolute paths
instead of relative ones.
@leosvelperez leosvelperez requested a review from a team as a code owner March 3, 2026 13:55
@leosvelperez leosvelperez requested a review from jaysoo March 3, 2026 13:55
@netlify
Copy link
Copy Markdown

netlify bot commented Mar 3, 2026

Deploy Preview for nx-dev ready!

Name Link
🔨 Latest commit 42d6edc
🔍 Latest deploy log https://app.netlify.com/projects/nx-dev/deploys/69a6e842e612bf0008cb4264
😎 Deploy Preview https://deploy-preview-34681--nx-dev.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@netlify
Copy link
Copy Markdown

netlify bot commented Mar 3, 2026

Deploy Preview for nx-docs ready!

Name Link
🔨 Latest commit 42d6edc
🔍 Latest deploy log https://app.netlify.com/projects/nx-docs/deploys/69a6e84272e3560008c4c2a1
😎 Deploy Preview https://deploy-preview-34681--nx-docs.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@nx-cloud
Copy link
Copy Markdown
Contributor

nx-cloud bot commented Mar 3, 2026

View your CI Pipeline Execution ↗ for commit 42d6edc

Command Status Duration Result
nx run-many -t check-imports check-lock-files c... ✅ Succeeded 3m 26s View ↗
nx affected --targets=lint,test,build,e2e,e2e-c... ✅ Succeeded 1m 33s View ↗
nx-cloud record -- nx-cloud conformance:check ✅ Succeeded 8s View ↗
nx-cloud record -- nx format:check ✅ Succeeded 1s View ↗
nx-cloud record -- nx sync:check ✅ Succeeded <1s View ↗

☁️ Nx Cloud last updated this comment at 2026-03-03 14:03:54 UTC

@leosvelperez leosvelperez self-assigned this Mar 3, 2026
@FrozenPandaz FrozenPandaz merged commit 1a973ba into master Mar 3, 2026
24 checks passed
@FrozenPandaz FrozenPandaz deleted the gh-34092 branch March 3, 2026 16:08
FrozenPandaz pushed a commit that referenced this pull request Mar 4, 2026
…ut (#34681)

## 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 CSS `url()` values:

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

This happens because `normalizeOutputPath()` makes `outputPath.media`
absolute, and this absolute path is passed directly as
`resourcesOutputPath` to `postcss-cli-resources`.

## Expected Behavior

CSS `url()` values contain relative paths:

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

## Related Issue(s)

Fixes #34092

(cherry picked from commit 1a973ba)
@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Mar 9, 2026

This pull request has already been merged/closed. If you experience issues related to these changes, please open a new issue referencing this pull request.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Mar 9, 2026
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[@nx/angular-rspack] postcss-cli-resources generates absolute filesystem paths in CSS urls

2 participants