Add failing test for Vite URL rewriting

Add stub test for lightningcss This fails so its marked as a `todo` test.
tailwindlabs · adamwathan · Nov 7, 2024 · Oct 31, 2024 · Oct 31, 2024 · Nov 5, 2024
commit b1d41e77abbe51cb7fa525222527e30a84ccda20
diff --git a/integrations/utils.ts b/integrations/utils.ts
@@ -491,6 +491,7 @@ function testIfPortTaken(port: number): Promise<boolean> {
   })
 }
 
+export let svg = dedent
 export let css = dedent
 export let html = dedent
 export let ts = dedent

diff --git a/integrations/vite/url-rewriting.test.ts b/integrations/vite/url-rewriting.test.ts
@@ -0,0 +1,97 @@
+import { describe, expect } from 'vitest'
+import { binary, css, html, svg, test, ts, txt } from '../utils'
+
+const SIMPLE_IMAGE = `iVBORw0KGgoAAAANSUhEUgAAADAAAAAlAQAAAAAsYlcCAAAACklEQVR4AWMYBQABAwABRUEDtQAAAABJRU5ErkJggg==`
+
+for (let transformer of ['postcss', 'lightningcss']) {
+  describe(transformer, () => {
+    test(
+      'can rewrite urls in production builds',
+      {
+        fs: {
+          'package.json': txt`
+            {
+              "type": "module",
+              "dependencies": {
+                "tailwindcss": "workspace:^"
+              },
+              "devDependencies": {
+                ${transformer === 'lightningcss' ? `"lightningcss": "^1.26.0",` : ''}
+                "@tailwindcss/vite": "workspace:^",
+                "vite": "^5.3.5"
+              }
+            }
+          `,
+          'vite.config.ts': ts`
+            import tailwindcss from '@tailwindcss/vite'
+            import { defineConfig } from 'vite'
+
+            export default defineConfig({
+              plugins: [tailwindcss()],
+              build: {
+                assetsInlineLimit: 256,
+                cssMinify: false,
+              },
+              css: ${transformer === 'postcss' ? '{}' : "{ transformer: 'lightningcss' }"},
+            })
+          `,
+          'index.html': html`
+            <!doctype html>
+            <html>
+              <head>
+                <link rel="stylesheet" href="./src/app.css" />
+              </head>
+              <body>
+                <div id="app"></div>
+                <script type="module" src="./src/main.ts"></script>
+              </body>
+            </html>
+          `,
+          'src/main.ts': ts``,
+          'src/app.css': css`
+            @import './dir-1/bar.css';
+            @import './dir-1/dir-2/baz.css';
+            @import './dir-1/dir-2/vector.css';
+          `,
+          'src/dir-1/bar.css': css`
+            .bar {
+              background-image: url('../../resources/image.png');
+            }
+          `,
+          'src/dir-1/dir-2/baz.css': css`
+            .baz {
+              background-image: url('../../../resources/image.png');
+            }
+          `,
+          'src/dir-1/dir-2/vector.css': css`
+            .baz {
+              background-image: url('../../../resources/vector.svg');
+            }
+          `,
+          'resources/image.png': binary(SIMPLE_IMAGE),
+          'resources/vector.svg': svg`
+            <svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
+              <rect width="100%" height="100%" fill="red" />
+              <circle cx="200" cy="100" r="80" fill="green" />
+              <rect width="100%" height="100%" fill="red" />
+              <circle cx="200" cy="100" r="80" fill="green" />
+            </svg>
+          `,
+        },
+      },
+      async ({ fs, exec }) => {
+        await exec('pnpm vite build')
+
+        let files = await fs.glob('dist/**/*.css')
+        expect(files).toHaveLength(1)
+
+        await fs.expectFileToContain(files[0][0], [SIMPLE_IMAGE])
+
+        let images = await fs.glob('dist/**/*.svg')
+        expect(images).toHaveLength(1)
+
+        await fs.expectFileToContain(files[0][0], [/\/assets\/vector-.*?\.svg/])
+      },
+    )
+  })
+}