CSS Academy · Ders

Özel PostCSS Eklentileri

CSS düğümlerini programatik olarak dönüştüren kendi PostCSS eklentinizi yazın.

Özel PostCSS Eklentileri, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. CSS Academy kursu toplamda 4 dersten oluşur.

Neden Özel Bir Plugin Yazmalısınız?

Mevcut hiçbir PostCSS plugin'i ihtiyacınızı karşılamadığında (projeye özgü bir CSS dönüşümü, geçiş yardımcısı veya özel bir lint kuralı gibi), özel bir plugin yazmak CSS AST'sine doğrudan erişmenizi sağlar.

Plugin Yapısı

Bir PostCSS plugin'i, ayrıştırılmış CSS'yi içeren bir Root düğümü ve isteğe bağlı olarak bir Result nesnesi alan bir işlevdir. postcss.plugin() fabrikasını veya modern doğrudan işlev yaklaşımını kullanın:

// 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;

Bildirimler Üzerinde Gezinme

Her color bildirimini dönüştürün:

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`;
    }
  }
});

Yeni Kurallar Ekleme

Her .btn kuralından sonra yeni bir kural ekleyin:

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

Bildirimleri Kaldırma

Tüm color: red bildirimlerini kaldırın (hata ayıklama/temizleme plugin'i):

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

PostCSS Yardımcıları

PostCSS, düğümler üzerinde yardımcı yöntemler sunar:

node.remove(): düğümü kaldırır
node.replaceWith(newNode): bir düğümü değiştirir
node.cloneBefore()/cloneAfter(): bir kopya ekler
postcss.decl()/rule()/atRule(): yeni düğümler oluşturur

Asenkron Plugin'ler

PostCSS plugin'leri asenkron olabilir; bu, dosyaları okumanız veya ağ istekleri yapmanız gerektiğinde kullanışlıdır:

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})` }));
  }
}

PostCSS Plugin'lerini Sınama

Plugin'leri doğrudan postcss paketiyle sınayın:

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; }');
});

Plugin Seçenekleri

Plugin fabrikasında bir bağımsız değişken alarak yapılandırma seçeneklerini kabul edin:

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

PostCSS Plugin'lerini Yayımlama

PostCSS plugin'leri bir adlandırma kuralını izler: postcss-plugin-name. npm'de yayımlanır ve PostCSS deposuna eklenir. Dahili araçlar için bunları projenizde yerel dosyalar olarak tutun.

Hızlı Kontrol

Stil sayfasındaki her CSS özellik: değer çifti için hangi PostCSS ziyaretçisi çağrılır?

Özet

Özel PostCSS plugin'leri, CSS AST düğümlerini işlemek için ziyaretçi yöntemlerini kullanır. Özellik:değer çiftleri için Declaration(decl), seçici blokları için Rule(rule) ve at kuralları için AtRule() kullanılır. CSS ağacını değiştirmek için remove(), replaceWith() ve cloneAfter() gibi düğüm yöntemlerini kullanın. Plugin'leri doğrudan postcss paketiyle sınayın.

Sıkça Sorulan Sorular

“Özel PostCSS Eklentileri” dersi ücretsiz mi?

Evet — “Özel PostCSS Eklentileri” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. CSS Academy kursu toplamda 4 dersten oluşur.

“Özel PostCSS Eklentileri” dersinde ne öğreneceğim?

CSS düğümlerini programatik olarak dönüştüren kendi PostCSS eklentinizi yazın. CSS Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

CSS Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te CSS Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.

“Özel PostCSS Eklentileri” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu CSS Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her CSS Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← CSS Academy Sayfasına Dön