UnoCSS निष्कर्षण

UnoCSS आपके कोडबेस से यूटिलिटी के उपयोग को खोजकर और ऑन-डिमांड पर संबंधित CSS उत्पन्न करके काम करता है। हम इस प्रक्रिया को निष्कर्षण कहते हैं।

सामग्री स्रोत

UnoCSS कई स्रोतों से यूटिलिटी के उपयोग को निकालने का समर्थन करता है:

• पाइपलाइन - अपने बिल्ड टूल्स पाइपलाइन से सीधे निकालें
• फ़ाइलसिस्टम - फ़ाइलों को पढ़कर और देखकर आपके फ़ाइलसिस्टम से निकालें
• इनलाइन - इनलाइन प्लेन टेक्स्ट से निकालें

विभिन्न स्रोतों से आने वाली यूटिलिटी के उपयोग एक साथ मर्ज हो जाएंगे और अंतिम CSS उत्पन्न करेंगे।

बिल्ड टूल्स पाइपलाइन से निष्कर्षण

यह Vite और Webpack एकीकरण में समर्थित है।

UnoCSS आपके बिल्ड टूल्स पाइपलाइन से गुजरने वाली सामग्री को पढ़ेगा और उनसे यूटिलिटी के उपयोग को निकालेगा। यह निकालने का सबसे कुशल और सटीक तरीका है क्योंकि हम केवल उन उपयोगों को निकालते हैं जो वास्तव में आपके ऐप में उपयोग किए जाते हैं, निकालने के दौरान कोई अतिरिक्त फ़ाइल I/O नहीं किया जाता है।

डिफ़ॉल्ट रूप से, UnoCSS आपके बिल्ड पाइपलाइन में एक्सटेंशन .jsx, .tsx, .vue, .md, .html, .svelte, .astro वाली फ़ाइलों से यूटिलिटी के उपयोग को निकालेगा और फिर ऑन डिमांड पर उपयुक्त 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 जादू टिप्पणी भी जोड़ सकते हैं, प्रति-फ़ाइल आधार पर, फ़ाइल में कहीं भी जहाँ आप चाहते हैं कि UnoCSS स्कैन करे। यदि आपको *.js या *.ts फ़ाइलों को स्कैन करने की आवश्यकता है, तो उन्हें कॉन्फ़िगरेशन में जोड़ें ताकि सभी js/ts फ़ाइलें स्कैन लक्ष्य के रूप में शामिल हों।

// ./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',
}

इसी तरह, आप पूरी फ़ाइल के लिए स्कैनिंग और रूपांतरण को बायपास करने के लिए @unocss-ignore भी जोड़ सकते हैं।

यदि आप चाहते हैं कि UnoCSS किसी कोड ब्लॉक को किसी भी निष्कर्षण फ़ाइल में निकाले बिना छोड़ दे, तो आप @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 -->

फ़ाइलसिस्टम से निष्कर्षण

ऐसे मामलों में जहाँ आप ऐसे एकीकरण का उपयोग कर रहे हैं जिनके पास बिल्ड टूल्स पाइपलाइन तक पहुँच नहीं है (उदाहरण के लिए, PostCSS प्लगइन), या आप बैकएंड फ्रेमवर्क के साथ एकीकृत कर रहे हैं जैसे कि कोड पाइपलाइन से नहीं गुजरता है, आप निकाले जाने वाली फ़ाइलों को मैन्युअली निर्दिष्ट कर सकते हैं।

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

मेल खाने वाली फ़ाइलें सीधे फ़ाइलसिस्टम से पढ़ी जाएंगी और डेव मोड में परिवर्तनों के लिए देखी जाएंगी।

इनलाइन टेक्स्ट से निष्कर्षण

इसके अलावा, आप इनलाइन टेक्स्ट से यूटिलिटी के उपयोग को भी निकाल सकते हैं, जिसे आप कहीं से भी प्राप्त कर सकते हैं।

आप सामग्री लौटाने के लिए एक async फ़ंक्शन भी पास कर सकते हैं। लेकिन ध्यान दें कि फ़ंक्शन केवल बिल्ड समय में एक बार कॉल किया जाएगा।

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 बिल्ड समय में काम करता है, इसका मतलब है कि केवल स्टैटिक रूप से प्रस्तुत यूटिलिटी ही उत्पन्न होंगी और आपके ऐप में भेजी जाएंगी। गतिशील रूप से उपयोग की जाने वाली या रनटाइम में बाहरी संसाधनों से प्राप्त की गई यूटिलिटी पता नहीं चल सकती है या लागू नहीं हो सकती है।

सेफलिस्ट

कभी-कभी आप गतिशील संयोजन का उपयोग करना चाह सकते हैं जैसे:

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

इस तथ्य के कारण कि UnoCSS स्टैटिक निष्कर्षण का उपयोग करके बिल्ड समय में काम करता है, संकलन समय में यह यूटिलिटी के सभी संयोजनों को संभवतः नहीं जान सकता है। इसके लिए, आप safelist विकल्प को कॉन्फ़िगर कर सकते हैं।

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

संबंधित CSS हमेशा उत्पन्न होगा:

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

या अधिक लचीला:

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

यदि आप रनटाइम में सच्चे गतिशील जनरेशन की तलाश कर रहे हैं, तो आप @unocss/runtime पैकेज की जाँच करना चाह सकते हैं।

स्टैटिक सूची संयोजन

गतिशील रूप से निर्मित यूटिलिटी की सीमा के आसपास काम करने का एक अन्य तरीका यह है कि आप एक ऑब्जेक्ट का उपयोग करें जो सभी संयोजनों को स्टैटिक रूप से सूचीबद्ध करता है। उदाहरण के लिए, यदि आप यह चाहते हैं:

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

आप एक ऑब्जेक्ट बना सकते हैं जो सभी संयोजनों को सूचीबद्ध करता है (मान लीजिए कि आप जानते हैं कि आप 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',
}

और फिर इसे अपने टेम्पलेट में उपयोग करें:

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

ब्लॉकलिस्ट

safelist के समान, आप कुछ यूटिलिटी को उत्पन्न होने से बाहर करने के लिए blocklist को भी कॉन्फ़िगर कर सकते हैं। यह कुछ निष्कर्षण झूठे सकारात्मकों को बाहर करने के लिए उपयोगी है। safelist से अलग, blocklist सटीक मैच के लिए स्ट्रिंग और पैटर्न मैच के लिए नियमित अभिव्यक्ति दोनों स्वीकार करता है।

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

यह p-1 और p-2, p-3, p-4 को उत्पन्न होने से बाहर करेगा।