tailwindcss/integrations/vite/bundled-dev.test.ts

import path from 'node:path'
import { candidate, css, html, json, retryAssertion, test, ts, txt, yaml } from '../utils'

// Vite's experimental `bundledDev` mode invokes the `hotUpdate` hook without a
// `server`, which used to crash the plugin on every file edit.
//
// - https://github.com/tailwindlabs/tailwindcss/issues/20378
// - https://vite.dev/blog/announcing-vite8-1#experimental-bundled-dev-mode
test(
  'dev mode (experimental `bundledDev`)',
  {
    fs: {
      'package.json': json`{}`,
      'pnpm-workspace.yaml': yaml`
        #
        packages:
          - project-a
      `,
      'project-a/package.json': txt`
        {
          "type": "module",
          "dependencies": {
            "@tailwindcss/vite": "workspace:^",
            "tailwindcss": "workspace:^"
          },
          "devDependencies": {
            "vite": "^8.1"
          }
        }
      `,
      'project-a/vite.config.ts': ts`
        import tailwindcss from '@tailwindcss/vite'
        import { defineConfig } from 'vite'

        export default defineConfig({
          experimental: {
            bundledDev: true,
          },
          plugins: [tailwindcss()],
        })
      `,
      'project-a/index.html': html`
        <head>
          <link rel="stylesheet" href="./src/index.css" />
        </head>
        <body>
          <div class="underline">Hello, world!</div>
        </body>
      `,
      'project-a/src/index.css': css`
        @reference 'tailwindcss/theme';
        @import 'tailwindcss/utilities';
        @source '../../project-b/src/**/*.html';
      `,
      'project-b/src/index.html': html`
        <div class="flex" />
      `,
    },
  },
  async ({ root, spawn, fs, expect }) => {
    let process = await spawn('pnpm vite dev', {
      cwd: path.join(root, 'project-a'),
      env: {
        // Some CI machines have an upstream rolldown bug where its file watcher
        // never delivers a single event. The debug output is the only way to
        // tell that apart from a real regression (see below).
        DEBUG: 'vite:full-bundle-mode',
      },
    })

    // Any debug output beyond the "INITIAL:" startup lines proves rolldown's
    // watcher delivered at least one file event.
    let watcherAlive = false

    // `hotUpdate` errors don't kill the dev server, they are only printed to
    // stderr. Track them explicitly so a crash fails the test even if the
    // rebuild happens to succeed anyway.
    let pluginErrors: string[] = []
    process.onStderr((message) => {
      if (message.includes('vite:full-bundle-mode')) {
        if (!message.includes('INITIAL:')) watcherAlive = true
      } else if (message.includes('@tailwindcss/vite')) {
        pluginErrors.push(message)
      }
      return false
    })

    let url = ''
    await process.onStdout((m) => {
      let match = /Local:\s*(http.*)\//.exec(m)
      if (match) url = match[1]
      return Boolean(url)
    })

    // In `bundledDev` mode the stylesheet is not served separately. Instead the
    // generated CSS is embedded in the bundled JS and injected at runtime, so
    // extract the bundle from the served HTML. While the bundle is being built,
    // Vite serves a temporary fallback page instead.
    //
    // The bundle can be split into multiple chunks (e.g. the HMR client runtime
    // and the app itself), and the chunk containing the CSS is not always the
    // first one, so fetch every referenced script and stylesheet.
    async function fetchBundledStyles(): Promise<string> {
      let index = await fetch(`${url}/`)
      let html = await index.text()
      if (html.includes('__vite_is_fallback_page__')) {
        throw new Error('Bundling still in progress')
      }

      let sources = [
        ...html.matchAll(/<script[^>]*\ssrc="([^"]+)"/g),
        ...html.matchAll(/<link[^>]*\srel="stylesheet"[^>]*\shref="([^"]+)"/g),
      ].map((match) => match[1])
      if (sources.length === 0) throw new Error(`No scripts or stylesheets found in:\n\n${html}`)

      let contents = await Promise.all(
        sources.map(async (src) => {
          let response = await fetch(new URL(src, `${url}/`))
          return await response.text()
        }),
      )
      return contents.join('\n')
    }

    await retryAssertion(
      async () => {
        let styles = await fetchBundledStyles()
        expect(styles).toContain(candidate`underline`)
        expect(styles).toContain(candidate`flex`)
      },
      { timeout: 10_000, delay: 100 },
    )

    // Edit a module file and a manually `@source`d file. Without a connected
    // HMR websocket client (this test only uses HTTP fetches), a file change
    // does not trigger an eager rebuild — it only marks the bundle as stale,
    // and the next fetch kicks off the rebuild. So poll with fetches without
    // touching the files again: rewriting would re-mark the bundle stale right
    // before each fetch and the rebuild could never be observed.
    await fs.write(
      'project-a/index.html',
      html`
        <head>
          <link rel="stylesheet" href="./src/index.css" />
        </head>
        <body>
          <div class="underline m-2">Hello, world!</div>
        </body>
      `,
    )

    await fs.write('project-b/src/index.html', html`
      <div class="flex font-bold" />
    `)

    try {
      await retryAssertion(
        async () => {
          let styles = await fetchBundledStyles()
          expect(styles).toContain(candidate`underline`)
          expect(styles).toContain(candidate`flex`)
          expect(styles).toContain(candidate`m-2`)
          expect(styles).toContain(candidate`font-bold`)
        },
        { timeout: 15_000, delay: 100 },
      )
    } catch (error) {
      // If rolldown's watcher delivered any file event, the updates were
      // genuinely dropped somewhere along the way — a real failure.
      if (watcherAlive) throw error

      // Otherwise the watcher never delivered a single event, so the updates
      // can never be observed no matter how long we wait — an upstream
      // rolldown bug on some CI machines, not a plugin regression. The crash
      // regression this test guards is still covered: `hotUpdate` is driven
      // by Vite's own (working) chokidar watcher and asserted via
      // `pluginErrors` below.
      //
      // Skipping is only sound while the server still healthily serves the
      // original bundle. If it stopped serving (crashed, or wedged on the
      // fallback page), that's real breakage a silent watcher must not mask.
      console.log(error)
      let styles = await fetchBundledStyles()
      expect(styles).toContain(candidate`underline`)
      expect(styles).toContain(candidate`flex`)
      console.warn(
        'Skipping update assertions: rolldown’s file watcher delivered no events on this machine.',
      )
    }

    expect(pluginErrors).toEqual([])
  },
)