PostCSS Deep Dive: Buat Plugin Anda Sendiri

Indonesian (Bahasa Indonesia) translation by Ridho Anbia Habibullah (you can also view the original English article)

Karena saya yakin Anda telah benar dan benar-benar berkumpul pada titik ini, yang membuat PostCSS luar biasa adalah ekosistem pluginnya yang berkembang pesat. Dan alasan yang sangat besar ada banyak sekali plugin hebat, dengan lebih banyak muncul sepanjang waktu, adalah bahwa PostCSS membuat pembuatan plugin Anda sendiri sehingga dapat diakses oleh siapa saja yang memiliki pengalaman dengan JavaScript.

Anda tidak perlu izin khusus untuk membuat plugin PostCSS; jika Anda ingin membuatnya, Anda tinggal maju dan membuatnya. Melalui kebebasan ini Anda memiliki kemampuan untuk mengubah proses pengembangan CSS Anda menjadi apa pun yang Anda inginkan, belum lagi kesempatan untuk berbagi pekerjaan Anda dengan anggota lain dari komunitas PostCSS yang berkembang pesat.

Dalam tutorial ini Anda akan belajar cara membuat plugin dasar Anda sendiri untuk PostCSS. Kami tidak akan terlalu banyak menggunakan plugin API, dan kami tidak akan menggunakan pengkodean super hardcore apa pun. Saya sendiri adalah pengembang front-end, dan keterampilan JavaScript saya berada pada level yang Anda harapkan untuk menjadi pengguna front-end, namun itu tidak menghentikan saya membuat plugin PostCSS pertama saya hanya dalam beberapa jam.

Ikuti terus dan lihat sendiri bagaimana perkembangan plugin PostCSS yang dapat didekati bisa!

Apa yang Kami Akan Bangun

Kami akan membuat plugin yang memungkinkan penyisipan mudah tumpukan font ke deklarasi font-family melalui sintaks berikut:

1	h1 {
2	font-family: "Open Sans", fontstack("Arial");
3	}

Setelah kompilasi, kode di atas akan berubah menjadi:

1	h1 {
2	font-family: "Open Sans", Arial, "Helvetica Neue", Helvetica, sans-serif;
3	}

Siapkan Proyek untuk Bekerja di Dalam

Meskipun Anda membuat plugin sendiri, Anda masih perlu memulai dengan membuat proyek Gulp atau Grunt kosong. Anda akan memuat plugin Anda ke dalam proyek ini dengan cara yang sama seperti Anda menggunakan plugin orang lain di seluruh seri ini.

Anda dapat membaca tentang cara menyiapkan proyek Gulp atau Grunt untuk PostCSS di tutorial sebelumnya:

Jika Anda tidak ingin mengatur proyek secara manual dari awal, Anda dapat mengunduh file sumber yang dilampirkan ke tutorial ini, dan ekstrak proyek starter Gulp atau Grunt yang tersedia ke dalam folder proyek kosong. Kemudian, dengan terminal atau command prompt menunjuk pada folder, jalankan perintah npm install.

Buat Shell Plugin Dasar

Buat folder di “node_modules” bernama “postcss-myplugin”. Sangat umum menggunakan postfix postcss- untuk memperjelas plugin Anda untuk PostCSS.

Semua plugin PostCSS adalah modul node, jadi kita perlu mengubah folder baru Anda menjadi satu. Buka terminal / command prompt, arahkan ke folder yang baru dibuat, dan jalankan npm init. Ini akan melakukan pengaturan dasar dari modul node, jadi ikuti saja petunjuk yang muncul di terminal Anda, meninggalkan bidang “entry point” sebagai default “index.js”.

Ketika ini selesai, dengan terminal Anda masih menunjuk pada folder, jalankan perintah npm install postcss --save. Ini akan menginstal PostCSS sebagai ketergantungan untuk modul ini, sesuatu yang harus dilakukan semua plugin PostCSS.

Buat file bernama "index.js" di folder “postcss-myplugin”. Tambahkan kode ini untuk dimuat di modul postcs utama:

1	var postcss = require('postcss');

Kemudian di bawahnya, tambahkan wrapper dasar ini yang akan mengelilingi kode pemrosesan plugin kami:

var postcss = require('postcss');

module.exports = postcss.plugin('myplugin', function myplugin(options) {

    return function (css) {

  	options = options || {};
        
        // Processing code will be added here

	}

});

