PostCSS es una herramienta de desarrollo de software que utiliza complementos basados en JavaScript para automatizar las operaciones rutinarias de CSS . [3] Fue diseñado por Andrey Sitnik con la idea de tener su origen en su trabajo de front-end para Evil Martians. [4]
Desarrollador (es) | Andrey Sitnik, Ben Briggs y Bogdan Chadkin |
---|---|
Versión inicial | 4 de noviembre de 2013 |
Lanzamiento estable | 8.2.8 / 9 de marzo de 2021 [1] |
Repositorio | postcss |
Escrito en | JavaScript |
Sistema operativo | Multiplataforma |
Disponible en | inglés |
Tipo | Herramienta de desarrollo CSS |
Licencia | Licencia MIT [2] |
Sitio web | postcss |
Funcionalidad
PostCSS es un marco para desarrollar herramientas CSS. [5] Se puede utilizar para desarrollar un lenguaje de plantilla como Sass y LESS. [6]
El núcleo de PostCSS consta de: [7]
- Analizador CSS que genera un árbol de sintaxis abstracto
- Conjunto de clases que componen el árbol
- Generador de CSS que genera una línea CSS para el árbol de objetos
- Generador de mapas de código para los cambios de CSS realizados
Las funciones están disponibles a través de complementos. Los complementos son pequeños programas que trabajan con el árbol de objetos . Una vez que el núcleo ha 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 distribuidos a través de npm , que ofrecen API para operaciones de JavaScript de bajo nivel.
Existen herramientas oficiales que hacen posible el uso de PostCSS con sistemas de compilación como Webpack , [8] Gulp , [9] y Grunt . [10] También hay una interfaz de consola disponible. [11] Browserify o Webpack se pueden utilizar para abrir PostCSS en un navegador. [12]
Sintaxis
PostCSS permite cambiar el analizador y el generador. En este caso, PostCSS podría utilizarse para trabajar con las fuentes Less [13] y SCSS [14] . 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 verificando el código en busca de errores. PostCSS es compatible con SugarSS. [15]
Complementos
Los complementos de PostCSS realizan diferentes tareas de procesamiento de CSS que van desde el análisis y la clasificación de propiedades hasta la minificación .
La lista completa de complementos se puede encontrar en postcss.parts, con algunos ejemplos a continuación.
- Autoprefixer para agregar y borrar prefijos del navegador. [dieciséis]
- Módulos CSS para aislar los selectores CSS y organizar el código. Se suministra como parte de Webpack . [17] [18]
- stylelint para analizar el código CSS en busca de errores y comprobar la coherencia del estilo. [19]
- stylefmt corrige el código CSS de acuerdo con la configuración de stylelint. [20]
- PreCSS para realizar algunas funciones de preprocesamiento Sass / Less . [21]
- postcss-preset-env para emular características de borradores de especificaciones CSS sin terminar. [22]
- cssnano para reducir el tamaño de CSS eliminando los espacios y reescribiendo el código. [23]
- RTLCSS para cambiar el código CSS para que el diseño sea adecuado para escritura de derecha a izquierda (como se aplica en árabe y hebreo ). [24]
- postcss-assets , postcss-inline-svg y postcss-sprites para trabajar con gráficos. [25] [26] [27]
Historia
Durante el curso del proyecto Rework, TJ Holowaychuk sugirió la idea del procesamiento modular de CSS el 1 de septiembre de 2012. [28] El 28 de febrero de 2013, TJ lo expresó en público. [29]
El 14 de marzo de 2013, el trabajo inicial de Andrey Sitnik para Evil Martians resultó en Autoprefixer, un complemento basado en Rework. [30] Inicialmente, el nombre del complemento era rework-vendors. [31]
A medida que Autoprefixer crecía, Rework ya no podía satisfacer sus necesidades. [32] 7 de septiembre de 2013, [33] Andrey Sitnik comenzó a desarrollar PostCSS basado en las ideas de Rework. [34]
En 3 meses, se lanzó el primer complemento PostCSS, grunt-pixrem. [35] 22 de diciembre de 2013, Autoprefixer versión 1.0 migró a PostCSS. [36]
Para PostCSS, el enfoque de estilo principal es la alquimia . [37] El logotipo del proyecto representa la piedra filosofal . [38] Las versiones mayores y menores de PostCSS reciben sus nombres después de los demonios Ars Goetia . [39] Por ejemplo, la versión 1.0.0 se llama Marquis Decarabia.
El término posprocesador ha causado cierta confusión. [40] El equipo de PostCSS usó el término para mostrar que PostCSS no era un lenguaje de plantilla (preprocesador) sino una herramienta CSS. Sin embargo, algunos desarrolladores piensan que el término postprocesador se adapta mejor a las herramientas del navegador (por ejemplo, sin prefijo). [41] La situación se ha vuelto aún más complicada después del lanzamiento de PreCSS. Ahora, en lugar de postprocesador, el equipo de PostCSS usa el término procesador. [42]
Referencias
- ^ "Versión 8.2.8 · postcss / postcss" . GitHub . 2021-03-09 . Consultado el 19 de marzo de 2021 .
- ^ "postcss / LICENCIA en main · postcss / postcss" . GitHub . 2013-09-24 . Consultado el 19 de marzo de 2021 .
- ^ Bracey, Kezz (23 de septiembre de 2015). "PostCSS Deep Dive: lo que necesita saber" . Envato Tuts + . Consultado el 19 de marzo de 2021 .
- ^ Sitnik, Andrey (13 de diciembre de 2014). "Agregar insignia de Evil Martians · postcss / postcss @ 513f9c1" . GitHub . Consultado el 19 de marzo de 2021 , a través de GitHub.
- ^ uMaxmaxmaximus; Sitnik, Andrey (4 de agosto de 2016). "¿Por qué necesitamos PostCSS si tenemos Webpack o_O? · Edición # 861 · postcss / postcss" . GitHub . Consultado el 19 de marzo de 2021 , a través de GitHub.
- ^ Bracey, Kezz (21 de octubre de 2015). "PostCSS Deep Dive: preprocesamiento con" PreCSS " " . GitHub . Consultado el 19 de marzo de 2021 , a través de GitHub.
- ^ Sitnik, Andrey (24 de junio de 2015). Andrey Sitnik - PostCSS: El futuro después de Sass y LESS - YouTube . YouTube (cinta de video). BocoupLLC . Consultado el 19 de marzo de 2021 .
- ^ webpack-contrib (3 de octubre de 2014). "webpack-contrib / postcss-loader: cargador PostCSS para webpack" . GitHub . Consultado el 19 de marzo de 2021 , a través de GitHub.
- ^ Kuzmin, Andrey (17 de agosto de 2014). "postcss / gulp-postcss: canalice CSS a través de procesadores PostCSS con un solo análisis" . GitHub . Consultado el 19 de marzo de 2021 , a través de GitHub.
- ^ Nikitenko, Dmitry (25 de septiembre de 2014). "nDmitry / grunt-postcss: aplique varios postprocesadores a su CSS usando PostCSS" . GitHub . Consultado el 19 de marzo de 2021 , a través de GitHub.
- ^ Krzeminski, Damian; Zimmerman, Ryan; Ciniawsky, Michael (11 de marzo de 2015). "postcss / postcss-cli: CLI para postcss" . GitHub . Consultado el 19 de marzo de 2021 , a través de GitHub.
- ^ Niemelä, Matias (23 de septiembre de 2016). "Ejecución de postcss en el navegador · Número 830 · postcss / postcss" . GitHub . Consultado el 19 de marzo de 2021 , a través de GitHub.
- ^ Powell, Andrew (26 de enero de 2016). "shellscape / postcss-less: Sintaxis PostCSS para analizar MENOS" . GitHub . Consultado el 19 de marzo de 2021 , a través de GitHub.
- ^ Sitnik, Andrew (9 de agosto de 2015). "postcss / postcss-scss: analizador SCSS para PostCSS" . GitHub . Consultado el 19 de marzo de 2021 , a través de GitHub.
- ^ Sitnik, Andrew (4 de enero de 2016). "postcss / sugarss: sintaxis CSS basada en sangría para PostCSS" . GitHub . Consultado el 20 de marzo de 2021 , a través de GitHub.
- ^ "postcss / autoprefixer: Analizar CSS y agregar prefijos de proveedor a las reglas mediante ¿Puedo usar" . GitHub . Consultado el 19 de marzo de 2021 , a través de GitHub.
- ^ "css-modules / css-modules: Documentación sobre css-modules" . GitHub . Consultado el 19 de marzo de 2021 , a través de GitHub.
- ^ "css-loader / package.json en 5a003e00645d2ed0b3e759db06f58a08fbdd6745 · webpack-contrib / css-loader" . GitHub . 2016-08-15 . Consultado el 19 de marzo de 2021 , a través de GitHub.
- ^ "stylelint / stylelint" . GitHub . Consultado el 19 de marzo de 2021 , a través de GitHub.
- ^ "morishitter / stylefmt: stylefmt es una herramienta que formatea automáticamente hojas de estilo" . GitHub . Consultado el 19 de marzo de 2021 , a través de GitHub.
- ^ "jonathantneal / precss: Use marcado tipo Sass en su CSS" . GitHub . Consultado el 19 de marzo de 2021 , a través de GitHub.
- ^ "csstools / postcss-preset-env: Convierta CSS moderno en algo que los navegadores comprendan" . GitHub . Consultado el 19 de marzo de 2021 , a través de GitHub.
- ^ "cssnano / cssnano: un minificador modular, construido sobre el ecosistema PostCSS" . GitHub . Consultado el 19 de marzo de 2021 , a través de GitHub.
- ^ "MohammadYounes / rtlcss: marco para transformar hojas de estilo en cascada (CSS) de izquierda a derecha (LTR) a derecha a izquierda (RTL)" . GitHub . Consultado el 19 de marzo de 2021 , a través de GitHub.
- ^ "borodean / postcss-assets: Un administrador de activos para PostCSS" . GitHub . Consultado el 19 de marzo de 2021 , a través de GitHub.
- ^ "TrySound / postcss-inline-svg: complemento PostCSS para hacer referencia a un archivo SVG y controlar sus atributos con la sintaxis CSS" . GitHub . Consultado el 19 de marzo de 2021 , a través de GitHub.
- ^ "2createStudio / postcss-sprites: Generar sprites a partir de hojas de estilo" . GitHub . Consultado el 19 de marzo de 2021 , a través de GitHub.
- ^ Holowaychuk, TJ (1 de septiembre de 2012). "Confirmación inicial · reworkcss / rework @ 0a7be25" . GitHub . Consultado el 21 de julio de 2019 a través de GitHub.
- ^ Holowaychuk, TJ (28 de febrero de 2013). "Preprocesamiento CSS modular con retrabajo - TJ Holowaychuk" . Tumblr . Archivado desde el original el 18 de septiembre de 2014 . Consultado el 18 de septiembre de 2014 .
- ^ Sitnik, Andrey (14 de marzo de 2013). "Confirmación inicial · postcss / autoprefixer @ d36346e" . GitHub . Consultado el 21 de julio de 2019 a través de GitHub.
- ^ Sitnik, Andrey (28 de marzo de 2013). "Cambiar el nombre del proyecto a autoprefixer · postcss / autoprefixer @ 419a77d" . GitHub . Consultado el 21 de julio de 2019 a través de GitHub.
- ^ Gallagher, Nicolas (4 de junio de 2014). "Facilitar las necesidades de autoprefixer · Edición n. ° 20 · reworkcss / css" . GitHub . Consultado el 21 de julio de 2019 a través de GitHub.
- ^ Sitnik, Andrey (7 de septiembre de 2013). "Proyecto de inicio · postcss / postcss @ 2d96cea" . GitHub . Consultado el 21 de julio de 2019 a través de GitHub.
- ^ Sitnik, Andrey (7 de septiembre de 2015). "Segundo cumpleaños de PostCSS - Crónicas marcianas, blog del equipo de Evil Martians" . Martian Chronicles, blog del equipo de Evil Martians . Consultado el 21 de julio de 2019 .
- ^ Rob, Wierzbowski (14 de diciembre de 2013). "Confirmación inicial · robwierzbowski / grunt-pixrem @ 0f7b662" . GitHub . Consultado el 21 de julio de 2019 a través de GitHub.
- ^ [ Sitnik, Andrey (21 de diciembre de 2013). "Versión 1.0" Plus ultra "· postcss / autoprefixer" . GitHub . Consultado el 20 de julio de 2019 a través de GitHub.
- ^ Tisäter, Marcus (31 de diciembre de 2015). "Maqueta · Número 4 · postcss / postcss.org" . Consultado el 21 de julio de 2019 .
- ^ @PostCSS (14 de agosto de 2015). "El logotipo de PostCSS es un signo de alquimia de la piedra filosofal, que puede transformar metales en oro" (Tweet) - a través de Twitter .
- ^ @Autoprefixer (17 de diciembre de 2013). "Cada nombre de código de versión de PostCSS se toma de la lista de demonios en el libro de alquimia" Lemegeton Clavicula Salomonis " " (Tweet) - a través de Twitter .
- ^ Marohnić, Matija (7 de septiembre de 2014). "Preprocesamiento vs postprocesamiento CSS | Blog de Silvenon" . Blog de Silvenon . Archivado desde el original el 9 de noviembre de 2017 . Consultado el 9 de noviembre de 2017 .
- ^ El problema con el preprocesamiento basado en especificaciones futuras
- ^ @PostCSS (28 de julio de 2015). "Es hora de admitir mis errores. El término" Postprocesador "era malo. El equipo de PostCSS dejó de usarlo" (Tweet) - a través de Twitter .
enlaces externos
- Página web oficial