From 42aa3630bd2137f83c7301c40ad2a1bfbe7f074d Mon Sep 17 00:00:00 2001
From: sapphi-red <49056869+sapphi-red@users.noreply.github.com>
Date: Thu, 30 Jan 2025 16:06:34 +0900
Subject: [PATCH 1/7] test: upgrade to tailwind v4
---
.../frontend/styles/tailwind.css | 2 +-
playground/backend-integration/package.json | 3 +-
.../backend-integration/postcss.config.js | 10 +-
.../backend-integration/tailwind.config.js | 17 -
.../css-postcss-plugins-different-dir.spec.ts | 2 +-
playground/tailwind-sourcemap/package.json | 3 +-
.../tailwind-sourcemap/postcss.config.js | 9 +-
.../tailwind-sourcemap/tailwind.config.js | 9 -
playground/tailwind-sourcemap/tailwind.css | 4 +-
playground/tailwind/__test__/tailwind.spec.ts | 14 +-
playground/tailwind/index.css | 5 +-
playground/tailwind/package.json | 4 +-
playground/tailwind/postcss.config.ts | 11 -
playground/tailwind/vite.config.ts | 2 +
playground/test-utils.ts | 5 +-
pnpm-lock.yaml | 371 +++++++++---------
16 files changed, 205 insertions(+), 266 deletions(-)
delete mode 100644 playground/backend-integration/tailwind.config.js
delete mode 100644 playground/tailwind-sourcemap/tailwind.config.js
delete mode 100644 playground/tailwind/postcss.config.ts
diff --git a/playground/backend-integration/frontend/styles/tailwind.css b/playground/backend-integration/frontend/styles/tailwind.css
index 65dd5f63a7dff2..d4b5078586e291 100644
--- a/playground/backend-integration/frontend/styles/tailwind.css
+++ b/playground/backend-integration/frontend/styles/tailwind.css
@@ -1 +1 @@
-@tailwind utilities;
+@import 'tailwindcss';
diff --git a/playground/backend-integration/package.json b/playground/backend-integration/package.json
index 90e145971ee1bd..88ae1a50295f22 100644
--- a/playground/backend-integration/package.json
+++ b/playground/backend-integration/package.json
@@ -10,8 +10,9 @@
"preview": "vite preview"
},
"devDependencies": {
+ "@tailwindcss/postcss": "^4.0.1",
"sass": "^1.83.4",
- "tailwindcss": "^3.4.17",
+ "tailwindcss": "^4.0.1",
"tinyglobby": "^0.2.10"
}
}
diff --git a/playground/backend-integration/postcss.config.js b/playground/backend-integration/postcss.config.js
index 431c1ca465d257..d995ea470f449f 100644
--- a/playground/backend-integration/postcss.config.js
+++ b/playground/backend-integration/postcss.config.js
@@ -1,11 +1,7 @@
-import { fileURLToPath } from 'node:url'
-import { dirname } from 'node:path'
-
-const __filename = fileURLToPath(import.meta.url)
-const __dirname = dirname(__filename)
-
export default {
plugins: {
- tailwindcss: { config: __dirname + '/tailwind.config.js' },
+ // using postcss tailwind as aliases does not work with vite plugin one
+ // https://github.com/tailwindlabs/tailwindcss/issues/16039
+ '@tailwindcss/postcss': {},
},
}
diff --git a/playground/backend-integration/tailwind.config.js b/playground/backend-integration/tailwind.config.js
deleted file mode 100644
index 7295b40ddd2b1b..00000000000000
--- a/playground/backend-integration/tailwind.config.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import { fileURLToPath } from 'node:url'
-import { dirname } from 'node:path'
-
-const __filename = fileURLToPath(import.meta.url)
-const __dirname = dirname(__filename)
-
-/** @type {import('tailwindcss').Config} */
-export default {
- content: [__dirname + '/frontend/**/*.{css,html,ts,js}'],
- theme: {
- extend: {},
- },
- variants: {
- extend: {},
- },
- plugins: [],
-}
diff --git a/playground/css/__tests__/postcss-plugins-different-dir/css-postcss-plugins-different-dir.spec.ts b/playground/css/__tests__/postcss-plugins-different-dir/css-postcss-plugins-different-dir.spec.ts
index 1d21eb760dabfd..e9a8e129e10850 100644
--- a/playground/css/__tests__/postcss-plugins-different-dir/css-postcss-plugins-different-dir.spec.ts
+++ b/playground/css/__tests__/postcss-plugins-different-dir/css-postcss-plugins-different-dir.spec.ts
@@ -22,7 +22,7 @@ test.runIf(isServe)('postcss plugins in different dir', async () => {
try {
await page.goto(`http://localhost:${port}`)
const tailwindStyle = page.locator('#tailwind-style')
- expect(await getBgColor(tailwindStyle)).toBe('rgb(254, 226, 226)')
+ expect(await getBgColor(tailwindStyle)).toBe('oklch(0.936 0.032 17.717)')
expect(await getColor(tailwindStyle)).toBe('rgb(136, 136, 136)')
} finally {
await server.close()
diff --git a/playground/tailwind-sourcemap/package.json b/playground/tailwind-sourcemap/package.json
index b8aa08f2fcd00e..4705648828891d 100644
--- a/playground/tailwind-sourcemap/package.json
+++ b/playground/tailwind-sourcemap/package.json
@@ -10,6 +10,7 @@
"preview": "vite preview"
},
"dependencies": {
- "tailwindcss": "^3.4.17"
+ "tailwindcss": "^4.0.1",
+ "@tailwindcss/postcss": "^4.0.1"
}
}
diff --git a/playground/tailwind-sourcemap/postcss.config.js b/playground/tailwind-sourcemap/postcss.config.js
index 431c1ca465d257..baa80773f41c58 100644
--- a/playground/tailwind-sourcemap/postcss.config.js
+++ b/playground/tailwind-sourcemap/postcss.config.js
@@ -1,11 +1,6 @@
-import { fileURLToPath } from 'node:url'
-import { dirname } from 'node:path'
-
-const __filename = fileURLToPath(import.meta.url)
-const __dirname = dirname(__filename)
-
export default {
plugins: {
- tailwindcss: { config: __dirname + '/tailwind.config.js' },
+ // using postcss tailwind as we want to test postcss integration
+ '@tailwindcss/postcss': {},
},
}
diff --git a/playground/tailwind-sourcemap/tailwind.config.js b/playground/tailwind-sourcemap/tailwind.config.js
deleted file mode 100644
index 15a94467c22c09..00000000000000
--- a/playground/tailwind-sourcemap/tailwind.config.js
+++ /dev/null
@@ -1,9 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-
-export default {
- content: ['./index.html'],
- theme: {
- extend: {},
- },
- plugins: [],
-}
diff --git a/playground/tailwind-sourcemap/tailwind.css b/playground/tailwind-sourcemap/tailwind.css
index b5c61c956711f9..d4b5078586e291 100644
--- a/playground/tailwind-sourcemap/tailwind.css
+++ b/playground/tailwind-sourcemap/tailwind.css
@@ -1,3 +1 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
diff --git a/playground/tailwind/__test__/tailwind.spec.ts b/playground/tailwind/__test__/tailwind.spec.ts
index c67ef115073b69..16f65b2c882e17 100644
--- a/playground/tailwind/__test__/tailwind.spec.ts
+++ b/playground/tailwind/__test__/tailwind.spec.ts
@@ -1,6 +1,7 @@
import { expect, test } from 'vitest'
import {
editFile,
+ expectWithRetry,
getColor,
isServe,
page,
@@ -14,7 +15,7 @@ test('should render', async () => {
test.runIf(isServe)('regenerate CSS and HMR (glob pattern)', async () => {
const el = page.locator('#view1-text')
- expect(await getColor(el)).toBe('rgb(22, 163, 74)')
+ await expectWithRetry(() => getColor(el)).toBe('oklch(0.627 0.194 149.214)')
await untilBrowserLogAfter(
() =>
@@ -40,15 +41,14 @@ test.runIf(isServe)('regenerate CSS and HMR (glob pattern)', async () => {
],
false,
)
- // await new Promise(resolve => setTimeout(resolve, 10))
- await untilUpdated(async () => getColor(el), 'rgb(234, 88, 12)')
+ await untilUpdated(async () => getColor(el), 'oklch(0.646 0.222 41.116)')
})
test.runIf(isServe)(
'same file duplicated in module graph (#4267)',
async () => {
const el = page.locator('#component1')
- expect(await getColor(el)).toBe('rgb(220, 38, 38)')
+ expect(await getColor(el)).toBe('oklch(0.577 0.245 27.325)')
// when duplicated, page reload happens
await untilBrowserLogAfter(
@@ -62,13 +62,13 @@ test.runIf(isServe)(
],
false,
)
- await untilUpdated(() => getColor(el), 'rgb(37, 99, 235)')
+ await untilUpdated(() => getColor(el), 'oklch(0.546 0.245 262.881)')
},
)
test.runIf(isServe)('regenerate CSS and HMR (relative path)', async () => {
const el = page.locator('#pagetitle')
- expect(await getColor(el)).toBe('rgb(124, 58, 237)')
+ expect(await getColor(el)).toBe('oklch(0.541 0.281 293.009)')
await untilBrowserLogAfter(
() =>
@@ -78,5 +78,5 @@ test.runIf(isServe)('regenerate CSS and HMR (relative path)', async () => {
['[vite] css hot updated: /index.css', '[vite] hot updated: /src/main.js'],
false,
)
- await untilUpdated(() => getColor(el), 'rgb(8, 145, 178)')
+ await untilUpdated(() => getColor(el), 'oklch(0.609 0.126 221.723)')
})
diff --git a/playground/tailwind/index.css b/playground/tailwind/index.css
index b5c61c956711f9..7c934ca2aeaafb 100644
--- a/playground/tailwind/index.css
+++ b/playground/tailwind/index.css
@@ -1,3 +1,2 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+@config './tailwind.config.ts';
diff --git a/playground/tailwind/package.json b/playground/tailwind/package.json
index 9284d8676f5840..0e576e5b8df145 100644
--- a/playground/tailwind/package.json
+++ b/playground/tailwind/package.json
@@ -10,8 +10,8 @@
"preview": "vite preview"
},
"dependencies": {
- "autoprefixer": "^10.4.20",
- "tailwindcss": "^3.4.17",
+ "@tailwindcss/vite": "^4.0.1",
+ "tailwindcss": "^4.0.1",
"vue": "^3.5.13",
"vue-router": "^4.5.0"
},
diff --git a/playground/tailwind/postcss.config.ts b/playground/tailwind/postcss.config.ts
deleted file mode 100644
index 34abdccd458241..00000000000000
--- a/playground/tailwind/postcss.config.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-// postcss.config.ts
-import { fileURLToPath } from 'node:url'
-
-export default {
- plugins: {
- tailwindcss: {
- config: fileURLToPath(new URL('./tailwind.config.ts', import.meta.url)),
- },
- autoprefixer: {},
- },
-}
diff --git a/playground/tailwind/vite.config.ts b/playground/tailwind/vite.config.ts
index 37112cc15ff700..ecffbbbc5fc2b2 100644
--- a/playground/tailwind/vite.config.ts
+++ b/playground/tailwind/vite.config.ts
@@ -1,5 +1,6 @@
import { defineConfig } from 'vite'
import type { Plugin } from 'vite'
+import tailwindcss from '@tailwindcss/vite'
function delayIndexCssPlugin(): Plugin {
let server
@@ -38,5 +39,6 @@ export default defineConfig({
},
},
delayIndexCssPlugin(),
+ tailwindcss(),
],
})
diff --git a/playground/test-utils.ts b/playground/test-utils.ts
index 8d58160b53c33e..c8f04c6aa6ac78 100644
--- a/playground/test-utils.ts
+++ b/playground/test-utils.ts
@@ -75,7 +75,7 @@ function componentToHex(c: number): string {
return hex.length === 1 ? '0' + hex : hex
}
-function rgbToHex(rgb: string): string {
+function rgbToHex(rgb: string): string | undefined {
const match = rgb.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/)
if (match) {
const [_, rs, gs, bs] = match
@@ -85,9 +85,8 @@ function rgbToHex(rgb: string): string {
componentToHex(parseInt(gs, 10)) +
componentToHex(parseInt(bs, 10))
)
- } else {
- return '#000000'
}
+ return undefined
}
const timeout = (n: number) => new Promise((r) => setTimeout(r, n))
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2e65839d192138..a829d121476ca9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -519,12 +519,15 @@ importers:
playground/backend-integration:
devDependencies:
+ '@tailwindcss/postcss':
+ specifier: ^4.0.1
+ version: 4.0.1
sass:
specifier: ^1.83.4
version: 1.83.4
tailwindcss:
- specifier: ^3.4.17
- version: 3.4.17
+ specifier: ^4.0.1
+ version: 4.0.1
tinyglobby:
specifier: ^0.2.10
version: 0.2.10
@@ -1616,12 +1619,12 @@ importers:
playground/tailwind:
dependencies:
- autoprefixer:
- specifier: ^10.4.20
- version: 10.4.20(postcss@8.5.1)
+ '@tailwindcss/vite':
+ specifier: ^4.0.1
+ version: 4.0.1(vite@packages+vite)
tailwindcss:
- specifier: ^3.4.17
- version: 3.4.17
+ specifier: ^4.0.1
+ version: 4.0.1
vue:
specifier: ^3.5.13
version: 3.5.13(typescript@5.7.2)
@@ -1635,9 +1638,12 @@ importers:
playground/tailwind-sourcemap:
dependencies:
+ '@tailwindcss/postcss':
+ specifier: ^4.0.1
+ version: 4.0.1
tailwindcss:
- specifier: ^3.4.17
- version: 3.4.17
+ specifier: ^4.0.1
+ version: 4.0.1
playground/transform-plugin: {}
@@ -3045,6 +3051,87 @@ packages:
resolution: {integrity: sha512-tlqY9xq5ukxTUZBmoOp+m61cqwQD5pHJtFY3Mn8CA8ps6yghLH/Hw8UPdqg4OLmFW3IFlcXnQNmo/dh8HzXYIQ==}
engines: {node: '>=18'}
+ '@tailwindcss/node@4.0.1':
+ resolution: {integrity: sha512-lc+ly6PKHqgCVl7eO8D2JlV96Lks5bmL6pdtM6UasyUHLU2zmrOqU6jfgln120IVnCh3VC8GG/ca24xVTtSokw==}
+
+ '@tailwindcss/oxide-android-arm64@4.0.1':
+ resolution: {integrity: sha512-eP/rI9WaAElpeiiHDqGtDqga9iDsOClXxIqdHayHsw93F24F03b60CwgGhrGF9Io/EuWIpz3TMRhPVOLhoXivw==}
+ engines: {node: '>= 10'}
+ cpu: [arm64]
+ os: [android]
+
+ '@tailwindcss/oxide-darwin-arm64@4.0.1':
+ resolution: {integrity: sha512-jZVUo0kNd1IjxdCYwg4dwegDNsq7PoUx4LM814RmgY3gfJ63Y6GlpJXHOpd5FLv1igpeZox5LzRk2oz8MQoJwQ==}
+ engines: {node: '>= 10'}
+ cpu: [arm64]
+ os: [darwin]
+
+ '@tailwindcss/oxide-darwin-x64@4.0.1':
+ resolution: {integrity: sha512-E31wHiIf4LB0aKRohrS4U6XfFSACCL9ifUFfPQ16FhcBIL4wU5rcBidvWvT9TQFGPkpE69n5dyXUcqiMrnF/Ig==}
+ engines: {node: '>= 10'}
+ cpu: [x64]
+ os: [darwin]
+
+ '@tailwindcss/oxide-freebsd-x64@4.0.1':
+ resolution: {integrity: sha512-8/3ZKLMYqgAsBzTeczOKWtT4geF02g9S7cntY5gvqQZ4E0ImX724cHcZJi9k6fkE6aLbvwxxHxaShFvRxblwKQ==}
+ engines: {node: '>= 10'}
+ cpu: [x64]
+ os: [freebsd]
+
+ '@tailwindcss/oxide-linux-arm-gnueabihf@4.0.1':
+ resolution: {integrity: sha512-EYjbh225klQfWzy6LeIAfdjHCK+p71yLV/GjdPNW47Bfkkq05fTzIhHhCgshUvNp78EIA33iQU+ktWpW06NgHw==}
+ engines: {node: '>= 10'}
+ cpu: [arm]
+ os: [linux]
+
+ '@tailwindcss/oxide-linux-arm64-gnu@4.0.1':
+ resolution: {integrity: sha512-PrX2SwIqWNP5cYeSyQfrhbk4ffOM338T6CrEwIAGvLPoUZiklt19yknlsBme6bReSw7TSAMy+8KFdLLi5fcWNQ==}
+ engines: {node: '>= 10'}
+ cpu: [arm64]
+ os: [linux]
+
+ '@tailwindcss/oxide-linux-arm64-musl@4.0.1':
+ resolution: {integrity: sha512-iuoFGhKDojtfloi5uj6MIk4kxEOGcsAk/kPbZItF9Dp7TnzVhxo2U/718tXhxGrg6jSL3ST3cQHIjA6yw3OeXw==}
+ engines: {node: '>= 10'}
+ cpu: [arm64]
+ os: [linux]
+
+ '@tailwindcss/oxide-linux-x64-gnu@4.0.1':
+ resolution: {integrity: sha512-pNUrGQYyE8RK+N9yvkPmHnlKDfFbni9A3lsi37u4RoA/6Yn+zWVoegvAQMZu3w+jqnpb2A/bYJ+LumcclUZ3yg==}
+ engines: {node: '>= 10'}
+ cpu: [x64]
+ os: [linux]
+
+ '@tailwindcss/oxide-linux-x64-musl@4.0.1':
+ resolution: {integrity: sha512-xSGWaDcT6SJ75su9zWXj8GYb2jM/przXwZGH96RTS7HGDIoI1tvgpls88YajG5Sx7hXaqAWCufjw5L/dlu+lzg==}
+ engines: {node: '>= 10'}
+ cpu: [x64]
+ os: [linux]
+
+ '@tailwindcss/oxide-win32-arm64-msvc@4.0.1':
+ resolution: {integrity: sha512-BUNL2isUZ2yWnbplPddggJpZxsqGHPZ1RJAYpu63W4znUnKCzI4m/jiy0WpyYqqOKL9jDM5q0QdsQ9mc3aw5YQ==}
+ engines: {node: '>= 10'}
+ cpu: [arm64]
+ os: [win32]
+
+ '@tailwindcss/oxide-win32-x64-msvc@4.0.1':
+ resolution: {integrity: sha512-ZtcVu+XXOddGsPlvO5nh2fnbKmwly2C07ZB1lcYCf/b8qIWF04QY9o6vy6/+6ioLRfbp3E7H/ipFio38DZX4oQ==}
+ engines: {node: '>= 10'}
+ cpu: [x64]
+ os: [win32]
+
+ '@tailwindcss/oxide@4.0.1':
+ resolution: {integrity: sha512-3z1SpWoDeaA6K6jd92CRrGyDghOcRILEgyWVHRhaUm/tcpiazwJpU9BSG0xB7GGGnl9capojaC+zme/nKsZd/w==}
+ engines: {node: '>= 10'}
+
+ '@tailwindcss/postcss@4.0.1':
+ resolution: {integrity: sha512-fZHL49vCDauQymdm2U1jehuUeX8msYVDKB/2v+jWhTQleH3QE8J1dJ2dnL5tqRvB0udjBP4kwUC1ZIVIdv66YA==}
+
+ '@tailwindcss/vite@4.0.1':
+ resolution: {integrity: sha512-ZkwMBA7uR+nyrafIZI8ce3PduE0dDVFVmxmInCUPTN17Jgy6RfEPXzqtL5fz658eDDxKa5xZ+gmiTt+5AMD0pw==}
+ peerDependencies:
+ vite: workspace:*
+
'@trysound/sax@0.2.0':
resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==}
engines: {node: '>=10.13.0'}
@@ -3773,9 +3860,6 @@ packages:
resolution: {integrity: sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==}
engines: {node: '>=12'}
- any-promise@1.3.0:
- resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}
-
anymatch@3.1.3:
resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
engines: {node: '>= 8'}
@@ -3788,9 +3872,6 @@ packages:
engines: {node: '>=10'}
deprecated: This package is no longer supported.
- arg@5.0.2:
- resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
-
argparse@2.0.1:
resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
@@ -3929,10 +4010,6 @@ packages:
resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
engines: {node: '>=6'}
- camelcase-css@2.0.1:
- resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
- engines: {node: '>= 6'}
-
caniuse-api@3.0.0:
resolution: {integrity: sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==}
@@ -4033,10 +4110,6 @@ packages:
commander@2.20.3:
resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
- commander@4.1.1:
- resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
- engines: {node: '>= 6'}
-
commander@7.2.0:
resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==}
engines: {node: '>= 10'}
@@ -4365,12 +4438,6 @@ packages:
devlop@1.1.0:
resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}
- didyoumean@1.2.2:
- resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
-
- dlv@1.1.3:
- resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
-
doctrine@3.0.0:
resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==}
engines: {node: '>=6.0.0'}
@@ -4436,6 +4503,10 @@ packages:
resolution: {integrity: sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg==}
engines: {node: '>=10.13.0'}
+ enhanced-resolve@5.18.0:
+ resolution: {integrity: sha512-0/r0MySGYG8YqlayBZ6MuCfECmHFdJ5qyPh8s8wa5Hnm6SaFLSK1VYCbj+NKp090Nm1caZhD+QTnmxO7esYGyQ==}
+ engines: {node: '>=10.13.0'}
+
entities@4.5.0:
resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
engines: {node: '>=0.12'}
@@ -5215,9 +5286,6 @@ packages:
resolution: {integrity: sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==}
engines: {node: '>=14'}
- lines-and-columns@1.2.4:
- resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
-
lint-staged@15.4.3:
resolution: {integrity: sha512-FoH1vOeouNh1pw+90S+cnuoFwRfUD9ijY2GKy5h7HS3OR7JVir2N2xrsa0+Twc1B7cW72L+88geG5cW4wIhn7g==}
engines: {node: '>=18.12.0'}
@@ -5554,9 +5622,6 @@ packages:
resolution: {integrity: sha512-71ippSywq5Yb7/tVYyGbkBggbU8H3u5Rz56fH60jGFgr8uHwxs+aSKeqmluIVzM0m0kB7xQjKS6qPfd0b2ZoqQ==}
hasBin: true
- mz@2.7.0:
- resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
-
nanoid@3.3.8:
resolution: {integrity: sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==}
engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
@@ -5653,10 +5718,6 @@ packages:
resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
engines: {node: '>=0.10.0'}
- object-hash@3.0.0:
- resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
- engines: {node: '>= 6'}
-
object-inspect@1.13.2:
resolution: {integrity: sha512-IRZSRuzJiynemAXPYtPe5BoI/RESNYR7TYm50MC5Mqbd3Jmw5y790sErYw3V6SryFJD64b74qQQs9wn5Bg/k3g==}
engines: {node: '>= 0.4'}
@@ -5808,10 +5869,6 @@ packages:
resolution: {integrity: sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==}
engines: {node: '>=6'}
- pirates@4.0.6:
- resolution: {integrity: sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==}
- engines: {node: '>= 6'}
-
pkg-types@1.3.0:
resolution: {integrity: sha512-kS7yWjVFCkIw9hqdJBoMxDdzEngmkr5FXeWZZfQ6GoYacjVnsW6l2CcYW/0ThD0vF4LPJgVYnrg4d0uuhwYQbg==}
@@ -5867,36 +5924,12 @@ packages:
peerDependencies:
postcss: ^8.4.31
- postcss-import@15.1.0:
- resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
- engines: {node: '>=14.0.0'}
- peerDependencies:
- postcss: ^8.0.0
-
postcss-import@16.1.0:
resolution: {integrity: sha512-7hsAZ4xGXl4MW+OKEWCnF6T5jqBw80/EE9aXg1r2yyn1RsVEU8EtKXbijEODa+rg7iih4bKf7vlvTGYR4CnPNg==}
engines: {node: '>=18.0.0'}
peerDependencies:
postcss: ^8.0.0
- postcss-js@4.0.1:
- resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==}
- engines: {node: ^12 || ^14 || >= 16}
- peerDependencies:
- postcss: ^8.4.21
-
- postcss-load-config@4.0.2:
- resolution: {integrity: sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==}
- engines: {node: '>= 14'}
- peerDependencies:
- postcss: '>=8.0.9'
- ts-node: '>=9.0.0'
- peerDependenciesMeta:
- postcss:
- optional: true
- ts-node:
- optional: true
-
postcss-load-config@6.0.1:
resolution: {integrity: sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g==}
engines: {node: '>= 18'}
@@ -5980,12 +6013,6 @@ packages:
peerDependencies:
postcss: ^8.0.0
- postcss-nested@6.2.0:
- resolution: {integrity: sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==}
- engines: {node: '>=12.0'}
- peerDependencies:
- postcss: ^8.2.14
-
postcss-nested@7.0.2:
resolution: {integrity: sha512-5osppouFc0VR9/VYzYxO03VaDa3e8F23Kfd6/9qcZTUI8P58GIYlArOET2Wq0ywSl2o2PjELhYOFI4W7l5QHKw==}
engines: {node: '>=18.0'}
@@ -6731,11 +6758,6 @@ packages:
engines: {node: '>=16'}
hasBin: true
- sucrase@3.35.0:
- resolution: {integrity: sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==}
- engines: {node: '>=16 || 14 >=14.17'}
- hasBin: true
-
sugarss@5.0.0:
resolution: {integrity: sha512-3//knMoF9btXcxHTbMRckIYjkEzSZ6pZjiaZ3wM6OIpUtQ06Uwqc0XgAr6jf+U74cLLTV/BEgmHWoeXPC+NhdQ==}
engines: {node: '>=18.0'}
@@ -6777,10 +6799,8 @@ packages:
tabbable@6.2.0:
resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==}
- tailwindcss@3.4.17:
- resolution: {integrity: sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==}
- engines: {node: '>=14.0.0'}
- hasBin: true
+ tailwindcss@4.0.1:
+ resolution: {integrity: sha512-UK5Biiit/e+r3i0O223bisoS5+y7ZT1PM8Ojn0MxRHzXN1VPZ2KY6Lo6fhu1dOfCfyUAlK7Lt6wSxowRabATBw==}
tapable@2.2.1:
resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==}
@@ -6803,13 +6823,6 @@ packages:
engines: {node: '>=10'}
hasBin: true
- thenify-all@1.6.0:
- resolution: {integrity: sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==}
- engines: {node: '>=0.8'}
-
- thenify@3.3.1:
- resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
-
tiny-emitter@2.1.0:
resolution: {integrity: sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==}
@@ -6866,9 +6879,6 @@ packages:
peerDependencies:
typescript: '>=4.8.4'
- ts-interface-checker@0.1.13:
- resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
-
tsconfck@3.1.4:
resolution: {integrity: sha512-kdqWFGVJqe+KGYvlSO9NIaWn9jT1Ny4oKVzAJsKii5eoE9snzTJzL4+MMVOMn+fikWGFmKEylcXL710V/kIPJQ==}
engines: {node: ^18 || >=20}
@@ -7192,11 +7202,6 @@ packages:
yallist@4.0.0:
resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
- yaml@2.6.1:
- resolution: {integrity: sha512-7r0XPzioN/Q9kXBro/XPnA6kznR73DHq+GXh5ON7ZozRO6aMjbmiBuKste2wslTFkC5d1dw0GooOCepZXJ2SAg==}
- engines: {node: '>= 14'}
- hasBin: true
-
yaml@2.7.0:
resolution: {integrity: sha512-+hSoy/QHluxmC9kCIJyL/uyFmLmc+e5CFR5Wa+bpIhIj85LVb9ZH2nVnqrHoSvKogwODv0ClqZkmiSSaIH5LTA==}
engines: {node: '>= 14'}
@@ -8620,6 +8625,76 @@ snapshots:
'@sindresorhus/merge-streams@4.0.0': {}
+ '@tailwindcss/node@4.0.1':
+ dependencies:
+ enhanced-resolve: 5.18.0
+ jiti: 2.4.2
+ tailwindcss: 4.0.1
+
+ '@tailwindcss/oxide-android-arm64@4.0.1':
+ optional: true
+
+ '@tailwindcss/oxide-darwin-arm64@4.0.1':
+ optional: true
+
+ '@tailwindcss/oxide-darwin-x64@4.0.1':
+ optional: true
+
+ '@tailwindcss/oxide-freebsd-x64@4.0.1':
+ optional: true
+
+ '@tailwindcss/oxide-linux-arm-gnueabihf@4.0.1':
+ optional: true
+
+ '@tailwindcss/oxide-linux-arm64-gnu@4.0.1':
+ optional: true
+
+ '@tailwindcss/oxide-linux-arm64-musl@4.0.1':
+ optional: true
+
+ '@tailwindcss/oxide-linux-x64-gnu@4.0.1':
+ optional: true
+
+ '@tailwindcss/oxide-linux-x64-musl@4.0.1':
+ optional: true
+
+ '@tailwindcss/oxide-win32-arm64-msvc@4.0.1':
+ optional: true
+
+ '@tailwindcss/oxide-win32-x64-msvc@4.0.1':
+ optional: true
+
+ '@tailwindcss/oxide@4.0.1':
+ optionalDependencies:
+ '@tailwindcss/oxide-android-arm64': 4.0.1
+ '@tailwindcss/oxide-darwin-arm64': 4.0.1
+ '@tailwindcss/oxide-darwin-x64': 4.0.1
+ '@tailwindcss/oxide-freebsd-x64': 4.0.1
+ '@tailwindcss/oxide-linux-arm-gnueabihf': 4.0.1
+ '@tailwindcss/oxide-linux-arm64-gnu': 4.0.1
+ '@tailwindcss/oxide-linux-arm64-musl': 4.0.1
+ '@tailwindcss/oxide-linux-x64-gnu': 4.0.1
+ '@tailwindcss/oxide-linux-x64-musl': 4.0.1
+ '@tailwindcss/oxide-win32-arm64-msvc': 4.0.1
+ '@tailwindcss/oxide-win32-x64-msvc': 4.0.1
+
+ '@tailwindcss/postcss@4.0.1':
+ dependencies:
+ '@alloc/quick-lru': 5.2.0
+ '@tailwindcss/node': 4.0.1
+ '@tailwindcss/oxide': 4.0.1
+ lightningcss: 1.29.1
+ postcss: 8.5.1
+ tailwindcss: 4.0.1
+
+ '@tailwindcss/vite@4.0.1(vite@packages+vite)':
+ dependencies:
+ '@tailwindcss/node': 4.0.1
+ '@tailwindcss/oxide': 4.0.1
+ lightningcss: 1.29.1
+ tailwindcss: 4.0.1
+ vite: link:packages/vite
+
'@trysound/sax@0.2.0': {}
'@type-challenges/utils@0.1.1': {}
@@ -9411,8 +9486,6 @@ snapshots:
ansi-styles@6.2.1: {}
- any-promise@1.3.0: {}
-
anymatch@3.1.3:
dependencies:
normalize-path: 3.0.0
@@ -9425,8 +9498,6 @@ snapshots:
delegates: 1.0.0
readable-stream: 3.6.2
- arg@5.0.2: {}
-
argparse@2.0.1: {}
array-find-index@1.0.2: {}
@@ -9577,8 +9648,6 @@ snapshots:
callsites@3.1.0: {}
- camelcase-css@2.0.1: {}
-
caniuse-api@3.0.0:
dependencies:
browserslist: 4.24.4
@@ -9685,8 +9754,6 @@ snapshots:
commander@2.20.3: {}
- commander@4.1.1: {}
-
commander@7.2.0: {}
comment-parser@1.4.1: {}
@@ -9999,10 +10066,6 @@ snapshots:
dependencies:
dequal: 2.0.3
- didyoumean@1.2.2: {}
-
- dlv@1.1.3: {}
-
doctrine@3.0.0:
dependencies:
esutils: 2.0.3
@@ -10060,6 +10123,11 @@ snapshots:
graceful-fs: 4.2.11
tapable: 2.2.1
+ enhanced-resolve@5.18.0:
+ dependencies:
+ graceful-fs: 4.2.11
+ tapable: 2.2.1
+
entities@4.5.0: {}
environment@1.1.0: {}
@@ -10950,8 +11018,6 @@ snapshots:
lilconfig@3.1.3: {}
- lines-and-columns@1.2.4: {}
-
lint-staged@15.4.3:
dependencies:
chalk: 5.4.1
@@ -11423,12 +11489,6 @@ snapshots:
mustache@4.2.0: {}
- mz@2.7.0:
- dependencies:
- any-promise: 1.3.0
- object-assign: 4.1.1
- thenify-all: 1.6.0
-
nanoid@3.3.8: {}
nanoid@5.0.9: {}
@@ -11506,8 +11566,6 @@ snapshots:
object-assign@4.1.1: {}
- object-hash@3.0.0: {}
-
object-inspect@1.13.2: {}
on-finished@2.3.0:
@@ -11636,8 +11694,6 @@ snapshots:
pify@4.0.1:
optional: true
- pirates@4.0.6: {}
-
pkg-types@1.3.0:
dependencies:
confbox: 0.1.8
@@ -11687,13 +11743,6 @@ snapshots:
dependencies:
postcss: 8.5.1
- postcss-import@15.1.0(postcss@8.5.1):
- dependencies:
- postcss: 8.5.1
- postcss-value-parser: 4.2.0
- read-cache: 1.0.0
- resolve: 1.22.8
-
postcss-import@16.1.0(postcss@8.5.1):
dependencies:
postcss: 8.5.1
@@ -11701,18 +11750,6 @@ snapshots:
read-cache: 1.0.0
resolve: 1.22.8
- postcss-js@4.0.1(postcss@8.5.1):
- dependencies:
- camelcase-css: 2.0.1
- postcss: 8.5.1
-
- postcss-load-config@4.0.2(postcss@8.5.1):
- dependencies:
- lilconfig: 3.1.3
- yaml: 2.6.1
- optionalDependencies:
- postcss: 8.5.1
-
postcss-load-config@6.0.1(jiti@2.4.2)(postcss@8.5.1)(tsx@4.19.2)(yaml@2.7.0):
dependencies:
lilconfig: 3.1.3
@@ -11794,11 +11831,6 @@ snapshots:
postcss-modules-values: 4.0.0(postcss@8.5.1)
string-hash: 1.1.3
- postcss-nested@6.2.0(postcss@8.5.1):
- dependencies:
- postcss: 8.5.1
- postcss-selector-parser: 6.1.2
-
postcss-nested@7.0.2(postcss@8.5.1):
dependencies:
postcss: 8.5.1
@@ -12572,16 +12604,6 @@ snapshots:
transitivePeerDependencies:
- supports-color
- sucrase@3.35.0:
- dependencies:
- '@jridgewell/gen-mapping': 0.3.5
- commander: 4.1.1
- glob: 10.4.5
- lines-and-columns: 1.2.4
- mz: 2.7.0
- pirates: 4.0.6
- ts-interface-checker: 0.1.13
-
sugarss@5.0.0(postcss@8.5.1):
dependencies:
postcss: 8.5.1
@@ -12620,32 +12642,7 @@ snapshots:
tabbable@6.2.0: {}
- tailwindcss@3.4.17:
- dependencies:
- '@alloc/quick-lru': 5.2.0
- arg: 5.0.2
- chokidar: 3.6.0(patch_hash=r6f2jac4ef543toizf7sfnkaom)
- didyoumean: 1.2.2
- dlv: 1.1.3
- fast-glob: 3.3.2
- glob-parent: 6.0.2
- is-glob: 4.0.3
- jiti: 1.21.7
- lilconfig: 3.1.3
- micromatch: 4.0.8
- normalize-path: 3.0.0
- object-hash: 3.0.0
- picocolors: 1.1.1
- postcss: 8.5.1
- postcss-import: 15.1.0(postcss@8.5.1)
- postcss-js: 4.0.1(postcss@8.5.1)
- postcss-load-config: 4.0.2(postcss@8.5.1)
- postcss-nested: 6.2.0(postcss@8.5.1)
- postcss-selector-parser: 6.1.2
- resolve: 1.22.8
- sucrase: 3.35.0
- transitivePeerDependencies:
- - ts-node
+ tailwindcss@4.0.1: {}
tapable@2.2.1: {}
@@ -12671,14 +12668,6 @@ snapshots:
commander: 2.20.3
source-map-support: 0.5.21
- thenify-all@1.6.0:
- dependencies:
- thenify: 3.3.1
-
- thenify@3.3.1:
- dependencies:
- any-promise: 1.3.0
-
tiny-emitter@2.1.0: {}
tinybench@2.9.0: {}
@@ -12716,8 +12705,6 @@ snapshots:
dependencies:
typescript: 5.7.2
- ts-interface-checker@0.1.13: {}
-
tsconfck@3.1.4(typescript@5.7.2):
optionalDependencies:
typescript: 5.7.2
@@ -13109,8 +13096,6 @@ snapshots:
yallist@4.0.0: {}
- yaml@2.6.1: {}
-
yaml@2.7.0: {}
yocto-queue@0.1.0: {}
From 5812cce0eb3819631105e8b0ef2c54636c171eae Mon Sep 17 00:00:00 2001
From: sapphi-red <49056869+sapphi-red@users.noreply.github.com>
Date: Thu, 30 Jan 2025 16:37:55 +0900
Subject: [PATCH 2/7] chore: fix type
---
playground/tailwind/tailwind.config.ts | 3 ---
1 file changed, 3 deletions(-)
diff --git a/playground/tailwind/tailwind.config.ts b/playground/tailwind/tailwind.config.ts
index eed5fdfcdd0434..0493bb41f439a5 100644
--- a/playground/tailwind/tailwind.config.ts
+++ b/playground/tailwind/tailwind.config.ts
@@ -10,8 +10,5 @@ export default {
theme: {
extend: {},
},
- variants: {
- extend: {},
- },
plugins: [],
} satisfies Config
From 1323f57a8413aa3df27f760725973cab1272a198 Mon Sep 17 00:00:00 2001
From: sapphi-red <49056869+sapphi-red@users.noreply.github.com>
Date: Fri, 31 Jan 2025 13:03:03 +0900
Subject: [PATCH 3/7] chore: reduce diff
---
playground/tailwind/__test__/tailwind.spec.ts | 3 +--
1 file changed, 1 insertion(+), 2 deletions(-)
diff --git a/playground/tailwind/__test__/tailwind.spec.ts b/playground/tailwind/__test__/tailwind.spec.ts
index 16f65b2c882e17..66ae6da64e0e25 100644
--- a/playground/tailwind/__test__/tailwind.spec.ts
+++ b/playground/tailwind/__test__/tailwind.spec.ts
@@ -1,7 +1,6 @@
import { expect, test } from 'vitest'
import {
editFile,
- expectWithRetry,
getColor,
isServe,
page,
@@ -15,7 +14,7 @@ test('should render', async () => {
test.runIf(isServe)('regenerate CSS and HMR (glob pattern)', async () => {
const el = page.locator('#view1-text')
- await expectWithRetry(() => getColor(el)).toBe('oklch(0.627 0.194 149.214)')
+ expect(await getColor(el)).toBe('oklch(0.627 0.194 149.214)')
await untilBrowserLogAfter(
() =>
From 8801ec60be09414f6b0fafcfaf8b18db835aee1a Mon Sep 17 00:00:00 2001
From: sapphi-red <49056869+sapphi-red@users.noreply.github.com>
Date: Fri, 31 Jan 2025 13:07:54 +0900
Subject: [PATCH 4/7] test: add back tailwind v3 tests as tailwind-v3
playground
---
.../tailwind-v3/__test__/tailwind-v3.spec.ts | 82 ++++++++
playground/tailwind-v3/index.css | 3 +
playground/tailwind-v3/index.html | 5 +
playground/tailwind-v3/package.json | 21 ++
playground/tailwind-v3/postcss.config.js | 11 +
.../tailwind-v3/src/components/component1.js | 9 +
playground/tailwind-v3/src/main.js | 18 ++
playground/tailwind-v3/src/views/view1.js | 8 +
playground/tailwind-v3/tailwind.config.ts | 17 ++
playground/tailwind-v3/vite.config.ts | 42 ++++
pnpm-lock.yaml | 198 ++++++++++++++++++
11 files changed, 414 insertions(+)
create mode 100644 playground/tailwind-v3/__test__/tailwind-v3.spec.ts
create mode 100644 playground/tailwind-v3/index.css
create mode 100644 playground/tailwind-v3/index.html
create mode 100644 playground/tailwind-v3/package.json
create mode 100644 playground/tailwind-v3/postcss.config.js
create mode 100644 playground/tailwind-v3/src/components/component1.js
create mode 100644 playground/tailwind-v3/src/main.js
create mode 100644 playground/tailwind-v3/src/views/view1.js
create mode 100644 playground/tailwind-v3/tailwind.config.ts
create mode 100644 playground/tailwind-v3/vite.config.ts
diff --git a/playground/tailwind-v3/__test__/tailwind-v3.spec.ts b/playground/tailwind-v3/__test__/tailwind-v3.spec.ts
new file mode 100644
index 00000000000000..a2570336789954
--- /dev/null
+++ b/playground/tailwind-v3/__test__/tailwind-v3.spec.ts
@@ -0,0 +1,82 @@
+import { expect, test } from 'vitest'
+import {
+ editFile,
+ expectWithRetry,
+ getColor,
+ isServe,
+ page,
+ untilBrowserLogAfter,
+ untilUpdated,
+} from '~utils'
+
+test('should render', async () => {
+ expect(await page.textContent('#pagetitle')).toBe('Page title')
+})
+
+test.runIf(isServe)('regenerate CSS and HMR (glob pattern)', async () => {
+ const el = page.locator('#view1-text')
+ expect(await getColor(el)).toBe('rgb(22, 163, 74)')
+
+ await untilBrowserLogAfter(
+ () =>
+ editFile('src/views/view1.js', (code) =>
+ code.replace('|view1|', '|view1 updated|'),
+ ),
+ [
+ '[vite] css hot updated: /index.css',
+ '[vite] hot updated: /src/views/view1.js via /src/main.js',
+ ],
+ false,
+ )
+ await untilUpdated(() => el.textContent(), '|view1 updated|')
+
+ await untilBrowserLogAfter(
+ () =>
+ editFile('src/views/view1.js', (code) =>
+ code.replace('text-green-600', 'text-orange-600'),
+ ),
+ [
+ '[vite] css hot updated: /index.css',
+ '[vite] hot updated: /src/views/view1.js via /src/main.js',
+ ],
+ false,
+ )
+ await untilUpdated(async () => getColor(el), 'rgb(234, 88, 12)')
+})
+
+test.runIf(isServe)(
+ 'same file duplicated in module graph (#4267)',
+ async () => {
+ const el = page.locator('#component1')
+ expect(await getColor(el)).toBe('rgb(220, 38, 38)')
+
+ // when duplicated, page reload happens
+ await untilBrowserLogAfter(
+ () =>
+ editFile('src/components/component1.js', (code) =>
+ code.replace('text-red-600', 'text-blue-600'),
+ ),
+ [
+ '[vite] css hot updated: /index.css',
+ '[vite] hot updated: /src/components/component1.js',
+ ],
+ false,
+ )
+ await untilUpdated(() => getColor(el), 'rgb(37, 99, 235)')
+ },
+)
+
+test.runIf(isServe)('regenerate CSS and HMR (relative path)', async () => {
+ const el = page.locator('#pagetitle')
+ expect(await getColor(el)).toBe('rgb(124, 58, 237)')
+
+ await untilBrowserLogAfter(
+ () =>
+ editFile('src/main.js', (code) =>
+ code.replace('text-violet-600', 'text-cyan-600'),
+ ),
+ ['[vite] css hot updated: /index.css', '[vite] hot updated: /src/main.js'],
+ false,
+ )
+ await untilUpdated(() => getColor(el), 'rgb(8, 145, 178)')
+})
diff --git a/playground/tailwind-v3/index.css b/playground/tailwind-v3/index.css
new file mode 100644
index 00000000000000..b5c61c956711f9
--- /dev/null
+++ b/playground/tailwind-v3/index.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/playground/tailwind-v3/index.html b/playground/tailwind-v3/index.html
new file mode 100644
index 00000000000000..0c7bee6b26884f
--- /dev/null
+++ b/playground/tailwind-v3/index.html
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/playground/tailwind-v3/package.json b/playground/tailwind-v3/package.json
new file mode 100644
index 00000000000000..36da6ab7356d82
--- /dev/null
+++ b/playground/tailwind-v3/package.json
@@ -0,0 +1,21 @@
+{
+ "name": "@vitejs/test-tailwind-v3",
+ "private": true,
+ "version": "0.0.0",
+ "type": "module",
+ "scripts": {
+ "dev": "vite",
+ "build": "vite build",
+ "debug": "node --inspect-brk ../../packages/vite/bin/vite",
+ "preview": "vite preview"
+ },
+ "dependencies": {
+ "autoprefixer": "^10.4.20",
+ "tailwindcss": "^3.4.17",
+ "vue": "^3.5.13",
+ "vue-router": "^4.5.0"
+ },
+ "devDependencies": {
+ "tsx": "^4.19.2"
+ }
+}
diff --git a/playground/tailwind-v3/postcss.config.js b/playground/tailwind-v3/postcss.config.js
new file mode 100644
index 00000000000000..34abdccd458241
--- /dev/null
+++ b/playground/tailwind-v3/postcss.config.js
@@ -0,0 +1,11 @@
+// postcss.config.ts
+import { fileURLToPath } from 'node:url'
+
+export default {
+ plugins: {
+ tailwindcss: {
+ config: fileURLToPath(new URL('./tailwind.config.ts', import.meta.url)),
+ },
+ autoprefixer: {},
+ },
+}
diff --git a/playground/tailwind-v3/src/components/component1.js b/playground/tailwind-v3/src/components/component1.js
new file mode 100644
index 00000000000000..df5e36f0bacd56
--- /dev/null
+++ b/playground/tailwind-v3/src/components/component1.js
@@ -0,0 +1,9 @@
+export const component1 = /* html */ `
+ component1
+`
+
+import.meta.hot?.accept((mod) => {
+ document.querySelectorAll('[data-id="component1"]').forEach((d) => {
+ d.outerHTML = mod.component1
+ })
+})
diff --git a/playground/tailwind-v3/src/main.js b/playground/tailwind-v3/src/main.js
new file mode 100644
index 00000000000000..b9f0c5956232d5
--- /dev/null
+++ b/playground/tailwind-v3/src/main.js
@@ -0,0 +1,18 @@
+import { view1 } from './views/view1'
+
+export const main = (view1Content) => /* html */ `
+ Page title
+ ${view1Content}
+
+ style
+`
+
+document.getElementById('app').innerHTML = main(view1)
+
+import.meta.hot?.accept((mod) => {
+ document.getElementById('app').innerHTML = mod.main(view1)
+})
+
+import.meta.hot?.accept(['./views/view1'], ([mod]) => {
+ document.getElementById('app').innerHTML = main(mod.view1)
+})
diff --git a/playground/tailwind-v3/src/views/view1.js b/playground/tailwind-v3/src/views/view1.js
new file mode 100644
index 00000000000000..c9e0c0d1745fe2
--- /dev/null
+++ b/playground/tailwind-v3/src/views/view1.js
@@ -0,0 +1,8 @@
+import { component1 } from '../components/component1'
+
+export const view1 = /* html */ `
+
+
|view1|
+ ${component1}
+