improve reproduction integration tests

RobinMalfait · RobinMalfait · commit 48f68b74cfc0 · 2024-11-25T22:34:35.000+01:00
diff --git a/integrations/cli/index.test.ts b/integrations/cli/index.test.ts
@@ -992,3 +992,78 @@ test(
     `)
   },
 )
+
+test(
+  'https://github.com/tailwindlabs/tailwindcss/issues/15148',
+  {
+    fs: {
+      'package.json': json`
+        {
+          "type": "module",
+          "dependencies": {
+            "tailwindcss": "workspace:^",
+            "@tailwindcss/cli": "workspace:^"
+          }
+        }
+      `,
+      'index.css': css`
+        @import 'tailwindcss';
+        @utility test-a {
+          color: red;
+        }
+        @utility test-b {
+          color: green;
+        }
+        @utility test-c {
+          color: blue;
+        }
+        @utility test-d {
+          color: tomato;
+        }
+      `,
+      'app.js': js`
+        const classes = [
+          'test-a',
+          'test-b',
+          'test-c',
+          'test-d',
+          'multiple-entries-to-keep-newlines',
+          'multiple-entries-to-keep-newlines',
+          'multiple-entries-to-keep-newlines',
+          'multiple-entries-to-keep-newlines',
+          'multiple-entries-to-keep-newlines',
+          'multiple-entries-to-keep-newlines',
+          'multiple-entries-to-keep-newlines',
+          'multiple-entries-to-keep-newlines',
+          'multiple-entries-to-keep-newlines',
+          'multiple-entries-to-keep-newlines',
+          'multiple-entries-to-keep-newlines',
+          'multiple-entries-to-keep-newlines',
+          'multiple-entries-to-keep-newlines',
+          'multiple-entries-to-keep-newlines',
+          'multiple-entries-to-keep-newlines',
+          'multiple-entries-to-keep-newlines',
+        ]
+      `
+        // The original test case used Svelte, Vite, etc… The issue is caused by
+        // the fact that output from the compiler is what is/was scanned by Oxide.
+        // The Svelte compiler uses tabs for indents instead of spaces which was
+        // the actual cause of the bug. It could be reproduced in the CLI just by
+        // using tabs
+        .replace(/\[[\s\S]*\]/gm, (m) => m.replace(/\s+/g, '\t')),
+    },
+  },
+  async ({ fs, exec }) => {
+    await exec('pnpm tailwindcss --input index.css --output dist/out.css')
+
+    let files = await fs.glob('dist/**/*.css')
+    expect(files).toHaveLength(1)
+
+    await fs.expectFileToContain(files[0][0], [
+      candidate`test-a`,
+      candidate`test-b`,
+      candidate`test-c`,
+      candidate`test-d`,
+    ])
+  },
+)
diff --git a/integrations/vite/svelte.test.ts b/integrations/vite/svelte.test.ts
@@ -1,5 +1,5 @@
 import { expect } from 'vitest'
-import { candidate, css, html, js, json, retryAssertion, test, ts } from '../utils'
+import { candidate, css, html, json, retryAssertion, test, ts } from '../utils'
 
 test(
   'production build',
@@ -253,6 +253,9 @@ test(
   },
 )
 
+// Context: when using `svelte()` before `tailwindcss()` it means that
+// `tailwindcss()` sees the contents after the svelte compiler ran. The svelte
+// compiler outputs tabs instead of spaces which we didn't handle correctly.
 test(
   'https://github.com/tailwindlabs/tailwindcss/issues/15148',
   {
@@ -275,22 +278,13 @@ test(
       'vite.config.ts': ts`
         import { defineConfig } from 'vite'
         import tailwindcss from '@tailwindcss/vite'
-        import { svelte } from '@sveltejs/vite-plugin-svelte'
+        import { svelte, vitePreprocess } from '@sveltejs/vite-plugin-svelte'
 
         // https://vite.dev/config/
         export default defineConfig({
-          plugins: [svelte(), tailwindcss()],
+          plugins: [svelte({ preprocess: [vitePreprocess()] }), tailwindcss()],
         })
       `,
-      'svelte.config.js': js`
-        import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
-
-        export default {
-          // Consult https://svelte.dev/docs#compile-time-svelte-preprocess
-          // for more information about preprocessors
-          preprocess: vitePreprocess(),
-        }
-      `,
       'index.html': html`
         <!doctype html>
         <html>
@@ -355,10 +349,7 @@ test(
         {#each classes as cls}
         <div class="{cls}"></div>
         {/each}
-      `
-
-        // Replace all spaces with tabs
-        .replace(/\[[\s\S]*\]/gm, (m) => m.replace(/[ ]+/g, '\t')),
+      `,
     },
   },
   async ({ fs, exec }) => {
