CSS dalam TypeScript dengan Ekstrak Vanila

Vanilla-Extract: Perpustakaan baru, rangka kerja-dalam-jenis. Ia menyediakan cara yang ringan, teguh dan intuitif untuk menulis gaya. Ekstrak vanila bukan rangka kerja CSS wajib, tetapi alat pemaju yang fleksibel. Dalam tahun-tahun kebelakangan ini, medan alat CSS telah stabil, dengan alat seperti PostCSS, SASS, modul CSS dan komponen gaya yang muncul sebelum 2017 (beberapa lebih awal) dan masih sangat popular hari ini. Tailwind adalah salah satu daripada beberapa alat yang telah membawa perubahan dalam bidang alat CSS dalam beberapa tahun kebelakangan ini.

Ekstrak vanila bertujuan untuk mencetuskan perubahan lagi. Ia dikeluarkan tahun ini dan mendapat manfaat daripada beberapa trend terkini, termasuk:

• Pemaju JavaScript beralih ke TypeScript
• Sokongan penyemak imbas untuk sifat tersuai CSS
• Gaya keutamaan praktikal

Terdapat banyak inovasi pintar dalam ekstrak vanila, yang saya fikir menjadikannya bermakna.

Overhead runtime sifar

Perpustakaan CSS-in-JS biasanya menyuntik gaya ke dalam dokumen semasa runtime. Ini mempunyai beberapa faedah, termasuk pengekstrakan CSS kritikal dan gaya dinamik.

Tetapi biasanya, fail CSS individu melakukan lebih baik. Ini kerana kod JavaScript perlu melalui proses parsing/kompilasi yang lebih mahal, manakala fail CSS berasingan boleh di -cache, manakala protokol HTTP2 mengurangkan kos permintaan tambahan. Di samping itu, sifat tersuai kini tersedia untuk banyak gaya dinamik secara percuma.

Oleh itu, ekstrak vanila mengikuti Linaria dan Astroturf dan bukannya menyuntik gaya semasa runtime. Perpustakaan ini membolehkan anda menggunakan gaya menggunakan fungsi JavaScript yang diekstrak pada masa membina dan digunakan untuk membina fail CSS. Walaupun anda menulis extract vanila menggunakan TypeScript, ini tidak menjejaskan saiz keseluruhan pakej JavaScript pengeluaran.

Sokongan TypeScript

Salah satu cadangan nilai ekstrak vanila ialah menyediakan pemeriksaan jenis. Sekiranya sangat penting untuk memastikan jenis kod kod selamat, mengapa tidak melakukan perkara yang sama dengan gaya juga?

TypeScript menawarkan banyak faedah. Yang pertama adalah penyelesaian automatik. Jika anda menaip "FO", dalam editor yang menyokong TypeScript, anda mendapat senarai drop-down dengan pilihan font (fontfamily, fontkerning, fontweight, atau pertandingan lain) untuk anda pilih. Ini menjadikan sifat CSS mudah ditemui dengan kemudahan editor. Jika anda tidak ingat nama Fontvariant, tetapi tahu bahawa ia bermula dengan "Font", anda boleh menaipnya dan tatal melalui pilihan. Dalam kod VS, anda tidak perlu memuat turun sebarang alat tambahan untuk mencapai matlamat ini.

Ini sangat mempercepat penulisan gaya:

Ini juga bermakna editor anda akan memantau anda sepanjang masa, memastikan anda tidak membuat sebarang kesilapan ejaan yang boleh menyebabkan pepijat yang mengecewakan.

Jenis ekstrak vanila juga menyediakan tafsiran sintaks dan pautan ke dokumen MDN untuk sifat CSS yang anda edit dalam definisi jenisnya. Ini menjimatkan langkah carian Google gila apabila gaya berkelakuan tidak normal.

Menulis dengan TypeScript bermakna anda menggunakan nomenclature unta untuk mewakili sifat CSS, seperti latar belakang. Ini mungkin memerlukan beberapa perubahan untuk pemaju yang terbiasa menggunakan sintaks CSS biasa seperti warna latar belakang.

bersepadu

