Svelte Scoped

Her Svelte bileşeninin yardımcı program stilleri için oluşturulan CSS'i global bir CSS dosyası yerine doğrudan Svelte bileşeninin <style> bloğuna yerleştirin.

Bu bileşen:

<div class="mb-1" />

şuna dönüştürülür:

<div class="uno-ei382o" />

<style>
  :global(.uno-ei382o) {
    margin-bottom: 0.25rem;
  }
</style>

When to use

Kullanım Durumu		Açıklama	Kullanılacak Paket
Daha küçük uygulamalar	❌	1 global CSS dosyasına sahip olmak daha uygundur. Svelte/SvelteKit için normal Vite eklentisini kullanın.	unocss/vite
Daha büyük uygulamalar	✅	Svelte Scoped, sürekli büyüyen global CSS dosyasından kaçınmanıza yardımcı olabilir.	@unocss/svelte-scoped/vite
Bileşen kütüphanesi	✅	Oluşturulan stiller doğrudan derlenmiş bileşenlere yerleştirilir, tüketen uygulamanın derleme pipeline'ında UnoCSS kullanmasına gerek kalmaz.	@unocss/svelte-scoped/preprocess

How it works

Normal bir UnoCSS/Tailwind CSS kurulumu, yardımcı program stillerini uygun sıralama ile global bir CSS dosyasına yerleştirir. Buna karşılık, Svelte Scoped stillerinizi birçok rastgele sıralanmış Svelte bileşeni CSS dosyasına dağıtır. Ancak, sağdan sola ve aşağıda listelenen diğer kullanım durumları için gerektiği gibi bağlama duyarlı olmalarına izin vermek için yardımcı program stillerinin global kalması gerekir. Bu, Svelte'in varsayılan CSS karma yönteminden çıkmak ve bunun yerine dosya adı + sınıf adı(ları)na dayalı bir karma kullanarak stil çakışmaları olmadan global yapılabilecek benzersiz sınıf adları derlemek için Svelte'in :global() sarmalayıcısını kullanarak çözülen bir zorluk sunar.

Usage

Svelte Scoped yardımcı program sınıfı adlarınızı yeniden yazdığından, bunları nerede yazabileceğiniz konusunda sınırlısınız:

Desteklenen Sözdizimi	Örnek
Sınıf özniteliği	<div class="mb-1" />
Sınıf yönergesi	<div class:mb-1={condition} />
Sınıf yönergesi kısaltması	<div class:logo />
Sınıf özelliği	<Button class="mb-1" />

Svelte Scoped, yardımcı program stilleri kullanan bir proje için kullanılmak üzere tasarlanmıştır. Bu nedenle, sınıf özniteliklerinde bulunan ifadeler de desteklenir (örneğin <div class="mb-1 {foo ? 'mr-1' : 'mr-2'}" />) ancak ileriye dönük olarak sınıf yönergesi sözdizimini kullanmanızı öneririz. Ayrıca, sınıf adlarını <script> bloğuna yerleştirme veya attributify modu kullanma gibi diğer şekillerde kullandıysanız, Svelte Scoped'i kullanmadan önce ek adımlar atmanız gerekir. safelist seçeneğini kullanabilir ve daha fazla ipucu için preset'ler bölümünü kontrol edebilirsiniz.

Context aware

Stiller uygulamanızın Svelte bileşenlerine dağıtılmış olsa da, bunlar hala global sınıflardır ve kendi özel bileşenlerinin dışında bulunan öğelerle ilişkide çalışacaktır. İşte bazı örnekler:

Parent dependent

Bir üst bileşende bulunan özniteliklere bağlı sınıflar:

<div class="dark:mb-2 rtl:right-0"></div>

şuna dönüşür:

<div class="uno-3hashz"></div>

<style>
  :global(.dark .uno-3hashz) {
    margin-bottom: 0.5rem;
  }
  :global([dir="rtl"] .uno-3hashz) {
    right: 0rem;
  }
</style>

Children influencing

Bazıları ayrı bileşenlerde olan 3 alt öğe arasına boşluk ekleyebilirsiniz:

<div class="space-x-1">
  <div>Durum: çevrimiçi</div>
  <Button>SSS</Button>
  <Button>Giriş</Button>
</div>

şuna dönüşür:

<div class="uno-7haszz">
  <div>Durum: çevrimiçi</div>
  <Button>SSS</Button>
  <Button>Giriş</Button>
</div>

