vanilla extract
vanilla-extract
Zero-Runtime Stylesheets-typescripts.
اكتب أنماطك في TypeScript (أو javaScript) مع أسماء الفئات المحلية ومتغيرات CSS ، ثم قم بإنشاء ملفات CSS ثابتة في وقت الإنشاء.
في الأساس ، إنها "وحدات CSS-typescript" ولكن مع متغيرات CSS الناطقة + أكوام أكثر.
جميع الأنماط التي تم إنشاؤها في وقت البناء - تمامًا مثل Sass ، أقل ، إلخ.
الحد الأدنى من التجريد على CSS القياسية.
؟ يعمل مع أي إطار عمل أمامي-أو حتى بدون واحد.
؟ أسماء الفئات المحلية - تمامًا مثل وحدات CSS.
متغيرات CSS المحلية ، @keyframes وقواعد @font-face .
؟ نظام موضوع رفيع المستوى مع دعم للمواضيع المتزامنة. لا كرات!
؟ utils لتوليد تعبيرات calc القائمة على المتغير.
؟ الأنماط الآمنة من خلال csstype.
؟ إصدار وقت التشغيل الاختياري للتطوير والاختبار.
؟ واجهة برمجة التطبيقات الاختيارية ل theming وقت التشغيل الديناميكي.
تحقق من موقع الوثائق للحصول على أدلة الإعداد والأمثلة ومستندات API.
؟ جربه بنفسك في CodesandBox.
اكتب أنماطك في ملفات .css.ts .
// styles.css.ts
import { createTheme , style } from '@vanilla-extract/css' ;
export const [ themeClass , vars ] = createTheme ( {
color : {
brand : 'blue'
} ,
font : {
body : 'arial'
}
} ) ;
export const exampleStyle = style ( {
backgroundColor : vars . color . brand ,
fontFamily : vars . font . body ,
color : 'white' ,
padding : 10
} ) ;بمجرد تكوين أدوات الإنشاء الخاصة بك ، سيتم تقييم ملفات
.css.tsهذه في وقت الإنشاء. لن يتم تضمين أي من الكود في هذه الملفات في الحزمة النهائية الخاصة بك. فكر في الأمر على أنه استخدام TypeScript كمعالج مسبق بدلاً من Sass ، أقل ، إلخ.
ثم تستهلكها في ترميزك.
// app.ts
import { themeClass , exampleStyle } from './styles.css.ts' ;
document . write ( `
<section class=" ${ themeClass } ">
<h1 class=" ${ exampleStyle } ">Hello world!</h1>
</section>
` ) ;هل تريد العمل على مستوى أعلى مع زيادة استخدام الأسلوب؟ الدفع ؟ Sprinkles ، إطار عملنا الرسمي للوقت الصفراء ، بنيت على قمة الفانيليا.
معهد ماساتشوستس للتكنولوجيا.
