Philipp Spiess c72c83fee3

Vite: Support Tailwind in Svelte <style> blocks (#14151) ...

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">

2024-11-08 20:01:16 +01:00

..

index.ts

Vite: Support Tailwind in Svelte <style> blocks (#14151)

2024-11-08 20:01:16 +01:00