<style>
  :global(.uno-7haszz > :not([hidden]) ~ :not([hidden])) {
    --un-space-x-reverse: 0;
    margin-left: calc(0.25rem * calc(1 - var(--un-space-x-reverse)));
    margin-right: calc(0.25rem * var(--un-space-x-reverse));
  }
</style>

Passing classes to child components

Bir bileşenin nerede tüketildiğine özel sınıflar geçirmek için bir bileşene class özelliği ekleyebilirsiniz.

<Button class="px-2 py-1">Giriş</Button>

şuna dönüşür:

<Button class="uno-4hshza">Giriş</Button>

<style>
  :global(.uno-4hshza) {
    padding-left:0.5rem;
    padding-right:0.5rem;
    padding-top:0.25rem;
    padding-bottom:0.25rem;
  }
</style>

Bir alıcı bileşende sınıfı uygulamanın kolay bir yolu, div class="{$$props.class} foo bar" /> şeklinde bir öğeye yerleştirmek için {$$props.class} kullanmaktır.

Apply directives

<style> bloklarınızın içinde --at-apply veya @apply veya applyVariables seçeneği kullanılarak ayarlanan özel bir değer ile apply yönergelerini kullanabilirsiniz.

Svelte Scoped, düzenli @unocss/transformer-directives paketinin düzgün bir şekilde işleyemediği bağlama bağlı sınıflar gibi dark:text-white'i bile düzgün bir şekilde işler çünkü Svelte stil blokları için özel olarak oluşturulmamıştır. Örneğin, Svelte Scoped ile bu bileşen:

<div />

<style>
  div {
    --at-apply: rtl:ml-2;
  }
</style>

şuna dönüştürülecektir:

<div />

<style>
  :global([dir=\\"rtl\\"]) div {
    margin-right: 0.5rem;
  }
</style>

rtl:ml-2'nin düzgün çalışması için, [dir="rtl"] seçicisi :global() ile sarmalanır çünkü bileşen bu özniteliğe sahip bir öğe içermediğinden Svelte derleyicisinin onu otomatik olarak çıkarmasını engeller. Ancak, div :global() sarmalayıcısına dahil edilemez çünkü bu stil uygulamanızdaki her div'i etkiler.

Other style block directives

theme() kullanımı da desteklenir, ancak @screen desteklenmez.

Vite Plugin

Svelte veya SvelteKit uygulamalarında, oluşturulan stilleri doğrudan Svelte bileşenlerinize enjekte ederken, minimum gerekli stilleri global bir stil sayfasına yerleştirin. Stackblitz'deki SvelteKit örneğine göz atın:

Install

pnpm

pnpm add -D unocss @unocss/svelte-scoped

yarn

yarn add -D unocss @unocss/svelte-scoped

npm

npm install -D unocss @unocss/svelte-scoped

bun

bun add -D unocss @unocss/svelte-scoped

Add plugin

Vite yapılandırmanıza @unocss/svelte-scoped/vite ekleyin:

import { sveltekit } from '@sveltejs/kit/vite'
import UnoCSS from '@unocss/svelte-scoped/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    UnoCSS({
      // injectReset: '@unocss/reset/normalize.css', // tüm dahil edilen sıfırlama seçenekleri veya kendi sıfırlamanızı nasıl geçireceğiniz için tip tanımına bakın
      // ...diğer Svelte Scoped seçenekleri
    }),
    sveltekit(),
  ],
})

Add config file

uno.config.ts dosyanızı aşağıda açıklandığı gibi ayarlayın.

Global styles

Neredeyse tüm stiller bireysel bileşenlere yerleştirilirken, hala global bir stil sayfasına yerleştirilmesi gereken birkaçı vardır: preflights, safelist ve isteğe bağlı bir sıfırlama (eğer injectReset seçeneğini kullanıyorsanız).

%unocss-svelte-scoped.global% yer tutucusunu <head> etiketinize ekleyin. Svelte'de bu index.html'dir. SvelteKit'te bu, %sveltekit.head%'den önce app.html'de olacaktır:

<head>
  <!-- ... -->
  <title>SvelteKit using UnoCSS Svelte Scoped</title>
  %unocss-svelte-scoped.global%
  %sveltekit.head%
</head>

SvelteKit kullanıyorsanız, src/hooks.server.js dosyanızdaki transformPageChunk kancasına aşağıdakileri de eklemelisiniz:

/** @type {import('@sveltejs/kit').Handle} */
export async function handle({ event, resolve }) {
  const response = await resolve(event, {
    transformPageChunk: ({ html }) =>
      html.replace(
        '%unocss-svelte-scoped.global%',
        'unocss_svelte_scoped_global_styles'
      ),
  })
  return response
}

Bu dönüşüm, yolu hooks ve server içeren bir dosyada olmalıdır (örneğin src/hooks.server.js, src/hooks.server.ts) çünkü svelte-scoped global stillerinizle unocss_svelte_scoped_global_styles'i değiştirmek için sunucu kancaları dosyanıza bakacaktır. Bu dönüşümü @sveltejs/kit/hooks'tan sequence kullanırken başka bir dosyadan içe aktarmadığınızdan emin olun.

Normal bir Svelte projesinde, Vite'in transformIndexHtml kancası bunu otomatik olarak yapacaktır.

Svelte Preprocessor

Eşlik eden bir CSS dosyası eklemeye bağımlı olmayan bir bileşen kütüphanesi oluşturmak için yardımcı program stillerini kullanın, oluşturulan stilleri doğrudan derlenmiş bileşenlere yerleştirmek için bir ön işlemci kullanın. Stackblitz'deki SvelteKit Kütüphane örneğine göz atın:

Install

pnpm

pnpm add -D unocss @unocss/svelte-scoped

yarn

yarn add -D unocss @unocss/svelte-scoped

npm

npm install -D unocss @unocss/svelte-scoped

bun

bun add -D unocss @unocss/svelte-scoped

Add preprocessor

Svelte yapılandırmanıza @unocss/svelte-scoped/preprocess ekleyin:

import adapter from '@sveltejs/adapter-auto'
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
import UnoCSS from '@unocss/svelte-scoped/preprocess'

const config = {
  preprocess: [
    vitePreprocess(),
    UnoCSS({
      // ... ön işlemci seçenekleri
    }),
  ],
  // diğer Svelte yapılandırması
}

Don't combine class names in development

Svelte Scoped'i normal bir uygulamada kullanırken, Vite eklentisi otomatik olarak dev ile build'ı algılar. Geliştirmede, sınıflar tarayıcınızın geliştirici araçlarında kolaylık sağlamak amacıyla ayrı ve yerinde karma olarak tutulacaktır. class="mb-1 mr-1" class="_mb-1_9hwi32 _mr-1_84jfy4" gibi bir şeye dönüşecektir. Üretimde, bunlar istediğiniz önekle, varsayılan olarak uno-, ve dosya adı + sınıf adlarına dayalı bir karma kullanarak tek bir sınıf adına derlenecektir, örneğin class="uno-84dke3".

Ön işlemci kullanırken aynı davranışı istiyorsanız, ortama bağlı olarak combine seçeneğini manuel olarak ayarlamanız gerekir. Bunu yapmanın bir yolu cross-env yüklemek ve geliştirme betiğinizi şu şekilde güncellemektir:

"dev": "cross-env NODE_ENV=development vite dev"

Ardından svelte.config.js'nizi ayarlayın:

+const prod = process.env.NODE_ENV !== 'development'
const config = {
  preprocess: [
    vitePreprocess(),
    UnoCSS({
+      combine: prod,
    }),
  ],
}

Add config file

uno.config.ts dosyanızı aşağıda açıklandığı gibi ayarlayın.

Preflights

Ön işlemci kullanırken, uno-preflights stil özniteliği ekleyerek preflight'ları ihtiyaç duyulan belirli bileşenlere dahil etme seçeneğiniz vardır.

<style uno-preflights></style>

.prose :where(a):not(:where(.not-prose, .not-prose *)) gibi bir nokta ile başlayan özel preflight'lar, Svelte derleyicisi tarafından otomatik olarak çıkarılmaktan kaçınmak için :global() ile sarmalanacaktır.

Preflight'ları bireysel bileşenlere eklemek, sınıflarınız preflight'lara bağımlı değilse veya derlenmiş bileşenleriniz yalnızca preflight'ları zaten içeren uygulamalarda tüketiliyorsa gereksizdir.

Safelist

Ön işlemci kullanırken, uno-safelist stil özniteliği ekleyerek bir bileşene safelist sınıflarını dahil etme seçeneğiniz vardır.

<style uno-safelist></style>

Safelist stilleriniz, Svelte derleyicisi tarafından otomatik olarak çıkarılmaktan kaçınmak için :global() ile sarmalanacaktır.

Configuration

