From 3f3f4737d5242547fb83f8d2522ba91cc1d96fb0 Mon Sep 17 00:00:00 2001
From: Nurettin Kaya <sibbngheid@gmail.com>
Date: Thu, 17 Feb 2022 13:24:44 -0800
Subject: [PATCH] fix: normalize postcss dependency messages (#6959)

---
 .../tailwind/__test__/tailwind.spec.ts        | 22 ++++++++++++++++++-
 packages/playground/tailwind/src/App.vue      |  2 +-
 .../playground/tailwind/tailwind.config.js    |  7 +++++-
 packages/vite/src/node/plugins/css.ts         |  2 +-
 4 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/packages/playground/tailwind/__test__/tailwind.spec.ts b/packages/playground/tailwind/__test__/tailwind.spec.ts
index 105eb245bf207e..47f6b7ccf49037 100644
--- a/packages/playground/tailwind/__test__/tailwind.spec.ts
+++ b/packages/playground/tailwind/__test__/tailwind.spec.ts
@@ -5,7 +5,7 @@ test('should render', async () => {
 })
 
 if (!isBuild) {
-  test('regenerate CSS and HMR', async () => {
+  test('regenerate CSS and HMR (glob pattern)', async () => {
     browserLogs.length = 0
     const el = await page.$('#pagetitle')
     const el2 = await page.$('#helloroot')
@@ -37,4 +37,24 @@ if (!isBuild) {
 
     browserLogs.length = 0
   })
+
+  test('regenerate CSS and HMR (relative path)', async () => {
+    browserLogs.length = 0
+    const el = await page.$('h1')
+
+    expect(await getColor(el)).toBe('black')
+
+    editFile('src/App.vue', (code) =>
+      code.replace('text-black', 'text-[rgb(11,22,33)]')
+    )
+
+    await untilUpdated(() => getColor(el), 'rgb(11, 22, 33)')
+
+    expect(browserLogs).toMatchObject([
+      '[vite] css hot updated: /index.css',
+      '[vite] hot updated: /src/App.vue'
+    ])
+
+    browserLogs.length = 0
+  })
 }
diff --git a/packages/playground/tailwind/src/App.vue b/packages/playground/tailwind/src/App.vue
index b032d5e0db77e3..25835fc414a06f 100644
--- a/packages/playground/tailwind/src/App.vue
+++ b/packages/playground/tailwind/src/App.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <h1>Tailwind app</h1>
+    <h1 class="text-black">Tailwind app</h1>
     {{ foo }}
   </div>
   <router-view />
diff --git a/packages/playground/tailwind/tailwind.config.js b/packages/playground/tailwind/tailwind.config.js
index eb7a876578f52e..64a2b1a2499bb4 100644
--- a/packages/playground/tailwind/tailwind.config.js
+++ b/packages/playground/tailwind/tailwind.config.js
@@ -1,6 +1,11 @@
 module.exports = {
   mode: 'jit',
-  purge: [__dirname + '/src/**/*.vue'],
+  purge: [
+    // Before editing this section, make sure no paths are matching with `/src/App.vue`
+    // Look https://github.com/vitejs/vite/pull/6959 for more details
+    __dirname + '/src/{components,views}/**/*.vue',
+    __dirname + '/src/App.vue'
+  ],
   darkMode: false, // or 'media' or 'class'
   theme: {
     extend: {}
diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index 280a4ed177983d..804d7cc0c87789 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/packages/vite/src/node/plugins/css.ts
@@ -759,7 +759,7 @@ async function compileCSS(
   // record CSS dependencies from @imports
   for (const message of postcssResult.messages) {
     if (message.type === 'dependency') {
-      deps.add(message.file as string)
+      deps.add(normalizePath(message.file as string))
     } else if (message.type === 'dir-dependency') {
       // https://github.com/postcss/postcss/blob/main/docs/guidelines/plugin.md#3-dependencies
       const { dir, glob: globPattern = '**' } = message