Svelte Scoped

प्रत्येक Svelte कंपोनेंट की यूटिलिटी स्टाइल्स के लिए जेनरेट की गई CSS को ग्लोबल CSS फ़ाइल में रखने के बजाय सीधे Svelte कंपोनेंट के <style> ब्लॉक में रखें।

यह कंपोनेंट:

svelte

<div class="mb-1" />

इसमें रूपांतरित होता है:

svelte

<div class="uno-ei382o" />

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

कब उपयोग करें

उपयोग का मामला		विवरण	उपयोग करने के लिए पैकेज
छोटे ऐप्स	❌	1 ग्लोबल CSS फ़ाइल होना अधिक सुविधाजनक है। Svelte/SvelteKit के लिए नियमित Vite प्लगइन का उपयोग करें।	unocss/vite
बड़े ऐप्स	✅	Svelte Scoped आपको लगातार बढ़ती ग्लोबल CSS फ़ाइल से बचने में मदद कर सकता है।	@unocss/svelte-scoped/vite
कंपोनेंट लाइब्रेरी	✅	जेनरेट की गई स्टाइल्स सीधे बिल्ट कंपोनेंट्स में रखी जाती हैं, बिना किसी उपभोक्ता ऐप के बिल्ड पाइपलाइन में UnoCSS का उपयोग करने की आवश्यकता के बिना।	@unocss/svelte-scoped/preprocess

यह कैसे काम करता है

एक नियमित UnoCSS/Tailwind CSS सेटअप यूटिलिटी स्टाइल्स को उचित क्रम के साथ एक ग्लोबल CSS फ़ाइल में रखता है। इसके विपरीत, Svelte Scoped आपकी स्टाइल्स को कई मनमाने क्रम के Svelte कंपोनेंट CSS फ़ाइलों में वितरित करता है। हालांकि, इसे यूटिलिटी स्टाइल्स को ग्लोबल रखना चाहिए ताकि वे दाएं से बाएं और नीचे सूचीबद्ध अन्य उपयोग के मामलों की आवश्यकता के अनुसार संदर्भ जागरूक हो सकें। यह एक चुनौती प्रस्तुत करता है जो Svelte के :global() रैपर का उपयोग करके डिफ़ॉल्ट Svelte CSS हैशिंग विधि से बाहर निकलने के लिए हल की जाती है और इसके बजाय फ़ाइलनाम + क्लास नाम(ों) पर आधारित हैश का उपयोग करके अद्वितीय क्लास नाम कंपाइल किए जाते हैं जो स्टाइल संघर्ष के बिना ग्लोबल बनाए जा सकते हैं।

उपयोग

क्योंकि Svelte Scoped आपके यूटिलिटी क्लास नामों को फिर से लिखता है, आप उन्हें कहाँ लिख सकते हैं इसमें सीमित हैं:

समर्थित सिंटैक्स	उदाहरण
क्लास एट्रिब्यूट	`<div class="mb-1" />`
क्लास निर्देश	`<div class:mb-1={condition} />`
क्लास निर्देश शॉर्टहैंड	`<div class:logo />`
क्लास प्रॉप	`<Button class="mb-1" />`

Svelte Scoped को यूटिलिटी स्टाइल्स का उपयोग करने वाले प्रोजेक्ट के लिए ड्रॉप-इन रिप्लेसमेंट के रूप में डिज़ाइन किया गया है। जैसे, क्लास एट्रिब्यूट्स के भीतर पाए जाने वाले एक्सप्रेशन भी समर्थित हैं (उदाहरण के लिए <div class="mb-1 {foo ? 'mr-1' : 'mr-2'}" />) लेकिन हम आपको आगे बढ़ते समय क्लास निर्देश सिंटैक्स का उपयोग करने की सलाह देते हैं। यह भी नोट करें कि यदि आपने अन्य तरीकों से क्लास नामों का उपयोग किया है जैसे उन्हें <script> ब्लॉक में रखना या एट्रिब्यूटिफ़ाई मोड का उपयोग करना तो आपको Svelte Scoped का उपयोग करने से पहले अतिरिक्त कदम उठाने होंगे। आप safelist विकल्प का उपयोग कर सकते हैं और अधिक युक्तियों के लिए नीचे प्रीसेट्स अनुभाग की जांच भी कर सकते हैं।

संदर्भ जागरूक

भले ही स्टाइल्स आपके ऐप के Svelte कंपोनेंट्स में वितरित होती हैं, वे अभी भी ग्लोबल क्लासेस हैं और उनके विशिष्ट कंपोनेंट्स के बाहर पाए जाने वाले तत्वों के संबंध में काम करेंगे। यहाँ कुछ उदाहरण दिए गए हैं:

