From 23b4e880b15ca4155182a1646341d2e4b461d2cf Mon Sep 17 00:00:00 2001
From: Maximo Mussini <maximomussini@gmail.com>
Date: Thu, 12 Aug 2021 11:18:54 -0300
Subject: [PATCH 1/3] fix: CSS dependencies are tracked incorrectly when base
 is set

The change in https://github.com/vitejs/vite/pull/4267 caused all CSS
dependencies of files that are not CSS (Tailwind CSS JIT deps) to be
tracked with the `base` prefix in the module graph.

URLs in the module graph are normalized and are never prefixed with base
and as a result changes to those files were not causing the CSS module
to be invalidated.

See https://github.com/tailwindlabs/tailwindcss/issues/4978#issuecomment-897620776
---
 packages/vite/src/node/plugins/css.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index 1956918658008f..4081edf2c12055 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/packages/vite/src/node/plugins/css.ts
@@ -208,7 +208,9 @@ export function cssPlugin(config: ResolvedConfig): Plugin {
                 isCSSRequest(file)
                   ? moduleGraph.createFileOnlyEntry(file)
                   : await moduleGraph.ensureEntryFromUrl(
-                      await fileToUrl(file, config, this)
+                      (
+                        await fileToUrl(file, config, this)
+                      ).replace(config.base, '/')
                     )
               )
             }

From c5c60d03ab1a69edc8afac7918bed644e506d391 Mon Sep 17 00:00:00 2001
From: Maximo Mussini <maximomussini@gmail.com>
Date: Thu, 12 Aug 2021 12:19:30 -0300
Subject: [PATCH 2/3] test: hmr for non-css dependencies of css files

---
 .../__tests__/backend-integration.spec.ts     | 36 ++++++++++++++-----
 .../frontend/entrypoints/global.css           |  1 +
 .../frontend/entrypoints/index.html           |  3 +-
 .../frontend/entrypoints/main.ts              | 11 ++++++
 .../frontend/styles/tailwind.css              |  1 +
 .../backend-integration/package.json          |  3 ++
 .../backend-integration/postcss.config.js     |  6 ++++
 .../backend-integration/tailwind.config.js    | 12 +++++++
 8 files changed, 63 insertions(+), 10 deletions(-)
 create mode 100644 packages/playground/backend-integration/frontend/entrypoints/main.ts
 create mode 100644 packages/playground/backend-integration/frontend/styles/tailwind.css
 create mode 100644 packages/playground/backend-integration/postcss.config.js
 create mode 100644 packages/playground/backend-integration/tailwind.config.js

