0Pricing
CSS Academy · درس

Vanilla Extract: CSS-in-JS بلا وقت تشغيل

اكتب CSS آمنًا من ناحية الأنواع باستخدام Vanilla Extract، الذي ينشئ ملفات CSS ثابتة وقت البناء.

Vanilla Extract: CSS-in-JS بلا وقت تشغيل درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.

ما هي Vanilla Extract؟

Vanilla Extract هي مكتبة CSS-in-JS لا تفرض أي تكلفة إضافية أثناء التشغيل. تُعرَّف CSS في TypeScript وتُجمَّع إلى ملفات CSS ثابتة أثناء عملية البناء، ما يمنحك أمان الأنواع من دون حقن الأنماط أثناء التشغيل.

المبدأ الأساسي

على عكس styled-components أو Emotion، تعمل Vanilla Extract بالكامل أثناء عملية البناء. ويُستخدم استيراد JavaScript كواجهة API لكتابة الأنماط، بينما تكون النتيجة ملفات CSS عادية. ولا تُشغَّل أي JavaScript على العميل لتطبيق الأنماط.

اصطلاح تسمية الملفات

تستخدم ملفات Vanilla Extract الامتداد .css.ts:

// button.css.ts
import { style } from '@vanilla-extract/css';

export const button = style({
  background: 'royalblue',
  color: 'white',
  padding: '10px 20px',
  borderRadius: '4px',
  cursor: 'pointer',
  ':hover': {
    background: '#2563eb'
  }
});

الاستخدام في المكوّنات

استورد اسم الصنف المُصدَّر وطبّقه:

import { button } from './button.css.ts';

function Button({ children }) {
  return <button className={button}>{children}</button>;
}

عقود السمات

أقوى ميزات Vanilla Extract هي تعريف عقد سمة، أي بنية للرموز، ثم إنشاء سمات متعددة تطبّق هذه البنية:

import { createTheme, createThemeContract } from '@vanilla-extract/css';

const contract = createThemeContract({
  color: { primary: null, bg: null }
});

export const lightTheme = createTheme(contract, {
  color: { primary: '#3b82f6', bg: '#ffffff' }
});

export const darkTheme = createTheme(contract, {
  color: { primary: '#60a5fa', bg: '#111827' }
});

styleVariants

أنشئ عدة تنويعات لنمط واحد من دون تكرار:

import { styleVariants } from '@vanilla-extract/css';

export const variants = styleVariants({
  primary: { background: 'royalblue' },
  danger:  { background: 'crimson' },
  ghost:   { background: 'transparent', border: '1px solid royalblue' }
});

// <Button className={variants[variant]}>

الوصفات باستخدام @vanilla-extract/recipes

تجمع الدالة recipe من حزمة recipes بين الأنماط الأساسية والتنويعات بطريقة أنيقة:

import { recipe } from '@vanilla-extract/recipes';

export const button = recipe({
  base: { padding: '10px 20px', borderRadius: '4px' },
  variants: {
    color: {
      primary: { background: 'royalblue', color: 'white' },
      danger:  { background: 'crimson', color: 'white' }
    },
    size: {
      sm: { fontSize: '0.875rem' },
      lg: { fontSize: '1.25rem' }
    }
  }
});

Sprinkles للأصناف المساعدة

تنشئ @vanilla-extract/sprinkles أصنافًا مساعدة من مجموعة رموز، مثل Tailwind آمن من ناحية الأنواع ومن دون تكلفة أثناء التشغيل:

أمان الأنواع

بما أن الأنماط عبارة عن كائنات TypeScript، تحصل على إكمال تلقائي كامل في IDE وفحص للأنواع لأسماء خصائص CSS وقيمها. ويُكتشف الخطأ الإملائي في اسم الخاصية أثناء عملية البناء، لا أثناء التشغيل.

التكامل مع أدوات البناء

تتكامل Vanilla Extract مع Vite وwebpack وesbuild وNext.js عبر محوّلات مخصّصة. وتُقدَّم CSS المستخرجة في صورة ملف ثابت.

متى تختار Vanilla Extract؟

اختر Vanilla Extract عندما تريد:

  • أمان أنواع كاملًا في TypeScript لأنماطك
  • انعدام التكلفة الإضافية لـ CSS-in-JS أثناء التشغيل
  • ناتج CSS ثابتًا لتحقيق أقصى أداء
  • نظام سمات متينًا مع عقود رموز تخضع للتحقق من الأنواع

تحقق سريع

ما ميزة الأداء الأساسية التي توفرها Vanilla Extract مقارنةً بـ CSS-in-JS أثناء التشغيل مثل styled-components؟

مراجعة

Vanilla Extract هي مكتبة CSS-in-JS تعتمد على TypeScript أولًا ولا تفرض تكلفة أثناء التشغيل. عرّف الأنماط في ملفات .css.ts باستخدام كائنات JavaScript الآمنة من ناحية الأنواع. وتُنشئ عملية البناء ملفات CSS ثابتة. وتوفّر عقود السمات دعمًا لسمات متعددة مع التحقق من الأنواع. كما تتولى styleVariants وrecipe إدارة تنويعات المكوّنات بأناقة. ويجعل انعدام التكلفة أثناء التشغيل هذه المكتبة مثالية للتطبيقات الحساسة للأداء.

الأسئلة الشائعة

هل درس «Vanilla Extract: CSS-in-JS بلا وقت تشغيل» مجاني؟

نعم — نص درس «Vanilla Extract: CSS-in-JS بلا وقت تشغيل» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.

ماذا ستتعلم في «Vanilla Extract: CSS-in-JS بلا وقت تشغيل»؟

اكتب CSS آمنًا من ناحية الأنواع باستخدام Vanilla Extract، الذي ينشئ ملفات CSS ثابتة وقت البناء. تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟

لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.

كم من الوقت يستغرق درس «Vanilla Extract: CSS-in-JS بلا وقت تشغيل»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟

نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

  1. Styled-components: القوالب النصية الموسومة
  2. Emotion: ‏css() وstyled()
  3. CSS Modules: الأنماط ذات النطاق المحدد
  4. Vanilla Extract: CSS-in-JS بلا وقت تشغيل
← العودة إلى CSS Academy