Memuat Plugin baru Anda

Sekarang kami siap memuat plugin yang baru Anda buat ke dalam proyek Anda. Ini belum akan melakukan apa pun, tetapi kami hanya ingin mendapatkan pengaturan yang penting.

Muat Plugin melalui Gulp

Jika Anda menggunakan Gulp, tambahkan variabel ini di bawah yang sudah ada di file:

1	var myplugin = require('postcss-myplugin');

Sekarang tambahkan nama variabel baru ke dalam array processors Anda:

1	var processors = [
2	myplugin
3	];

Lakukan tes cepat bahwa semuanya bekerja dengan menjalankan perintah gulp css dan memeriksa bahwa “style.css” baru file telah muncul di folder “dest” proyek Anda.

Muat Plugin melalui Grunt

Jika Anda menggunakan Grunt, perbarui objek processors , yang bersarang di bawah objek options , ke yang berikut:

1	processors: [
2	require('postcss-myplugin')()
3	]

Lakukan tes cepat bahwa semuanya bekerja dengan menjalankan perintah grunt postcss dan memeriksa bahwa “style.css” baru file telah muncul di folder “dest” proyek Anda.

Tambahkan Fungsionalitas Plugin

Tambahkan Uji CSS

Sebelum kami mulai menambahkan kode pemrosesan ke plugin kami, kami akan menambahkan beberapa kode pengujian ke stylesheet kami yang dapat digunakan oleh plugin.

Untuk “src/style.css” Anda file tambahkan CSS ini:

1	h1 {
2	font-family: "Open Sans", fontstack("Arial");
3	}

Saat ini, karena plugin kami belum melakukan apa pun, jika Anda menyusun CSS, Anda akan melihat persis kode yang sama disalin langsung ke folder “dest” Anda “style.css” file.

Loop Melalui Aturan dan Deklarasi

Sekarang kami ingin mulai memindai CSS file kami sehingga kami dapat menemukan contoh fontstack () dan memprosesnya. Untuk memulai ini, tambahkan kode berikut setelah options = options || {}; garis:

    	css.walkRules(function (rule) {

			rule.walkDecls(function (decl, i) {



			});

		});

Menggunakan walkRules () pada baris pertama mengulang melalui setiap aturan dalam CSS Anda; aturan pada dasarnya adalah pemilih Anda dan gaya yang Anda tetapkan di antara kurung kurawal. Dalam uji CSS kami aturannya adalah:

1	h1 {
2	font-family: "Open Sans", fontstack("Arial");
3	}

Kemudian, di dalam setiap aturan, walkDecls () mengulangi setiap deklarasi; deklarasi pada dasarnya adalah setiap baris dalam gaya. Dalam CSS di atas, sebuah deklarasi adalah:

1	font-family: "Open Sans", fontstack("Arial");

Periksa apakah `fontstack ()` Sintaks Digunakan

Saat kami mengulangi setiap deklarasi menggunakan kode yang baru saja kami tambahkan, decl saat ini diwakili oleh pernyataan, yang memberi kami akses ke properti deklarasi dan nilainya melalui decl.prop dan decl.value masing-masing.

Dengan contoh CSS kami, decl.prop akan memberi kita font-family dan decl.value akan memberi kita "Open Sans", fontstack("Arial").

