add @apply integration tests for Vue <style> blocks

RobinMalfait · RobinMalfait · commit f5ceae3e01b1 · 2025-05-26T15:11:39.000+02:00
diff --git a/integrations/vite/vue.test.ts b/integrations/vite/vue.test.ts
@@ -71,3 +71,73 @@ test(
     await fs.expectFileToContain(files[0][0], ['.bar{'])
   },
 )
+
+test(
+  'error when using `@apply` without `@reference`',
+  {
+    fs: {
+      'package.json': json`
+        {
+          "type": "module",
+          "dependencies": {
+            "vue": "^3.4.37",
+            "tailwindcss": "workspace:^"
+          },
+          "devDependencies": {
+            "@vitejs/plugin-vue": "^5.1.2",
+            "@tailwindcss/vite": "workspace:^",
+            "vite": "^6"
+          }
+        }
+      `,
+      'vite.config.ts': ts`
+        import { defineConfig } from 'vite'
+        import vue from '@vitejs/plugin-vue'
+        import tailwindcss from '@tailwindcss/vite'
+
+        export default defineConfig({
+          plugins: [vue(), tailwindcss()],
+        })
+      `,
+      'index.html': html`
+        <!doctype html>
+        <html>
+          <body>
+            <div id="app"></div>
+            <script type="module" src="./src/main.ts"></script>
+          </body>
+        </html>
+      `,
+      'src/main.ts': ts`
+        import { createApp } from 'vue'
+        import App from './App.vue'
+
+        createApp(App).mount('#app')
+      `,
+      'src/App.vue': html`
+        <template>
+          <div class="foo">Hello Vue!</div>
+        </template>
+
+        <style>
+          .foo {
+            @apply text-red-500;
+          }
+        </style>
+      `,
+    },
+  },
+  async ({ exec, expect }) => {
+    expect.assertions(1)
+
+    try {
+      await exec('pnpm vite build')
+    } catch (error) {
+      let [, message] = /error during build:([\s\S]*?)file:/g.exec(error.message) ?? []
+      expect(message.trim()).toMatchInlineSnapshot(`
+        "[@tailwindcss/vite:generate:build] Cannot apply unknown utility class: \`text-red-500\`.
+        It looks like you are missing a \`@reference "app.css"\` or \`@import "tailwindcss";\`"
+      `)
+    }
+  },
+)
