mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
719a5351c1
We noticed that Nuxt projects were not working with the tailwindcss project. The issue was traced down to the fact that Nuxt starts multiple Vite dev servers and calling the experimental `waitForRequestsIdle()` on one of the test servers would never resolve. This was fixed upstream and is part of the latest Vite/Nuxt release: https://github.com/vitejs/vite/issues/17980. We still need to handle the fact that Vite can spawn multiple dev servers. This is necessary because when we invalidate all roots, we need to find that module inside all of the spawned servers. If we only look at the _last server_ (what we have done before), we would not find the module and thus could not invalidate it.
65 lines
1.6 KiB
TypeScript
65 lines
1.6 KiB
TypeScript
import { expect } from 'vitest'
|
|
import { candidate, css, fetchStyles, html, json, retryAssertion, test, ts } from '../utils'
|
|
|
|
test(
|
|
'dev mode',
|
|
{
|
|
fs: {
|
|
'package.json': json`
|
|
{
|
|
"type": "module",
|
|
"dependencies": {
|
|
"@tailwindcss/vite": "workspace:^",
|
|
"nuxt": "^3.13.1",
|
|
"tailwindcss": "workspace:^",
|
|
"vue": "latest"
|
|
}
|
|
}
|
|
`,
|
|
'nuxt.config.ts': ts`
|
|
import tailwindcss from '@tailwindcss/vite'
|
|
|
|
// https://nuxt.com/docs/api/configuration/nuxt-config
|
|
export default defineNuxtConfig({
|
|
vite: {
|
|
plugins: [tailwindcss()],
|
|
},
|
|
|
|
css: ['~/assets/css/main.css'],
|
|
devtools: { enabled: true },
|
|
compatibilityDate: '2024-08-30',
|
|
})
|
|
`,
|
|
'app.vue': html`
|
|
<template>
|
|
<div class="underline">Hello world!</div>
|
|
</template>
|
|
`,
|
|
'assets/css/main.css': css`@import 'tailwindcss';`,
|
|
},
|
|
},
|
|
async ({ fs, spawn, getFreePort }) => {
|
|
let port = await getFreePort()
|
|
await spawn(`pnpm nuxt dev --port ${port}`)
|
|
|
|
await retryAssertion(async () => {
|
|
let css = await fetchStyles(port)
|
|
expect(css).toContain(candidate`underline`)
|
|
})
|
|
|
|
await fs.write(
|
|
'app.vue',
|
|
html`
|
|
<template>
|
|
<div class="underline font-bold">Hello world!</div>
|
|
</template>
|
|
`,
|
|
)
|
|
await retryAssertion(async () => {
|
|
let css = await fetchStyles(port)
|
|
expect(css).toContain(candidate`underline`)
|
|
expect(css).toContain(candidate`font-bold`)
|
|
})
|
|
},
|
|
)
|