CSS Academy · Pelajaran

Plugin PostCSS Khusus

Tuliskan plugin PostCSS sendiri untuk mentransformasi simpul CSS secara terprogram.

Plugin PostCSS Khusus adalah pelajaran CSS Academy gratis di CoddyKit. Ini adalah pelajaran 3 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.

Mengapa Menulis Plugin Khusus

Jika tidak ada plugin PostCSS yang sudah ada yang memenuhi kebutuhan Anda—seperti transformasi CSS khusus proyek, pembantu migrasi, atau aturan pemeriksaan kode khusus—menulis plugin khusus memberi Anda akses langsung ke AST CSS.

Struktur Plugin

Plugin PostCSS adalah fungsi yang menerima simpul akar (CSS yang telah diurai) dan, secara opsional, objek hasil. Gunakan pabrik postcss.plugin() atau pendekatan fungsi langsung yang modern:

// my-plugin.js
const plugin = () => {
  return {
    postcssPlugin: 'my-plugin',
    Declaration(decl) {
      // Called for every declaration node
    },
    Rule(rule) {
      // Called for every rule node
    }
  };
};
plugin.postcss = true;
module.exports = plugin;

Menelusuri Deklarasi

Transformasikan setiap deklarasi color:

const plugin = () => ({
  postcssPlugin: 'rem-converter',
  Declaration(decl) {
    if (decl.prop === 'font-size' && decl.value.endsWith('px')) {
      const px = parseFloat(decl.value);
      decl.value = `${px / 16}rem`;
    }
  }
});

Menambahkan Aturan Baru

Sisipkan aturan baru setelah setiap aturan .btn:

Rule(rule) {
  if (rule.selector.includes('.btn')) {
    const focusRule = rule.cloneAfter();
    focusRule.selector = rule.selector + ':focus';
  }
}

Menghapus Deklarasi

Hapus semua deklarasi color: red (plugin penelusuran kesalahan/pembersihan):

Declaration(decl) {
  if (decl.prop === 'color' && decl.value === 'red') {
    decl.remove();
  }
}

Pembantu PostCSS

PostCSS menyediakan metode pembantu pada simpul:

node.remove(): menghapus simpul
node.replaceWith(newNode): mengganti simpul
node.cloneBefore()/cloneAfter(): menyisipkan klon
postcss.decl()/rule()/atRule(): membuat simpul baru

Plugin Asinkron

Plugin PostCSS dapat berjalan secara asinkron—berguna ketika Anda perlu membaca berkas atau membuat permintaan jaringan:

async Declaration(decl, helpers) {
  if (decl.prop === 'icon') {
    const svg = await readFile(`icons/${decl.value}.svg`);
    decl.replaceWith(helpers.decl({ prop: 'background', value: `url(${svg})` }));
  }
}

Pengujian Plugin PostCSS

Uji plugin menggunakan paket postcss secara langsung:

const postcss = require('postcss');
const plugin = require('./my-plugin');

test('converts px to rem', () => {
  const input = 'p { font-size: 16px; }';
  const result = postcss([plugin()]).process(input, { from: undefined });
  expect(result.css).toBe('p { font-size: 1rem; }');
});

Opsi Plugin

Terima opsi konfigurasi dengan mengambil argumen dalam pabrik plugin:

const plugin = (opts = {}) => ({
  postcssPlugin: 'configurable',
  Declaration(decl) {
    if (decl.prop === opts.property) {
      decl.value = opts.replacement;
    }
  }
});

Mempublikasikan Plugin PostCSS

Plugin PostCSS mengikuti konvensi penamaan: postcss-plugin-name. Plugin tersebut dipublikasikan ke npm dan ditambahkan ke repositori PostCSS. Untuk alat internal, simpan plugin sebagai berkas lokal di proyek Anda.

Pemeriksaan Singkat

Pengunjung PostCSS mana yang dipanggil untuk setiap pasangan properti: nilai CSS dalam lembar gaya?

Ringkasan

Plugin PostCSS khusus menggunakan metode pengunjung untuk memproses simpul AST CSS. Declaration(decl) digunakan untuk pasangan properti: nilai, Rule(rule) untuk blok pemilih, dan AtRule() untuk aturan @. Gunakan metode simpul seperti remove(), replaceWith(), dan cloneAfter() untuk mengubah pohon CSS. Uji plugin secara langsung dengan paket postcss.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Plugin PostCSS Khusus” gratis?

Ya — teks lengkap “Plugin PostCSS Khusus” 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 “Plugin PostCSS Khusus”?

Tuliskan plugin PostCSS sendiri untuk mentransformasi simpul CSS secara terprogram. 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 3 dari 4.

Berapa lama pelajaran “Plugin PostCSS Khusus” 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