Allow users to disable url rewriting in the PostCSS plugin by thecrypticace · Pull Request #18321 · tailwindlabs/tailwindcss · GitHub
Skip to content

Allow users to disable url rewriting in the PostCSS plugin - #18321

Merged
thecrypticace merged 5 commits into
mainfrom
feat/allow-no-url-rewriting
Jul 30, 2025
Merged

thecrypticace merged 5 commits into
mainfrom
feat/allow-no-url-rewriting

Conversation

@thecrypticace

@thecrypticace thecrypticace commented Jun 16, 2025 •

Copy link
Copy Markdown
Contributor

Since we (optionally) support source maps now it's possible that a later PostCSS plugin that still does url rewriting might fail to do so correctly because nodes will have preserved source locations in dev builds where before we "pretended" that everything came from the original file.

But, because we can't know if such a plugin is present, disabling this behavior when source maps are enabled could cause issues and would be a breaking change.

I wish everything could just work here but realistically we can't know what plugins have run before our PostCSS plugin or what plugins will run after so the best option (I think) we can offer here is to allow users to disable url rewriting at the plugin level.

Fixes #16700

@thecrypticace
thecrypticace force-pushed the feat/allow-no-url-rewriting branch from a907d14 to 2b7c1ab Compare July 7, 2025 17:09
@thecrypticace
thecrypticace marked this pull request as ready for review July 7, 2025 17:10
@thecrypticace
thecrypticace requested a review from a team as a code owner July 7, 2025 17:10
@thecrypticace
thecrypticace merged commit 4923042 into main Jul 30, 2025
@thecrypticace
thecrypticace deleted the feat/allow-no-url-rewriting branch July 30, 2025 14:35
RobinMalfait added a commit that referenced this pull request Oct 14, 2026
…` in optimized builds (#20576)

## Summary

Fixes #20570

Vite adds its own `postcss-import` before the PostCSS plugins of the
user. Thus, when `@tailwindcss/postcss` runs, the `@import`-ed
stylesheets are already inlined. Their relative `url(…)`s are still
relative to their own file. At the end, Vite resolves each `url(…)`
against the `source.input.file` of its declaration.

Without optimization, we keep the `source` of each node (since
#17775), so this works.
With optimization, we parse the output of Lightning CSS again, and every
node gets the input file as its `source`. `optimize` is on by default
when `NODE_ENV` is `production`, and `vite build` sets it. Vite then
looks for the asset next to the input file, does not find it, and keeps
the URL as it is:

```
./fonts/ExampleSans.woff2 referenced in ./fonts/ExampleSans.woff2 didn't resolve at build time, it will remain unchanged to be resolved at runtime
```

This is the problem that
#16636 and
#16700 reported.
#16965 fixed URL
rewriting only for the stylesheets that we inline ourselves.
`transformAssetUrls`
(#18321) has no effect
here.

## Solution

When we optimize, we now rewrite the relative `url(…)`s of declarations
that come from another file, so that they are relative to the input
file. This is the same rewrite that we do for the stylesheets that we
inline ourselves. After the rewrite, the URLs match the `source` that
the optimized nodes get.

- We rewrite the AST that we get from PostCSS, before we compile it. The
stylesheets that we load ourselves are not in that AST yet, so we do not
rewrite their URLs two times.
- Without optimization, nothing changes, because the nodes keep their
`source`.
- `transformAssetUrls: false` disables the rewrite.

To share the code, `rewriteUrls` in `@tailwindcss/node` now uses a new
`rewriteUrlsInAst` function. A callback gives it the base folder of each
declaration.

This also changes optimized builds of other setups that run
`postcss-import` before `@tailwindcss/postcss`, like `postcss-cli`.
Their URLs are now relative to the input file, like the URLs of the
stylesheets that we inline ourselves.

## Test plan

- Added unit tests in `packages/@tailwindcss-postcss/src/index.test.ts`.
They run `postcss-import` before the plugin with `optimize` on, with
`optimize` off, and with `transformAssetUrls: false`. The test with
`optimize` on fails on `main`.
- Added an integration test in
`integrations/postcss/url-rewriting.test.ts`. It runs `vite build` with
`@tailwindcss/postcss` in a PostCSS config. Without this change, Vite
emits no fonts and the test fails. With this change, it passes.
- `pnpm vitest run`: 5598 passed.
- `pnpm vitest --root=./integrations run` on `postcss/url-rewriting`,
`vite/url-rewriting`, `postcss/index`, `postcss/source`,
`postcss/plugins`, `postcss/config`, `postcss/core-as-postcss-plugin`
and `postcss/multi-root`: all passed. I did not run
`postcss/next.test.ts`.
- Built a Vite 8.2.0 project with a font CSS file in a package and one
in a local folder. With `optimize: true`, the fonts are now emitted to
`dist/assets` and the URLs are rewritten, the same as with `optimize:
false`.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

@tailwindcss fails to resolve font URLs in external packages with Vite

2 participants