Vite Plugin

Vite plugin unocss package-এর সাথে আসে।

ইনস্টলেশন

pnpm

pnpm add -D unocss

yarn

yarn add -D unocss

npm

npm install -D unocss

bun

bun add -D unocss

Plugin install করুন:

import UnoCSS from 'unocss/vite'
import { defineConfig } from 'vite'

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

একটি uno.config.ts file তৈরি করুন:

import { defineConfig } from 'unocss'

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

আপনার main entry-তে virtual:uno.css যোগ করুন:

import 'virtual:uno.css'

Modes

Vite plugin বিভিন্ন behaviors সক্ষম করার জন্য modes-এর একটি সেট নিয়ে আসে।

global (default)

এটি plugin-এর default mode: এই mode-এ আপনাকে আপনার entry point-এ uno.css import যোগ করতে হবে।

এই mode build এবং dev এর জন্য HMR support সহ Vite plugins-এর একটি সেট সক্ষম করে।

Generated css হবে একটি global stylesheet যা index.html-এ injected হবে।

vue-scoped

এই mode generated CSS inject করবে Vue SFCs <style scoped>-এ isolation-এর জন্য।

svelte-scoped

svelte-scoped mode তার নিজস্ব package-এ সরানো হয়েছে, দেখুন @unocss/svelte-scoped/vite।

shadow-dom

যেহেতু Web Components Shadow DOM ব্যবহার করে, global stylesheet থেকে সরাসরি content style করার কোনো উপায় নেই (যদি না আপনি CSS custom properties ব্যবহার করেন, সেগুলি Shadow DOM-এ penetrate করবে), আপনাকে plugin দ্বারা generated CSS Shadow DOM style-এ inline করতে হবে।

Generated CSS inline করতে, আপনাকে শুধুমাত্র plugin mode shadow-dom-এ configure করতে হবে এবং প্রতিটি web component style CSS block-এ @unocss-placeholder magic placeholder অন্তর্ভুক্ত করতে হবে। আপনি যদি Vue SFCs-এ আপনার Web Components define করছেন এবং UnoCSS-এর পাশাপাশি custom styles define করতে চান, আপনি IDE-এ syntax errors এড়াতে placeholder-কে একটি CSS comment-এ wrap করতে পারেন।

per-module (experimental)

এই mode প্রতিটি module-এর জন্য একটি CSS sheet generate করবে, scoped হতে পারে।

dist-chunk (experimental)

এই mode প্রতিটি code chunk-এর জন্য build-এ একটি CSS sheet generate করবে, MPA-এর জন্য দুর্দান্ত।

DevTools-এ Classes সম্পাদনা করুন

"On-demand" এর সীমাবদ্ধতার কারণে যেখানে DevTools আপনার source code-এ এখনও ব্যবহার করেননি এমন classes জানে না। তাই আপনি যদি DevTools-এ সরাসরি classes পরিবর্তন করে জিনিসগুলি কীভাবে কাজ করে তা দেখতে চান, আপনার main entry-এ নিম্নলিখিত lines যোগ করুন।

import 'uno.css'
import 'virtual:unocss-devtools'

WARNING

দয়া করে এটি সতর্কতার সাথে ব্যবহার করুন, পেছনে আমরা class changes detect করতে MutationObserver ব্যবহার করি। এর মানে হল শুধুমাত্র আপনার manual changes নয়, বরং আপনার scripts দ্বারা করা changes-ও detect হবে এবং stylesheet-এ অন্তর্ভুক্ত হবে। এটি script tags-এ কিছু logic-এর উপর ভিত্তি করে dynamic classes যোগ করলে dev এবং production build-এর মধ্যে কিছু misalignment সৃষ্টি করতে পারে। আমরা সুপারিশ করি যে আপনার dynamic parts safelist-এ যোগ করুন বা সম্ভব হলে আপনার production build-এর জন্য UI regression tests setup করুন।

Frameworks

কিছু UI/App frameworks-এ কিছু caveats আছে যা এটিকে কাজ করতে হলে fix করতে হবে, আপনি যদি নিম্নলিখিত frameworks-এর মধ্যে একটি ব্যবহার করছেন, শুধুমাত্র suggestions apply করুন।

VanillaJS / TypeScript

