PostCSS es una herramienta de desarrollo de software que utiliza complementos basados en JavaScript para automatizar las operaciones rutinarias de CSS. Fue diseñado por Andrey Sitnik con la idea de tener su origen en su trabajo de front-end para Evil Martians.
Funcionalidad
PostCSS es un marco para desarrollar herramientas CSS. Se puede utilizar para desarrollar un lenguaje de plantilla como Sass y LESS.
El núcleo de PostCSS consta de:
- Analizador CSS que genera un árbol de sintaxis abstracta
- Conjunto de clases que comprende el árbol.
- Generador de CSS que genera una línea CSS para el árbol de objetos
- Generador de mapa de código para los cambios de CSS realizados
Las características están disponibles a través de complementos. Los complementos son pequeños programas que trabajan con el árbol de objetos. Después de que el núcleo haya transformado una cadena CSS en un árbol de objetos, los complementos analizan y cambian el árbol. Luego, PostCSS genera una nueva cadena CSS para el árbol modificado por el complemento.
PostCSS y sus complementos están escritos en JavaScript y se distribuyen a través de npm, que ofrecen API para operaciones de JavaScript de bajo nivel.
Existen herramientas oficiales que permiten usar PostCSS con sistemas de compilación como Webpack, Gulp, y Grunt. También hay disponible una interfaz de consola. Se puede usar Browserify o Webpack para abrir PostCSS en un navegador.
PostCSS permite cambiar el analizador y el generador. En este caso, PostCSS podría usarse para trabajar con las fuentes Less y SCSS. Sin embargo, PostCSS por sí solo no puede compilar Sass o Less en CSS. Lo que hace es cambiar los archivos originales, por ejemplo, ordenando las propiedades CSS o revisando el código en busca de errores. PostCSS es compatible con SugarSS