PostCSS: Tanggal Putar Baru Sass

Akhir-akhir ini, PostCSS adalah alat yang membuat putaran di sisi depan pengembangan web.

PostCSS dikembangkan oleh Andrey Sitnik, pencipta Autoprefixer. Ini adalah paket Node.js yang dikembangkan sebagai alat untuk mengubah semua CSS Anda menggunakan JavaScript, sehingga mencapai waktu pembuatan yang jauh lebih cepat daripada prosesor lainnya.

Terlepas dari apa yang tampaknya tersirat dari namanya, ini bukan pasca-prosesor (juga bukan pra-prosesor), melainkan transpiler untuk mengubah sintaks khusus PostCSS (atau khusus plugin PostCSS, lebih tepatnya) menjadi vanila CSS.

Dengan demikian, ini tidak berarti bahwa PostCSS dan prosesor CSS lainnya tidak dapat bekerja bersama. Faktanya, jika Anda baru mengenal seluruh dunia pra/pasca-pemrosesan CSS, menggunakan PostCSS bersama dengan Sass dapat menghemat banyak sakit kepala, yang akan segera kita bahas.

PostCSS bukan pengganti prosesor CSS lainnya; alih-alih, lihat itu sebagai alat lain yang mungkin berguna saat dibutuhkan, tambahan lain untuk perangkat Anda.

Penggunaan PostCSS baru-baru ini mulai meningkat secara eksponensial, yang saat ini digunakan oleh beberapa bisnis industri teknologi terbesar, seperti Twitter, JetBrains, dan Wikipedia. Adopsi dan keberhasilannya yang meluas sebagian besar disebabkan oleh modularitasnya.

Plugin, Plugin, Plugin

PostCSS adalah semua tentang plugin.

Ini memungkinkan Anda untuk memilih plugin yang akan Anda gunakan, membuang dependensi yang tidak dibutuhkan, dan memberi Anda pengaturan yang cepat dan ringan untuk digunakan, dengan karakteristik dasar praprosesor lainnya. Selain itu, ini memungkinkan Anda untuk membuat struktur yang lebih disesuaikan untuk alur kerja Anda sambil tetap efisien.

Pada tanggal penulisan posting ini, PostCSS memiliki repositori lebih dari 200 plugin, masing-masing bertanggung jawab atas tugas yang berbeda. Pada repositori GitHub PostCSS, plugin dikategorikan berdasarkan “Memecahkan masalah CSS global”, “Gunakan CSS masa depan, hari ini”, “Keterbacaan CSS yang lebih baik”, “Gambar dan font”, “Linters”, dan “Lainnya”.

Namun, di direktori plugins Anda akan menemukan kategorisasi yang lebih akurat. Saya menyarankan Anda melihat sendiri di sana untuk mendapatkan ide yang lebih baik tentang kemampuan beberapa dari mereka; mereka cukup luas dan agak mengesankan.

Anda mungkin pernah mendengar tentang plugin PostCSS paling populer, Autoprefixer, yang merupakan perpustakaan mandiri yang populer. Plugin terpopuler kedua adalah CSSNext, sebuah plugin yang memungkinkan Anda menggunakan sintaks CSS terbaru saat ini, seperti properti kustom baru CSS, misalnya, tanpa mengkhawatirkan dukungan browser.

Tidak semua plugin PostCSS begitu inovatif. Beberapa hanya memberi Anda kemampuan yang mungkin keluar dari kotak dengan prosesor lain. Ambil parent selector misalnya. Dengan Sass, Anda dapat mulai menggunakannya segera setelah menginstal Sass. Dengan PostCSS, Anda perlu menggunakan postcss-nested-ancestors . Hal yang sama dapat extends untuk ekstensi atau mixins .

Jadi, apa keuntungan menggunakan PostCSS dan pluginnya? Jawabannya sederhana - Anda dapat memilih pertempuran Anda sendiri. Jika Anda merasa bahwa satu-satunya bagian Sass yang akan Anda gunakan adalah parent selector , Anda dapat menghemat stres dalam menerapkan sesuatu seperti instalasi pustaka Sass di lingkungan Anda untuk mengkompilasi CSS Anda, dan mempercepat proses dengan menggunakan hanya PostCSS dan postcss-nested-ancestors .

Itu hanyalah salah satu contoh kasus penggunaan untuk PostCSS, tetapi begitu Anda mulai memeriksanya sendiri, Anda pasti akan menyadari banyak kasus penggunaan lain untuknya.

Penggunaan PostCSS Dasar

Pertama, mari kita bahas beberapa dasar PostCSS dan lihat bagaimana biasanya digunakan. Meskipun PostCSS sangat kuat saat digunakan dengan pelari tugas, seperti Gulp atau Grunt, PostCSS juga dapat digunakan langsung dari baris perintah dengan menggunakan postcss-cli.

Mari kita pertimbangkan contoh kasus penggunaan sederhana. Asumsikan kita ingin menggunakan plugin postcss-color-rgba-fallback untuk menambahkan nilai HEX fallback ke semua warna berformat RGBA kita.