VanillaJS বা TypeScript ব্যবহার করার সময়, আপনাকে js এবং ts files extensions যোগ করতে হবে যাতে UnoCSS content read এবং parse করতে পারে, ডিফল্টভাবে js এবং ts files excluded, Extracting from Build Tools Pipeline section check করুন।

React

আপনি যদি @vitejs/plugin-react ব্যবহার করছেন:

import React from '@vitejs/plugin-react'
import UnoCSS from 'unocss/vite'

export default {
  plugins: [
    React(),
    UnoCSS(),
  ],
}

আপনি যদি @unocss/preset-attributify ব্যবহার করছেন আপনাকে build script থেকে tsc remove করা উচিত।

আপনি যদি @vitejs/plugin-react কে @unocss/preset-attributify-এর সাথে ব্যবহার করছেন, আপনাকে plugin-টি @vitejs/plugin-react-এর আগে যোগ করতে হবে।

import React from '@vitejs/plugin-react'
import UnoCSS from 'unocss/vite'

export default {
  plugins: [
    UnoCSS(),
    React(),
  ],
}

আপনি দুটি plugins ব্যবহার করে একটি React example project পেতে পারেন examples/vite-react directory-এ, package.json-এ scripts এবং Vite config file check করুন।

Preact

আপনি যদি @preact/preset-vite ব্যবহার করেন:

// vite.config.js
import Preact from '@preact/preset-vite'
import UnoCSS from 'unocss/vite'

export default {
  plugins: [
    UnoCSS(),
    Preact(),
  ],
}

অথবা আপনি যদি @prefresh/vite ব্যবহার করেন:

// vite.config.js
import Prefresh from '@prefresh/vite'
import UnoCSS from 'unocss/vite'

export default {
  plugins: [
    UnoCSS(),
    Prefresh(),
  ],
}

আপনি যদি @unocss/preset-attributify ব্যবহার করেন, আপনাকে build script থেকে tsc remove করা উচিত।

আপনি দুটি plugins ব্যবহার করে একটি Preact example project পেতে পারেন examples/vite-preact directory-এ, package.json-এ scripts এবং Vite config file check করুন।

Svelte

Plugin অবশ্যই @sveltejs/vite-plugin-svelte-এর আগে যোগ করতে হবে।

class:foo এবং class:foo={bar} support করতে, plugin যোগ করুন এবং extractors option-এ extractorSvelte configure করুন।

আপনি class:-এর জন্য simple rules ব্যবহার করতে পারেন যেমন class:bg-red-500={foo} অথবা একাধিক rules সহ shortcuts ব্যবহার করতে পারেন, নিচে linked example project-এ src/App.svelte দেখুন।

// vite.config.js
import { svelte } from '@sveltejs/vite-plugin-svelte'
import extractorSvelte from '@unocss/extractor-svelte'
import UnoCSS from 'unocss/vite'

export default {
  plugins: [
    UnoCSS({
      extractors: [
        extractorSvelte(),
      ],
      /* more options */
    }),
    svelte(),
  ],
}

Sveltekit

class:foo এবং class:foo={bar} support করতে, plugin যোগ করুন এবং extractors option-এ extractorSvelte configure করুন।

আপনি class:-এর জন্য simple rules ব্যবহার করতে পারেন যেমন class:bg-red-500={foo} অথবা একাধিক rules সহ shortcuts ব্যবহার করতে পারেন, নিচে linked example project-এ src/routes/+layout.svelte দেখুন।

// vite.config.js
import { sveltekit } from '@sveltejs/kit/vite'
import extractorSvelte from '@unocss/extractor-svelte'
import UnoCSS from 'unocss/vite'

/** @type {import('vite').UserConfig} */
const config = {
  plugins: [
    UnoCSS({
      extractors: [
        extractorSvelte(),
      ],
      /* more options */
    }),
    sveltekit(),
  ],
}

Web Components

Web components-এর সাথে কাজ করার জন্য আপনাকে plugin-এ shadow-dom mode enable করতে হবে।

uno.css এর জন্য import remove করতে ভুলবেন না কারণ shadow-dom mode এটি expose করবে না এবং application কাজ করবে না।

import UnoCSS from 'unocss/vite'

export default {
  plugins: [
    UnoCSS({
      mode: 'shadow-dom',
      /* more options */
    }),
  ],
}

প্রতিটি web component-এ এর style CSS block-এ শুধুমাত্র @unocss-placeholder যোগ করুন:

