fix: CSS dependencies are tracked incorrectly when base is set

packages/playground/backend-integration/__tests__/backend-integration.spec.ts

@@ -32,15 +32,28 @@ 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).toContain('[vite] css hot updated: /global.css')
+    })
   })
 }

packages/playground/backend-integration/frontend/entrypoints/global.css

@@ -1,4 +1,5 @@
 @import '~/styles/background.css';
+@import '~/styles/tailwind.css';
 @import '../../references.css';
 
 html,

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'
 

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()
+}

packages/playground/backend-integration/frontend/styles/tailwind.css

@@ -0,0 +1 @@
+@tailwind utilities;

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"
   }
 }

packages/playground/backend-integration/postcss.config.js

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

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: []
+}

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, '/')
                     )
               )
             }