Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
philipp-spiess merged 4 commits into from
Jan 31, 2025
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9405d42
Vite: Transform `<style>` blocks in html files
philipp-spiess Jan 30, 2025
317115b
Merge branch 'main' into fix/vite-html-style-blocks
RobinMalfait Jan 30, 2025
0aca2ce
Merge branch 'main' into fix/vite-html-style-blocks
philipp-spiess Jan 31, 2025
d3427d7
Merge branch 'main' into fix/vite-html-style-blocks
RobinMalfait Jan 31, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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))

Expand Down
58 changes: 58 additions & 0 deletions integrations/vite/html-style-blocks.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 changes: 2 additions & 1 deletion packages/@tailwindcss-vite/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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']

Expand Down Expand Up @@ -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)

Expand Down