Style9: Build-Time CSS-in-JS

Facebook mengeluarkan semakan utama April lalu. Ini adalah projek yang bercita -cita tinggi, pembinaan semula laman web yang besar dengan sejumlah besar pengguna. Untuk mencapai matlamat ini, mereka menggunakan beberapa teknologi yang mereka buat dan membuka sumber sendiri, seperti React, GraphQL, Relay dan perpustakaan CSS-in-JS yang baru dipanggil StyleX.

Perpustakaan baru ini digunakan secara dalaman oleh Facebook, tetapi mereka berkongsi maklumat yang cukup untuk memungkinkan untuk melaksanakan Sumber Terbuka Style9.

Mengapa anda memerlukan perpustakaan CIJ yang lain?

Terdapat banyak perpustakaan CSS-in-JS (CIJ), jadi mungkin tidak jelas mengapa perpustakaan lain diperlukan. Seperti yang dijelaskan oleh Christopher Chedeau, Style9 mempunyai manfaat yang sama seperti semua penyelesaian CIJ yang lain, termasuk pemilih skop, penghapusan kod mati, parsing deterministik, dan keupayaan untuk berkongsi nilai antara CSS dan JavaScript.

Walau bagaimanapun, terdapat beberapa aspek yang menjadikan Style9 unik.

Runtime minimum

Walaupun gaya ditakrifkan dalam JavaScript, mereka diekstrak oleh pengkompil ke dalam fail CSS biasa. Ini bermakna bahawa fail JavaScript akhir tidak akan mengandungi sebarang gaya. Satu -satunya perkara yang tersisa adalah nama kelas akhir, yang runtime terkecil akan digunakan secara kondusif, seperti yang biasanya anda lakukan. Ini akan menghasilkan pakej kod yang lebih kecil, mengurangkan penggunaan memori, dan rendering lebih cepat.

Oleh kerana nilai -nilai diekstrak pada masa kompilasi, nilai yang benar -benar dinamik tidak dapat digunakan. Mujurlah, nilai -nilai ini tidak biasa dan kerana mereka unik, mereka tidak terjejas oleh definisi sebaris. Lebih biasa ialah penggunaan gaya yang kondusif, yang tentunya disokong. Terima kasih kepada laluan Babel. Penolakan, pemalar tempatan dan ekspresi matematik juga disokong.

Output atom

Oleh kerana cara gaya 9 berfungsi, setiap pengisytiharan harta boleh menjadi kelas berasingan dengan satu harta. Sebagai contoh, jika kita menggunakan kelegapan: 0 Di beberapa tempat dalam kod kami, ia hanya akan wujud sekali dalam CSS yang dihasilkan. Manfaat ini ialah saiz fail CSS tumbuh dengan bilangan perisytiharan yang unik , bukan dengan jumlah pengisytiharan. Oleh kerana kebanyakan sifat digunakan beberapa kali, ini boleh menyebabkan pengurangan besar dalam fail CSS. Sebagai contoh, laman utama Facebook lama menggunakan 413 kb GZIP CSS yang dimampatkan. Selepas semakan, saiz CSS semua halaman adalah 74 kb. Begitu juga, saiz fail yang lebih kecil membawa kepada prestasi yang lebih baik.

Sesetengah orang mungkin mengadu tentang ini, memikirkan bahawa nama kelas yang dihasilkan bukan semantik, bahawa mereka adalah legap dan mengabaikan cascades. Ini benar. Kami menganggap CSS sebagai sasaran kompilasi. Tetapi ada alasan yang baik. Dengan mempersoalkan amalan yang sebelum ini dianggap terbaik, kami dapat meningkatkan pengalaman untuk kedua -dua pengguna dan pemaju.

Di samping itu, Style9 mempunyai banyak ciri-ciri berkuasa lain, termasuk: Gaya yang ditaip dengan TypeScript, menghapuskan gaya yang tidak digunakan, keupayaan untuk menggunakan pembolehubah JavaScript, dan sokongan untuk pertanyaan media, pemilih pseudo, dan kerangka utama.

Cara menggunakannya

Pertama, pasangkannya seperti biasa:

 <code>npm install style9</code>

