Svelte Scoped

প্রতিটি Svelte component-এর utility styles-এর জন্য generated CSS সরাসরি Svelte component-এর <style> block-এ রাখুন global CSS file-এর পরিবর্তে।

এই component:

<div class="mb-1" />

transform হবে:

<div class="uno-ei382o" />

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

কখন ব্যবহার করবেন

Use Case		Description	Package to Use
ছোট apps	❌	1টি global CSS file থাকা আরও সুবিধাজনক। Svelte/SvelteKit-এর জন্য নিয়মিত Vite plugin ব্যবহার করুন।	unocss/vite
বড় apps	✅	Svelte Scoped আপনাকে ক্রমবর্ধমান global CSS file এড়াতে সাহায্য করতে পারে।	@unocss/svelte-scoped/vite
Component library	✅	Generated styles সরাসরি built components-এ রাখা হয় consuming app-এর build pipeline-এ UnoCSS ব্যবহার করার প্রয়োজন ছাড়াই।	@unocss/svelte-scoped/preprocess

এটি কীভাবে কাজ করে

একটি নিয়মিত UnoCSS/Tailwind CSS setup utility styles proper ordering সহ একটি global CSS file-এ রাখে। বিপরীতে, Svelte Scoped আপনার styles অনেক arbitrarily ordered Svelte component CSS files জুড়ে বিতরণ করে। যাইহোক, এটি utility styles-কে global রাখতে হবে যাতে সেগুলি right-to-left এবং অন্যান্য use cases এর জন্য context aware হতে পারে। এটি একটি challenge উপস্থাপন করে যা Svelte-এর :global() wrapper ব্যবহার করে সমাধান করা হয় default Svelte CSS hashing method থেকে opt out করতে এবং পরিবর্তে filename + class name(s)-এর উপর ভিত্তি করে একটি hash ব্যবহার করে unique class names compile করতে যা style conflicts ছাড়াই global করা যেতে পারে।

Usage

যেহেতু Svelte Scoped আপনার utility class names rewrite করে, আপনি সেগুলি কোথায় লিখতে পারেন তা সীমিত:

Supported Syntax	Example
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 একটি project-এর জন্য drop-in replacement হিসাবে ডিজাইন করা হয়েছে যা utility styles ব্যবহার করে। যেমন, class attributes-এর মধ্যে পাওয়া expressions ও support করা হয় (যেমন <div class="mb-1 {foo ? 'mr-1' : 'mr-2'}" />) কিন্তু আমরা সুপারিশ করি যে আপনি class directive syntax ব্যবহার করুন moving forward। মনে রাখবেন যে আপনি যদি class names অন্য উপায়ে ব্যবহার করেছেন যেমন সেগুলি একটি <script> block-এ রাখা বা attributify mode ব্যবহার করা তাহলে Svelte Scoped ব্যবহার করার আগে আপনাকে অতিরিক্ত পদক্ষেপ নিতে হবে। আপনি safelist option ব্যবহার করতে পারেন এবং আরও tips-এর জন্য নিচের presets section check করুন।

Context aware

n যদিও styles আপনার app-এর Svelte components জুড়ে বিতরণ করা হয়, সেগুলি এখনও global classes এবং তাদের নির্দিষ্ট components-এর বাইরে পাওয়া elements-এর সাথে relationship-এ কাজ করবে। এখানে কিছু examples আছে:

Parent dependent

Classes যা parent component-এ পাওয়া attributes-এর উপর নির্ভরশীল:

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

হয়ে যায়:

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

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

Children influencing

আপনি 3টি children elements-এর মধ্যে space যোগ করতে পারেন যার মধ্যে কিছু আলাদা components-এ আছে:

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

হয়ে যায়:

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

Passing classes to child components

আপনি একটি component-এ একটি class prop যোগ করতে পারেন যাতে সেই component যেখানে consume করা হয় সেখানে custom classes pass করতে পারেন।

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

হয়ে যায়:

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

একটি receiving component-তে class implement করার একটি সহজ উপায় হল সেগুলি একটি element-এ {$$props.class} ব্যবহার করে রাখা যেমন div class="{$$props.class} foo bar" />।

Apply directives

আপনি আপনার <style> blocks-এর ভিতরে apply directives ব্যবহার করতে পারেন হয় --at-apply বা @apply বা applyVariables option ব্যবহার করে সেট করা একটি custom value দিয়ে।

Svelte Scoped এমনকি context dependent classes যেমন dark:text-white সঠিকভাবে handle করে যা নিয়মিত @unocss/transformer-directives package সঠিকভাবে handle করতে পারে না কারণ এটি বিশেষভাবে Svelte style blocks-এর জন্য built করা হয়নি। উদাহরণস্বরূপ, Svelte Scoped-এর সাথে এই component:

<div />

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

transform হবে:

<div />

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

