Svelte Scoped
Plaats gegenereerde CSS voor de utility stijlen van elke Svelte component direct in het <style> blok van de Svelte component in plaats van in een global CSS bestand.
Deze component:
<div class="mb-1" />wordt getransformeerd naar:
<div class="uno-ei382o" />
<style>
:global(.uno-ei382o) {
margin-bottom: 0.25rem;
}
</style>Wanneer te gebruiken
| Use Case | Beschrijving | Te gebruiken pakket | |
|---|---|---|---|
| Kleinere apps | ❌ | 1 global CSS bestand is handiger. Gebruik de reguliere Vite plugin voor Svelte/SvelteKit. | unocss/vite |
| Grotere apps | ✅ | Svelte Scoped kan je helpen om een steeds groeiend global CSS bestand te voorkomen. | @unocss/svelte-scoped/vite |
| Component bibliotheek | ✅ | Gegenereerde stijlen worden direct in gebouwde components geplaatst zonder de noodzaak om UnoCSS te gebruiken in de build pipeline van een consumer app. | @unocss/svelte-scoped/preprocess |
Hoe het werkt
Een reguliere UnoCSS/Tailwind CSS setup plaatst utility stijlen in een global CSS bestand met de juiste volgorde. Daarentegen distribueert Svelte Scoped je stijlen over veel willekeurig geordende Svelte component CSS bestanden. Echter, het moet de utility stijlen globaal houden om ze context-bewust te laten zijn waar nodig voor zaken als van rechts naar links en andere use cases hieronder vermeld. Dit presenteert een uitdaging die wordt opgelost door Svelte's :global() wrapper te gebruiken om af te zien van de standaard Svelte CSS hashing methode en in plaats daarvan een hash te gebruiken gebaseerd op bestandsnaam + klasse naam(s) om unieke klasse namen te compileren die globaal gemaakt kunnen worden zonder stijlconflicten.
Gebruik
Omdat Svelte Scoped je utility klasse namen herschrijft, ben je beperkt in waar je ze kunt schrijven:
| Ondersteunde Syntaxis | Voorbeeld |
|---|---|
| Class attribute | <div class="mb-1" /> |
| Class directive | <div class:mb-1={condition} /> |
| Class directive shorthand | <div class:logo /> |
| Class prop | <Button class="mb-1" /> |
Svelte Scoped is ontworpen als een drop-in vervanging voor een project dat utility stijlen gebruikt. Als zodanig worden expressies gevonden binnen class attributen ook ondersteund (bijv. <div class="mb-1 {foo ? 'mr-1' : 'mr-2'}" />) maar we raden aan om de class directive syntax te gebruiken moving forward. Merk ook op dat als je klasse namen op andere manieren hebt gebruikt zoals ze in een <script> blok plaatsen of attributify modus gebruiken, je extra stappen moet nemen voordat je Svelte Scoped gebruikt. Je kunt de safelist optie gebruiken en ook de presets sectie hieronder controleren voor meer tips.
Context bewust
Hoewel stijlen worden gedistribueerd over de Svelte componenten van je app, zijn het nog steeds globale klassen en zullen ze werken in relatie tot elementen gevonden buiten hun specifieke componenten. Hier zijn enkele voorbeelden: