archive-gh-me/tailwindcss
1
0
Fork 0
mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Vite: Transform <style> blocks in html files (#16069)

Browse Source 
Fixes #16036

This adds a new rule to treat `<style>` blocks found within `.html` file
as Tailwind CSS targets.

## Test plan

- Tested using the Vite extension (dev) and a new integration test
(prod)

Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
This commit is contained in:
Philipp Spiess 2025-01-31 15:26:45 +01:00 committed by GitHub
parent deb33a93ab
commit 95722020fe
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 61 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -16,6 +16,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Vite: Ensure hot-reloading works with SolidStart setups ([#16052](https://github.com/tailwindlabs/tailwindcss/pull/16052))
- Vite: Fix a crash when starting the development server in SolidStart setups ([#16052](https://github.com/tailwindlabs/tailwindcss/pull/16052))
- Vite: Don't rebase urls that appear to be aliases ([#16078](https://github.com/tailwindlabs/tailwindcss/pull/16078))
- Vite: Transform `<style>` blocks in HTML files ([#16069](https://github.com/tailwindlabs/tailwindcss/pull/16069))
- Prevent camelCasing CSS custom properties added by JavaScript plugins ([#16103](https://github.com/tailwindlabs/tailwindcss/pull/16103))
- Do not emit `@keyframes` in `@theme reference` ([#16120](https://github.com/tailwindlabs/tailwindcss/pull/16120))

58
integrations/vite/html-style-blocks.test.ts Normal file
View File

@ -0,0 +1,58 @@
import { html, json, test, ts } from '../utils'
test(
'transforms html style blocks',
{
fs: {
'package.json': json`
{
"type": "module",
"dependencies": {
"tailwindcss": "workspace:^"
},
"devDependencies": {
"@tailwindcss/vite": "workspace:^",
"vite": "^6"
}
}
`,
'vite.config.ts': ts`
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
plugins: [tailwindcss()],
})
`,
'index.html': html`
<!doctype html>
<html>
<body>
<div class="foo"></div>
<style>
.foo {
@apply underline;
}
</style>
</body>
</html>
`,
},
},
async ({ fs, exec, expect }) => {
await exec('pnpm vite build')
expect(await fs.dumpFiles('dist/*.html')).toMatchInlineSnapshot(`
"
--- dist/index.html ---
<!doctype html>
<html>
<body>
<div class="foo"></div>
<style>.foo{text-decoration-line:underline}</style>
</body>
</html>
"
`)
},
)

3
packages/@tailwindcss-vite/src/index.ts
View File

@ -8,6 +8,7 @@ import type { Plugin, ResolvedConfig, Rollup, Update, ViteDevServer } from 'vite
const DEBUG = env.DEBUG
const SPECIAL_QUERY_RE = /[?&](raw|url)\b/
const INLINE_STYLE_ID_RE = /[?&]index\=\d+\.css$/
const IGNORED_DEPENDENCIES = ['tailwind-merge']
@ -312,7 +313,7 @@ function isPotentialCssRootFile(id: string) {
if (id.includes('/.vite/')) return
let extension = getExtension(id)
let isCssFile =
(extension === 'css' || id.includes('&lang.css')) &&
(extension === 'css' || id.includes('&lang.css') || id.match(INLINE_STYLE_ID_RE)) &&
// Don't intercept special static asset resources
!SPECIAL_QUERY_RE.test(id)