PostCss es algo más en un preprocesador CSS como LESS o SASS, según su página oficial es una herramienta para transformar CSS con JavaScript. Para ello utiliza una serie de plugins que se pueden añadir y configurar y que añadirán nuevas funcionalidades a nuestras hojas de estilo. Hoy hablaremos de los más utilizados:
Autoprefixer
Es una de los plugins más conocidos y más utilizados. Resulta muy útil ya que añade los prefijos necesarios para la correcta visualización de la web en los diferentes navegadores. Cada vez que se compile el CSS estos prefijos se actualizarán, de acuerdo con las de reglas de Can I use. Esto supone, sin duda, un ahorro de tiempo a la hora de crear y mantener el código, pues no tendremos que añadirlos manualmente. Además el CSS con el que trabajaremos será más limpio y más fácil de leer.
Aunque autoprefixer trae una configuración por defecto, podremos ajustarla a nuestras necesidades a través de Browserslist.
PurgeCSS
PurgeCSS nos permite eliminar código CSS que no estamos utilizando en nuestros proyectos, bien porque ha quedado obsoleto, bien porque estamos utilizando un framework y no necesitamos todos sus componentes en nuestro proyecto. Aunque existen alternativas manuales para detectar este código, la tarea puede ser tediosa y, normalmente, no dispondremos de tiempo material para hacerlo. Para configurarlo debemos indicar las rutas donde se encuentran nuestro contenido y nuestras hojas de estilo. Al compilar el código procederá a eliminar todas las reglas CSS que no estén en uso, reduciendo sensiblemente el tamaño del fichero CSS.
PostCSS Preset Env
Este plugin viene a sustituir a CSSNext. Permite utilizar funcionalidades de CSS que todavía no son estándar, adaptando el código para hacerlo compatible con todos los navegadores, de una manera similar a Babel en JavaScript. Podremos utilizar pseudo-clases, custom media queries, custom properties, y muchas otras reglas que todavía no funcionan correctamente en algunos navegadores.
Stylelint
Se trata de un completo Linter para CSS. Nos ayudará a encontrar errores en nuestro código y a cumplir las convenciones en las hojas de estilos. Además podremos crear nuestras propias reglas o utilizar plugins mantenidos por la comunidad. Stylelint es compatible con la sintaxis más reciente de CSS además de con SASS, LESS y CSS-in-JS.
CSS Nano
Este plugin es un formateador de CSS que optimizará y minificará nuestros archivos haciendolos más ligeros para nuestro entorno de producción.
Si te interesa conocer más profundamente los plugins de PostCSS puedes encontrar una lista completa aquí: Plugins PostCSS
