Vite: Don't rewrite URLs that look like aliases

Author: philipp-spiess

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");

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)
   )
 }