test: remove plugin-vue from tailwind playground (#14073)

playground/css/__tests__/postcss-plugins-different-dir/postcss-plugins-different-dir.spec.ts

@@ -21,7 +21,7 @@ test.runIf(isServe)('postcss plugins in different dir', async () => {
   await server.listen()
   try {
     await page.goto(`http://localhost:${port}`)
-    const tailwindStyle = await page.$('.tailwind-style')
+    const tailwindStyle = page.locator('#tailwind-style')
     expect(await getBgColor(tailwindStyle)).toBe('rgb(254, 226, 226)')
     expect(await getColor(tailwindStyle)).toBe('rgb(136, 136, 136)')
   } finally {

playground/tailwind/__test__/tailwind.spec.ts

@@ -1,84 +1,82 @@
 import { expect, test } from 'vitest'
 import {
   editFile,
-  getBgColor,
   getColor,
-  isBuild,
+  isServe,
   page,
   untilBrowserLogAfter,
   untilUpdated,
 } from '~utils'
 
 test('should render', async () => {
-  expect(await page.textContent('#pagetitle')).toBe('|Page title|')
+  expect(await page.textContent('#pagetitle')).toBe('Page title')
 })
 
-if (!isBuild) {
-  test('regenerate CSS and HMR (glob pattern)', async () => {
-    const el = await page.$('#pagetitle')
-    const el2 = await page.$('#helloroot')
-    expect(await getColor(el)).toBe('rgb(11, 22, 33)')
+test.runIf(isServe)('regenerate CSS and HMR (glob pattern)', async () => {
+  const el = page.locator('#view1-text')
+  expect(await getColor(el)).toBe('rgb(22, 163, 74)')
 
+  await untilBrowserLogAfter(
+    () =>
+      editFile('src/views/view1.js', (code) =>
+        code.replace('|view1|', '|view1 updated|'),
+      ),
+    [
+      '[vite] css hot updated: /index.css',
+      '[vite] hot updated: /src/views/view1.js via /src/main.js',
+    ],
+    false,
+  )
+  await untilUpdated(() => el.textContent(), '|view1 updated|')
+
+  await untilBrowserLogAfter(
+    () =>
+      editFile('src/views/view1.js', (code) =>
+        code.replace('text-green-600', 'text-orange-600'),
+      ),
+    [
+      '[vite] css hot updated: /index.css',
+      '[vite] hot updated: /src/views/view1.js via /src/main.js',
+    ],
+    false,
+  )
+  // await new Promise(resolve => setTimeout(resolve, 10))
+  await untilUpdated(async () => getColor(el), 'rgb(234, 88, 12)')
+})
+
+test.runIf(isServe)(
+  'same file duplicated in module graph (#4267)',
+  async () => {
+    const el = page.locator('#component1')
+    expect(await getColor(el)).toBe('rgb(220, 38, 38)')
+
+    // when duplicated, page reload happens
     await untilBrowserLogAfter(
       () =>
-        editFile('src/views/Page.vue', (code) =>
-          code.replace('|Page title|', '|Page title updated|'),
+        editFile('src/components/component1.js', (code) =>
+          code.replace('text-red-600', 'text-blue-600'),
         ),
       [
         '[vite] css hot updated: /index.css',
-        '[vite] hot updated: /src/views/Page.vue',
+        '[vite] hot updated: /src/components/component1.js',
       ],
       false,
     )
-    await untilUpdated(() => el.textContent(), '|Page title updated|')
+    await untilUpdated(() => getColor(el), 'rgb(37, 99, 235)')
+  },
+)
 
-    await untilBrowserLogAfter(
-      () =>
-        editFile('src/components/HelloWorld.vue', (code) =>
-          code.replace('text-gray-800', 'text-[rgb(10,20,30)]'),
-        ),
-      [
-        '[vite] css hot updated: /index.css',
-        '[vite] hot updated: /src/components/HelloWorld.vue',
-      ],
-      false,
-    )
-    await untilUpdated(() => getColor(el2), 'rgb(10, 20, 30)')
-  })
+test.runIf(isServe)('regenerate CSS and HMR (relative path)', async () => {
+  const el = page.locator('#pagetitle')
+  expect(await getColor(el)).toBe('rgb(124, 58, 237)')
 
-  test('regenerate CSS and HMR (relative path)', async () => {
-    const el = await page.$('h1')
-    expect(await getColor(el)).toBe('black')
-
-    await untilBrowserLogAfter(
-      () =>
-        editFile('src/App.vue', (code) =>
-          code.replace('text-black', 'text-[rgb(11,22,33)]'),
-        ),
-      [
-        '[vite] css hot updated: /index.css',
-        '[vite] hot updated: /src/App.vue',
-      ],
-      false,
-    )
-    await untilUpdated(() => getColor(el), 'rgb(11, 22, 33)')
-  })
-
-  test('regenerate CSS and HMR (pug template)', async () => {
-    const el = await page.$('.pug')
-    expect(await getBgColor(el)).toBe('rgb(248, 113, 113)')
-
-    await untilBrowserLogAfter(
-      () =>
-        editFile('src/components/PugTemplate.vue', (code) =>
-          code.replace('bg-red-400', 'bg-red-600'),
-        ),
-      [
-        '[vite] css hot updated: /index.css',
-        '[vite] hot updated: /src/components/PugTemplate.vue?vue&type=template&lang.js',
-      ],
-      false,
-    )
-    await untilUpdated(() => getBgColor(el), 'rgb(220, 38, 38)')
-  })
-}
+  await untilBrowserLogAfter(
+    () =>
+      editFile('src/main.js', (code) =>
+        code.replace('text-violet-600', 'text-cyan-600'),
+      ),
+    ['[vite] css hot updated: /index.css', '[vite] hot updated: /src/main.js'],
+    false,
+  )
+  await untilUpdated(() => getColor(el), 'rgb(8, 145, 178)')
+})

playground/tailwind/index.html

@@ -1,14 +1,5 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" href="/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite App</title>
-    <link rel="stylesheet" href="./index.css" />
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
-  </body>
-</html>
+<link rel="stylesheet" href="./index.css" />
+
+<div id="app"></div>
+
+<script type="module" src="/src/main.js" defer></script>

playground/tailwind/src/App.vue

@@ -1,12 +0,0 @@
-<template>
-  <div>
-    <h1 class="text-black">Tailwind app</h1>
-    {{ foo }}
-  </div>
-  <router-view />
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-const foo = ref(42)
-</script>

playground/tailwind/src/components/HelloWorld.vue

@@ -1,10 +0,0 @@
-<template>
-  <div id="helloroot" class="bg-red-400 text-gray-800">
-    HelloWorld - {{ count }}
-  </div>
-</template>
-
-<script setup lang="ts">
-import { INITIAL_COUNT } from '../utils.ts'
-const count = INITIAL_COUNT
-</script>

playground/tailwind/src/components/PugTemplate.vue

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

playground/tailwind/src/components/component1.js

@@ -0,0 +1,9 @@
+export const component1 = /* html */ `
+  <div id="component1" data-id="component1" class="text-red-600">component1</div>
+`
+
+import.meta.hot?.accept((mod) => {
+  document.querySelectorAll('[data-id="component1"]').forEach((d) => {
+    d.outerHTML = mod.component1
+  })
+})

playground/tailwind/src/main.js

@@ -1,6 +1,18 @@
-import { createApp } from 'vue'
-import App from './App.vue'
-import router from './router'
-// import '../index.css';
+import { view1 } from './views/view1'
 
-createApp(App).use(router).mount('#app')
+export const main = (view1Content) => /* html */ `
+  <h1 id="pagetitle" class="text-3xl text-violet-600">Page title</h1>
+  ${view1Content}
+  <!-- used in postcss-plugins-different-dir -->
+  <div id="tailwind-style" class="bg-red-100 text-[#888888]">style</div>
+`
+
+document.getElementById('app').innerHTML = main(view1)
+
+import.meta.hot?.accept((mod) => {
+  document.getElementById('app').innerHTML = mod.main(view1)
+})
+
+import.meta.hot?.accept(['./views/view1'], ([mod]) => {
+  document.getElementById('app').innerHTML = main(mod.view1)
+})

playground/tailwind/src/router.ts

@@ -1,16 +0,0 @@
-import { createRouter, createWebHistory } from 'vue-router'
-import Page from './views/Page.vue'
-
-const history = createWebHistory()
-
-const router = createRouter({
-  history: history,
-  routes: [
-    {
-      path: '/',
-      component: Page,
-    },
-  ],
-})
-
-export default router

playground/tailwind/src/utils.ts

@@ -1,2 +0,0 @@
-export const NAME = 'Tailwind'
-export const INITIAL_COUNT = 1

playground/tailwind/src/views/Page.vue

@@ -1,33 +0,0 @@
-<template>
-  <div>
-    <h1 id="pagetitle" class="text-[rgb(11,22,33)] text-2xl">|Page title|</h1>
-    <div @click="val = val + 1">{{ val }}</div>
-    <div
-      class="tailwind-style bg-red-100 inline-block h-24 px-8 mb-8 text-[#888888]"
-    >
-      {{ name }} style
-    </div>
-    <HelloWorld />
-    <PugTemplate />
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, ref } from 'vue'
-import HelloWorld from '../components/HelloWorld.vue'
-import PugTemplate from '../components/PugTemplate.vue'
-import { NAME } from '../utils.ts'
-
-export default defineComponent({
-  components: { HelloWorld, PugTemplate },
-  setup() {
-    const name = NAME
-    const val = ref(0)
-
-    return {
-      name,
-      val,
-    }
-  },
-})
-</script>

playground/tailwind/src/views/view1.js

@@ -0,0 +1,8 @@
+import { component1 } from '../components/component1'
+
+export const view1 = /* html */ `
+  <div data-id="view1">
+    <div id="view1-text" class="text-green-600">|view1|</div>
+    ${component1}
+  </div>
+`

playground/tailwind/tailwind.config.js

@@ -2,10 +2,10 @@
 
 module.exports = {
   content: [
-    // Before editing this section, make sure no paths are matching with `/src/App.vue`
+    // Before editing this section, make sure no paths are matching with `/src/main.js`
     // Look https://github.com/vitejs/vite/pull/6959 for more details
-    __dirname + '/src/{components,views}/**/*.vue',
-    __dirname + '/src/App.vue',
+    __dirname + '/src/{components,views}/**/*.js',
+    __dirname + '/src/main.js',
   ],
   theme: {
     extend: {},

playground/tailwind/vite.config.ts

@@ -1,5 +1,4 @@
 import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
 
 export default defineConfig({
   resolve: {
@@ -7,7 +6,6 @@ export default defineConfig({
       '/@': __dirname,
     },
   },
-  plugins: [vue()],
   build: {
     // to make tests faster
     minify: false,
@@ -17,4 +15,15 @@ export default defineConfig({
     // although it should not affect the build
     origin: 'http://localhost:8080',
   },
+  plugins: [
+    {
+      name: 'delay view',
+      enforce: 'pre',
+      async transform(_code, id) {
+        if (id.includes('views/view1.js')) {
+          await new Promise((resolve) => setTimeout(resolve, 100))
+        }
+      },
+    },
+  ],
 })

playground/test-utils.ts

@@ -4,7 +4,11 @@
 import fs from 'node:fs'
 import path from 'node:path'
 import colors from 'css-color-names'
-import type { ConsoleMessage, ElementHandle } from 'playwright-chromium'
+import type {
+  ConsoleMessage,
+  ElementHandle,
+  Locator,
+} from 'playwright-chromium'
 import type { DepOptimizationMetadata, Manifest } from 'vite'
 import { normalizePath } from 'vite'
 import { fromComment } from 'convert-source-map'
@@ -74,7 +78,9 @@ function rgbToHex(rgb: string): string {
 
 const timeout = (n: number) => new Promise((r) => setTimeout(r, n))
 
-async function toEl(el: string | ElementHandle): Promise<ElementHandle> {
+async function toEl(
+  el: string | ElementHandle | Locator,
+): Promise<ElementHandle> {
   if (typeof el === 'string') {
     const realEl = await page.$(el)
     if (realEl == null) {
@@ -82,21 +88,30 @@ async function toEl(el: string | ElementHandle): Promise<ElementHandle> {
     }
     return realEl
   }
+  if ('elementHandle' in el) {
+    return el.elementHandle()
+  }
   return el
 }
 
-export async function getColor(el: string | ElementHandle): Promise<string> {
+export async function getColor(
+  el: string | ElementHandle | Locator,
+): Promise<string> {
   el = await toEl(el)
   const rgb = await el.evaluate((el) => getComputedStyle(el as Element).color)
   return hexToNameMap[rgbToHex(rgb)] ?? rgb
 }
 
-export async function getBg(el: string | ElementHandle): Promise<string> {
+export async function getBg(
+  el: string | ElementHandle | Locator,
+): Promise<string> {
   el = await toEl(el)
   return el.evaluate((el) => getComputedStyle(el as Element).backgroundImage)
 }
 
-export async function getBgColor(el: string | ElementHandle): Promise<string> {
+export async function getBgColor(
+  el: string | ElementHandle | Locator,
+): Promise<string> {
   el = await toEl(el)
   return el.evaluate((el) => getComputedStyle(el as Element).backgroundColor)
 }