tailwindlabs / tailwindcss

A utility-first CSS framework for rapid UI development.
https://tailwindcss.com/
MIT License
83.28k stars 4.22k forks source link

[v4] Vite plugin breaks svelte global animation keyframes handling #14965

Closed emmbm closed 1 week ago

emmbm commented 1 week ago

What version of Tailwind CSS are you using?

v4.0.0-alpha.32

What build tool (or framework if it abstracts the build tool) are you using?

Vite with SvelteKit 2.8.0 (latest)

What version of Node.js are you using?

For example: v23.1.0

What browser are you using?

Chrome

What operating system are you using?

MacOS

Reproduction URL

https://github.com/emmbm/tailwind-svelte-keyframes

Describe your issue

Updating from @tailwindcss/vite@4.0.0-alpha.31 to @tailwindcss/vite@4.0.0-alpha.32 breaks svelte's expected handling (read here renaming) of global keyframes defined in style blocks.

In svelte components, styles are scoped by default. This scoping also applies to keyframes, [unless they are defined with a -global- prefix which svelte then removes during build](https://svelte.dev/docs/svelte/global-styles#:global()). This behavior is broken in the current next version of tailwind.

philipp-spiess commented 1 week ago

Yeah it does seem that the default Svelte transforms now no longer apply at all. Looking into it, thanks for the report.

philipp-spiess commented 1 week ago

@emmbm The next alpha will have a fix for this! Thanks again for the report 🙇