CSS Academy · Aula

Plug-ins personalizados do PostCSS

Escreva seu próprio plug-in do PostCSS para transformar nós CSS de forma programática.

Plug-ins personalizados do PostCSS é uma aula grátis de CSS Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de CSS Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de CSS Academy inclui 4 aulas no total.

Por que escrever um plug-in personalizado?

Quando nenhum plug-in existente do PostCSS resolve sua necessidade — uma transformação de CSS específica do projeto, um auxiliar de migração ou uma regra de lint personalizada — escrever um plug-in personalizado oferece acesso direto à AST do CSS.

Estrutura de um plug-in

Um plug-in do PostCSS é uma função que recebe um nó Root (o CSS analisado) e, opcionalmente, um objeto Result. Use a fábrica postcss.plugin() ou a abordagem moderna de função direta:

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

Percorrendo declarações

Transforme todas as declarações 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`;
    }
  }
});

Adicionando novas regras

Insira uma nova regra após cada regra .btn:

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

Removendo declarações

Remova todas as declarações color: red (plug-in de depuração e limpeza):

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

Auxiliares do PostCSS

O PostCSS fornece métodos auxiliares nos nós:

node.remove(): remove o nó
node.replaceWith(newNode): substitui um nó
node.cloneBefore()/cloneAfter(): insere um clone
postcss.decl()/rule()/atRule(): cria novos nós

Plug-ins assíncronos

Os plug-ins do PostCSS podem ser assíncronos — isso é útil quando você precisa ler arquivos ou fazer solicitações de rede:

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

Testando plug-ins do PostCSS

Teste os plug-ins usando diretamente o pacote postcss:

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

Opções do plug-in

Aceite opções de configuração recebendo um argumento na fábrica do plug-in:

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

Publicando plug-ins do PostCSS

Os plug-ins do PostCSS seguem uma convenção de nomenclatura: postcss-plugin-name. Eles são publicados no npm e adicionados ao repositório do PostCSS. Para ferramentas internas, mantenha-os como arquivos locais no seu projeto.

Verificação rápida

Qual visitante do PostCSS é chamado para cada par propriedade: valor do CSS na folha de estilo?

Recapitulação

Os plug-ins personalizados do PostCSS usam métodos visitantes para processar nós da AST do CSS. Declaration(decl) para pares propriedade:valor, Rule(rule) para blocos de seletores e AtRule() para regras @. Use métodos de nó como remove(), replaceWith() e cloneAfter() para modificar a árvore CSS. Teste os plug-ins diretamente com o pacote postcss.

Perguntas Frequentes

A aula “Plug-ins personalizados do PostCSS” é grátis?

Sim — o texto completo de “Plug-ins personalizados do PostCSS” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de CSS Academy, atualize para CoddyKit PRO. O curso de CSS Academy inclui 4 aulas no total.

O que vou aprender em “Plug-ins personalizados do PostCSS”?

Escreva seu próprio plug-in do PostCSS para transformar nós CSS de forma programática. Você pratica CSS Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar CSS Academy?

Nenhuma experiência prévia é necessária. CSS Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.

Quanto tempo leva a aula “Plug-ins personalizados do PostCSS”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de CSS Academy?

Sim. Cada aula de CSS Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para CSS Academy