Setelah NPM menginstal postcss , postcss-cli dan postcss-color-rgba-fallback , kita perlu menjalankan perintah berikut:

 postcss --use postcss-color-rgba-fallback -o src/css/all.css dist/css/all.css

Dengan instruksi ini, kami memberi tahu PostCSS untuk menggunakan postcss-color-rgba-fallback , memproses CSS apa pun yang ada di dalam src/css/all.css , dan mengeluarkannya ke dist/css/all.css .

Oke, itu mudah. Sekarang, mari kita lihat contoh yang lebih kompleks.

Menggunakan PostCSS Bersama dengan Task-runners dan Sass

PostCSS dapat dimasukkan ke dalam alur kerja Anda dengan lebih mudah. Seperti yang sudah disebutkan, itu terintegrasi dengan sangat baik dengan pelari tugas seperti Grunt, Gulp, atau Webpack, dan bahkan dapat digunakan dengan skrip NPM. Contoh penggunaan PostCSS bersama dengan Sass dan Gulp sesederhana potongan kode berikut:

 var gulp = require('gulp'), concatcss = require('gulp-concat-css'), sass = require('gulp-sass'), postcss = require('gulp-postcss'), cssnext = require('postcss-cssnext'); gulp.task('stylesheets', function () { return ( gulp.src('./src/css/**/*.scss') .pipe(sass.sync().on('error', sass.logError)) .pipe(concatcss('all.css')) .pipe(postcss([ cssNext() ])) .pipe(gulp.dest('./dist/css')) ) });

Mari kita dekonstruksi contoh kode di atas.

Ini menyimpan referensi ke semua modul yang dibutuhkan (Gulp, Contact CSS, Sass, PostCSS, dan CSSNext) dalam serangkaian variabel.

Kemudian, ia mendaftarkan tugas Gulp baru yang disebut stylesheets . Tugas ini mengawasi file yang ada di ./src/css/ dengan ekstensi .scss (terlepas dari seberapa dalam struktur subdirektori itu), Sass mengompilasinya, dan menggabungkan semuanya menjadi satu file all.css .

Setelah file all.css dibuat, itu diteruskan ke PostCSS untuk mentranspile semua kode terkait PostCSS (dan plugin) ke CSS yang sebenarnya, dan kemudian file yang dihasilkan ditempatkan di ./dist/css .

Oke, jadi menyiapkan PostCSS dengan task runner dan preprocessor itu bagus, tapi apakah itu cukup untuk membenarkan bekerja dengan PostCSS?

Anggap saja seperti ini: Meskipun Sass stabil, matang, dan memiliki komunitas besar di belakangnya, kami mungkin ingin menggunakan PostCSS untuk plugin seperti Autoprefixer, misalnya. Ya, kita bisa menggunakan perpustakaan Autoprefixer mandiri, tetapi keuntungan menggunakan Autoprefixer sebagai plugin PostCSS adalah kemungkinan untuk menambahkan lebih banyak plugin ke alur kerja nanti dan menghindari ketergantungan yang berlebihan pada banyak perpustakaan JavaScript.

Pendekatan ini juga memungkinkan kita untuk menggunakan properti tanpa awalan dan membuatnya menjadi awalan berdasarkan nilai yang diambil dari API, seperti properti dari Can I Use, sesuatu yang sulit dicapai hanya dengan menggunakan Sass. Ini cukup berguna jika kita mencoba menghindari mixin kompleks yang mungkin bukan cara terbaik untuk mengawali kode.

Cara paling umum untuk mengintegrasikan PostCSS ke dalam alur kerja Anda saat ini, jika Anda sudah menggunakan Sass, adalah dengan meneruskan output yang dikompilasi dari file .sass atau .scss Anda melalui PostCSS dan pluginnya. Ini akan menghasilkan file CSS lain yang memiliki output Sass dan PostCSS.

Jika Anda menggunakan task runner, menggunakan PostCSS semudah menambahkannya ke jalur tugas yang Anda miliki saat ini, tepat setelah mengkompilasi file .sass atau .scss Anda (atau file preprosesor pilihan Anda).

PostCSS berfungsi dengan baik dengan orang lain, dan dapat melegakan untuk beberapa masalah utama yang kami alami sebagai pengembang setiap hari.

