Qué es PostCSS, para qué sirve y cómo utilizarlo
PostCSS es una herramienta de desarrollo basada en plugins de JavaScript para automatizar operaciones de rutina en CSS. Para darte un ejemplo, con PostCSS puedes agregar automáticamente esos prefijos a features de CSS que no son completamente compatibles en todos los navegadores.
No se debe confundir el uso de JavaScript para realizar tareas automátizadas sobre el CSS, con cosas como que los estilos CSS se agreguen por medio de JavaScript o algo similar. Al final, tendrás un archivo puro de CSS que entederá el navegador, solamente que lo hemos optimizado o de cierta forma generado con JavaScript para agregar prefijos, soportar mixins, soportar variables y otras cosas. Puedes ver la lista completa de plugins aquí.
Instalación de PostCSS
Exiten varias formas de integrar PostCSS, entre ellas están Parcel, Webpack, Gulp, entre otras. Para probar PostCSS vamos a crear un proyecto en NPM. Seguramente tu ya tienes un proyecto corriendo en Laravel o cualquier otro framework de desarrollo web. No debería ser complejo después de seguir estos pasos agregarlo en tu proyecto específico.
Lo primero que vamos a hacer es crear un proyecto inicial en npm con el siguiente comando.
npm init -yEste comando creará el archivo package.json en donde estará la configuración de dependencias de nuestro proyecto. Lo siguiente será instalar postcss y postcss-cli como dependencias de desarrollo.
npm i -D postcss postcss-cliSeguido a esto deberás crear el archivo de configuración de postcss llamado postcss.config.js.
module.exports = {
plugins: [
]
}Instalación de plugins en PostCSS
Debido a que postcss está basado en plugins necesitamos al menos instalar nuestro primer plugin. Para esto vamos a utilizar el plugin más popular de postcss llamado autoprefixer.
npm i -D autoprefixerCada vez que instalamos un plugin necesitamos agregarlo a archivo de configuración.
module.exports = {
plugins: [
require('autoprefixer')
]
}Ejecución de PostCSS
Para ejecutar postcss vamos a crear dos comandos en la zona de scripts de nuestro archivo package.json.
"scripts": {
"build": "postcss src/styles.css --output css/styles.css",
"watch": "postcss src/styles.css --output css/styles.css --watch"
}
El primer comando toma lo que está en el archivo src/styles.css aplica el procesamiento de nuestros plugins y finalmente genera el archivo css/styles.css. El segundo comando hace exactamente lo mismo con la diferencia que el comando quedará en ejecución en la terminal para que a medida que modifiquemos nuestros estilos se genere automáticamente el output.
Lo siguiente será crear el archivo src/styles.css con alguna feature que requiera prefijos. Por ejemplo, puedes utilizar el siguiente CSS.
::placeholder {
color: gray;
}
Al correr el comando build con npm obtendrás el CSS con prefijos.
npm run build::-moz-placeholder {
color: gray;
}
:-ms-input-placeholder {
color: gray;
}
::placeholder {
color: gray;
}