wip: css hmr

Author: hi-ogawa

packages/vite/src/node/plugins/css.ts

@@ -563,7 +563,7 @@ export function cssPostPlugin(config: ResolvedConfig): RolldownPlugin {
           !inlined &&
           dataToEsm(modules, { namedExports: true, preferConst: true })
 
-        if (config.command === 'serve' && !config.experimental.rolldownDev) {
+        if (config.command === 'serve') {
           const getContentWithSourcemap = async (content: string) => {
             if (config.css?.devSourcemap) {
               const sourcemap = this.getCombinedSourcemap()

packages/vite/src/node/server/environments/rolldown.ts

@@ -64,11 +64,8 @@ export function rolldownDevHandleConfig(
             reactRefresh: config.experimental?.rolldownDev?.reactRefresh,
           }),
         },
-        // NOTE
-        // this is not "build" option any more (or is there a way to handle entry lazily?)
         build: {
           modulePreload: false,
-          cssCodeSplit: false,
           assetsInlineLimit: 0,
           rollupOptions: {
             input:
@@ -192,9 +189,12 @@ class RolldownEnvironment extends DevEnvironment {
           'vite:css-post',
           'vite:asset',
         ].includes(p.name) ||
-        ['AliasPlugin', 'TransformPlugin', 'LoadFallbackPlugin'].includes(
-          p.constructor.name,
-        ),
+        [
+          'AliasPlugin',
+          'TransformPlugin',
+          'LoadFallbackPlugin',
+          'ManifestPlugin',
+        ].includes(p.constructor.name),
     )
     plugins = plugins.map((p) => injectEnvironmentToHooks(this as any, p))
 
@@ -212,8 +212,12 @@ class RolldownEnvironment extends DevEnvironment {
       plugins: [
         ...plugins,
         patchRuntimePlugin(this.rolldownDevOptions),
+        patchCssPlugin(),
         reactRefreshPlugin(),
       ],
+      moduleTypes: {
+        '.css': 'js',
+      },
     }
     this.instance = await rolldown.rolldown(inputOptions)
 
@@ -300,6 +304,32 @@ function patchRuntimePlugin(
   }
 }
 
+// patch vite:css transform for hmr
+function patchCssPlugin(): rolldown.Plugin {
+  return {
+    name: 'vite:rolldown-patch-css',
+    transform: {
+      filter: {
+        id: {
+          include: ['*.css'],
+        },
+        code: {
+          include: ['__vite__updateStyle'],
+        },
+      },
+      handler(code, id) {
+        // TODO: import.meta.hot.prune
+        const cssCode = code.match(/^const __vite__css = (.*)$/m)![1]
+        const jsCode = `
+          __rolldown_updateStyle(${JSON.stringify(id)}, ${cssCode});
+          module.hot.accept();
+        `
+        return { code: jsCode, moduleSideEffects: true }
+      },
+    },
+  }
+}
+
 // reuse /@vite/client for Websocket API
 function getRolldownClientCode() {
   let code = fs.readFileSync(CLIENT_ENTRY, 'utf-8')
@@ -331,7 +361,8 @@ const hot = createHotContext("/__rolldown");
 hot.on("rolldown:hmr", (data) => {
   (0, eval)(data[1]);
 });
-window.__rolldown_hot = hot;
+self.__rolldown_hot = hot;
+self.__rolldown_updateStyle = updateStyle;
 `
   return `(() => {/*** @vite/client ***/\n${code}}\n)()`
 }

playground/rolldown-dev-react/__tests__/basic.spec.ts

@@ -28,7 +28,7 @@ test('style', async () => {
   ).toBe('rgb(255, 165, 0)')
 })
 
-test.runIf(!isBuild)('hmr', async () => {
+test.runIf(!isBuild)('hmr js', async () => {
   await page.goto(viteTestUrl)
   await page.getByRole('button', { name: 'Count: 0' }).click()
 
@@ -38,3 +38,30 @@ test.runIf(!isBuild)('hmr', async () => {
   editFile('./src/app.tsx', (s) => s.replace('Count-x:', 'Count-x-y:'))
   await page.getByRole('button', { name: 'Count-x-y: 2' }).click()
 })
+
+test.runIf(!isBuild)('hmr css', async () => {
+  await page.goto(viteTestUrl)
+
+  await expect
+    .poll(() =>
+      page.locator('.test-style').evaluate((el) => getComputedStyle(el).color),
+    )
+    .toBe('rgb(255, 165, 0)')
+  await page.getByRole('button', { name: 'Count: 0' }).click()
+
+  editFile('./src/test-style.css', (s) => s.replace('orange', 'blue'))
+  await expect
+    .poll(() =>
+      page.locator('.test-style').evaluate((el) => getComputedStyle(el).color),
+    )
+    .toBe('rgb(0, 0, 255)')
+  await page.getByRole('button', { name: 'Count: 1' }).click()
+
+  editFile('./src/test-style.css', (s) => s.replace('blue', 'green'))
+  await expect
+    .poll(() =>
+      page.locator('.test-style').evaluate((el) => getComputedStyle(el).color),
+    )
+    .toBe('rgb(0, 128, 0)')
+  await page.getByRole('button', { name: 'Count: 2' }).click()
+})

playground/rolldown-dev-react/src/app.tsx

@@ -4,8 +4,8 @@ import virtualTest from 'virtual:test'
 // @ts-expect-error no type
 import testAlias from 'test-alias'
 import { throwError } from './error'
-// TODO: hmr
 import './test-style.css'
+// TODO: hmr for assets?
 import testStyleUrl from './test-style-url.css?url'
 import testStyleInline from './test-style-inline.css?inline'