Ekstrak Vanilla menyediakan integrasi pihak pertama untuk semua alat pembungkusan terkini. Berikut adalah senarai lengkap integrasi yang kini menyokong:

• Webpack
• Esbuild
• Vite
• Snowpack
• NextJS
• Gatsby

Ia juga tidak ada kaitan dengan rangka kerja. Anda hanya mengimport nama kelas dari vanila-extract, yang ditukar kepada rentetan pada masa membina.

Cara menggunakan

Untuk menggunakan extract vanila, anda boleh menulis fail .css.ts yang komponen anda boleh diimport. Panggilan ke fungsi ini ditukar menjadi hash dan rentetan nama kelas scoped dalam langkah membina. Ini mungkin sama seperti modul CSS, dan tidak kebetulan: Mark Dalgleish, salah satu pencipta vanila-ekstrak, juga mencipta bersama modul CSS.

Fungsi style()

Anda boleh menggunakan fungsi style() untuk membuat kelas CSS secara automatik. Anda lulus dalam gaya elemen dan kemudian mengeksport nilai pulangan. Import nilai ini di suatu tempat dalam kod pengguna anda dan ia akan ditukar kepada nama kelas skop.

 // title.css.ts
import {style} dari "@vanilla-extract/css";

Eksport const titlestyle = style ({
  Latar BelakangColor: "HSL (210Deg, 30%, 90%)",
  Fontfamily: "Helvetica, Sans-Serif",
  Warna: "HSL (210deg, 60%, 25%)",
  Padding: 30,
  Borderradius: 20,
});

 // title.ts
import {titlestyle} dari "./title.css";

document.getElementById ("root"). innerHtml = `<h1> Ekstrak vanila</h1> `;

Pertanyaan media dan pemilih pseudo juga boleh dimasukkan dalam perisytiharan gaya:

 // title.css.ts
Latar BelakangColor: "HSL (210Deg, 30%, 90%)",
Fontfamily: "Helvetica, Sans-Serif",
Warna: "HSL (210deg, 60%, 25%)",
Padding: 30,
Borderradius: 20,
"@media": {
  "Skrin dan (Max-Width: 700px)": {
    Padding: 10
  }
},
": hover": {
  Latar BelakangColor: "HSL (210Deg, 70%, 80%)"
}

Panggilan fungsi style ini adalah abstraksi ringan CSS - semua nama dan nilai atribut dipetakan ke sifat dan nilai CSS yang anda kenal. Satu perubahan untuk membiasakan diri ialah nilai -nilai kadang -kadang boleh diisytiharkan sebagai nombor (mis. Padding: 30), memungkiri nilai unit piksel, sementara beberapa nilai perlu diisytiharkan sebagai rentetan (mis. Padding: "10px 20px 15px 15px").

Ciri -ciri dalam fungsi style hanya boleh menjejaskan nod HTML tunggal. Ini bermakna anda tidak boleh menggunakan bersarang untuk mengisytiharkan gaya elemen kanak -kanak elemen - yang mungkin anda gunakan dalam SASS atau POSTCSS. Sebaliknya, anda perlu gaya elemen kanak -kanak secara berasingan. Jika elemen kanak -kanak perlu berdasarkan gaya yang berbeza dari elemen induk, anda boleh menggunakan atribut selectors untuk menambah gaya yang bergantung kepada elemen induk:

 // title.css.ts
Eksport const innerspan = style ({
  pemilih: {[`$ {titlestyle} &`]: {
    Warna: "HSL (190deg, 90%, 25%)",
    FontStyle: "Italic",
    TextDecoration: "garis bawah"
  }}
});

 // title.ts
import {titlestyle, innerspan} dari "./title.css";
document.getElementById ("root"). innerHtml = 
`<h1> Ekstrak vanila</h1>
Unstyled`;

Sebagai alternatif, anda boleh menggunakan API Topik (yang akan kita bicarakan seterusnya) untuk membuat sifat tersuai dalam elemen induk, yang digunakan oleh nod kanak -kanak. Ini mungkin terdengar ketat, tetapi ia sengaja direka untuk meningkatkan pemeliharaan pangkalan kod besar. Ini bermakna anda akan tahu dengan tepat di mana gaya setiap elemen dalam projek diisytiharkan.

