test: migrate tailwind + pug test from Vite repo (#224)

Author: sapphi-red

playground/tailwind/App.vue

@@ -0,0 +1,7 @@
+<template>
+  <PugTemplate />
+</template>
+
+<script setup lang="ts">
+import PugTemplate from './PugTemplate.vue'
+</script>

playground/tailwind/PugTemplate.vue

@@ -0,0 +1,3 @@
+<template lang="pug">
+.bg-red-400.pug Pug template
+</template>

playground/tailwind/__tests__/tailwind.spec.ts

@@ -0,0 +1,27 @@
+import { expect, test } from 'vitest'
+import {
+  editFile,
+  getBgColor,
+  isServe,
+  page,
+  untilBrowserLogAfter,
+  untilUpdated,
+} from '~utils'
+
+test.runIf(isServe)('regenerate CSS and HMR (pug template)', async () => {
+  const el = await page.$('.pug')
+  expect(await getBgColor(el)).toBe('rgb(248, 113, 113)')
+
+  await untilBrowserLogAfter(
+    () =>
+      editFile('PugTemplate.vue', (code) =>
+        code.replace('bg-red-400', 'bg-red-600'),
+      ),
+    [
+      '[vite] css hot updated: /index.css',
+      '[vite] hot updated: /PugTemplate.vue?vue&type=template&lang.js',
+    ],
+    false,
+  )
+  await untilUpdated(() => getBgColor(el), 'rgb(220, 38, 38)')
+})

playground/tailwind/index.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

playground/tailwind/index.html

@@ -0,0 +1,9 @@
+<link rel="stylesheet" href="./index.css" />
+
+<div id="app"></div>
+<script type="module">
+  import { createApp } from 'vue'
+  import App from './App.vue'
+
+  createApp(App).mount('#app')
+</script>

playground/tailwind/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@vitejs/test-tailwind",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "debug": "node --inspect-brk ../../packages/vite/bin/vite",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "autoprefixer": "^10.4.14",
+    "tailwindcss": "^3.3.3",
+    "vue": "^3.3.4",
+    "vue-router": "^4.2.4"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "workspace:*",
+    "ts-node": "^10.9.1"
+  }
+}

playground/tailwind/postcss.config.ts

@@ -0,0 +1,7 @@
+// postcss.config.ts
+module.exports = {
+  plugins: {
+    tailwindcss: { config: __dirname + '/tailwind.config.js' },
+    autoprefixer: {},
+  },
+}

playground/tailwind/tailwind.config.js

@@ -0,0 +1,12 @@
+/** @type {import('tailwindcss').Config} */
+
+module.exports = {
+  content: [__dirname + '/**/*.vue'],
+  theme: {
+    extend: {},
+  },
+  variants: {
+    extend: {},
+  },
+  plugins: [],
+}

playground/tailwind/vite.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  plugins: [vue()],
+  build: {
+    // to make tests faster
+    minify: false,
+  },
+})