import { expect, test, type Page } from '@playwright/test' import { readFile } from 'node:fs/promises' const html = String.raw let server: Awaited> test.beforeAll(async ({}, info) => { server = await createServer() }) test('basic', async ({ page }) => { await server.render({ page, body: html`
`, }) await expect(page.locator('[data-test]')).toHaveCSS('background-color', 'rgb(255, 0, 0)') }) test('observer', async ({ page }) => { await server.render({ page, body: html`
`, }) await page.evaluate(() => { document.querySelector('[data-test]')!.classList.replace('bg-red', 'bg-blue') }) await expect(page.locator('[data-test]')).toHaveCSS('background-color', 'rgb(0, 0, 255)') }) test('custom css', async ({ page }) => { await server.render({ page, head: html` `, body: html`
`, }) await expect(page.locator('[data-test]')).toHaveCSS('background-color', 'rgb(255, 0, 0)') await page.evaluate(() => { document.querySelector('[data-css]')!.textContent = ` .foo { @apply bg-blue; } ` }) await expect(page.locator('[data-test]')).toHaveCSS('background-color', 'rgb(0, 0, 255)') }) test('changes to `@theme`', async ({ page }) => { await server.render({ page, head: html` `, body: html`
`, }) await expect(page.locator('[data-test]')).toHaveCSS('background-color', 'rgb(255, 0, 0)') await page.evaluate(() => { document.querySelector('[data-css]')!.textContent = ` @theme { --color-primary: #0000ff; } ` }) await expect(page.locator('[data-test]')).toHaveCSS('background-color', 'rgb(0, 0, 255)') }) test('no classes', async ({ page }) => { await server.render({ page, body: html`
test
`, }) await expect(page.locator('body')).toHaveCSS('margin', '0px') }) test('html classes', async ({ page }) => { await server.render({ page, htmlClasses: 'h-4', }) await expect(page.locator('html')).toHaveCSS('height', '16px') }) async function createServer() { const { createApp, createRouter, defineEventHandler, toNodeListener } = await import('h3') const { listen } = await import('listhen') interface PageOptions { page: Page head?: string body?: string htmlClasses?: string } async function render({ page, htmlClasses, head, body }: PageOptions) { let content = html` Document ${head ?? ''} ${body ?? ''} ` router.get( '/', defineEventHandler(() => content), ) await page.goto(server.url) } const app = createApp() const router = createRouter() router.get( '/tailwindcss.js', defineEventHandler(() => readFile(require.resolve('@tailwindcss/browser'))), ) app.use(router) let workerIndex = Number(process.env.TEST_WORKER_INDEX ?? 0) let listener = await listen(toNodeListener(app), { port: 3000 + workerIndex, showURL: false, open: false, }) return { app, url: listener.url, render, } }