tema

Anda boleh menggunakan fungsi createTheme untuk membina pembolehubah dalam objek TypeScript:

 // title.css.ts
import {style, creatEtheme} dari "@vanilla-extract/css";

// Buat Const Export Const [MaintHeme, Vars] = CreateTheme ({
  Warna: {
    Teks: "HSL (210deg, 60%, 25%)",
    Latar Belakang: "HSL (210Deg, 30%, 90%)"
  },
  panjang: {
    MediumGap: "30px"
  }
})

// Gunakan topik eksport const titlestyle = style ({
  BackgroundColor: vars.color.background,
  Warna: vars.color.text,
  Fontfamily: "Helvetica, Sans-Serif",
  Padding: vars.lengths.mediumgap,
  Borderradius: 20,
});

Ekstrak vanila kemudian membolehkan anda membuat variasi tema. TypeScript membantu ia memastikan bahawa varian anda menggunakan nama atribut yang sama, jadi jika anda lupa menambah atribut latar belakang ke topik anda, anda akan mendapat amaran.

Inilah cara membuat tema biasa dan mod gelap:

 // title.css.ts
import {style, creatEtheme} dari "@vanilla-extract/css";

Export const [maintHeme, vars] = createTheme ({
  Warna: {
    Teks: "HSL (210deg, 60%, 25%)",
    Latar Belakang: "HSL (210Deg, 30%, 90%)"
  },
  panjang: {
    MediumGap: "30px"
  }
})
// Variasi Tema - Perhatikan bahawa bahagian ini tidak menggunakan array sintaks Eksport Const DarkMode = CreatEtheme (vars, {
  Warna: {
    Teks: "HSL (210deg, 60%, 80%)",
    Latar Belakang: "HSL (210deg, 30%, 7%)",
  },
  panjang: {
    MediumGap: "30px"
  }
})
// Gunakan topik eksport const titlestyle = style ({
  BackgroundColor: vars.color.background,
  Warna: vars.color.text,
  Fontfamily: "Helvetica, Sans-Serif",
  Padding: vars.lengths.mediumgap,
  Borderradius: 20,
});

Kemudian, menggunakan JavaScript, anda boleh memohon nama kelas secara dinamik yang dikembalikan oleh vanila-extract untuk menukar topik:

 // title.ts
import {titlestyle, maintHeme, darkmode} dari "./title.css";

document.getElementById ("root"). innerHtml = 
`<div>
  <h1>Ekstrak vanila</h1>
  Mod gelap
</div>`

Bagaimanakah ini berfungsi di bahagian bawah? Objek yang anda nyatakan dalam fungsi createTheme akan ditukar kepada harta tersuai CSS yang dilampirkan pada kelas elemen. Sifat -sifat tersuai ini telah dicegah untuk mencegah konflik. CSS output contoh mainTheme kami kelihatan seperti ini:

 .src__ohrzop0 {
  -Color-brand__ohrzop1: HSL (210Deg, 80%, 25%);
  -berwarna-teks__ohrzop2: HSL (210deg, 60%, 25%);
  -warna-background__ohrzop3: HSL (210deg, 30%, 90%);
  -Length-mediumgap__ohrzop4: 30px;
}

Dan output CSS tema darkMode kami adalah seperti berikut:

 .src__ohrzop5 {
  -Color-brand__ohrzop1: HSL (210Deg, 80%, 60%);
  -berwarna-teks__ohrzop2: HSL (210Deg, 60%, 80%);
  -warna-background__ohrzop3: HSL (210deg, 30%, 10%);
  -Length-mediumgap__ohrzop4: 30px;
}

Oleh itu, kita hanya perlu menukar nama kelas dalam kod pengguna. Sapukan nama kelas darkmode ke elemen induk, mainTheme akan digantikan oleh atribut adat darkMode .

Resipi API

Fungsi style dan createTheme cukup untuk gaya laman web dengan sendirinya, tetapi extract vanila menyediakan beberapa API tambahan untuk kebolehgunaan semula yang lebih baik. API Resipi membolehkan anda membuat banyak variasi untuk elemen yang boleh anda pilih dari dalam tag atau kod pengguna.

