c72c83fee3
Closes #13305 This PR adds registers a Svelte preprocessor, used by the Svelte Vite plugin, to run Tailwind CSS for styles inside the `<style>` block, this enables users to use Tailwind CSS features like `@apply` from inside Svelte components: ```svelte <script> let name = 'world' </script> <h1 class="foo underline">Hello {name}!</h1> <style global> @import 'tailwindcss/utilities'; @import 'tailwindcss/theme' theme(reference); @import './components.css'; </style> ``` ## Test Plan I've added integration tests to validate this works as expected. Furthermore I've used the [tailwindcss-playgrounds](https://github.com/philipp-spiess/tailwind-playgrounds) SvelteKit project to ensure this works in an end-to-end setup: <img width="2250" alt="Screenshot 2024-11-08 at 14 45 31" src="https://github.com/user-attachments/assets/64e9e0f3-53fb-4039-b0a7-3ce945a29179"> |
||
|---|---|---|
| .. | ||
| astro.test.ts | ||
| config.test.ts | ||
| css-modules.test.ts | ||
| index.test.ts | ||
| multi-root.test.ts | ||
| nuxt.test.ts | ||
| other-transforms.test.ts | ||
| svelte.test.ts | ||
| url-rewriting.test.ts | ||
| vue.test.ts | ||