vanilla extract
vanilla-extract
zero-runtime stylesheets-in-typescript
เขียนสไตล์ของคุณใน typeScript (หรือ JavaScript) ด้วยชื่อคลาสที่กำหนดขอบเขตในพื้นที่และตัวแปร CSS จากนั้นสร้างไฟล์ CSS แบบคงที่ในเวลาที่สร้าง
โดยพื้นฐานแล้วมันคือ“ CSS Modules-in-typescript” แต่ด้วยตัวแปร CSS ที่กำหนดขอบเขต + heaps มากขึ้น
สไตล์ทั้งหมดที่สร้างขึ้นในเวลาสร้าง - เช่นเดียวกับเขี้ยวน้อยกว่า ฯลฯ
นามธรรมน้อยที่สุดเหนือ CSS มาตรฐาน
- ทำงานกับกรอบส่วนหน้า-หรือแม้กระทั่งไม่มี
- ชื่อคลาสที่กำหนดขอบเขตในพื้นที่ - เช่นเดียวกับโมดูล CSS
ตัวแปร CSS ที่กำหนดขอบเขตในพื้นที่ @keyframes และ @font-face
- ระบบธีมระดับสูงพร้อมรองรับธีมพร้อมกัน ไม่มีลูกโลก!
- ใช้สำหรับการสร้างนิพจน์ calc คำนวณตามตัวแปร
- สไตล์การพิมพ์ที่ปลอดภัยผ่าน CSSTYPE
? ♂ รุ่นรันไทม์เสริมสำหรับการพัฒนาและการทดสอบ
- API เสริมสำหรับการใช้งานรันไทม์แบบไดนามิก
ตรวจสอบเว็บไซต์เอกสารสำหรับคำแนะนำการตั้งค่าตัวอย่างและเอกสาร 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เหล่านี้จะได้รับการประเมินในเวลาที่สร้าง ไม่มีรหัสใดในไฟล์เหล่านี้จะรวมอยู่ในชุดสุดท้ายของคุณ คิดว่ามันเป็นการใช้ TypeScrip
จากนั้นกินมันในมาร์กอัปของคุณ
// app.ts
import { themeClass , exampleStyle } from './styles.css.ts' ;
document . write ( `
<section class=" ${ themeClass } ">
<h1 class=" ${ exampleStyle } ">Hello world!</h1>
</section>
` ) ;ต้องการทำงานในระดับที่สูงขึ้นในขณะที่การใช้สไตล์กลับมาใช้ซ้ำได้สูงสุดหรือไม่? ตรวจสอบ? Sprinkles กรอบ Atomic CSS Atomic อย่างเป็นทางการของเราอย่างเป็นทางการของเราสร้างขึ้นจากการสกัดวานิลลา
MIT