rtl:ml-2 সঠিকভাবে কাজ করার জন্য, [dir="rtl"] selector-কে :global() wrapper-এর সাথে wrap করা হয় Svelte compiler-কে এটি স্বয়ংক্রিয়ভাবে strip out করতে রোধ করতে কারণ component-এর সেই attribute সহ কোনো element নেই। যাইহোক, div-কে :global() wrapper-এর মধ্যে include করা যাবে না কারণ সেই style তাহলে আপনার app-এর প্রতিটি div-কে affect করবে।

Other style block directives

theme() ব্যবহার করাও support করা হয়, কিন্তু @screen নয়।

Vite Plugin

Svelte বা SvelteKit apps-এ, generated styles সরাসরি আপনার Svelte components-এ inject করুন, global stylesheet-এ minimum necessary styles রেখে। Stackblitz-এ SvelteKit example check করুন:

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

Plugin যোগ করুন

আপনার Vite config-এ @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', // সমস্ত included reset options বা কীভাবে আপনার নিজের pass করতে হয় তার জন্য type definition দেখুন
      // ...other Svelte Scoped options
    }),
    sveltekit(),
  ],
})

Config file যোগ করুন

নিচে বর্ণনা অনুযায়ী আপনার uno.config.ts file setup করুন।

Global styles

প্রায় সমস্ত styles individual components-এ রাখা হয়, তবে এখনও কিছু যা global stylesheet-এ রাখতে হবে: preflights, safelist, এবং একটি optional reset (আপনি যদি injectReset option ব্যবহার করেন)।

আপনার <head> tag-এ %unocss-svelte-scoped.global% placeholder যোগ করুন। Svelte-এ এটি index.html। SvelteKit-এ এটি app.html-এ %sveltekit.head%-এর আগে হবে:

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

আপনি যদি SvelteKit ব্যবহার করেন, আপনাকে আপনার src/hooks.server.js file-এ transformPageChunk hook-এ নিম্নলিখিতও যোগ করতে হবে:

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

এই transformation অবশ্যই একটি file-এ থাকতে হবে যার path-এ hooks এবং server অন্তর্ভুক্ত (যেমন src/hooks.server.js, src/hooks.server.ts) কারণ svelte-scoped আপনার server hooks file-এ unocss_svelte_scoped_global_styles-কে আপনার global styles-এর সাথে replace করতে দেখতে থাকবে। অন্য file থেকে এই transformation import করবেন না, যেমন @sveltejs/kit/hooks-এর sequence ব্যবহার করার সময়।

একটি নিয়মিত Svelte project-এ, Vite-এর transformIndexHtml hook এটি স্বয়ংক্রিয়ভাবে করবে।

Svelte Preprocessor

একটি component library build করতে utility styles ব্যবহার করুন যা একটি companion CSS file include করার উপর নির্ভরশীল নয় generated styles সরাসরি built components-এ রাখার জন্য একটি preprocessor ব্যবহার করে। Stackblitz-এ SvelteKit Library example check করুন:

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

Preprocessor যোগ করুন

আপনার Svelte config-এ @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({
      // ... preprocessor options
    }),
  ],
  // other Svelte config
}

Development-এ class names combine করবেন না

যখন একটি normal app-এ Svelte Scoped ব্যবহার করা হয়, Vite plugin স্বয়ংক্রিয়ভাবে dev বনাম build detect করবে। Development-এ, classes আলাদা রাখা হবে এবং browser-এর developer tools-এ on/off toggle করার সুবিধার জন্য place-এ hash করা হবে। class="mb-1 mr-1" কিছুটা class="_mb-1_9hwi32 _mr-1_84jfy4-এ পরিণত হবে। Production-এ, এগুলি আপনার desired prefix ব্যবহার করে একটি single class name-এ compile করা হবে, default হিসাবে uno-, এবং filename + class names-এর উপর ভিত্তি করে একটি hash, যেমন class="uno-84dke3।

আপনি যদি preprocessor ব্যবহার করার সময় একই behavior চান, আপনাকে manually environment-এর উপর ভিত্তি করে combine option সেট করতে হবে। এটি করার একটি উপায় হল cross-env install করা এবং আপনার dev script-কে এতে update করা:

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

তারপর আপনার svelte.config.js adjust করুন:

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

Config file যোগ করুন

নিচে বর্ণনা অনুযায়ী আপনার uno.config.ts file setup করুন।

Preflights

Preprocessor ব্যবহার করার সময় আপনার কাছে option আছে preflights নির্দিষ্ট component(s)-এ include করতে যেখানে সেগুলি প্রয়োজন uno-preflights একটি style attribute হিসাবে যোগ করে।

<style uno-preflights></style>

যেকোনো special preflights যা একটি period দিয়ে শুরু হয়, যেমন .prose :where(a):not(:where(.not-prose, .not-prose *)), Svelte compiler-কে স্বয়ংক্রিয়ভাবে strip out করা থেকে রোধ করতে :global()-এর সাথে wrap করা হবে।

Individual components-এ preflights যোগ করা অপ্রয়োজনীয় যদি আপনার classes preflights-এর উপর নির্ভরশীল না হয় বা আপনার built components শুধুমাত্র apps-এ consume করা হয় যা already preflights include করে।

Safelist

