Configura PostCSS con plugins clave como Autoprefixer y postcss-preset-env para escribir CSS moderno con compatibilidad real.
PostCSS transforma tu CSS mediante plugins en fase de build.
Autoprefixer añade prefijos según tu browserslist y evita mantenimiento manual.
postcss-preset-env te permite usar sintaxis moderna con fallback compatible.
PostCSS se configura en JavaScript (no en HTML) para mantener el pipeline de estilos versionado y reproducible.
No es un framework, es un procesador configurable.
PostCSS lee tu CSS y lo transforma según plugins: compatibilidad, optimización, análisis o convenciones internas.
La ventaja es modularidad: activas solo lo que necesitas y mantienes el pipeline comprensible para el equipo.
Autoprefixer usa tu browserslist para decidir qué prefijos añadir. Sin esa referencia, la salida puede no coincidir con el soporte objetivo real del proyecto.
Define browserslist en package.json o en archivo dedicado para alinear decisiones de frontend y QA.
La configuración de PostCSS vive en archivos JavaScript como postcss.config.js porque forma parte del proceso de build, no del marcado HTML.
Esto permite compartir configuración en equipo, revisarla en pull requests y reproducir exactamente la misma compilación en local y CI.
Configura PostCSS con plugins clave como Autoprefixer y postcss-preset-env para escribir CSS moderno con compatibilidad real.
Código del tema: display: grid; gap: 1rem;
No es un framework, es un procesador configurable.
PostCSS lee tu CSS y lo transforma según plugins: compatibilidad, optimización, análisis o convenciones internas.
La ventaja es modularidad: activas solo lo que necesitas y mantienes el pipeline comprensible para el equipo.
module.exports = {
plugins: {
'postcss-preset-env': { stage: 1 },
autoprefixer: {},
},
};Autoprefixer usa tu browserslist para decidir qué prefijos añadir. Sin esa referencia, la salida puede no coincidir con el soporte objetivo real del proyecto.
Define browserslist en package.json o en archivo dedicado para alinear decisiones de frontend y QA.
La configuración de PostCSS vive en archivos JavaScript como postcss.config.js porque forma parte del proceso de build, no del marcado HTML.
Esto permite compartir configuración en equipo, revisarla en pull requests y reproducir exactamente la misma compilación en local y CI.
module.exports = {
plugins: {
'postcss-preset-env': { stage: 1 },
autoprefixer: {},
},
};
// package.json
// "scripts": { "build:css": "postcss src/styles.css -o dist/styles.css" }