Post Top Ad

Your Ad Spot

martes, 21 de abril de 2020

PostCSS - Transformando tu CSS con JavaScript

Cuando se trata de CSS, siempre se introducen nuevas herramientas para ayudarnos a transformar los estilos de una manera más rápida y eficiente. En 2013, se lanzó PostCSS, pero no fue sino hasta mediados de 2015 cuando realmente comenzó a producirse un gran revuelo en la comunidad de desarrollo en torno a PostCSS. Hoy, en 2018, PostCSS todavía se usa ampliamente en la comunidad de desarrollo y el proyecto en sí aún es mantenido activamente por una gran comunidad de contribuyentes.
Así que hoy pensamos que le daríamos una breve introducción sobre qué es PostCSS y cómo puede utilizarlo para optimizar su flujo de trabajo de desarrollo. Asegúrese de revisar también nuestra publicación anterior donde discutimos algunas de las diferencias entre los preprocesadores CSS, Sass vs Less .

¿Qué es PostCSS?# #

PostCSS fue desarrollado por Andrey Sitnik , también autor de Autoprefixer, como un medio para usar JavaScript (principalmente con complementos) para el procesamiento CSS y / o la transformación de estilos. Se le conoce comúnmente como un postprocesador, pero otros a veces se refieren a PostCSS como un preprocesador . Al final, David Clark lo resume muy bien.
Tenga en cuenta que ni la herramienta ni el ecosistema del complemento son análogos directos a Sass y Less. Sin embargo: agrupe un conjunto de complementos relacionados que transforman hojas de estilo amigables para el autor en CSS amigable para el navegador, y luego tiene algo análogo a los buenos "preprocesadores".
No importa cómo lo llames, es importante conocer las diferencias y cómo funciona. PostCSS no es necesariamente un reemplazo para Sass o Less . Todavía puede usar su preprocesador favorito y luego usar el procesamiento PostCSS con complementos (aunque esto podría complicar su flujo de trabajo en lugar de simplificarlo). PostCSS, la herramienta en sí misma, es básicamente una API que le permite hablar con los complementos de PostCSS. Estos complementos pueden unir su CSS, admitir variables y mixins, transpilar futuras sintaxis CSS, imágenes en línea y más. Piense en ello como una configuración muy modular .
PostCSS definitivamente se ha vuelto muy popular entre los desarrolladores en los últimos 12 meses. Puede ver a continuación que en npm la cantidad de descargas por día ha aumentado constantemente. Y en total, ha habido 21,757,724 descargas entre el 31 de diciembre de 2014 y el 28 de junio de 2016.
postcss npm stats
Y si echamos un vistazo a Google Trends para " PostCSS " parece que definitivamente hay una curva ascendente.
postcss google trends

Los inconvenientes de los preprocesadores tradicionales#

Hay algunos inconvenientes o limitaciones que vienen con los preprocesadores tradicionales como Sass, Less, Stylus, etc. Estos incluyen:
  • La mayoría de los preprocesadores no pretenden ser compatibles con los estándares W3C.
  • Mantener una biblioteca de fragmentos Sass o Less puede volverse engorroso y dejar su proyecto con un montón de código no utilizado.
  • Los preprocesadores no son extensibles, por lo tanto, si necesita algo más de lo que ofrece, debe agregar otro paso en su proceso de compilación.

Ventajas de usar PostCSS#

Una vez que haya dominado CSS, hay muchas ventajas al usar los versos PostCSS de un preprocesador o no usar nada en absoluto. En primer lugar, definitivamente ayuda a extender CSS de una forma completamente nueva utilizando sintaxis y propiedades personalizadas . Sin embargo, una de las mayores ventajas es probablemente usar el ecosistema de complementos que lo acompaña. Hay más de 200 complementos, vea una lista completa aquí .
postcss plugin list
Algunas otras ventajas de usar PostCSS incluyen la posibilidad de ampliar más fácilmente la funcionalidad con la capacidad de crear su propio complemento y funciones personalizadas . Luego, puede transformar su CSS en lo que necesite personalmente y usarlo en su flujo de trabajo.
Otra ventaja es que PostCSS es increíblemente rápido . Probablemente no notarás esto en la compilación, pero vale la pena mencionarlo.
PostCSS:   36 ms
libsass:   110 ms  (3.0 times slower)
Less:      157 ms  (4.3 times slower)
Stylus:    286 ms  (7.9 times slower)
Ruby Sass: 1092 ms (30.1 times slower)
PostCSS también usa módulos, lo que significa que su sintaxis de nombres se vuelve mucho más fácil . En este ejemplo, puede ver la entrada y la salida.

Entrada de CSS#

.name {
    color: gray;
}

Salida de CSS#

.Logo__name__SVK0g {
    color: gray;
}
Y, por último, puede evitar más errores en su CSS porque impone convenciones consistentes con stylelint . Ver ejemplo a continuación.

Entrada de CSS#

a {
    color: #d3;
}

Salida de CSS#

app.css
2:10 Invalid hex color

Diferencia entre PostCSS y preprocesador#