Style9 mempunyai plugin untuk Rollup, Webpack, Gatsby, dan Next.js, semuanya berdasarkan plugin Babel. Arahan tentang cara menggunakannya terdapat di repositori. Di sini kami akan menggunakan plugin Webpack.

 <code>const Style9Plugin = require('style9/webpack'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = { module: { rules: [ // 这将转换style9调用{ test: /\.(tsx|ts|js|mjs|jsx)$/, use: Style9Plugin.loader }, // 这是正常的Webpack CSS提取的一部分{ test: /\.css$/i, use: [MiniCssExtractPlugin.loader, 'css-loader'] } ] }, plugins: [ // 这将对最终的CSS文件中的声明进行排序并删除重复的声明new Style9Plugin(), // 这是正常的Webpack CSS提取的一部分new MiniCssExtractPlugin() ] };</code>

Tentukan gaya

Sintaks untuk mewujudkan gaya sangat mirip dengan perpustakaan lain. Kami mula -mula memanggil Style9.Create menggunakan Objek Gaya:

 <code>import style9 from 'style9'; const styles = style9.create({ button: { padding: 0, color: 'rebeccapurple' }, padding: { padding: 12 }, icon: { width: 24, height: 24 } });</code>

Kerana semua pengisytiharan akan menghasilkan kelas atom, singkatan seperti Flex: 1 dan latar belakang: biru tidak akan berfungsi kerana mereka menetapkan pelbagai sifat. Ciri -ciri yang boleh diperluas, seperti padding, margin, limpahan, dan lain -lain, secara automatik akan ditukar kepada bentuk penuh mereka. Jika anda menggunakan TypeScript, anda akan menerima ralat apabila menggunakan sifat yang tidak disokong.

Gaya analisis

Untuk menjana nama kelas, kita kini boleh memanggil fungsi yang dikembalikan oleh Style9.Create. Ia menerima kunci gaya yang ingin kami gunakan sebagai parameter:

 <code>const className = styles('button');</code>

Fungsi ini berfungsi seperti ini: Gaya di sebelah kanan mengambil keutamaan dan bergabung dengan gaya di sebelah kiri, seperti Object.assign. Berikut ini akan menghasilkan elemen yang diisi dengan 12px dan teksnya adalah Rebeccapurple.

 <code>const className = styles('button', 'padding');</code>

Kami boleh menggunakan gaya yang bersesuaian menggunakan mana -mana format berikut:

 <code>// 逻辑与styles('button', hasPadding && 'padding'); // 三元运算符styles('button', isGreen ? 'green' : 'red'); // 布尔对象styles({ button: true, green: isGreen, padding: hasPadding });</code>

Panggilan fungsi ini akan dikeluarkan semasa penyusunan dan digantikan dengan penyambungan rentetan langsung. Baris pertama dalam kod di atas akan digantikan dengan sesuatu seperti 'c1r9f2e5' haspadding? 'cu2kwdz': ''. Tiada kod runtime yang tersisa.

Gaya Gabungan

Kami boleh melanjutkan objek gaya dengan mengakses objek gaya dengan nama harta dan lulus ke Style9.

 <code>const styles = style9.create({ blue: { color: 'blue; } }); const otherStyles = style9.create({ red: { color: 'red; } }); // 将为红色const className = style9(styles.blue, otherStyles.red);</code>

Sama seperti panggilan fungsi, gaya di sebelah kanan mengambil keutamaan. Walau bagaimanapun, dalam kes ini, nama kelas tidak boleh dihuraikan secara statik. Sebaliknya, nilai harta akan digantikan oleh kelas dan disambungkan pada masa runtime. Ciri -ciri ditambah ke fail CSS seperti dahulu.

Meringkaskan

Manfaat CSS-in-JS adalah nyata. Iaitu, apabila kami membenamkan gaya ke dalam kod kami, terdapat kos prestasi. Dengan mengekstrak nilai pada masa membina, kita dapat mencapai yang terbaik dari kedua -dua dunia pada masa yang sama. Kita boleh mendapat manfaat daripada meletakkan gaya dengan tag bersama -sama dan menggunakan infrastruktur JavaScript yang sedia ada, sementara juga menghasilkan gaya terbaik.

Jika Style9 terdengar menyeronokkan, lihat repositori dan cubalah. Jika anda mempunyai sebarang pertanyaan, jangan ragu untuk bertanya atau hubungi kami.

Penghargaan

Terima kasih kepada Giuseppe Gurgone atas kerjanya di atas gaya dan DSS, Nicolas Gallagher atas kerjanya di Web-Web, Satyajit Sahoo dan semua ahli Callstack untuk kerja mereka di Linaria, Christopher Chedeau, Sebastian McKenzie, Frank Yan, Ashley Yan, Dan mana -mana orang lain yang saya terlepas.

Pautan

• Johanholmerin/Style9
• Bina Facebook.com Baru dengan React, Graphql dan Relay - 30 April 2019
• Bina Facebook baru dengan React and Relay | Frank Yan - 30 Oktober 2019
• Stack Tech Facebook.com Baru Baru - 8 Mei 2020
• johanholmerin/style9-components.macro: API Komponen gaya untuk Style9-Eksperimen

Atas ialah kandungan terperinci Style9: Build-Time CSS-in-JS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!