Skip to content

[4 alpha] breaks the default Vite url(...) references in imported CSS files. #14784

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
slavarazum opened this issue Oct 24, 2024 · 3 comments · Fixed by #14877
Closed

[4 alpha] breaks the default Vite url(...) references in imported CSS files. #14784

slavarazum opened this issue Oct 24, 2024 · 3 comments · Fixed by #14877
Labels
bug v4 vite

Comments

@slavarazum
Copy link

What version of Tailwind CSS are you using?

For example: alpha.29 (latest)

What build tool (or framework if it abstracts the build tool) are you using?

For example: Vite 5.4.10 (latest)

What version of Node.js are you using?

For example: v20.9.0

What browser are you using?

Mainly Safari, however it's not related to the issue 🙃

What operating system are you using?

MacOS

Reproduction URL

https://github.com/slavarazum/tailwind4-alpha-vite/

Describe your issue

Vite provides @import inline and rebasing for CSS.
I'm trying to import font from the Fontsource library: https://fontsource.org/fonts/nunito which references font files using url(...).

As a result we have such rebased urls:
CleanShot 2024-10-24 at 17 32 22@2x

After installing Tailwind, importing it, and enabling the Vite plugin, the URLs remain with the default related paths:
CleanShot 2024-10-24 at 17 35 46@2x
@philipp-spiess
Copy link
Member

@slavarazum Thanks for the report! We'll look into it. You can work around this for now by using the @tailwindcss/postcss client rather than the Vite client which should preserve the existing logic.

@slavarazum
Copy link
Author

Wow, Tailwind team are really quick nowdays :)
Thanx for the suggestion, have already temporary migrated.

@philipp-spiess philipp-spiess mentioned this issue Nov 5, 2024
Merged
adamwathan pushed a commit that referenced this issue Nov 7, 2024
@thecrypticace @philipp-spiess
Rewrite urls in CSS files when using Vite (#14877)
e82b316 
Fixes #14784

This is an alternative to #14850 in which we actually perform url
rewriting / rebasing ourselves. We ported a large portion of the
URL-rewriting code from Vite (with attribution) to use here with some
minor modifications. We've added test cases for the url rewriting so
verifying individual cases is easy. We also wrote integration tests for
Vite that use PostCSS and Lightning CSS that verify that files are found
and inlined or relocated/renamed as necessary.

We also did some manual testing in the Playground to verify that this
works as expected across several CSS files and directories which you can
see a screenshot from here:

<img width="1344" alt="Screenshot 2024-11-05 at 10 25 16"
src="https://github.com/user-attachments/assets/ff0b3ac8-cdc9-4e26-af79-36396a5b77b9">

---------

Co-authored-by: Philipp Spiess <[email protected]>
@philipp-spiess
Copy link
Member

@slavarazum Hey! We just merged a fix for this which will be part of the next alpha release. Thanks again for reporting this and please let us know if you have any more issues 🙂

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug v4 vite
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Rewrite urls in CSS files when using Vite tailwindlabs/tailwindcss
2 participants
@philipp-spiess @slavarazum