Hispanopedia Wiki
Articulo de referencia

PostCSS

{{Cite web|url=https://github.com/postcss/postcss/blob/main/LICENSE|title=postcss/LICENSE at main · postcss/postcss|date=2013-09-24|access-date=2021-03-19|website=GitHub}} "},"w...

Hispanopedia WikiContenido en espanolLectura gratuita

PostCSS es una herramienta de desarrollo de software que utiliza complementos basados ​​en JavaScript para automatizar operaciones rutinarias de CSS . [ 3 ] Fue diseñada por Andrey Sitnik, cuya idea surgió de su trabajo de desarrollo front-end para Evil Martians. [ 4 ]

Funcionalidad

Flujo de trabajo de PostCSS

PostCSS es un marco de trabajo para desarrollar herramientas CSS. [ 5 ] Se puede utilizar para desarrollar un lenguaje de plantillas como Sass y LESS . [ 6 ]

El núcleo de PostCSS consta de: [ 7 ]

  • Analizador CSS que genera un árbol de sintaxis abstracta
  • Conjunto de clases que componen el árbol
  • Generador CSS que genera una línea CSS para el árbol de objetos.
  • Generador de mapas de código para los cambios CSS realizados

Las funcionalidades se habilitan mediante complementos. Estos complementos son pequeños programas que trabajan con el árbol de objetos . Una vez que el núcleo transforma una cadena CSS en un árbol de objetos, los complementos analizan y modifican dicho árbol. Posteriormente, 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 ofrece API para operaciones de JavaScript de bajo nivel.

Existen herramientas oficiales que permiten usar 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 usar para abrir PostCSS en un navegador. [ 12 ]

Sintaxis

PostCSS permite cambiar el analizador y el generador. En este caso, PostCSS podría usarse para trabajar con los archivos fuente Less [ 13 ] y SCSS [ 14 ] . Sin embargo, PostCSS por sí solo no puede compilar Sass o Less a CSS. Lo que hace es modificar los archivos originales, por ejemplo, ordenando las propiedades CSS o revisando el código en busca de errores. PostCSS es compatible con SugarSS [ 15 ] .

Plugins

Los plugins 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 plugins se puede encontrar en postcss.parts, con algunos ejemplos que se muestran a continuación.

  • Autoprefixer para agregar y borrar prefijos del navegador. [ 16 ]
  • Módulos CSS para aislar 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 según la configuración de stylelint. [ 20 ]
  • PreCSS para realizar algunas funciones de preprocesamiento de Sass / Less . [ 21 ]
  • postcss-preset-env para emular características de borradores de especificaciones CSS inacabados. [ 22 ]
  • cssnano para reducir el tamaño de CSS eliminando los espacios y reescribiendo el código. [ 23 ]
  • RTLCSS modifica el código CSS para que el diseño sea adecuado para la 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 transcurso 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 la expresó públicamente. [ 29 ]

El 14 de marzo de 2013, el trabajo de desarrollo front-end de Andrey Sitnik para Evil Martians dio como resultado Autoprefixer, un plugin basado en Rework. [ 30 ] Inicialmente, el nombre del plugin 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 basándose en las ideas de Rework. [ 34 ]

En 3 meses, se lanzó el primer complemento de PostCSS, grunt-pixrem. [ 35 ] El 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 principales y secundarias de PostCSS reciben sus nombres de los demonios de Ars Goetia . [ 39 ] Por ejemplo, la versión 1.0.0 se llama Marquis Decarabia.

El término postprocesador ha causado cierta confusión. [ 40 ] El equipo de PostCSS usó el término para mostrar que PostCSS no era un lenguaje de plantillas (preprocesador) sino una herramienta CSS. Sin embargo, algunos desarrolladores piensan que el término postprocesador se ajustaría mejor a las herramientas del navegador (por ejemplo, -prefix-free). [ 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

  1. ↑ "Versión 8.5.16" . 28 de junio de 2026. Consultado el 29 de junio de 2026 .
  2. ↑ "postcss/LICENSE en main · postcss/postcss" . GitHub . 24-09-2013 . Consultado el 19-03-2021 .
  3. ↑ Bracey, Kezz (23 de septiembre de 2015). "PostCSS Deep Dive: What You Need to Know" . Envato Tuts+ . Recuperado el 19 de marzo de 2021 .
  4. ↑ Sitnik, Andrey (2014-12-13). "Add Evil Martians badge · postcss/postcss@513f9c1" . GitHub . Recuperado el 2021-03-19 .
  5. ↑ uMaxmaxmaximus; Sitnik, Andrey (2016-08-04). "¿Por qué necesitamos PostCSS si tenemos Webpack o_O? · Problema #861 · postcss/postcss" . GitHub . Recuperado el 2021-03-19 .
  6. ↑ Bracey, Kezz (2015-10-21). "PostCSS Deep Dive: Preprocessing with "PreCSS"" . GitHub . Consultado el 19 de marzo de 2021 .
  7. ↑ Sitnik, Andrey (24-06-2015). Andrey Sitnik - PostCSS: El futuro después de Sass y LESS - YouTube . YouTube (Vídeo). BocoupLLC . Recuperado el 19-03-2021 .
  8. ↑ webpack-contrib (2014-10-03). "webpack-contrib/postcss-loader: Cargador PostCSS para webpack" . GitHub . Recuperado el 19 de marzo de 2021 .
  9. ↑ Kuzmin, Andrey (17 de agosto de 2014). "postcss/gulp-postcss: Canalizar CSS a través de procesadores PostCSS con un solo análisis" . GitHub . Recuperado el 19 de marzo de 2021 .
  10. ↑ Nikitenko, Dmitry (25-09-2014). "nDmitry/grunt-postcss: Aplica varios postprocesadores a tu CSS usando PostCSS" . GitHub . Recuperado el 19-03-2021 .
  11. ↑ Krzeminski, Damian; Zimmerman, Ryan; Ciniawsky, Michael (2015-03-11). "postcss/postcss-cli: CLI para postcss" . GitHub . Recuperado el 2021-03-19 .
  12. ↑ Niemelä, Matias (23-09-2016). "Ejecutar postcss en el navegador · Problema #830 · postcss/postcss" . GitHub . Recuperado el 19-03-2021 .
  13. ↑ Powell, Andrew (26 de enero de 2016). "shellscape/postcss-less: Sintaxis PostCSS para analizar LESS" . GitHub . Consultado el 19 de marzo de 2021 .
  14. ↑ Sitnik, Andrew (2015-08-09). "postcss/postcss-scss: analizador SCSS para PostCSS" . GitHub . Recuperado el 19 de marzo de 2021 .
  15. ↑ Sitnik, Andrew (2016-01-04). "postcss/sugarss: Sintaxis CSS basada en indentación para PostCSS" . GitHub . Recuperado el 2021-03-20 .
  16. ↑ "postcss/autoprefixer: Analiza CSS y agrega prefijos de proveedor a las reglas de Can I Use" . GitHub . Consultado el 19 de marzo de 2021 .
  17. ↑ "css-modules/css-modules: Documentación sobre css-modules" . GitHub . Consultado el 19 de marzo de 2021 .
  18. ↑ "css-loader/package.json en 5a003e00645d2ed0b3e759db06f58a08fbdd6745 · webpack-contrib/css-loader" . GitHub . 15 de agosto de 2016. Consultado el 19 de marzo de 2021 .
  19. ↑ "stylelint/stylelint" . GitHub . Consultado el 19 de marzo de 2021 .
  20. ↑ "morishitter/stylefmt: stylefmt es una herramienta que formatea automáticamente las hojas de estilo" . GitHub . Consultado el 19 de marzo de 2021 .
  21. ↑ "jonathantneal/precss: Usa marcado tipo Sass en tu CSS" . GitHub . Consultado el 19 de marzo de 2021 .
  22. ↑ "csstools/postcss-preset-env: Convierte CSS moderno en algo que los navegadores entiendan" . GitHub . Consultado el 19 de marzo de 2021 .
  23. ↑ "cssnano/cssnano: Un minificador modular, construido sobre el ecosistema PostCSS" . GitHub . Consultado el 19 de marzo de 2021 .
  24. ↑ "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 .
  25. ↑ "borodean/postcss-assets: Un gestor de activos para PostCSS" . GitHub . Consultado el 19 de marzo de 2021 .
  26. ↑ "TrySound/postcss-inline-svg: complemento PostCSS para hacer referencia a un archivo SVG y controlar sus atributos con sintaxis CSS" . GitHub . Consultado el 19 de marzo de 2021 .
  27. ↑ "2createStudio/postcss-sprites: Genera sprites a partir de hojas de estilo" . GitHub . Consultado el 19 de marzo de 2021 .
  28. ↑ Holowaychuk, TJ (2012-09-01). "Initial commit · reworkcss/rework@0a7be25" . GitHub . Recuperado el 21 de julio de 2019 .
  29. ↑ Holowaychuk, TJ (28-02-2013). "Preprocesamiento modular de CSS con retrabajo - TJ Holowaychuk" . Tumblr . Archivado del original el 18-09-2014 . Recuperado el 18-09-2014 .
  30. ↑ Sitnik, Andrey (2013-03-14). "Initial commit · postcss/autoprefixer@d36346e" . GitHub . Recuperado el 2019-07-21 .
  31. ↑ Sitnik, Andrey (2013-03-28). "Cambiar el nombre del proyecto a autoprefixer · postcss/autoprefixer@419a77d" . GitHub . Recuperado el 2019-07-21 .
  32. ↑ Gallagher, Nicolas (2014-06-04). "Facilitate autoprefixer needs · Issue #20 · reworkcss/css" . GitHub . Recuperado el 21 de julio de 2019 .
  33. ↑ Sitnik, Andrey (2013-09-07). "Init project · postcss/postcss@2d96cea" . GitHub . Recuperado el 2019-07-21 .
  34. ↑ Sitnik, Andrey (2015-09-07). "Segundo cumpleaños de PostCSS: Martian Chronicles, blog del equipo de Evil Martians" . Martian Chronicles, blog del equipo de Evil Martians . Recuperado el 21 de julio de 2019 .
  35. ^ Rob, Wierzbowski (14 de diciembre de 2013). "Compromiso inicial · robwierzbowski/grunt-pixrem@0f7b662" . GitHub . Consultado el 21 de julio de 2019 .
  36. ↑ [ Sitnik, Andrey (2013-12-21). "Release 1.0 "Plus ultra" · postcss/autoprefixer" . GitHub . Recuperado el 2019-07-20 .
  37. ↑ Tisäter, Marcus (31-12-2015). "Mockup · Issue #4 · postcss/postcss.org" . GitHub . Recuperado el 21-07-2019 .
  38. ↑ @PostCSS (14-08-2015). "El logotipo de PostCSS es un símbolo alquímico de la piedra filosofal, que puede transformar metales en oro" ( Tweet ) – vía Twitter .
  39. ↑ @Autoprefixer (17/12/2013). "Cada nombre en clave de versión de PostCSS se toma de la lista de demonios del libro de alquimia "Lemegeton Clavicula Salomonis""" ( Tweet ) – vía Twitter .
  40. ↑ Marohnić, Matija (2014-09-07). "Preprocesamiento vs. postprocesamiento CSS | Blog de Silvenon" . Blog de Silvenon . Archivado del original el 2017-11-09 . Recuperado el 2017-11-09 .
  41. ↑ El problema del preprocesamiento basado en especificaciones futuras
  42. ↑ @PostCSS (28-07-2015). "Es hora de admitir mis errores. El término "Postprocessor" era malo. El equipo de PostCSS dejó de usarlo" ( Tweet ) – vía Twitter .
  • Sitio web oficialEdita esto en Wikidata
Obtenido de " https://en.wikipedia.org/w/index.php?title=PostCSS&oldid=1346566936 "
Lecturas relacionadas
6 articulos
Herramienta de programaciónHerramienta de programaciónUna herramienta de programación o herramienta de desarrollo de software es un programa informático que los desarrolladores de software utilizan par...Plug-in (informática)Plug-in (informática)En informática , un complemento (o plugin , add-in , addin , add-on o addon ) es un componente de software que agrega una característica específica...JavaScriptJavaScriptJavaScript ( / ˈdʒ ɑː v ə s k r ɪ p t / ), a menudo abreviado como JS , es un lenguaje de programación y una tecnología central de la Web , junto c...CSSCSSLas hojas de estilo en cascada ( CSS ) son un lenguaje de hojas de estilo que se utiliza para especificar la presentación y el estilo de un documen...Marco de softwareMarco de softwareEn programación informática , un marco de software es una abstracción en la que el software , que proporciona una funcionalidad genérica, puede mod...Edita esto en WikidataSass (lenguaje de hojas de estilo)Sass (abreviatura de syntaclyticly awesome style sheets ) es un lenguaje de scripting de preprocesador que se interpreta o compila en hojas de esti...