const template = document.createElement('template')
template.innerHTML = `
<style>
:host {...}
@unocss-placeholder
</style>
<div class="m-1em">
...
</div>
`

আপনি যদি Lit ব্যবহার করছেন:

@customElement('my-element')
export class MyElement extends LitElement {
  static styles = css`
    :host {...}
    @unocss-placeholder
  `
  // ...
}

আপনি একটি Web Components example project পেতে পারেন examples/vite-lit directory-এ।

::part built-in support

আপনি ::part ব্যবহার করতে পারেন কারণ plugin shortcuts ব্যবহার করে এবং preset-mini থেকে part-[<part-name>]:<rule|shortcut> rule ব্যবহার করে এটি support করে, উদাহরণস্বরূপ simple rules-এর সাথে এটি ব্যবহার করা যেমন part-[<part-name>]:bg-green-500 অথবা কিছু shortcut ব্যবহার করা যেতে পারে: নিচে linked example project-এ src/my-element.ts check করুন।

part-[<part-name>]:<rule|shortcut> শুধুমাত্র এই plugin-এর সাথে shadow-dom mode ব্যবহার করে কাজ করবে।

Plugin same web component-এ একাধিক parts এবং distinct web components-এ একই parts-এর জন্য collisions এড়াতে nth-of-type ব্যবহার করে, আপনাকে এটি নিয়ে চিন্তা করতে হবে না, plugin আপনার জন্য যত্ন নেবে।

// vite.config.js
import UnoCSS from 'unocss/vite'

export default {
  plugins: [
    UnoCSS({
      mode: 'shadow-dom',
      shortcuts: [
        { 'cool-blue': 'bg-blue-500 text-white' },
        { 'cool-green': 'bg-green-500 text-black' },
      ],
      /* more options */
    }),
  ],
}

তারপর আপনার web components-এ:

// my-container-wc.ts
const template = document.createElement('template')
template.innerHTML = `
<style>
@unocss-placeholder
</style>
<my-wc-with-parts class="part-[cool-part]:cool-blue part-[another-cool-part]:cool-green">...</my-wc-with-parts>
`

// my-wc-with-parts.ts
const template = document.createElement('template')
template.innerHTML = `
<style>
@unocss-placeholder
</style>
<div>
  <div part="cool-part">...</div>
  <div part="another-cool-part">...</div>
</div>
`

Solid

আপনাকে UnoCSS-এর plugin-এর পরে vite-plugin-solid plugin যোগ করতে হবে।

// vite.config.js
import UnoCSS from 'unocss/vite'
import solidPlugin from 'vite-plugin-solid'

export default {
  plugins: [
    UnoCSS({
      /* options */
    }),
    solidPlugin(),
  ],
}

আপনি একটি Solid example project পেতে পারেন examples/vite-solid directory-এ।

Elm

আপনাকে UnoCSS-এর plugin-এর আগে vite-plugin-elm plugin যোগ করতে হবে।

// vite.config.js
import UnoCSS from 'unocss/vite'
import { defineConfig } from 'vite'
import Elm from 'vite-plugin-elm'

export default defineConfig({
  plugins: [
    Elm(),
    UnoCSS(),
  ],
})

আপনি একটি Elm example project পেতে পারেন examples/vite-elm directory-এ।

উদাহরণ

Basic Example

আপনি একটি basic Vite example project পেতে পারেন examples/vite-basic directory-এ।

Framework Examples

আমরা বিভিন্ন frameworks-এর জন্য example projects প্রদান করি:

• Vite React Example
• Vite Preact Example
• Vite Svelte Example
• Vite Vue Example

Performance

আপনি build এ dev mode-এর performance বাড়াতে পারেন:

• include2: pattern অনুযায়ী মিলিত files গুলিকে transform আগে include করুন। এটি UnoCSS-কে ফাইলগুলিকে দ্রুত খুঁজে পেতে সাহায্য করে, কিন্তু এটি কিছু false positives অন্তর্ভুক্ত করতে পারে।

export default {
  plugins: [
    UnoCSS({
      include: [
        /pages\/.*\.vue$/,
        /components\/.*\.vue$/,
      ]
    })
  ]
}

• UnoCSS এর options গুলি configure করতে পারেন কিছু features disable করতে (যেমন extractors, transformers) production builds-এ আরও ভালো performance-এর জন্য।