vanilla extract

? vanilla-ekstrak

Stylesheets nol-runtime-in-typescript.

Tulis gaya Anda di TypeScript (atau JavaScript) dengan nama kelas yang dilingkup secara lokal dan variabel CSS, kemudian menghasilkan file CSS statis pada waktu pembuatan.

Pada dasarnya, ini adalah "modul CSS-dalam-tipe" tetapi dengan variabel CSS yang tersingkir + lebih banyak.

Semua gaya yang dihasilkan pada waktu pembangunan - seperti halnya sass, lebih sedikit, dll.

Abstraksi minimal atas CSS standar.

? Bekerja dengan kerangka kerja front-end-atau bahkan tanpa satu.

? Nama kelas yang dilingkup secara lokal - seperti modul CSS.

Variabel CSS yang dilingkup secara lokal, @keyframes , dan aturan @font-face .

? Sistem tema tingkat tinggi dengan dukungan untuk tema simultan. Tidak ada global!

? Memanfaatkan untuk menghasilkan ekspresi calc berbasis variabel.

? Gaya jenis-aman melalui CSSTYPE.

? ‍♂️ Versi runtime opsional untuk pengembangan dan pengujian.

? API opsional untuk tema runtime dinamis.

---

Lihatlah situs dokumentasi untuk pemandu, contoh, dan dokumen API.

---

? Cobalah sendiri di CodeSandBox.

---

Tulis gaya Anda di file .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
} ) ;

Setelah Anda mengkonfigurasi alat build Anda, file .css.ts ini akan dievaluasi pada waktu build. Tidak ada kode dalam file -file ini yang akan dimasukkan dalam bundel akhir Anda. Anggap saja sebagai menggunakan naskah sebagai preprocessor Anda alih -alih sass, lebih sedikit, dll.

Kemudian konsumsinya dalam markup Anda.

 // app.ts

import { themeClass , exampleStyle } from './styles.css.ts' ;

document . write ( `
  <section class=" ${ themeClass } ">
    <h1 class=" ${ exampleStyle } ">Hello world!</h1>
  </section>
` ) ;

---

Ingin bekerja di level yang lebih tinggi sambil memaksimalkan gaya kembali? Lihat? Sprinkles, kerangka kerja CSS atom zero-runime resmi kami, dibangun di atas vanilla-ekstrak.

---

Terima kasih

• Nathan Nam Tran untuk membuat CSS-in-JS-Loader, yang berfungsi sebagai titik awal awal untuk memperlakukan, pendahulu ke perpustakaan ini.
• Jahitan untuk membuat kami bersemangat tentang CSS-Variables-in-Js.
• Mencari memberi kami ruang untuk melakukan pekerjaan yang menarik.

Lisensi

Mit.