CSS Academy · Pelajaran

Fungsi dan Cara Kerja PostCSS

Pahami PostCSS sebagai alat transformasi CSS yang didukung oleh plugin JavaScript.

Fungsi dan Cara Kerja PostCSS adalah pelajaran CSS Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar CSS Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus CSS Academy mencakup 4 pelajaran total.

Apa Itu PostCSS

PostCSS adalah alat transformasi CSS—bukan ekstensi bahasa seperti Sass, melainkan pemroses bertenaga JavaScript yang mentransformasikan CSS standar melalui plugin. Arsitektur pluginnya membuatnya sangat mudah dikomposisikan.

PostCSS dibandingkan Sass

Sass adalah prapemroses dengan fitur bahasanya sendiri. PostCSS adalah alur transformasi yang beroperasi pada CSS standar. Keduanya dapat digunakan bersama: Sass melakukan kompilasi terlebih dahulu, lalu PostCSS menerapkan transformasi tambahan.

Cara Kerja PostCSS

PostCSS mengurai CSS menjadi AST (Pohon Sintaks Abstrak), plugin mentransformasikan AST tersebut, lalu PostCSS menserialisasikannya kembali menjadi CSS. Plugin dapat menambahkan, menghapus, atau mengubah simpul CSS apa pun.

Menginstal PostCSS

PostCSS paling umum digunakan melalui Vite, webpack, atau CLI postcss:

npm install postcss postcss-cli autoprefixer cssnano

postcss.config.js

Berkas konfigurasi PostCSS standar:

// postcss.config.js
module.exports = {
  plugins: [
    require('autoprefixer'),
    require('cssnano')({ preset: 'default' })
  ]
};

PostCSS sebagai Langkah dalam Alur Pembangunan

Di Vite, PostCSS sudah tersedia secara bawaan. Tambahkan konfigurasi ke vite.config.js atau postcss.config.js:

// vite.config.js
import autoprefixer from 'autoprefixer';

export default {
  css: {
    postcss: {
      plugins: [autoprefixer()]
    }
  }
};

Jenis Simpul PostCSS

AST PostCSS memiliki empat jenis simpul utama:

Root: seluruh berkas CSS
Rule: pemilih + blok deklarasi
Declaration: pasangan properti: nilai
AtRule: aturan @ (@media, @keyframes, dan sebagainya)

Plugin PostCSS Populer

Ekosistem PostCSS mencakup ratusan plugin:

autoprefixer: menambahkan awalan vendor
cssnano: meminimalkan CSS
postcss-preset-env: mengonversi CSS modern menjadi CSS yang kompatibel dengan peramban
postcss-import: menyisipkan pernyataan @import secara langsung
purgecss: menghapus CSS yang tidak digunakan

Peta Sumber

PostCSS dapat menghasilkan peta sumber yang memetakan keluaran yang diminimalkan kembali ke CSS asli agar penelusuran kesalahan di DevTools peramban menjadi lebih mudah.

PostCSS dibandingkan CSS-in-JS

PostCSS mentransformasikan berkas CSS statis. CSS-in-JS menghasilkan CSS secara dinamis dalam JavaScript saat dijalankan. Keduanya merupakan alat yang berbeda untuk kebutuhan yang berbeda—PostCSS lebih baik untuk lembar gaya tradisional, sedangkan CSS-in-JS lebih sesuai untuk gaya dinamis dengan cakupan komponen.

Menjalankan PostCSS melalui CLI

Proses sebuah berkas dengan CLI:

npx postcss input.css -o output.css --use autoprefixer cssnano

Pemeriksaan Singkat

Apa yang digunakan PostCSS untuk merepresentasikan CSS selama transformasi?

Ringkasan

PostCSS adalah alat transformasi CSS yang memproses CSS melalui alur plugin. PostCSS mengurai CSS menjadi AST, plugin mentransformasikannya, lalu PostCSS menserialisasikannya kembali menjadi CSS. Gunakan PostCSS untuk penambahan awalan otomatis, minifikasi, polifil CSS modern, dan transformasi khusus. PostCSS terintegrasi secara bawaan dengan alat pembangunan Vite dan webpack.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Fungsi dan Cara Kerja PostCSS” gratis?

Ya — teks lengkap “Fungsi dan Cara Kerja PostCSS” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus CSS Academy, upgrade ke CoddyKit PRO. Kursus CSS Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Fungsi dan Cara Kerja PostCSS”?

Pahami PostCSS sebagai alat transformasi CSS yang didukung oleh plugin JavaScript. Kamu berlatih CSS Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai CSS Academy?

Tidak diperlukan pengalaman sebelumnya. CSS Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “Fungsi dan Cara Kerja PostCSS” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran CSS Academy ini?

Ya. Setiap pelajaran CSS Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke CSS Academy