CSS Academy · Lección

Plugins personalizados de PostCSS

Escriba su propio plugin de PostCSS para transformar nodos CSS mediante programación.

Plugins personalizados de PostCSS es una lección gratuita de CSS Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de CSS Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de CSS Academy incluye 4 lecciones en total.

¿Por qué escribir un plugin personalizado?

Cuando ningún plugin de PostCSS existente resuelve su necesidad —una transformación de CSS específica del proyecto, una herramienta auxiliar de migración o una regla de lint personalizada—, escribir un plugin personalizado le proporciona acceso directo al AST de CSS.

Estructura de un plugin

Un plugin de PostCSS es una función que recibe un nodo Root (el CSS analizado) y, opcionalmente, un objeto Result. Utilice la fábrica postcss.plugin() o el enfoque moderno de función directa:

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

Recorrer declaraciones

Transforme cada declaración 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`;
    }
  }
});

Añadir nuevas reglas

Inserte una regla nueva después de cada regla .btn:

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

Eliminar declaraciones

Elimine todas las declaraciones color: red (plugin de depuración o limpieza):

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

Funciones auxiliares de PostCSS

PostCSS proporciona métodos auxiliares en los nodos:

node.remove(): elimina el nodo
node.replaceWith(newNode): reemplaza un nodo
node.cloneBefore()/cloneAfter(): inserta un clon
postcss.decl()/rule()/atRule(): crea nodos nuevos

Plugins asíncronos

Los plugins de PostCSS pueden ser asíncronos, lo que resulta útil cuando necesita leer archivos o realizar solicitudes de red:

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

Pruebas de plugins de PostCSS

Pruebe los plugins utilizando directamente el paquete 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; }');
});

Opciones de los plugins

Acepte opciones de configuración tomando un argumento en la fábrica del plugin:

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

Publicar plugins de PostCSS

Los plugins de PostCSS siguen una convención de nombres: postcss-plugin-name. Se publican en npm y se añaden al repositorio de PostCSS. Para herramientas internas, manténgalos como archivos locales en el proyecto.

Comprobación rápida

¿Qué visitor de PostCSS se llama para cada par propiedad: valor de la hoja de estilo?

Resumen

Los plugins personalizados de PostCSS utilizan métodos visitor para procesar nodos del AST de CSS. Declaration(decl) se utiliza para pares property:value, Rule(rule) para bloques de selectores y AtRule() para reglas @. Utilice métodos de nodo como remove(), replaceWith() y cloneAfter() para modificar el árbol CSS. Pruebe los plugins directamente con el paquete postcss.

Preguntas frecuentes

¿La lección «Plugins personalizados de PostCSS» es gratis?

Sí — el texto completo de «Plugins personalizados de PostCSS» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de CSS Academy, actualiza a CoddyKit PRO. El curso de CSS Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Plugins personalizados de PostCSS»?

Escriba su propio plugin de PostCSS para transformar nodos CSS mediante programación. Practicas CSS Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar CSS Academy?

No se requiere experiencia previa. CSS Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.

¿Cuánto tiempo toma la lección «Plugins personalizados de PostCSS»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de CSS Academy?

Sí. Cada lección de CSS Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a CSS Academy