Down arrow

postCSS REVOLUTION

¡Buenas tardes!

Me llamo Jorge Aznar y trabajo como front en Hiberus Internet.

¿postCSS?

“PostCSS is a tool for transforming CSS with JS plugins. These plugins can support variables and mixins, transpile future CSS syntax, inline images, and more.”

postCSS vs SASS

NOOOOOOO!!!

postcss

love

SASS - LESS - STYLUS

preCSS

Utilizando SASS con postCSS
  • postcss-mixins
  • postcss-advanced-variables
  • postcss-partial-import
  • postcss-color-function
  • postcss-nesting
  • postcss-nested
  • postcss-extend
  • postcss-selector-not

postCSS NO es un preprocesador

puede convivir con tu preprocesador favorito como SASS & LESS

postCSS NO es un postprocesador

It is time admit my mistakes. “Postprocessor” term was bad. PostCSS team stoped to use it.

COMO TRABAJA POSTCSS

LANZANDO POSTCSS

VENTAJAS

Modular y flexible

Tenemos la oportunidad de crear nuestra propia herramienta de trabajo y adaptarla a cada proyecto.

“Someone asked @andreysitnik why you make @PostCSS He answered becouse I pull request to compass CSS and they didn't ansewred me.” “@andreysitnik @PostCSS so I decided to destroy them.”

Rápidez

Procesadores CSS Velocidad
postCSS 39ms
Rework 79ms
libsass 179ms
LESS 179ms
STYLUS 269ms
Ruby SASS 1101ms

Comunidad

Más de 200 plugins

Utilizado por Google, Twitter, Alibaba y Shopify

Popularidad

18.347.510 de descargas totales

Más de 2.000.000 de descargas mensuales

Plugins

  • Packs
  • Future CSS Syntax
  • Fallbacks
  • Images and Fonts
  • Grids
  • Optimizations
“However, developers are generally no interest in trying out things they can't use in production.”

Lea Verou in CSS Secrets

“La vida es eso que pasa mientras los navegadores deciden dar soporte a las nuevas funcionalidades de CSS. ”

Jorge Aznar antes de conocer CSSNEXT

Use tomorrow’s CSS syntax,

TODAY.

CSSNEXT

custom properties

¿Que son las custom-properties?

También mal llamadas CSS variables


                :root {
    --colorico: navajowhite;
}

h2 {
    color: var(--colorico);
}

Las custom properties pueden ser globales o 'locales'


//Globales
:root,
html,
body {
    --colorico: navajowhite;
}

//Locales

.foo {
    --paddingCC: 20px;
    padding: var(--paddingCC);
}

Puedes ser modificadas con JavaScript

Update CSS Variables with JS

Puedes ser modificadas en los Media Queries

DEMO! 

:root {
  --size: 90%;
  --fontSize: 20px;
  --lineH: 26px;
  --colorFT: #271764;
  --colorBG: #E1DCE3;
  --padding: 40px;
  --margin: 50px;
  --fontF: -apple-system,BlinkMacSystemFont,sans-serif;
}


.foo {
  display: block;
  font-size: var(--fontSize);
  font-family: var(--fontF);
  line-height: var(--lineH);
  margin: var(--margin) auto;
  width: var(--size);
  color: var(--colorFT);
  background-color: var(--colorBG);
  padding: var(--padding);
  box-sizing: border-box;
}

@media only screen and (min-width: 64em) {
  .foo {
    --size: 40%;
  --fontSize: 30px;
  --lineH: 36px;
  --colorFT: #242424;
  --colorBG: #E4A824;
  }
}

SOPORTE!

CSSNEXT

custom media queries

//Definimos el custom media querie
@custom-media --ipad (width => 48rem);

//Declaramos el custom media querie
@media (--ipad) {
  body {
  display: none;
  }
}

CSSNEXT

custom selectors

//Definimos el selector
@custom-selector --encabezados h1, h2, h3, h4, h5, h6;
--encabezados { font-family: -apple-system,BlinkMacSystemFont,sans-serif; }

automatic vendor prefixes fixes

reduced calc()

nesting

color()

function hwb()

function gray()

function #rrggbbaa colors

rgba function (rgb fallback)

rebeccapurple color

font-variant property

filter property (svg fallback)

initial value

rem unit (px fallback)

:any-link pseudo-class

:matches pseudo-class

:not pseudo-class (to l.3)

::pseudo syntax (: fallback)

postCSS-sorting

Ordenando tus propiedades de CSS con CSSCOMB, Yandex y Zen

“Friendly reminder that CSS declaration sorting (no matter how) helps gzip perform better.” Hugo Giraudel Aumentando la compresión GZIP de CSS

Bootstrap

CSS sin ordenar: 19.690 bytes

CSS ordenado con csscomb: 19.429 bytes

CSS ordenado con yandex: 19.427 bytes

CSS ordenado con zen: 19.470 bytes

Así que simplemente por ordenar nuestros archivos con el método de Yandex hemos reducido un 1.34%(263 bytes) el archivo de CSS.

postCSS-cssstats

Controlando el tiempo que utiliza cada plugin para ejecutarse

Plugis que utilizo

MUCHOS PLUGINS MÁS EN: postcss.parts

¡A PRACTICAR!

Vamos a la siguiente URL:https://github.com/jorgeatgu/postcss-congresoweb/

EJERCICIO 1

NPM + postCSS + Gulp

Creando el package.json


npm init

Instalando dependencias


                                npm install gulp gulp-autoprefixer gulp-postcss gulp-sourcemaps postcss-import postcss-nested postcss-sorting --save-dev

Configurando Gulp


var gulp = require('gulp');
postcss = require('gulp-postcss');
autoprefixer = require('gulp-autoprefixer');
sourcemaps = require('gulp-sourcemaps');
atImport = require('postcss-import');
cssnext = require('postcss-cssnext');
sorting = require('postcss-sorting');
nested = require('postcss-nested');

Configurando Gulp


gulp.task('css', function() {
    var processors = [
        atImport,
        nested,
        cssnext,
        sorting({
            "sort-order": "csscomb"
        }),
        autoprefixer
    ];
});

OJO CUIDAO!

El orden de los plugins IMPORTA

ISSUE - Event based API

Configurando Gulp


gulp.task('default', function() {
    gulp.watch('./src/css/*.css', ['css']);
});

Configurando Gulp


return gulp.src('./src/css/styles.css')
.pipe(sourcemaps.init())
.pipe(postcss(processors))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('./css'));

EJERCICIO 2

Custom properties y custom selector

EJERCICIO 3

Modificando las custom properties en los Media-Queries

¿PREGUNTAS?

¡GRACIAS!