पैरेंट पर निर्भर

पैरेंट कंपोनेंट में पाए जाने वाले एट्रिब्यूट्स पर निर्भर क्लासेस:

svelte

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

इसमें बदल जाता है:

svelte

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

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

बच्चे प्रभावित

आप 3 बच्चे तत्वों के बीच जगह जोड़ सकते हैं, जिनमें से कुछ अलग-अलग कंपोनेंट्स में हैं:

svelte

<div class="space-x-1">
  <div>Status: online</div>
  <Button>FAQ</Button>
  <Button>Login</Button>
</div>

इसमें बदल जाता है:

svelte

<div class="uno-7haszz">
  <div>Status: online</div>
  <Button>FAQ</Button>
  <Button>Login</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>

बच्चे कंपोनेंट्स को क्लासेस पास करना

आप एक कंपोनेंट में class प्रॉप जोड़ सकते हैं ताकि जहाँ भी वह कंपोनेंट उपभोग किया जाए, कस्टम क्लासेस पास करने की अनुमति दी जा सके।

svelte

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

इसमें बदल जाता है:

svelte

<Button class="uno-4hshza">Login</Button>

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

प्राप्त करने वाले कंपोनेंट में क्लास को लागू करने का एक आसान तरीका यह होगा कि उन्हें {$$props.class} का उपयोग करके किसी तत्व पर रखा जाए जैसे div class="{$$props.class} foo bar" />।

निर्देश लागू करें

आप अपने <style> ब्लॉक्स के अंदर --at-apply या @apply या applyVariables विकल्प का उपयोग करके सेट किए गए कस्टम मान के साथ निर्देश लागू कर सकते हैं।

Svelte Scoped यहां तक कि संदर्भ निर्भर क्लासेस जैसे dark:text-white को भी सही ढंग से संभालता है जिसे नियमित @unocss/transformer-directives पैकेज सही ढंग से संभाल नहीं सकता है क्योंकि यह विशेष रूप से Svelte स्टाइल ब्लॉक्स के लिए नहीं बनाया गया था। उदाहरण के लिए, Svelte Scoped के साथ यह कंपोनेंट:

svelte

<div />

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

इसमें रूपांतरित किया जाएगा:

svelte

<div />

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

rtl:ml-2 को सही ढंग से काम करने के लिए, [dir="rtl"] सेलेक्टर को :global() के साथ लपेटा जाता है ताकि Svelte कंपाइलर को उसे स्वचालित रूप से हटाने से रोका जा सके क्योंकि कंपोनेंट में उस एट्रिब्यूट वाला कोई तत्व नहीं है। हालांकि, div को :global() रैपर में शामिल नहीं किया जा सकता है क्योंकि वह स्टाइल तब आपके ऐप में हर div को प्रभावित करेगी।

अन्य स्टाइल ब्लॉक निर्देश

theme() का उपयोग भी समर्थित है, लेकिन @screen नहीं है।

Vite प्लगइन

Svelte या SvelteKit ऐप्स में, जेनरेट की गई स्टाइल्स को सीधे आपके Svelte कंपोनेंट्स में इंजेक्ट करें, जबकि न्यूनतम आवश्यक स्टाइल्स को ग्लोबल स्टाइलशीट में रखें। Stackblitz में SvelteKit उदाहरण देखें:

इंस्टॉल

pnpmyarnnpmbun

bash

pnpm add -D unocss @unocss/svelte-scoped

bash

yarn add -D unocss @unocss/svelte-scoped

bash

npm install -D unocss @unocss/svelte-scoped

bash

bun add -D unocss @unocss/svelte-scoped

प्लगइन जोड़ें

अपने Vite कॉन्फ़िग में @unocss/svelte-scoped/vite जोड़ें:

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', // सभी शामिल रीसेट विकल्पों के लिए या अपना स्वयं कैसे पास करें, टाइप परिभाषा देखें
      // ...अन्य Svelte Scoped विकल्प
    }),
    sveltekit(),
  ],
})

कॉन्फ़िग फ़ाइल जोड़ें

अपनी uno.config.ts फ़ाइल को नीचे बताए अनुसार सेटअप करें।

ग्लोबल स्टाइल्स