Preprocessor ব্যবহার করার সময় আপনার কাছে option আছে একটি component-এ safelist classes include করতে uno-safelist একটি style attribute হিসাবে যোগ করে।

<style uno-safelist></style>

আপনার safelist styles Svelte compiler-কে স্বয়ংক্রিয়ভাবে strip out করা থেকে রোধ করতে :global()-এর সাথে wrap করা হবে।

Configuration

আপনার UnoCSS settings একটি uno.config.ts file-এ রাখুন:

import { defineConfig } from 'unocss'

export default defineConfig({
  // ...UnoCSS options
})

Extractors support করা হয় না normal UnoCSS global usage এবং Svelte Scoped usage-এর মধ্যে পার্থক্যের কারণে। Presets এবং Transformers support করা হয় নিচের sections-এ বর্ণনা অনুযায়ী। অন্যান্য সমস্ত বিবরণের জন্য Config File এবং Config reference দেখুন।

Presets support

কিছু necessary styles global stylesheet-এ থাকা এবং প্রয়োজনে প্রতিটি component-এ সবকিছু অন্তর্ভুক্ত করার প্রকৃতির কারণে, presets case-by-case basis-এ handle করতে হবে:

Preset	Supported	Notes
@unocss/preset-uno, @unocss/preset-mini, @unocss/preset-wind3, @unocss/preset-icons, @unocss/web-fonts	✅	এগুলি এবং সমস্ত community plugins, যেমন unocss-preset-forms, যা শুধুমাত্র rules/variants/preflights-এর উপর নির্ভরশীল কাজ করবে।
@unocss/preset-typography	✅	এই preset কীভাবে আপনার preflights-এ rulesets যোগ করে তার কারণে আপনাকে অবশ্যই এই preset ব্যবহার করার সময় prose class-কে আপনার safelist-এ যোগ করতে হবে, অন্যথায় preflights কখনই trigger হবে না। এই preset থেকে অন্যান্য সমস্ত classes, যেমন prose-pink, component scoped হতে পারে।
@unocss/preset-rem-to-px	✅	এটি এবং এটির মতো সমস্ত presets যা শুধুমাত্র style output modify করে কাজ করবে।
@unocss/preset-attributify	-	Preset কাজ করবে না। পরিবর্তে Svelte Scoped Vite plugin-এর আগে unplugin-attributify-to-class Vite plugin (attributifyToClass({ include: [/\.svelte$/]})) ব্যবহার করুন
@unocss/preset-tagify	-	Custom extractors যোগ করা presets কাজ করবে না। <text-red>Hi</text-red>-কে <span class="text-red">Hi</span>-এ রূপান্তর করতে একটি preprocessor তৈরি করুন, তারপর এখানে link যোগ করতে একটি PR তৈরি করুন।

অন্যান্য presets-এর জন্য, যদি সেগুলি traditional class="..." usage-এর উপর নির্ভরশীল না হয় তাহলে আপনাকে প্রথমে সেই class names-কে class="..." attribute-এ preprocess করতে হবে। যদি সেগুলি typography-এর .prose class-এর মতো presets যোগ করে তাহলে আপনাকে preset additions trigger করতে classes যা আপনার safelist-এ রাখতে হবে।

Transformers support

Transformers আপনার CSS files (css|postcss|sass|scss|less|stylus|styl)-এর জন্য support করা হয়। সেগুলি ব্যবহার করতে, আপনার vite.config.ts-এ cssFileTransformers option-এ transformer যোগ করুন:

import transformerDirectives from '@unocss/transformer-directives'

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

INFO

Svelte Scoped কীভাবে কাজ করে তার কারণে Svelte components-এ Transformers support করা হয় না।

Scoped utility classes unleash creativity

কিছু পরামর্শ কখন আপনি scoped styles ব্যবহার করতে চাইতে পারেন: আপনি যদি একটি বড় project-এর জীবনে সেই point-এ এসে থাকেন যখন প্রতিবার আপনি একটি class যেমন .md:max-w-[50vw] ব্যবহার করেন যা আপনি জানেন শুধুমাত্র একবার ব্যবহার করা হয় আপনি cringe করেন কারণ আপনি অনুভব করেন আপনার global style sheet আরও বড় এবং বড় হচ্ছে, তাহলে এই package-টি try করুন। ঠিক ঠিক class ব্যবহার করতে অনীহা creativity inhibit করে। অবশ্যই, আপনি style block-এ --at-apply: md:max-w-[50vw] ব্যবহার করতে পারেন কিন্তু এটি tedious হয় এবং context-এ styles দরকারী। তাছাড়া, আপনি যদি আপনার project-এ একটি great variety of icons include করতে চান, আপনি global stylesheet-এ সেগুলি যোগ করার weight অনুভব করতে শুরু করবেন। যখন প্রতিটি component তার নিজের styles এবং icons-এর weight বহন করে আপনি প্রতিটি নতুন addition-এর cost benefit analyze না করে আপনার project expand করতে পারেন।

License

• MIT License © 2022-PRESENT Jacob Bowdoin