UnoCSS ayarlarınızı bir uno.config.ts dosyasına yerleştirin:

import { defineConfig } from 'unocss'

export default defineConfig({
  // ...UnoCSS seçenekleri
})

Çıkarıcılar, normal UnoCSS global kullanımı ile Svelte Scoped kullanımı arasındaki farklılıklar nedeniyle desteklenmez. Preset'ler ve Transformer'lar aşağıdaki bölümlerde açıklandığı gibi desteklenir. Diğer tüm ayrıntılar için Yapılandırma Dosyası ve Yapılandırma referansı bölümlerine bakın.

Presets support

Birkaç gerekli stilin global bir stil sayfasında olması ve diğer her şeyin ihtiyaç duyulan her bileşende bulunması gerektiğinden, preset'ler duruma göre ele alınmalıdır:

Preset	Desteklenen	Notlar
@unocss/preset-uno, @unocss/preset-mini, @unocss/preset-wind3, @unocss/preset-icons, @unocss/web-fonts	✅	Bunlar ve tüm topluluk eklentileri, örneğin unocss-preset-forms, yalnızca kurallara/varyantlara/preflight'lara güvenenler çalışacaktır.
@unocss/preset-typography	✅	Bu preset preflight'larınıza kümeler eklediği için, bu preset'i kullanırken prose sınıfını safelist'inize eklemelisiniz, aksi takdirde preflight'lar asla tetiklenmeyecektir. Bu preset'teki diğer tüm sınıflar, örneğin prose-pink, bileşen kapsamlı olabilir.
@unocss/preset-rem-to-px	✅	Bu ve yalnızca stil çıktısını değiştiren tüm preset'ler çalışacaktır.
@unocss/preset-attributify	-	Preset çalışmaz. Bunun yerine Svelte Scoped Vite eklentisinden önce unplugin-attributify-to-class Vite eklentisini kullanın (attributifyToClass({ include: [/\.svelte$/]}))
@unocss/preset-tagify	-	Özel çıkarıcılar ekleyen preset'ler çalışmaz. <text-red>Merhaba</text-red> öğesini <span class="text-red">Merhaba</span> öğesine dönüştürmek için bir ön işlemci oluşturun, ardından bağlantıyı buraya eklemek için bir PR oluşturun.

Diğer preset'ler için, geleneksel class="..." kullanımına güvenmiyorlarsa, önce bu sınıf adlarını class="..." özniteliğine ön işlem yapmanız gerekir. Typography'nin .prose sınıfı gibi preset eklemeleri ekliyorlarsa, preset eklemelerini tetikleyen sınıfları safelist'inize yerleştirmeniz gerekir.

Transformers support

Transformer'lar CSS dosyalarınız için (css|postcss|sass|scss|less|stylus|styl) desteklenir. Bunları kullanmak için, vite.config.ts'nizdeki cssFileTransformers seçeneğine transformer ekleyin:

import transformerDirectives from '@unocss/transformer-directives'

export default defineConfig({
  plugins: [
    UnoCSS({
      cssFileTransformers: [transformerDirectives()],
    }),
    sveltekit(),
  ],
})

INFO

Svelte Scoped'in çalışma şekli nedeniyle transformer'lar Svelte bileşenlerinde desteklenmez.

Scoped utility classes unleash creativity

Kapsamlı stiller kullanmak isteyebileceğiniz zamanlar hakkında bazı tavsiyeler: Büyük bir projenin hayatında .md:max-w-[50vw] gibi yalnızca bir kez kullanılan bir sınıf kullandığınızda ve global stil sayfanızın giderek daha büyük hale geldiğini hissettiğinizde krizip durduğunuz noktaya geldiyseniz, bu paketi deneyin. Tam olarak ihtiyacınız olan sınıfı kullanmakta tereddüt yaratıcılığı engeller. Elbette, stil bloğunda --at-apply: md:max-w-[50vw] kullanabilirsiniz ancak bu sıkıcı hale gelir ve bağlamdaki stiller kullanışlıdır. Ayrıca, projenize çok çeşitli simgeler dahil etmek istiyorsanız, bunları global stil sayfasına eklemenin ağırlığını hissetmeye başlayacaksınız. Her bileşen kendi stillerinin ve simgelerinin ağırlığını taşıdığında, her yeni eklemenin maliyet-fayda analizini yapmak zorunda kalmadan projenizi genişletmeye devam edebilirsiniz.

License

• MIT License © 2022-PRESENT Jacob Bowdoin