जबकि लगभग सभी स्टाइल्स व्यक्तिगत कंपोनेंट्स में रखी जाती हैं, फिर भी कुछ ऐसे हैं जिन्हें ग्लोबल स्टाइलशीट में रखा जाना चाहिए: प्रीफ्लाइट्स, सेफलिस्ट, और एक वैकल्पिक रीसेट (यदि आप injectReset विकल्प का उपयोग करते हैं)।

%unocss-svelte-scoped.global% प्लेसहोल्डर को अपने <head> टैग में जोड़ें। Svelte में यह index.html है। SvelteKit में यह app.html में %sveltekit.head% से पहले होगा:

html

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

यदि SvelteKit का उपयोग कर रहे हैं, तो आपको अपनी src/hooks.server.js फ़ाइल में transformPageChunk हुक में निम्न जोड़ना भी होगा:

/** @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
}

यह रूपांतरण एक ऐसी फ़ाइल में होना चाहिए जिसका पथ में hooks और server शामिल हों (उदाहरण के लिए src/hooks.server.js, src/hooks.server.ts) क्योंकि svelte-scoped आपकी ग्लोबल स्टाइल्स के साथ unocss_svelte_scoped_global_styles को बदलने के लिए आपकी सर्वर हुक्स फ़ाइल में देख रहा होगा। सुनिश्चित करें कि आप इस रूपांतरण को किसी अन्य फ़ाइल से आयात न करें, जैसे कि जब आप @sveltejs/kit/hooks से sequence का उपयोग करते हैं।

एक नियमित Svelte प्रोजेक्ट में, Vite का transformIndexHtml हुक यह स्वचालित रूप से करेगा।

Svelte प्रीप्रोसेसर

यूटिलिटी स्टाइल्स का उपयोग करके एक कंपोनेंट लाइब्रेरी बनाएं जो एक साथी CSS फ़ाइल को शामिल करने पर निर्भर न हो, एक प्रीप्रोसेसर का उपयोग करके जेनरेट की गई स्टाइल्स को सीधे बिल्ट कंपोनेंट्स में रखें। Stackblitz में SvelteKit लाइब्रेरी उदाहरण देखें:

इंस्टॉल

pnpmyarnnpmbun

bash

pnpm add -D unocss @unocss/svelte-scoped

bash

yarn add -D unocss @unocss/svelte-scoped

bash

npm install -D unocss @unocss/svelte-scoped

bash

bun add -D unocss @unocss/svelte-scoped

प्रीप्रोसेसर जोड़ें

अपने Svelte कॉन्फ़िग में @unocss/svelte-scoped/preprocess जोड़ें:

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({
      // ... प्रीप्रोसेसर विकल्प
    }),
  ],
  // अन्य Svelte कॉन्फ़िग
}

विकास में क्लास नामों को संयोजित न करें

जब किसी सामान्य ऐप में Svelte Scoped का उपयोग किया जाता है, तो Vite प्लगइन स्वचालित रूप से dev बनाम build का पता लगाएगा। विकास में, आपके ब्राउज़र के डेवलपर टूल्स में ऑन/ऑफ टॉगल करने में आसानी के लिए क्लासेस को अलग और हैश किया जाएगा। class="mb-1 mr-1" कुछ इस तरह class="_mb-1_9hwi32 _mr-1_84jfy4" में बदल जाएगा। प्रोडक्शन में, ये आपके इच्छित प्रीफ़िक्स, डिफ़ॉल्ट रूप से uno-, और फ़ाइलनाम + क्लास नामों पर आधारित हैश का उपयोग करके एक ही क्लास नाम में कंपाइल किए जाएंगे, उदाहरण के लिए class="uno-84dke3"।

यदि आप प्रीप्रोसेसर का उपयोग करते समय यही व्यवहार चाहते हैं, तो आपको मैन्युअल रूप से वातावरण के आधार पर combine विकल्प सेट करना होगा। ऐसा करने का एक तरीका यह है कि cross-env इंस्टॉल करें और अपनी dev स्क्रिप्ट को इसमें अपडेट करें:

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

फिर अपना svelte.config.js समायोजित करें:

diff

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

कॉन्फ़िग फ़ाइल जोड़ें

अपनी uno.config.ts फ़ाइल को नीचे बताए अनुसार सेटअप करें।

प्रीफ्लाइट्स

प्रीप्रोसेसर का उपयोग करते समय आपके पास uno-preflights को एक स्टाइल एट्रिब्यूट के रूप में जोड़कर उन विशिष्ट कंपोनेंट(ों) में प्रीफ्लाइट्स को शामिल करने का विकल्प होता है जहाँ उनकी आवश्यकता होती है।

html

<style uno-preflights></style>

कोई भी विशेष प्रीफ्लाइट्स जो एक पीरियड से शुरू होती हैं, जैसे .prose :where(a):not(:where(.not-prose, .not-prose *)), को Svelte कंपाइलर द्वारा स्वचालित रूप से हटाए जाने से बचने के लिए :global() के साथ लपेटा जाएगा।

यदि आपकी क्लासेस प्रीफ्लाइट्स पर निर्भर नहीं हैं या आपके बिल्ट कंपोनेंट्स केवल उन ऐप्स में ही उपभोग किए जा रहे हैं जिनमें पहले से ही प्रीफ्लाइट्स शामिल हैं, तो व्यक्तिगत कंपोनेंट्स में प्रीफ्लाइट्स जोड़ना अनावश्यक है।

सेफलिस्ट

प्रीप्रोसेसर का उपयोग करते समय आपके पास uno-safelist को एक स्टाइल एट्रिब्यूट के रूप में जोड़कर किसी कंपोनेंट में सेफलिस्ट क्लासेस को शामिल करने का विकल्प होता है।

html

<style uno-safelist></style>

आपकी सेफलिस्ट स्टाइल्स को Svelte कंपाइलर द्वारा स्वचालित रूप से हटाए जाने से बचने के लिए :global() के साथ लपेटा जाएगा।

कॉन्फ़िगरेशन

अपने UnoCSS सेटिंग्स को एक uno.config.ts फ़ाइल में रखें:

import { defineConfig } from 'unocss'

export default defineConfig({
  // ...UnoCSS विकल्प
})

सामान्य UnoCSS ग्लोबल उपयोग और Svelte Scoped उपयोग के बीच अंतर के कारण एक्सट्रैक्टर्स समर्थित नहीं हैं। प्रीसेट्स और ट्रांसफॉर्मर्स निम्नलिखित अनुभागों में वर्णित अनुसार समर्थित हैं। अन्य सभी विवरणों के लिए कॉन्फ़िग फ़ाइल और कॉन्फ़िग संदर्भ देखें।

प्रीसेट्स समर्थन

कुछ आवश्यक स्टाइल्स को ग्लोबल स्टाइलशीट में रखने और बाकी सब को प्रत्येक कंपोनेंट में रखने की प्रकृति के कारण, प्रीसेट्स को केस-बाय-केस आधार पर संभालने की आवश्यकता होती है:

प्रीसेट	समर्थित	नोट्स
~~@unocss/preset-uno~~, @unocss/preset-mini, @unocss/preset-wind3, @unocss/preset-icons, @unocss/web-fonts	✅	ये और सभी कम्युनिटी प्लगइन्स, उदाहरण के लिए unocss-preset-forms, जो केवल नियमों/वेरिएंट्स/प्रीफ्लाइट्स पर निर्भर हैं, काम करेंगे।
@unocss/preset-typography	✅	इस प्रीसेट द्वारा आपकी प्रीफ्लाइट्स में रूलसेट जोड़ने के तरीके के कारण आपको इस प्रीसेट का उपयोग करते समय `prose` क्लास को अपनी सेफलिस्ट में जोड़ना होगा, अन्यथा प्रीफ्लाइट्स कभी ट्रिगर नहीं होंगे। इस प्रीसेट की अन्य सभी क्लासेस, उदाहरण के लिए `prose-pink`, कंपोनेंट स्कोप्ड हो सकती हैं।
@unocss/preset-rem-to-px	✅	ये और सभी ऐसे प्रीसेट्स जो केवल स्टाइल आउटपुट को संशोधित करते हैं, काम करेंगे।
@unocss/preset-attributify	-	प्रीसेट काम नहीं करेगा। इसके बजाय Svelte Scoped Vite प्लगइन से पहले unplugin-attributify-to-class Vite प्लगइन (`attributifyToClass({ include: [/\.svelte$/]})`) का उपयोग करें
@unocss/preset-tagify	-	जो प्रीसेट्स कस्टम एक्सट्रैक्टर्स जोड़ते हैं वे काम नहीं करेंगे। `<text-red>Hi</text-red>` को `<span class="text-red">Hi</span>` में बदलने के लिए एक प्रीप्रोसेसर बनाएं, फिर यहाँ लिंक जोड़ने के लिए एक PR बनाएं।

अन्य प्रीसेट्स के लिए, यदि वे पारंपरिक class="..." उपयोग पर निर्भर नहीं हैं तो आपको पहले उन क्लास नामों को class="..." एट्रिब्यूट में प्रीप्रोसेस करने की आवश्यकता होगी। यदि वे टाइपोग्राफी की .prose क्लास जैसे प्रीसेट जोड़ते हैं तो आपको उन क्लासेस को अपनी सेफलिस्ट में रखने की आवश्यकता होगी जो प्रीसेट जोड़ों को ट्रिगर करती हैं।

ट्रांसफॉर्मर्स समर्थन

import transformerDirectives from '@unocss/transformer-directives'

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

INFO

Svelte Scoped के काम करने के तरीके के कारण Svelte कंपोनेंट्स में ट्रांसफॉर्मर्स समर्थित नहीं हैं।

स्कोप्ड यूटिलिटी क्लासेस रचनात्मकता को उजागर करती हैं

कब आपको स्कोप्ड स्टाइल्स का उपयोग करना चाहिए इस पर कुछ सलाह: यदि आप एक बड़े प्रोजेक्ट के जीवन में उस बिंदु पर आ गए हैं जब हर बार जब आप .md:max-w-[50vw] जैसी किसी क्लास का उपयोग करते हैं जो आपको पता है कि केवल एक बार उपयोग की जाती है तो आप चिंतित होते हैं क्योंकि आपको लगता है कि आपकी ग्लोबल स्टाइल शीट का आकार बड़ा और बड़ा होता जा रहा है, तो इस पैकेज को आज़माएं। बिल्कुल वही क्लास जिसकी आपको आवश्यकता है उसका उपयोग करने में संकोच रचनात्मकता को बाधित करता है। निश्चित रूप से, आप स्टाइल ब्लॉक में --at-apply: md:max-w-[50vw] का उपयोग कर सकते हैं लेकिन वह थका देने वाला हो जाता है और संदर्भ में स्टाइल्स उपयोगी होते हैं। इसके अलावा, यदि आप अपने प्रोजेक्ट में विभिन्न प्रकार के आइकन शामिल करना चाहते हैं, तो आपको उन्हें ग्लोबल स्टाइलशीट में जोड़ने का वजन महसूस होने लगेगा। जब प्रत्येक कंपोनेंट अपनी स्वयं की स्टाइल्स और आइकन का वजन वहन करता है तो आप प्रत्येक नए जोड़ के लागत लाभ का विश्लेषण किए बिना अपने प्रोजेक्ट का विस्तार करना जारी रख सकते हैं।

Svelte Scoped ​

कब उपयोग करें ​

यह कैसे काम करता है ​

उपयोग ​

संदर्भ जागरूक ​

पैरेंट पर निर्भर ​

बच्चे प्रभावित ​

बच्चे कंपोनेंट्स को क्लासेस पास करना ​

निर्देश लागू करें ​

अन्य स्टाइल ब्लॉक निर्देश ​

Vite प्लगइन ​

इंस्टॉल ​

प्लगइन जोड़ें ​

कॉन्फ़िग फ़ाइल जोड़ें ​

ग्लोबल स्टाइल्स ​

Svelte प्रीप्रोसेसर ​

इंस्टॉल ​

प्रीप्रोसेसर जोड़ें ​

विकास में क्लास नामों को संयोजित न करें ​

कॉन्फ़िग फ़ाइल जोड़ें ​

प्रीफ्लाइट्स ​

सेफलिस्ट ​

कॉन्फ़िगरेशन ​

प्रीसेट्स समर्थन ​

ट्रांसफॉर्मर्स समर्थन ​

स्कोप्ड यूटिलिटी क्लासेस रचनात्मकता को उजागर करती हैं ​

लाइसेंस ​

Svelte Scoped

कब उपयोग करें

यह कैसे काम करता है

उपयोग

संदर्भ जागरूक

पैरेंट पर निर्भर

बच्चे प्रभावित

बच्चे कंपोनेंट्स को क्लासेस पास करना

निर्देश लागू करें

अन्य स्टाइल ब्लॉक निर्देश

Vite प्लगइन

इंस्टॉल

प्लगइन जोड़ें

कॉन्फ़िग फ़ाइल जोड़ें

ग्लोबल स्टाइल्स

Svelte प्रीप्रोसेसर

इंस्टॉल

प्रीप्रोसेसर जोड़ें

विकास में क्लास नामों को संयोजित न करें

कॉन्फ़िग फ़ाइल जोड़ें

प्रीफ्लाइट्स

सेफलिस्ट

कॉन्फ़िगरेशन

प्रीसेट्स समर्थन

ट्रांसफॉर्मर्स समर्थन

स्कोप्ड यूटिलिटी क्लासेस रचनात्मकता को उजागर करती हैं

लाइसेंस