From deb33a93abbd94fd40fd2471f47df2e075a2107c Mon Sep 17 00:00:00 2001 From: Philipp Spiess Date: Fri, 31 Jan 2025 15:23:32 +0100 Subject: [PATCH] Vite: Don't rebase urls that appear to be aliases (#16078) Closes #16039 This PR changes our URL rebasing logic used with Vite so that it does not rebase URLs that look like common alias paths (e.g. urls starting in `~`, `@` or `#`, etc.). Unfortunately this is only an approximation and you can configure an alias for a path that starts with a regular alphabetical character (e.g. `foo` => `./my/foo`) so this isn't a perfect fix, however in practice most aliases will be prefixed with a symbol to make it clear that it's an alias anyways. One alternative we have considered is to only rebase URLs that we know are relative (so they need to start with a `.`). This, however, will break common CSS use cases where urls are loaded like this: ```css background: image-set( url('image1.jpg') 1x, url('image2.jpg') 2x ); ``` So making this change felt like we only trade one GitHub issue for another one. In a more ideal scenario we try to resolve the URL with the Vite resolver (we have to run the resolver and can't rely on the `resolve` setting alone due to packages like [`vite-tsconfig-paths`](https://www.npmjs.com/package/vite-tsconfig-paths)), however even then we can have relative paths being resolvable to different files based on wether they were rebased or not (e.g. when an image with the same filename exists in two different paths). So ultimately we settled on extending the already existing blocklist (which we have taken from the Vite implementation) for now. ## Test plan - Added unit test and it was tested with the Vite playground. --------- Co-authored-by: Robin Malfait --- CHANGELOG.md | 1 + packages/@tailwindcss-node/src/urls.test.ts | 26 +++++++++++++++++++++ packages/@tailwindcss-node/src/urls.ts | 7 ++++-- 3 files changed, 32 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 60a55a081..77bdc10f4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Refactor gradient implementation to work around [prettier/prettier#17058](https://github.com/prettier/prettier/issues/17058) ([#16072](https://github.com/tailwindlabs/tailwindcss/pull/16072)) - Vite: Ensure hot-reloading works with SolidStart setups ([#16052](https://github.com/tailwindlabs/tailwindcss/pull/16052)) - Vite: Fix a crash when starting the development server in SolidStart setups ([#16052](https://github.com/tailwindlabs/tailwindcss/pull/16052)) +- Vite: Don't rebase urls that appear to be aliases ([#16078](https://github.com/tailwindlabs/tailwindcss/pull/16078)) - Prevent camelCasing CSS custom properties added by JavaScript plugins ([#16103](https://github.com/tailwindlabs/tailwindcss/pull/16103)) - Do not emit `@keyframes` in `@theme reference` ([#16120](https://github.com/tailwindlabs/tailwindcss/pull/16120)) diff --git a/packages/@tailwindcss-node/src/urls.test.ts b/packages/@tailwindcss-node/src/urls.test.ts index 3378e45ed..16ba352a7 100644 --- a/packages/@tailwindcss-node/src/urls.test.ts +++ b/packages/@tailwindcss-node/src/urls.test.ts @@ -24,6 +24,20 @@ test('URLs can be rewritten', async () => { background: url('/image.jpg'); background: url("/image.jpg"); + /* Potentially Vite-aliased URLs: ignored */ + background: url(~/image.jpg); + background: url(~/foo/image.jpg); + background: url('~/image.jpg'); + background: url("~/image.jpg"); + background: url(#/image.jpg); + background: url(#/foo/image.jpg); + background: url('#/image.jpg'); + background: url("#/image.jpg"); + background: url(@/image.jpg); + background: url(@/foo/image.jpg); + background: url('@/image.jpg'); + background: url("@/image.jpg"); + /* External URL: ignored */ background: url(http://example.com/image.jpg); background: url('http://example.com/image.jpg'); @@ -109,6 +123,18 @@ test('URLs can be rewritten', async () => { background: url(/foo/image.jpg); background: url('/image.jpg'); background: url("/image.jpg"); + background: url(~/image.jpg); + background: url(~/foo/image.jpg); + background: url('~/image.jpg'); + background: url("~/image.jpg"); + background: url(#/image.jpg); + background: url(#/foo/image.jpg); + background: url('#/image.jpg'); + background: url("#/image.jpg"); + background: url(@/image.jpg); + background: url(@/foo/image.jpg); + background: url('@/image.jpg'); + background: url("@/image.jpg"); background: url(http://example.com/image.jpg); background: url('http://example.com/image.jpg'); background: url("http://example.com/image.jpg"); diff --git a/packages/@tailwindcss-node/src/urls.ts b/packages/@tailwindcss-node/src/urls.ts index c4d56deb7..e35b9d280 100644 --- a/packages/@tailwindcss-node/src/urls.ts +++ b/packages/@tailwindcss-node/src/urls.ts @@ -149,9 +149,12 @@ async function doUrlReplace( return `${funcName}(${wrap}${newUrl}${wrap})` } -function skipUrlReplacer(rawUrl: string) { +function skipUrlReplacer(rawUrl: string, aliases?: string[]) { return ( - isExternalUrl(rawUrl) || isDataUrl(rawUrl) || rawUrl[0] === '#' || functionCallRE.test(rawUrl) + isExternalUrl(rawUrl) || + isDataUrl(rawUrl) || + !rawUrl[0].match(/[\.a-zA-Z0-9_]/) || + functionCallRE.test(rawUrl) ) }