CSS Academy · Oppitunti

Mukautetut PostCSS-laajennukset

Kirjoita oma PostCSS-laajennus CSS-solmujen ohjelmalliseen muuntamiseen.

Oppitunti 3/412 vaihetta

Mukautetut PostCSS-laajennukset on ilmainen CSS Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu CSS Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. CSS Academy-kurssilla on yhteensä 4 oppituntia.

Miksi kirjoittaa oma plugin?

Kun mikään olemassa oleva PostCSS-plugin ei ratkaise tarpeitanne — esimerkiksi projektikohtaista CSS-muunnosta, migraatioapua tai mukautettua lint-sääntöä — oman pluginin kirjoittaminen antaa suoran pääsyn CSS:n AST:hen.

Pluginin rakenne

PostCSS-plugin on funktio, joka vastaanottaa Root-solmun (jäsennetyn CSS:n) ja valinnaisesti Result-olion. Voitte käyttää postcss.plugin()-tehdasta tai uudempaa suoran funktion lähestymistapaa:

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

Määrittelyjen läpikäynti

Muunnetaan jokainen color-määrittely:

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

Uusien sääntöjen lisääminen

Lisätään uusi sääntö jokaisen .btn-säännön jälkeen:

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

Määrittelyjen poistaminen

Poistetaan kaikki color: red-määrittelyt (virheenkorjaus-/siivousplugin):

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

PostCSS-apumetodit

PostCSS tarjoaa solmuille apumetodeja:

node.remove(): poistaa solmun
node.replaceWith(newNode): korvaa solmun
node.cloneBefore()/cloneAfter(): lisää kloonin
postcss.decl()/rule()/atRule(): luo uusia solmuja

Asynkroniset pluginit

PostCSS-pluginit voivat olla asynkronisia. Tämä on hyödyllistä, kun tiedostoja täytyy lukea tai verkkopyyntöjä tehdä:

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-pluginien testaaminen

Testatkaa plugineja suoraan postcss-paketin avulla:

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

Pluginin asetukset

Asetukset voidaan vastaanottaa ottamalla argumentti pluginitehtaassa:

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

PostCSS-pluginien julkaiseminen

PostCSS-pluginit noudattavat nimeämiskäytäntöä: postcss-plugin-name. Ne julkaistaan npm:ään ja lisätään PostCSS-repositorioon. Sisäisissä työkaluissa ne kannattaa säilyttää projektissa paikallisina tiedostoina.

Pikatarkistus

Mikä PostCSS:n visitor-metodi kutsutaan tyylitiedoston jokaiselle CSS-ominaisuus–arvo-parille?

Vastaa interaktiivisessa oppitunnissa

Kertaus

Mukautetut PostCSS-pluginit käsittelevät CSS:n AST-solmuja visitor-metodien avulla. Declaration(decl) käsittelee ominaisuus–arvo-pareja, Rule(rule) valitsinlohkoja ja AtRule() @-sääntöjä. CSS-puuta voidaan muokata solmujen metodeilla, kuten remove(), replaceWith() ja cloneAfter(). Testatkaa plugineja suoraan postcss-paketin avulla.

Aloita maksutta

Opi CSS tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 40
Oppitunnit: 159

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Mukautetut PostCSS-laajennukset” ilmainen?

Kyllä – oppitunnin ”Mukautetut PostCSS-laajennukset” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko CSS Academy-kurssin, päivitä CoddyKit PROhon. CSS Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Mukautetut PostCSS-laajennukset”?

Kirjoita oma PostCSS-laajennus CSS-solmujen ohjelmalliseen muuntamiseen. Harjoittelet CSS Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni CSS Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin CSS Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.

Kuinka kauan ”Mukautetut PostCSS-laajennukset”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä CSS Academy-oppitunnilla?

Kyllä. Jokainen CSS Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: CSS Academy