UnoCSS এক্সট্রাক্টিং

UnoCSS আপনার codebase থেকে utilities ব্যবহার খুঁজে এবং চাহিদা অনুযায়ী corresponding CSS জেনারেট করে কাজ করে। আমরা এই প্রক্রিয়াকে extracting বলি।

কন্টেন্ট সোর্স

UnoCSS একাধিক সোর্স থেকে utilities ব্যবহার এক্সট্রাক্ট করতে সমর্থন করে:

• Pipeline - আপনার বিল্ড টুলস পাইপলাইন থেকে সরাসরি এক্সট্রাক্ট করুন
• Filesystem - ফাইল পড়ে এবং watch করে আপনার filesystem থেকে এক্সট্রাক্ট করুন
• Inline - inline plain text থেকে এক্সট্রাক্ট করুন

বিভিন্ন সোর্স থেকে আসা utilities ব্যবহার একত্রিত হবে এবং চূড়ান্ত CSS জেনারেট করবে।

বিল্ড টুলস পাইপলাইন থেকে এক্সট্রাক্টিং

এটি Vite এবং Webpack ইন্টিগ্রেশনে সমর্থিত।

UnoCSS আপনার বিল্ড টুলস পাইপলাইনের মধ্য দিয়ে যাওয়া কন্টেন্ট পড়বে এবং সেখান থেকে utilities ব্যবহার এক্সট্রাক্ট করবে। এটি এক্সট্রাক্ট করার সবচেয়ে কার্যকর এবং সঠিক উপায় কারণ extraction-এর সময় অতিরিক্ত file I/O ছাড়াই আমরা শুধুমাত্র আপনার অ্যাপে প্রকৃতপক্ষে ব্যবহৃত usages smartly এক্সট্রাক্ট করি।

ডিফল্টভাবে, UnoCSS আপনার build pipeline-এ ফাইলগুলি থেকে utilities ব্যবহার এক্সট্রাক্ট করবে যেগুলির extension .jsx, .tsx, .vue, .md, .html, .svelte, .astro এবং তারপর চাহিদা অনুযায়ী appropriate CSS জেনারেট করবে। .js এবং .ts ফাইলগুলি ডিফল্টভাবে অন্তর্ভুক্ত নয়।

তাদের কনফিগার করতে, আপনি আপনার uno.config.ts আপডেট করতে পারেন:

export default defineConfig({
  content: {
    pipeline: {
      include: [
        // the default
        /\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\?)/,
        // include js/ts files
        'src/**/*.{js,ts}',
      ],
      // exclude files
      // exclude: []
    },
  },
})

আপনি প্রতি-ফাইল ভিত্তিতে @unocss-include magic comment-ও যোগ করতে পারেন, ফাইলে যেখানে আপনি UnoCSS স্ক্যান করতে চান সেখানে। আপনাকে যদি *.js বা *.ts ফাইল স্ক্যান করতে হয়, তাহলে configuration-এ সমস্ত js/ts ফাইল scan target হিসাবে অন্তর্ভুক্ত করতে যোগ করুন।

// ./some-utils.js

// since `.js` files are not included by default,
// the following comment tells UnoCSS to force scan this file.
// @unocss-include
export const classes = {
  active: 'bg-primary text-white',
  inactive: 'bg-gray-200 text-gray-500',
}

একইভাবে, আপনি পুরো ফাইলের জন্য scanning এবং transforming বাইপাস করতে @unocss-ignore যোগ করতে পারেন।

আপনি যদি চান যে UnoCSS কোনো extracting ফাইলে extract না হওয়া কোডের একটি ব্লক skip করুন, আপনি জোড়ায় @unocss-skip-start @unocss-skip-end ব্যবহার করতে পারেন। মনে রাখবেন, এটি কার্যকর হতে জোড়ায় ব্যবহার করতে হবে।

<p class="text-green text-xl">Green Large</p>

<!-- @unocss-skip-start -->
<!-- `text-red` will not be extracted -->
<p class="text-red">Red</p>
<!-- @unocss-skip-end -->

Filesystem থেকে এক্সট্রাক্টিং

এমন ক্ষেত্রে যেখানে আপনি এমন ইন্টিগ্রেশন ব্যবহার করছেন যার বিল্ড টুলস পাইপলাইনে অ্যাক্সেস নেই (উদাহরণস্বরূপ, PostCSS প্লাগইন), অথবা আপনি এমন backend frameworks-এর সাথে ইন্টিগ্রেট করছেন যেমন কোড পাইপলাইনের মধ্য দিয়ে যায় না, আপনি manually এক্সট্রাক্ট করার জন্য ফাইলগুলি নির্দিষ্ট করতে পারেন।

export default defineConfig({
  content: {
    filesystem: [
      'src/**/*.php',
      'public/*.html',
    ],
  },
})

matched ফাইলগুলি সরাসরি filesystem থেকে পড়া হবে এবং dev mode-এ পরিবর্তনের জন্য watch করা হবে।

Inline Text থেকে এক্সট্রাক্টিং

অতিরিক্তভাবে, আপনি inline text থেকে utilities ব্যবহার এক্সট্রাক্ট করতে পারেন, যা আপনি অন্য কোথাও থেকে পেতে পারেন।

আপনি async function পাস করে content রিটার্ন করতে পারেন। কিন্তু মনে রাখবেন যে function শুধুমাত্র build time-এ একবার call হবে।

export default defineConfig({
  content: {
    inline: [
      // plain text
      '<div class="p-4 text-red">Some text</div>',
      // async getter
      async () => {
        const response = await fetch('https://example.com')
        return response.text()
      },
    ],
  },
})

সীমাবদ্ধতা

যেহেতু UnoCSS build time-এ কাজ করে, এর অর্থ হল শুধুমাতে statically উপস্থাপিত utilities জেনারেট হবে এবং আপনার অ্যাপে পাঠানো হবে। যেসব utilities dynamically ব্যবহার করা হয় বা runtime-এ বাহ্যিক সোর্স থেকে আনা হয় সেগুলি NOT detect বা apply হতে পারে।

Safelist

কখনও কখনও আপনি dynamic concatenations ব্যবহার করতে চাইতে পারেন যেমন:

<div class="p-${size}"></div>
<!-- this won't work! -->

যেহেতু UnoCSS static extraction ব্যবহার করে build time-এ কাজ করে, compile time-এ এটি সম্ভাব্যভাবে তখন utilities-এর সমস্ত combination জানতে পারে না। তার জন্য, আপনি safelist অপশন কনফিগার করতে পারেন।

safelist: 'p-1 p-2 p-3 p-4'.split(' ')

corresponding CSS সবসময় জেনারেট হবে:

.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }

অথবা আরও flexible:

safelist: [
  ...Array.from({ length: 4 }, (_, i) => `p-${i + 1}`),
]

আপনি যদি runtime-এ true dynamic generation খুঁজছেন, আপনি @unocss/runtime প্যাকেজ দেখতে চাইতে পারেন।

স্ট্যাটিক লিস্ট কম্বিনেশন

dynamically নির্মিত utilities-এর সীমাবদ্ধতার কাজ করার আরেকটি উপায় হল যে আপনি এমন একটি object ব্যবহার করতে পারেন যা সমস্ত combination statically তালিকাভুক্ত করে। উদাহরণস্বরূপ, আপনি যদি এটি চান:

<div class="text-${color} border-${color}"></div>
<!-- this won't work! -->

আপনি এমন একটি object তৈরি করতে পারেন যা সমস্ত combination তালিকাভুক্ত করে (ধরে নিচ্ছেন আপনি ব্যবহার করতে চান এমন color-এর সম্ভাব্য সমস্ত মান জানেন)

// Since they are static, UnoCSS will able to extract them on build time
const classes = {
  red: 'text-red border-red',
  green: 'text-green border-green',
  blue: 'text-blue border-blue',
}

এবং তারপর আপনার template-এ এটি ব্যবহার করুন:

<div class="${classes[color]}"></div>

Blocklist

safelist-এর মতো, আপনি blocklist কনফিগার করে কিছু utilities জেনারেট না হওয়া থেকে বাদ দিতে পারেন। এটি কিছু extraction false positives বাদ দেওয়ার জন্য সহায়ক। safelist-এর থেকে ভিন্ন, blocklist exact match-এর জন্য string এবং pattern match-এর জন্য regular expression উভয়ই গ্রহণ করে।

blocklist: [
  'p-1',
  /^p-[2-4]$/,
]

এটি p-1 এবং p-2, p-3, p-4 জেনারেট না হওয়া থেকে বাদ দেবে।