diff --git a/packages/playground/backend-integration/__tests__/backend-integration.spec.ts b/packages/playground/backend-integration/__tests__/backend-integration.spec.ts
index fdd92dd82a32d6..63b2d0050235b9 100644
--- a/packages/playground/backend-integration/__tests__/backend-integration.spec.ts
+++ b/packages/playground/backend-integration/__tests__/backend-integration.spec.ts
@@ -32,15 +32,33 @@ if (isBuild) {
     expect(htmlEntry.assets.length).toEqual(1)
   })
 } else {
-  test('preserve the base in CSS HMR', async () => {
-    await untilUpdated(() => getColor('body'), 'black') // sanity check
-    editFile('frontend/entrypoints/global.css', (code) =>
-      code.replace('black', 'red')
-    )
-    await untilUpdated(() => getColor('body'), 'red') // successful HMR
+  describe('CSS HMR', () => {
+    test('preserve the base in CSS HMR', async () => {
+      await untilUpdated(() => getColor('body'), 'black') // sanity check
+      editFile('frontend/entrypoints/global.css', (code) =>
+        code.replace('black', 'red')
+      )
+      await untilUpdated(() => getColor('body'), 'red') // successful HMR
 
-    // Verify that the base (/dev/) was added during the css-update
-    const link = await page.$('link[rel="stylesheet"]')
-    expect(await link.getAttribute('href')).toContain('/dev/global.css?t=')
+      // Verify that the base (/dev/) was added during the css-update
+      const link = await page.$('link[rel="stylesheet"]')
+      expect(await link.getAttribute('href')).toContain('/dev/global.css?t=')
+    })
+
+    test('CSS dependencies are tracked for HMR', async () => {
+      const el = await page.$('h1')
+      browserLogs.length = 0
+
+      editFile('frontend/entrypoints/main.ts', (code) =>
+        code.replace('text-black', 'text-[rgb(204,0,0)]')
+      )
+      await untilUpdated(() => getColor(el), 'rgb(204, 0, 0)')
+      expect(browserLogs).toMatchObject([
+        '[vite] css hot updated: /global.css',
+        '[vite] css hot updated: /global.css',
+        '[vite] hot updated: /main.ts',
+        '[vite] hot updated: /global.css'
+      ])
+    })
   })
 }
diff --git a/packages/playground/backend-integration/frontend/entrypoints/global.css b/packages/playground/backend-integration/frontend/entrypoints/global.css
index 915692c7a5c061..9a15d3b9794599 100644
--- a/packages/playground/backend-integration/frontend/entrypoints/global.css
+++ b/packages/playground/backend-integration/frontend/entrypoints/global.css
@@ -1,4 +1,5 @@
 @import '~/styles/background.css';
+@import '~/styles/tailwind.css';
 @import '../../references.css';
 
 html,
diff --git a/packages/playground/backend-integration/frontend/entrypoints/index.html b/packages/playground/backend-integration/frontend/entrypoints/index.html
index 3b8dedb4ac3096..ef9e046e9ea177 100644
--- a/packages/playground/backend-integration/frontend/entrypoints/index.html
+++ b/packages/playground/backend-integration/frontend/entrypoints/index.html
@@ -2,7 +2,7 @@
 
 <link rel="stylesheet" href="/global.css" />
 
-<h1>Backend Integration</h1>
+<h1 class="text-black">Backend Integration</h1>
 
 <p>
   This test configures the <code>root</code> to simulate a Laravel/Rails setup.
@@ -27,6 +27,7 @@ <h2>CSS Asset References</h2>
   </li>
 </ul>
 
+<script type="module" src="./main.ts"></script>
 <script type="module">
   import './global.css'
 
diff --git a/packages/playground/backend-integration/frontend/entrypoints/main.ts b/packages/playground/backend-integration/frontend/entrypoints/main.ts
new file mode 100644
index 00000000000000..b95a989ada81c2
--- /dev/null
+++ b/packages/playground/backend-integration/frontend/entrypoints/main.ts
@@ -0,0 +1,11 @@
+export const colorClass = 'text-black'
+
+export function colorHeading() {
+  document.querySelector('h1').className = colorClass
+}
+
+colorHeading()
+
+if (import.meta.hot) {
+  import.meta.hot.accept()
+}
diff --git a/packages/playground/backend-integration/frontend/styles/tailwind.css b/packages/playground/backend-integration/frontend/styles/tailwind.css
new file mode 100644
index 00000000000000..65dd5f63a7dff2
--- /dev/null
+++ b/packages/playground/backend-integration/frontend/styles/tailwind.css
@@ -0,0 +1 @@
+@tailwind utilities;
diff --git a/packages/playground/backend-integration/package.json b/packages/playground/backend-integration/package.json
index ac268b3e508739..c463b1832452b1 100644
--- a/packages/playground/backend-integration/package.json
+++ b/packages/playground/backend-integration/package.json
@@ -7,5 +7,8 @@
     "build": "vite build",
     "debug": "node --inspect-brk ../../vite/bin/vite",
     "serve": "vite preview"
+  },
+  "dependencies": {
+    "tailwindcss": "^2.2.4"
   }
 }
diff --git a/packages/playground/backend-integration/postcss.config.js b/packages/playground/backend-integration/postcss.config.js
new file mode 100644
index 00000000000000..9c7a1787315279
--- /dev/null
+++ b/packages/playground/backend-integration/postcss.config.js
@@ -0,0 +1,6 @@
+// postcss.config.js
+module.exports = {
+  plugins: {
+    tailwindcss: { config: __dirname + '/tailwind.config.js' }
+  }
+}
diff --git a/packages/playground/backend-integration/tailwind.config.js b/packages/playground/backend-integration/tailwind.config.js
new file mode 100644
index 00000000000000..6e72a7e5d9d87b
--- /dev/null
+++ b/packages/playground/backend-integration/tailwind.config.js
@@ -0,0 +1,12 @@
+module.exports = {
+  mode: 'jit',
+  purge: [__dirname + '/frontend/**/*.{css,html,ts,js}'],
+  darkMode: false, // or 'media' or 'class'
+  theme: {
+    extend: {}
+  },
+  variants: {
+    extend: {}
+  },
+  plugins: []
+}

From 2cae360a0f1bc40e4344fedc71098748bd1210d6 Mon Sep 17 00:00:00 2001
From: Maximo Mussini <maximomussini@gmail.com>
Date: Thu, 12 Aug 2021 12:36:00 -0300
Subject: [PATCH 3/3] chore: avoid race condition in tests

---
 .../__tests__/backend-integration.spec.ts                  | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/packages/playground/backend-integration/__tests__/backend-integration.spec.ts b/packages/playground/backend-integration/__tests__/backend-integration.spec.ts
index 63b2d0050235b9..3e189972f4baed 100644
--- a/packages/playground/backend-integration/__tests__/backend-integration.spec.ts
+++ b/packages/playground/backend-integration/__tests__/backend-integration.spec.ts
@@ -53,12 +53,7 @@ if (isBuild) {
         code.replace('text-black', 'text-[rgb(204,0,0)]')
       )
       await untilUpdated(() => getColor(el), 'rgb(204, 0, 0)')
-      expect(browserLogs).toMatchObject([
-        '[vite] css hot updated: /global.css',
-        '[vite] css hot updated: /global.css',
-        '[vite] hot updated: /main.ts',
-        '[vite] hot updated: /global.css'
-      ])
+      expect(browserLogs).toContain('[vite] css hot updated: /global.css')
     })
   })
 }