Pertama, anda perlu memasangnya secara berasingan:

 NPM Install @vanilla-extract/resipi

Inilah cara ia berfungsi. Anda mengimport fungsi recipe dan lulus dalam objek yang mengandungi sifat base dan variants :

 // Button.css.ts
import {resipi} dari '@vanilla-extract/resipi';

Eksport Const ButtonStyles = resipi ({
  asas: {
    // Gaya yang digunakan untuk semua butang diletakkan di sini},
  Varian: {
    // gaya yang kita pilih dari sini}
});

Di base anda boleh mengisytiharkan gaya yang akan digunakan untuk semua varian. Dalam variants , anda boleh menyediakan cara yang berbeza untuk menyesuaikan elemen:

 // Button.css.ts
import {resipi} dari '@vanilla-extract/resipi';
Eksport Const ButtonStyles = resipi ({
  asas: {
    Fontweight: "berani",
  },
  Varian: {
    Warna: {
      Normal: {
        Latar BelakangColor: "HSL (210Deg, 30%, 90%)",
      },
      CallToAction: {
        Latar BelakangColor: "HSL (210Deg, 80%, 65%)",
      },
    },
    Saiz: {
      Besar: {
        Padding: 30,
      },
      Sederhana: {
        Padding: 15,
      },
    },
  },
});

Anda kemudian boleh mengisytiharkan varian yang ingin anda gunakan dalam tag:

 // Button.ts
import {ButtonStyles} dari "./button.css";

Klik saya

Ekstrak vanila menyediakan penyelesaian automatik untuk nama varian anda sendiri dengan TypeScript!

Anda boleh menamakan varian yang anda suka dan meletakkan sebarang atribut yang anda mahukan di dalamnya, sebagai contoh:

 // Button.css.ts
Eksport Const ButtonStyles = resipi ({
  Varian: {
    haiwan: {
      anjing: {
        latar belakangMage: 'url ("./ dog.png")',
      },
      kucing: {
        BackgroundImage: 'URL ("./ Cat.png")',
      },
      Arnab: {
        Latar Belakang: 'URL ("./ Rabbit.png")',
      },
    },
  },
});

Anda dapat melihat ini sangat berguna untuk sistem reka bentuk bangunan kerana anda boleh membuat komponen yang boleh diguna semula dan mengawal bagaimana ia berubah. Perubahan ini menjadi mudah dilihat dengan TypeScript-anda hanya perlu menaip ruang CMD/CTRL (pada kebanyakan editor) dan anda mendapat senarai drop-down yang menyenaraikan cara yang berbeza untuk menyesuaikan komponen anda.

Keutamaan praktikal dengan taburan

Sprinkles adalah kerangka keutamaan praktikal yang dibina di atas ekstrak vanila. Dokumen extract vanila menggambarkannya seperti ini:

Pada asasnya, ia seperti membina versi sifar runtime anda sendiri, tailwind jenis-selamat, sistem gaya, dan banyak lagi.

Jadi, jika anda tidak suka menamakan perkara (kita semua mempunyai mimpi buruk, membuat Div Wrapper Luaran, dan kemudian menyedari bahawa kita perlu membungkusnya dengan ... pembungkus luaran luaran), taburan mungkin cara pilihan anda untuk menggunakan vanila-ekstrak.

API Sprinkles juga perlu dipasang secara berasingan:

 NPM Install @Vanilla-Extract/Sprinkles

Sekarang kita boleh membuat beberapa blok bangunan untuk fungsi praktikal kami untuk digunakan. Mari buat senarai warna dan panjang dengan mengisytiharkan beberapa objek. Nama kunci JavaScript boleh menjadi apa sahaja yang kita mahukan. Nilai perlu menjadi nilai CSS yang sah untuk atribut CSS yang kami merancang untuk digunakan:

 // Sprinkles.css.ts
Const Colors = {
  Blue100: "HSL (210deg, 70%, 15%)",
  Blue200: "HSL (210Deg, 60%, 25%)",
  Blue300: "HSL (210Deg, 55%, 35%)",
  Blue400: "HSL (210deg, 50%, 45%)",
  Blue500: "HSL (210Deg, 45%, 55%)",
  Blue600: "HSL (210deg, 50%, 65%)",
  Blue700: "HSL (207deg, 55%, 75%)",
  Blue800: "HSL (205deg, 60%, 80%)",
  Blue900: "HSL (203deg, 70%, 85%)",
};

panjang const = {
  Kecil: "4px",
  Sederhana: "8px",
  besar: "16px",
  Humungous: "64px"
};

Kita boleh menggunakan fungsi defineProperties untuk mengisytiharkan sifat CSS yang nilai -nilai ini akan digunakan untuk:

• Lulus objek yang mengandungi sifat properties .
• Dalam properties kami mengisytiharkan objek di mana kunci adalah sifat CSS yang dapat ditetapkan oleh pengguna (ini perlu menjadi sifat CSS yang sah), dan nilai adalah objek yang kami buat sebelumnya (senarai warna dan panjang kami).

 // Sprinkles.css.ts
import {defineProperties} dari "@vanilla-extract/sprinkles";

Const Colors = {
  Blue100: "HSL (210Deg, 70%, 15%)"
  // dll.
}

panjang const = {
  Kecil: "4px",
  // dll.
}

Const Properties = DefineProperties ({
  Hartanah: {
    // Kunci objek ini perlu menjadi atribut CSS yang sah // Nilai adalah pilihan yang kami berikan kepada warna pengguna: warna,
    Latar Belakang Color: Warna,
    Padding: Panjang,
  },
});

Kemudian langkah terakhir adalah lulus nilai pulangan defineProperties ke fungsi createSprinkles dan mengeksport nilai pulangan:

 // Sprinkles.css.ts
import {defineProperties, createsprinkles} dari "@vanilla-extract/sprinkles";

Const Colors = {
  Blue100: "HSL (210Deg, 70%, 15%)"
  // dll.
}

panjang const = {
  Kecil: "4px",
  // dll. 
}

Const Properties = DefineProperties ({
  Hartanah: {
    Warna: Warna,
    // dll. 
  },
});
Eksport const springles = createsprinkles (properties);

Kita kemudian boleh memulakan gaya inline dalam komponen dengan memanggil fungsi sprinkles dalam atribut class dan memilih pilihan yang kami inginkan untuk setiap elemen.

 // index.ts
import {sprinkles} dari "./sprinkles.css";
document.getElementById ("root"). innerHtml = `Klik saya
`;

Output JavaScript menjimatkan rentetan nama kelas untuk setiap atribut gaya. Nama kelas ini sepadan dengan peraturan tunggal dalam fail CSS output.

 Klik saya

Seperti yang anda lihat, API ini membolehkan anda untuk gaya gaya dalam tag menggunakan satu set kekangan yang telah ditetapkan. Anda juga boleh mengelakkan tugas yang sukar untuk datang dengan nama kelas untuk setiap elemen. Hasilnya adalah sesuatu yang terasa sangat seperti Tailwind, tetapi juga mendapat manfaat dari semua infrastruktur yang dibina di sekitar TypeScript.

API Sprinkles juga membolehkan anda menulis syarat dan singkatan untuk mewujudkan gaya responsif menggunakan kelas utiliti.

Meringkaskan

Ekstrak vanila terasa seperti kemajuan besar dalam bidang alat CSS. Banyak pemikiran telah dilaburkan dalam membinanya ke dalam penyelesaian gaya yang intuitif dan mantap yang memanfaatkan semua keupayaan yang ditawarkan oleh statik.

Bacaan lanjut

• Dokumentasi Ekstrak Vanilla
• Ucapan Mark mengenai Ekstrak Vanila
• Perselisihan Vanilla-Extract
• CODESANDBOX CODE SAMPLE

Output yang disemak ini mengekalkan makna asal semasa menggunakan struktur kata dan ayat yang berbeza.

Atas ialah kandungan terperinci CSS dalam TypeScript dengan Ekstrak Vanila. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!