En caso de que se lo esté preguntando, aquí hay un ejemplo de cómo PostCSS difiere ligeramente de lo que dice el preprocesador Sass. Normalmente con Sass usas una función como rem para hacer una conversión de unidades.
/* input */
.selector { margin-bottom: rem(20px); }

/* output, assuming base font size is 1rem */
.selector { margin-bottom: 1.25rem; }
Con el complemento PostCSS postcss-pxtorem ya ni siquiera tenemos que usar la función en nuestro código y automáticamente realiza la conversión de la unidad por nosotros.
/* input */
.selector { margin-bottom: 20px; }

/* output, assuming base font size is 1rem */
.selector { margin-bottom: 1.25rem; }

Comenzando con PostCSS#

Si alguna vez ha utilizado las tareas de Grunt o Gulp , comenzar con PostCSS será bastante fácil para usted. Es más o menos un proceso de dos pasos para comenzar:
  1. Agregue las extensiones PostCSS para cualquier herramienta de compilación que esté utilizando en su flujo de trabajo, ya sea Gulp, Grunt, etc.
  2. Seleccione entre los muchos complementos disponibles y agréguelos a su proceso PostCSS.

Trago#

Para configurar PostCSS con Gulp, puede ejecutar el siguiente comando. Esto está usando gulp-postcss . Y, por supuesto, necesitará Node.js, NPM y Git instalados.
npm install --save-dev gulp-postcss
Luego instale sus complementos PostCSS separados. Ejemplo de uso a continuación.
var postcss = require('gulp-postcss');
var gulp = require('gulp');
var autoprefixer = require('autoprefixer');
var cssnano = require('cssnano');

gulp.task('css', function () {
    var processors = [
        autoprefixer({browsers: ['last 1 version']}),
        cssnano(),
    ];
    return gulp.src('./src/*.css')
        .pipe(postcss(processors))
        .pipe(gulp.dest('./dest'));
});

Grunt#

Para configurar PostCSS con Grunt, puede ejecutar el siguiente comando. Esto está usando grunt-postcss . Y, por supuesto, necesitará Node.js, NPM y Git instalados.
npm install grunt-postcss --save-dev
Una vez que se ha instalado el complemento, debe habilitarlo dentro de su archivo Grunt:
grunt.loadNpmTasks('grunt-postcss');
Luego instale sus complementos PostCSS separados. Ejemplo de uso a continuación.
npm install grunt-postcss pixrem autoprefixer cssnano
grunt.initConfig({
    postcss: {
        options: {
            map: true, // inline sourcemaps

            // or
            map: {
                inline: false, // save all sourcemaps as separate files...
                annotation: 'dist/css/maps/' // ...to the specified directory
            },

            processors: [
                require('pixrem')(), // add fallbacks for rem units
                require('autoprefixer')({browsers: 'last 2 versions'}), // add vendor prefixes
                require('cssnano')() // minify the result
            ]
        },
        dist: {
            src: 'css/*.css'
        }
    }
});

PostCSS ejemplos#

A continuación hay un par de ejemplos que usan complementos populares de PostCSS para que pueda ver cómo está transformando el CSS.

Autoprefixer#

Aquí hay un ejemplo del uso del plugin de corrección automática PostCSS. Este complemento es bastante bueno porque analiza su CSS y agrega prefijos de proveedor a las reglas de CSS utilizando valores de Can I Use . No más tener que recordar todas las reglas aleatorias del navegador.
postcss autoprefixer

Entrada de CSS#

.example {
    display: flex;
    transition: all .5s;
    user-select: none;
    background: linear-gradient(to bottom, white, black);
}

Salida CSS#

.example {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-transition: all .5s;
    transition: all .5s;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background: -webkit-linear-gradient(top, white, black);
    background: linear-gradient(to bottom, white, black);
}

cssnext#

Aquí hay un ejemplo del uso del complemento cssnext PostCSS. Transforma las especificaciones de CSS en CSS más compatibles, por lo que no necesita esperar a que sea compatible con el navegador.
cssnext postcss

Entrada de CSS#

:root {
    --red: #d33;
}

a {
    &:hover {
        color: color(var(--red) a(54%));
    }
}

Salida CSS#

a:hover {
    color: #dd3333;
    color: rgba(221, 51, 51, 0.54);
}
Hay cientos de complementos en cada categoría, desde imágenes y fuentes, linters, sintaxis, mejor legibilidad y mucho más. Podríamos estar aquí todo el día si mostramos ejemplos de todos ellos.

Desarrollo activo#

El proyecto PostCSS es muy activo y popular en GitHub, con poco más de 10,000 estrellas y más de 500 tenedores.
Actividad de GitHubPostCSS
# de problemas abiertos20
# de solicitudes de extracción pendientes2
# de confirmaciones en los últimos 30 días58

Resumen#

Como puede ver, PostCSS puede ser una herramienta poderosa cuando se trata de transformar su CSS usando JavaScript. Puede ser un reemplazo para su preprocesador o puede usarlos juntos. Con su gran ecosistema de complementos, hace que sea mucho más fácil introducir código nuevo a sus equipos de desarrollo.
¿Has estado usando PostCSS todavía? Si es así, háganos saber a continuación en los comentarios.

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas