مكون Vite الإضافي

يتم شحن مكون Vite الإضافي مع حزمة unocss.

التثبيت

pnpm

pnpm add -D unocss

yarn

yarn add -D unocss

npm

npm install -D unocss

bun

bun add -D unocss

قم بتثبيت المكون الإضافي:

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

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

قم بإنشاء ملف uno.config.ts:

import { defineConfig } from 'unocss'

export default defineConfig({
  // ...خيارات UnoCSS
})

أضف virtual:uno.css إلى نقطة الدخول الرئيسية:

import 'virtual:uno.css'

الأوضاع

يأتي مكون Vite الإضافي مع مجموعة من الأوضاع التي تمكّن سلوكيات مختلفة.

global (افتراضي)

هذا هو الوضع الافتراضي للمكون الإضافي: في هذا الوضع تحتاج إلى إضافة استيراد uno.css على نقطة الدخول الخاصة بك.

يمكّن هذا الوضع مجموعة من مكونات Vite الإضافية لـ build و dev مع دعم HMR.

سيكون css المُنشأ ورقة أنماط عامة يتم حقنها في index.html.

vue-scoped

سيحقن هذا الوضع CSS المُنشأ إلى Vue SFCs <style scoped> للعزل.

svelte-scoped

تم نقل وضع svelte-scoped إلى حزمته الخاصة، راجع @unocss/svelte-scoped/vite.

shadow-dom

نظراً لأن Web Components يستخدم Shadow DOM، لا توجد طريقة لتنسيق المحتوى مباشرة من ورقة الأنماط العامة (ما لم تستخدم CSS custom properties، تلك سوف تخترق Shadow DOM)، تحتاج إلى تضمين CSS المُنشأ بواسطة المكون الإضافي في نمط Shadow DOM.

لتضمين CSS المُنشأ، تحتاج فقط إلى تكوين وضع المكون الإضافي إلى shadow-dom وتضمين @unocss-placeholder السحري في كل كتلة نمط CSS لمكون الويب. إذا كنت تحدد مكونات الويب الخاصة بك في Vue SFCs وتريد تحديد أنماط مخصصة إلى جانب UnoCSS، يمكنك لف العنصر النائب في تعليق CSS لتجنب أخطاء بناء الجملة في IDE الخاص بك.

per-module (تجريبي)

سيولد هذا الوضع ورقة CSS لكل وحدة، يمكن أن تكون محددة النطاق.

dist-chunk (تجريبي)

سيولد هذا الوضع ورقة CSS لكل جزء من الكود في البناء، رائع لـ MPA.

تحرير الفئات في DevTools

بسبب قيد "عند الطلب" حيث لا تعرف DevTools تلك التي لم تستخدمها بعد في الكود المصدري الخاص بك. لذا إذا كنت تريد تجربة كيفية عمل الأشياء عن طريق تغيير الفئات مباشرة في DevTools، فقط أضف الأسطر التالية إلى نقطة الدخول الرئيسية.

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

WARNING

يرجى استخدامه بحذر، تحت الغطاء نستخدم MutationObserver لاكتشاف تغييرات الفئة. مما يعني أنه لن يتم اكتشاف تغييراتك اليدوية فحسب، بل أيضاً التغييرات التي تم إجراؤها بواسطة البرامج النصية الخاصة بك وستُضمّن في ورقة الأنماط. قد يتسبب هذا في بعض عدم المحاذاة بين dev وبناء الإنتاج عند إضافة فئات ديناميكية بناءً على بعض المنطق في علامات البرنامج النصي. نوصي بإضافة الأجزاء الديناميكية الخاصة بك إلى safelist أو إعداد اختبارات الانحدار UI لبناء الإنتاج إذا أمكن.

الأطر

بعض أطر UI/App لديها بعض المحاذير التي يجب إصلاحها لجعلها تعمل، إذا كنت تستخدم أحد الأطر التالية، فقط طبق الاقتراحات.

VanillaJS / TypeScript

عند استخدام VanillaJS أو TypeScript، تحتاج إلى إضافة امتدادات ملفات js و ts للسماح لـ UnoCSS بقراءة وتحليل المحتوى، افتراضياً يتم استبعاد ملفات js و ts، راجع قسم الاستخراج من خط أنابيب أدوات البناء.

React

إذا كنت تستخدم @vitejs/plugin-react:

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

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

إذا كنت تستخدم @unocss/preset-attributify يجب عليك إزالة tsc من سكريبت build.

إذا كنت تستخدم @vitejs/plugin-react مع @unocss/preset-attributify، يجب عليك إضافة المكون الإضافي قبل @vitejs/plugin-react.

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

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

يمكنك العثور على مشروع مثال React يستخدم كلا المكونين الإضافيين في دليل examples/vite-react، راجع البرامج النصية في package.json وملف تكوين Vite.

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، يجب عليك إزالة tsc من سكريبت build.

يمكنك العثور على مشروع مثال Preact يستخدم كلا المكونين الإضافيين في دليل examples/vite-preact، راجع البرامج النصية في package.json وملف تكوين Vite.

Svelte

يجب إضافة المكون الإضافي قبل @sveltejs/vite-plugin-svelte.

لدعم class:foo و class:foo={bar}، أضف المكون الإضافي وقم بتكوين extractorSvelte في خيار extractors.

يمكنك استخدام قواعد بسيطة لـ class: مثل class:bg-red-500={foo} أو استخدام shortcuts تحتوي على قواعد متعددة، راجع 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(),
      ],
      /* المزيد من الخيارات */
    }),
    svelte(),
  ],
}

Sveltekit

لدعم class:foo و class:foo={bar}، أضف المكون الإضافي وقم بتكوين extractorSvelte في خيار extractors.

يمكنك استخدام قواعد بسيطة لـ class: مثل class:bg-red-500={foo} أو استخدام shortcuts تحتوي على قواعد متعددة، راجع 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(),
      ],
      /* المزيد من الخيارات */
    }),
    sveltekit(),
  ],
}

Web Components

للعمل مع مكونات الويب تحتاج إلى تمكين وضع shadow-dom على المكون الإضافي.

لا تنس إزالة الاستيراد لـ uno.css لأن وضع shadow-dom لن يعرضه ولن يعمل التطبيق.

import UnoCSS from 'unocss/vite'

export default {
  plugins: [
    UnoCSS({
      mode: 'shadow-dom',
      /* المزيد من الخيارات */
    }),
  ],
}

في كل مكون ويب فقط أضف @unocss-placeholder إلى كتلة نمط CSS الخاصة به:

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 في دليل examples/vite-lit.

دعم ::part المدمج

يمكنك استخدام ::part لأن المكون الإضافي يدعمه عبر shortcuts واستخدام قاعدة part-[<part-name>]:<rule|shortcut> من preset-mini، على سبيل المثال استخدامه مع قواعد بسيطة مثل part-[<part-name>]:bg-green-500 أو استخدام بعض shortcut: راجع src/my-element.ts في مشروع المثال المرتبط أدناه.

ستعمل part-[<part-name>]:<rule|shortcut> فقط مع هذا المكون الإضافي باستخدام وضع shadow-dom.

يستخدم المكون الإضافي nth-of-type لتجنب التصادمات مع أجزاء متعددة في نفس مكون الويب ولنفس الأجزاء على مكونات ويب متميزة، لا داعي للقلق بشأن ذلك، سيتولى المكون الإضافي ذلك نيابة عنك.

// 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' },
      ],
      /* المزيد من الخيارات */
    }),
  ],
}

ثم في مكونات الويب الخاصة بك:

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

تحتاج إلى إضافة مكون vite-plugin-solid الإضافي بعد مكون UnoCSS الإضافي.

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

export default {
  plugins: [
    UnoCSS({
      /* الخيارات */
    }),
    solidPlugin(),
  ],
}

يمكنك العثور على مشروع مثال Solid في دليل examples/vite-solid.

Elm

تحتاج إلى إضافة مكون vite-plugin-elm الإضافي قبل مكون UnoCSS الإضافي.

// 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 في دليل examples/vite-elm.

أمثلة

مثال أساسي

يمكنك العثور على مشروع مثال Vite أساسي في دليل examples/vite-basic.

أمثلة الأطر

نوفر مشاريع أمثلة لأطر مختلفة:

• مثال Vite React
• مثال Vite Preact
• مثال Vite Svelte
• مثال Vite Vue

الأداء