Kami ingin memeriksa setiap decl.value di stylesheet kami untuk melihat apakah ini berisi string fontstack (. Jika ya, kami tahu seseorang mencoba menggunakan plugin kami untuk menambahkan tumpukan font ke CSS mereka.

Di dalam loop walkDecl (), tambahkan:

    			var value = decl.value;

				if (value.indexOf( 'fontstack(' ) !== -1) {

					console.log("found fontstack");

				}

Pertama kami mengambil decl.value dan menyimpannya dalam value variabel. Setiap perubahan ke decl.value akan dikirim ke stylesheet yang dikompilasi; kami menyimpan value dalam nilai variabel sehingga kami dapat mengatasinya.

Lalu kami menggunakan metode indexOf () untuk mencari variabel value baru kami untuk string fontstack (. Jika ditemukan, kami akan mencatat “found fontstack” ke konsol sehingga kami dapat memeriksa apakah semuanya bekerja sejauh ini.

Jalankan gulp css atau grunt postcss dan Anda akan melihat output "found fontstack" sekali di terminal / command prompt Anda.

Tentukan Beberapa Fontstacks

Sekarang plugin kami dapat menemukan contoh fontstack () di stylesheet kami, kami dapat bersiap-siap untuk mengonversi instance itu ke dalam tumpukan font, yaitu daftar nama font. Tetapi sebelum kita bisa melakukan itu, pertama-tama kita perlu mendefinisikan tumpukan font ini.

Di bagian atas file Anda, di bawah variabel postcs yang ada, buat variabel bernama fontstacks_config. Kami akan mengubah variabel ini menjadi objek yang berisi pasangan nilai-kunci.

Untuk setiap entri dalam objek, kunci harus berupa huruf pertama di tumpukan font, mis. 'Arial'. Ini akan menjadi string melewati pengguna untuk menentukan susunan font yang mereka ingin menggunakan, misalnya fontstack("Arial") atau fontstack ("kali Roman baru").

Nilai dalam setiap pasangan harus berupa string daftar lengkap font yang terdapat dalam tumpukan font, mis. 'Arial, "Helvetica Neue", Helvetica, sans-serif'.

Tambahkan dua entri ke objek fontstacks_config Anda, satu untuk 'Arial' dan satu untuk 'Times New Roman', menggunakan tumpukan font yang disediakan oleh CSS Font Stack.

Variabel fontstacks_config Anda akan terlihat seperti ini:

// Font stacks from http://www.cssfontstack.com/
var fontstacks_config = {
    'Arial': 'Arial, "Helvetica Neue", Helvetica, sans-serif',
	'Times New Roman': 'TimesNewRoman, "Times New Roman", Times, Baskerville, Georgia, serif'
}

Periksa Fontstack Mana yang Diminta

Hal pertama yang perlu kita lakukan ketika kita menemukan sebuah instance dari fontstack () yang digunakan adalah untuk mencari tahu tumpukan font apa yang diminta oleh pengguna, yaitu string apa yang telah mereka atur di antara tanda kurung.

Misalnya, jika pengguna memasukkan fontstack ('Arial'), kami ingin mengekstrak string Arial. Alasan kami menginginkan string ini adalah itu akan memberi kita kunci yang dapat kita gunakan untuk mencari tumpukan font yang sesuai dari objek fontstacks_config kami.

Tambahkan kode ini segera di dalam pernyataan if yang kami tambahkan sebelumnya, mengganti console.log ('found fontstack'); garis:

// Get the name of the fontstack requested by matching the string inside the brackets of fontstack().

// Then replace any double or single quotes therein.

var fontstack_requested = value.match(/\(([^)]+)\)/)[1].replace(/["']/g, "");

Kami melakukan dua langkah di sini untuk mengekstrak nama fontstack sebagai string.

Pertama kita menggunakan metode match () untuk menemukan string apa pun yang ada di antara kurung dalam nilai kita. Ini akan memberi kita string seperti "Arial" atau 'Arial'.

Kami hanya ingin nama font, tanpa tanda kutip ganda atau tunggal, jadi kami kemudian menggunakan metode replace () untuk menghapusnya dari string, meninggalkan kami dengan string yang tidak tertulis seperti Arial.

String ini disimpan dalam variabel fontstack_requested.

Judul Kasus Fontstack Diminta

Kami akan menggunakan variabel fontstack_requested kami yang baru dibuat untuk mencari tumpukan font dari opsi fontstack_config kami. Bagian yang rumit adalah kunci dalam objek ini adalah case sensitive, jadi jika kita mencoba mencari entri Arial dengan kunci arial maka akan gagal.

Untuk mengatasi ini, kita akan membahas “Title Case” string, jadi misalnya times new roman akan dikonversi ke Times New Roman. Kami akan melakukan ini melalui fungsi khusus yang singkat.

Di bawah variabel fontstacks_config Anda tambahkan fungsi toTitleCase () ini:

1	// Credit for this function to http://stackoverflow.com/questions/196972/convert-string-to-title-case-with-javascript/196991#196991
2	function toTitleCase(str) {
3	return str.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
4	}

Sekarang kami akan menerapkan fungsi ini ke variabel fontstack_requested kami. Di bawah garis tempat Anda membuat fontstack_requested variable, tambahkan kode ini:

1	// Title case the words in the font name, just in case the user didn't do it themselves
2	fontstack_requested = toTitleCase(fontstack_requested);

Ini melewati variabel fontstack_requested melalui fungsi toTitleCase (), memperbarui nilainya.

Lookup Fontstack Dari Konfigurasi

Sekarang kami memiliki set variabel fonstack_requested kami dengan benar, kami dapat menggunakannya untuk mencari tumpukan font yang sesuai. Setelah baris yang baru saja Anda tambahkan, masukkan kode ini:

1	// Lookup the requested fontstack in the fontstack_config object
2	var fontstack = fontstacks_config[fontstack_requested];

Ini menemukan nilai dalam objek fontstacks_config yang memiliki kunci yang cocok dengan string yang terdapat dalam fontstack_requested kami.

Misalnya, jika fontstack_requested berisi string Arial, entri dalam fontstacks_config dengan kunci Arial akan ditemukan dan nilai 'Arial,' Helvetica Neue ', Helvetica, sans-serif' akan dikembalikan.

Nilai yang dikembalikan ini kemudian disimpan dalam fontstack variabel.

Periksa Fonts Set Sebelum fontstack ()

Sekarang string tumpukan font kami telah diambil dan siap untuk dimasukkan ke dalam CSS, tetapi masih ada satu hal lagi yang perlu kita lakukan. Anda akan mengingat dalam kode uji kami, kami menyertakan font "Open Sans" sebagai font yang disukai, dengan tumpukan font yang bertindak sebagai fallback. Kita juga perlu mengambil nama font ini dari nilai sehingga dapat ditambahkan ke CSS yang kita masukkan ke stylesheet yang diproses.

Di bawah baris variabel fontstack, tambahkan kode ini:

1	// Find and store any font names that might be already be in the value, before the fontstack() call
2	var first_font = value.substr(0, value.indexOf('fontstack('));

Kode ini menggunakan metode substr () untuk menemukan konten apa pun antara awal value kami, (diwakili oleh 0), dan contoh fontstack () kami (terletak dengan menggunakan metode indexOf ()). Konten apa pun yang ditemukan disimpan dalam variabel first_font.

Sebagai contoh, value kode pengujian kami sama dengan "Open Sans", fontstack ("Arial"), sehingga variabel first_font akan ditetapkan sebagai "Open Sans",.

Buat Nilai Baru

Sekarang kami memiliki semua bagian yang kami butuhkan untuk menciptakan nilai baru yang dapat digunakan untuk menggantikan nilai asli kode uji "Open Sans", fontstack ('Arial').

Setelah kode terakhir yang Anda tambahkan, masukkan kode ini:

1	// Create the new value for this rule by combining the first_font and fontstack variables
2	var new_value = first_font + fontstack;

Di sini kami menggabungkan variabel first_font dan fontstack ke dalam string tunggal dan menyimpannya di variabel new_value.

Dalam kode uji kami, ini berarti menggabungkan "Open Sans", dan Arial, "Helvetica Neue", Helvetica, sans-serif.

Variabel new_value kami akan memegang string "Open Sans", 'Arial,' Helvetica Neue ', Helvetica, sans-serif'.

Ini sekarang memberi kami nilai lengkap yang ingin kami tambahkan ke stylesheet yang diproses sehingga:

1	font-family: "Open Sans", fontstack("Arial");

... diubah menjadi:

1	font-family: "Open Sans", 'Arial, "Helvetica Neue", Helvetica, sans-serif';

Kirim Nilai Baru Kembali ke Stylesheet

Sekarang kita memiliki nilai baru yang siap dimasukkan ke dalam stylesheet yang diproses, yang harus kita lakukan hanyalah memperbarui decl.value. PostCSS akan mengurus sisanya, menambahkan nilai baru ke dalam CSS yang diproses untuk kami.

Tambahkan kode ini setelah baris terakhir yang Anda tambahkan:

1	// Send the new value back into the stylesheet
2	decl.value = new_value;

Ini menyatakan decl.value untuk menyamai isi variabel new_value kami.

Uji Plugin Anda

Plugin Anda sekarang bagus untuk digunakan. Berilah pusaran dengan mengkompilasi stylesheet Anda dengan gulp css atau grunt postcss (dengan terminal Anda menunjuk pada folder proyek Anda, bukan folder plugin Anda).

"dest/style.css" Anda file sekarang seharusnya menampilkan tumpukan huruf lengkap:

1	h1 {
2	font-family: "Open Sans", Arial, "Helvetica Neue", Helvetica, sans-serif;
3	}

(Opsional) Tambahkan Opsi Fontstacks User-Configurable

Anda mungkin ingin mengizinkan pengguna dari plugin Anda untuk mengatur opsi mereka sendiri, dengan cara yang sama Anda telah menetapkan opsi karena Anda telah menggunakan plugin PostCSS di seluruh seri ini.

Kami ingin pengguna dapat mengatur opsi fontstacks, menambahkan tumpukan font tambahan atau mendefinisikan ulang tumpukan font yang ada, misalnya:

1	fontstacks: {
2	'Extra Stack': '"Extra Stack", "Moar Fonts", Extra, serif',
3	'Arial': 'Arial, "Comic Sans"'
4	}

Catatan: langkah ini opsional. Jika Anda ingin Anda dapat melewatinya dan plugin Anda akan bekerja dengan baik, hanya tanpa konfigurasi yang ditetapkan pengguna.

Kami sudah memiliki bagian paling penting dari mengaktifkan opsi set pengguna di plugin kami. Di baris modul.exports kami, Anda akan melihat argumen options sedang dilewati.

1	module.exports = postcss.plugin('myplugin', function (options) {

Kami akan menerima opsi pengguna apa pun yang ditetapkan pengguna melalui ini.

Anda juga akan melihat kami memiliki baris:

1	options = options \|\| {};

Ini memeriksa untuk melihat apakah options memiliki nilai apa pun, dan jika tidak, menetapkannya ke objek kosong. Ini memastikan kami tidak mendapatkan kesalahan saat kami mulai bekerja dengan options yang mungkin berasal dari tidak terdefinisi.

Untuk memulai, kami akan menginstal Underscore.js ke dalam proyek kami, karena kami akan menggunakan metode extend() yang berguna. Jalankan perintah ini untuk menginstalnya ke plugin yang Anda buat:

1	npm install underscore --save

Sekarang memuat Underscore ke dalam plugin Anda dengan menambahkan variabel _ untuk mensyaratkannya, di bawah variabel postcss Anda yang sudah ada:

1	var postcss = require('postcss');
2	var _ = require('underscore');

Selanjutnya yang akan kita lakukan adalah mengambil objek fontstacks_config yang telah kita buat di dalam plugin, dan “extend” dengan tumpukan font yang telah ditetapkan pengguna melalui konfigurasi opsi mereka.

Tambahkan kode ini langsung di bawah options = options || {}; garis:

1	// Extend the default fontstacks_config option with any custom fontstacks set in the plugin's options
2	fontstacks_config = _.extend(fontstacks_config, options.fontstacks);

Opsi fontstacks yang telah ditetapkan oleh pengguna diwakili oleh options.fontstacks.

Dengan menggunakan metode Underscore extend(), semua tumpukan font dalam options.fontstacks ditambahkan ke fontstacks_config. Di mana pun ada kunci yang cocok, nilai dari options.fontstacks akan menimpa yang ada di fontstacks_config. Ini memungkinkan pengguna untuk mendefinisikan kembali setiap tumpukan font yang ada.

Dalam Gulpfile atau Gruntfile Anda, atur opsi fontstacks dan lewati tumpukan font baru serta mendefinisikan ulang yang sudah ada:

/* Gulpfile */
var processors = [
    myplugin({
        fontstacks: {
			'Extra Stack': '"Extra Stack", "Moar Fonts", Extra, serif',
			'Arial': 'Arial, "Comic Sans"'
		}
  	})
];
  
/* Gruntfile */
 processors: [
    require('postcss-myplugin')({
        fontstacks: {
            'Extra Stack': '"Extra Stack", "Moar Fonts", Extra, serif',
			'Arial': 'Arial, "Comic Sans"'
		}
  	})
]

Sekarang tambahkan beberapa CSS ekstra ke “src/style.css” Anda file sehingga kami dapat menguji tumpukan font baru yang baru saja kami tambahkan melalui opsi kami:

1	h2 {
2	font-family: "Droid Sans", fontstack("Extra Stack");
3	}

Mengkompilasi ulang CSS Anda dan Anda akan melihat bahwa tumpukan font 'Arial' Anda sekarang memiliki output berbeda, dan bahwa tumpukan font 'Tambahan tumpukan' Anda memiliki output dengan benar:

h1 {
    font-family: "Open Sans", Arial, "Comic Sans";
}

h2 {
	font-family: "Droid Sans", "Extra Stack", "Moar Fonts", Extra, serif;
}

Plugin Selesai Anda

Itu dia! Anda sudah selesai. Anda telah menyelesaikan plugin PostCSS pertama Anda.

Berikut seluruh hal di GitHub jika Anda perlu membandingkan kode Anda dengan referensi itu.

Mari kita rekap

Anda baru saja membuat seluruh plugin PostCSS, dan saya harap beberapa ide muncul di pikiran Anda tentang plugin lain yang ingin Anda buat. Mungkin ada satu hal kecil yang selalu menyadap Anda ketika menulis CSS, dan mungkin sekarang Anda dapat menemukan solusi Anda sendiri untuk menyingkirkannya selamanya. Atau mungkin ada sesuatu yang ekstra Anda benar-benar berpikir CSS seharusnya ada di luar kotak — yah, sekarang Anda dapat menambahkannya sendiri!

Untuk meringkas apa yang telah kami bahas:

Mulailah mengembangkan plugin baru dengan menyiapkan proyek Gulp atau Grunt untuk dikerjakan.
Buat modul simpul baru di dalam proyek Anda, yang akan menjadi plugin Anda.
Muat plugin baru Anda ke dalam proyek Anda.
Tambahkan beberapa tes CSS dalam sintaks yang Anda inginkan untuk digunakan plugin Anda.
Gunakan metode dari API PostCSS untuk memindai melalui stylesheet.
Temukan contoh sintaks plugin Anda sedang digunakan.
Tulis JavaScript dan gunakan API PostCSS untuk membuat transformasi yang sesuai (dan / atau penambahan) ke kode asli dan kirimkan ke dalam CSS yang diproses.

Untuk Pengguna TypeScript

Sebagai bagian dari rilis 5.0 PostCSS, Jed Mao telah menyumbangkan sejumlah besar definisi TypeScript yang dapat membantu banyak pengembangan plugin melalui penyediaan autocompletion dan dokumentasi sebaris saat Anda mengetik.

Jika Anda menemukan diri Anda masuk ke dalam pengembangan plugin PostCSS, ini benar-benar sesuatu yang layak dilihat memasukkan ke dalam alur kerja Anda. Saya sendiri bukan pengguna TypeScript, tetapi saya akan melompat ke dalam pengkodean dengannya, hampir murni sehingga saya dapat memanfaatkan fungsi ini.

Jika Anda ingin mencoba ini, Anda tidak perlu berada di Windows atau menggunakan Visual Studio, karena Anda dapat menggunakan Kode Visual Studio open source gratis, yang berjalan di Windows, Mac dan Linux dan dibangun di Elektron , shell yang sama yang menggerakkan Atom Editor.

Untuk contoh bagaimana menggabungkan definisi-definisi TypeScript ini ke dalam proyek Anda, periksa plugin postcss-font-pack. Fork dan mainkan di Visual Studio Code untuk melihat cara kerja autocompletion dan inline documentation.

PostCSS Deep Dive: Mengakhiri

Terima kasih banyak telah mengikuti seri PostCSS Deep Dive ini. Saya harap Anda menikmati membacanya sebanyak saya menikmati menciptakannya! Lebih penting lagi, saya harap Anda memiliki kepala penuh ide tentang bagaimana Anda dapat menempatkan PostCSS untuk bekerja dalam kehidupan pengembangan web harian Anda.

PostCSS benar-benar merupakan tambahan baru yang luar biasa untuk dunia front-end, karena cara ini memfasilitasi plugin membuka pintu untuk kemungkinan yang belum pernah kita miliki sebelumnya dalam pengembangan CSS. Berbagai plugin yang tersedia saat ini sudah cukup untuk membentuk kembali alur kerja harian seseorang, dan itu hanya dengan apa yang telah dibuat dalam waktu beberapa tahun.

Saya akan menyarankan bahwa PostCSS belum mencapai puncak, dan karena itu mulai menjadi sesuatu yang mayoritas pengembang CSS paling tidak ketahui, jika tidak disumpah, kita akan melihatnya benar-benar datang ke langkahnya. Dan dengan lebih banyak pengembang front-end yang bergabung, kami akan melihat lebih banyak kontribusi pada ekosistem plugin, menambahkan plugin baru dan membantu membangun yang sudah ada.

Dengan plugin yang bebas untuk memenuhi semua jenis transformasi CSS yang dapat diimpikan oleh pengembang, masa depan PostCSS sangat menarik. Saya menantikan untuk menjadi bagian dari itu, dan berharap Anda akan datang juga untuk naik!