Mari kita lihat contoh lain dari PostCSS (dan beberapa plugin seperti CSSNext dan Autoprefixer) dan Sass bekerja sama. Anda dapat memiliki kode berikut:

 :root { $sass-variable: #000; --custom-property: #fff; } body { background: $sass-variable; color: var(--custom-property); &:hover { transform: scale(.75); } }

Cuplikan kode ini memiliki sintaks vanilla CSS dan Sass. Properti kustom, pada hari penulisan artikel ini, masih dalam status Rekomendasi Kandidat (CR), dan di sinilah plugin CSSNext untuk PostCSS beraksi.

Plugin ini akan bertanggung jawab untuk mengubah hal-hal seperti properti khusus menjadi CSS hari ini. Hal serupa akan terjadi pada properti transform , yang akan diawali secara otomatis oleh plugin Autoprefixer. Kode yang ditulis sebelumnya akan menghasilkan sesuatu seperti:

 body { background: #000; color: #fff; } body:hover { -webkit-transform: scale(.75); transform: scale(.75); }

Membuat Plugin untuk PostCSS

Seperti disebutkan sebelumnya, fitur menarik dari PostCSS adalah tingkat penyesuaian yang memungkinkan. Berkat keterbukaannya, membuat plugin kustom Anda sendiri untuk PostCSS untuk memenuhi kebutuhan khusus Anda adalah tugas yang agak sederhana jika Anda nyaman menulis JavaScript.

Orang-orang di PostCSS memiliki daftar yang cukup solid untuk memulai, dan jika Anda tertarik untuk mengembangkan plugin, periksa artikel dan panduan yang direkomendasikan. Jika Anda merasa perlu menanyakan sesuatu, atau mendiskusikan sesuatu, Gitter adalah tempat terbaik untuk memulai.

PostCSS memiliki API-nya dengan basis pengikut yang cukup aktif di Twitter. Bersama dengan fasilitas komunitas lainnya yang disebutkan sebelumnya dalam posting ini, inilah yang membuat proses pembuatan plugin begitu menyenangkan dan merupakan aktivitas kolaboratif.

Jadi, untuk membuat plugin PostCSS, kita perlu membuat modul Node.js. (Biasanya, folder plugin PostCSS di direktori node_modules/ didahului oleh awalan seperti “postcss-”, untuk memperjelas bahwa mereka adalah modul yang bergantung pada PostCSS.)

Sebagai permulaan, dalam file index.js modul plugin baru, kita perlu menyertakan kode berikut, yang akan menjadi pembungkus kode pemrosesan plugin:

 var postcss = require('postcss'); module.exports = postcss.plugin('replacecolors', function replacecolors() { return function(css) { // Rest of code } });

Kami menamai plugin replacecolors . Plugin akan mencari kata kunci deepBlackText dan menggantinya dengan nilai warna #2e2e2e HEX:

 var postcss = require('postcss'); module.exports = postcss.plugin('replacecolors', function replacecolors() { return function(css) { css.walkRules(function(rule) { rule.walkDecls(function(decl, i) { var declaration = decl.value; if (declaration.indexOf('deepBlackText') !== -1) { declaration = 'color: #2e2e2e;'; } }); }); } });

Cuplikan sebelumnya hanya melakukan hal berikut:

1. Menggunakan walkRules() iterasi melalui semua aturan CSS yang ada di file .css saat ini yang sedang kita lalui.
2. Menggunakan walkDecls() iterasi melalui semua deklarasi CSS yang ada di dalam file .css saat ini.
3. Kemudian ia menyimpan deklarasi di dalam variabel deklarasi dan memeriksa apakah string deepBlackText ada di dalamnya. Jika ya, itu menggantikan seluruh deklarasi untuk deklarasi CSS berikut: color: #2e2e2e; .

Setelah plugin siap, kita dapat menggunakannya seperti ini langsung dari baris perintah:

 postcss --use postcss-replacecolors -o src/css/all.css dist/css/all.css

Atau, misalnya, dimuat dalam Guplfile seperti ini:

 var replacecolors = require('postcss-replacecolors');

Haruskah Saya Membuang Prosesor CSS Saya Saat Ini untuk Menggunakan PostCSS?

Yah, itu tergantung pada apa yang Anda cari.

Adalah umum untuk melihat Sass dan PostCSS digunakan secara bersamaan, karena lebih mudah bagi pendatang baru untuk bekerja dengan beberapa alat yang ditawarkan oleh pra/pasca-prosesor, bersama dengan fitur plugin PostCSS. Menggunakannya secara berdampingan juga dapat menghindari membangun kembali alur kerja yang telah ditentukan sebelumnya dengan alat yang relatif baru, dan kemungkinan besar tidak diketahui, sambil menyediakan cara untuk mempertahankan implementasi yang bergantung pada prosesor saat ini (seperti Sass mixins , extends , parent selector , placeholder selectors , dan seterusnya).

Beri PostCSS Kesempatan

PostCSS adalah hal baru (yah, semacam) baru di dunia pengembangan front-end. Ini telah diadopsi secara luas karena bukan merupakan pra/pasca-prosesor, dan cukup fleksibel untuk beradaptasi dengan lingkungan tempat ia dimasukkan.

Sebagian besar kekuatan PostCSS berada di pluginnya. Jika yang Anda cari adalah modularitas, fleksibilitas, dan keragaman, maka ini adalah alat yang tepat untuk pekerjaan itu.

Jika Anda menggunakan runner atau bundler tugas, menambahkan PostCSS ke aliran Anda saat ini kemungkinan besar akan menjadi hal yang mudah. Periksa panduan instalasi dan penggunaan, dan Anda mungkin akan menemukan cara mudah untuk mengintegrasikannya dengan alat yang sudah Anda gunakan.

Banyak pengembang mengatakan ini akan tetap ada, setidaknya untuk masa mendatang. PostCSS dapat berdampak besar pada bagaimana kami menyusun CSS kami saat ini, dan itu berpotensi mengarah pada adopsi standar yang jauh lebih besar di seluruh komunitas pengembangan web front-end.