Ahora que me siento cómod@ con Sass* aparece otra herramienta...

* Sass | Less | Stylus

Lo que necesitas saber

-Autoprefixer-

Usado por: Google, Shopify, Twitter, Bootstrap, Wordpress, Codepen & Schibsted

Autoprefixer

Es un plugin PostCSS que analiza el CSS y añade los prefijos de los navegadores a las propiedades CSS necesarias, usando los valores de Can I Use

a {
    display: flex;
}

a {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

Escribe CSS estándar

a {
    -webkit-border-radius: 5px;
            border-radius: 5px;
}

a {
    border-radius: 5px;
}

Sólo prefijos actuales

¿Qué no es PostCSS?

• No es un pre-procesador*

• No es un post-procesador

• No es la sintaxis del futuro

• No es un herramienta de Limpieza / Optimización

¿Qué es PostCSS?

PostCSS es una herramienta para transformar estilos mediante plugins de JavaScript

PostCSS es un módulo de Node.js que analiza tu CSS y lo transforma en un árbol de sintaxis abstracta (AST) .

Ese AST es interpretado y puede ser modificado mediante funciones o plugins JavaScript. Luego, PostCSS convierte nuevamente ese AST en texto, generando un archivo de salida con un CSS modificado.

PostCSS Playground

Ventajas

Versatil

Modular

Rapidez

"Do It Yourself"

Entornos de desarrollo

CLI, Webpack, Gulp, Grunt, HTML, Stylus, Rollup, Brunch, Broccoli, Meteor, ENB, Taskr, Start, Connect/Express.

/postcss#usage/

Webpack

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'style-loader',
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 1,
                        }
                    },
                    {
                        loader: 'postcss-loader'
                    }
                ]
            }
        ]
    }
}

module.exports = {
    plugins: [
        require('precss'),
        require('autoprefixer')
    ]
}

Use postcss-loader in webpack.config.js

Gulp

gulp.task('css', function () {
    var postcss    = require('gulp-postcss');
    var sourcemaps = require('gulp-sourcemaps');

    return gulp.src('src/**/*.css')
        .pipe( sourcemaps.init() )
        .pipe( postcss([ require('precss'), require('autoprefixer') ]) )
        .pipe( sourcemaps.write('.') )
        .pipe( gulp.dest('build/') );
});

Use gulp-postcss and gulp-sourcemaps

CLI

/postcss-load-config/

CLI + npm

{
  "scripts": {
    "postcss": "postcss src/css/index.css -o src/css/styles.css -m -w",
  }
}

/Komenco/

module.exports = (ctx) => ({
  map: ctx.options.map,
  plugins: {
    'postcss-devtools': ctx.env === 'development' ? {} : false,
    'postcss-import': {},
    'postcss-custom-properties': {},
    'postcss-custom-media': {},
    // 'postcss-color-function': {},
    // 'postcss-for': {},
    // 'postcss-calc': {},
    // 'postcss-mixins': {},
    // 'postcss-nested': {},
    // 'postcss-focus': {},
    // 'css-mqpacker': {},
    'postcss-reporter': ctx.env === 'development' ? { clearMessages: true } : false,
    'cssnano': ctx.env === 'production' ? {} : false
  }
})

De Sass a PostCSS

Imports

Variables
Nesting
Mixins
Iterators

Sass

Plugins

PreCSS

/precss/

CSS del futuro

automatic vendor prefixes
custom properties & var()
custom properties set & @apply
reduced calc()
custom media queries
media queries ranges
custom selectors
nesting
image-set()
color()
hwb()
gray()
#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)
overflow-wrap property (word-wrap fallback)
attribute case insensitive
rgb() (functional-notation)
hsl() (functional-notation)
system-ui font-family (font-family fallback)

cssnext

/playground/

cssnext

/usage/

Usando cssnext

#browsers

Usando cssnext

#TIP

#features

Plugins

stylelint

postcss-bem-linter

postcss-cssstats

css2modernizr

postcss-debug

postcss-inline-svg

postcss-svg

postcss-devtools

Plugins

Interesantes

postcss-assets

cssnano

postcss-svgo

css-mqpacker

postcss-advanced-variables

postcss-animation

postcss-magic-animations

😜

postcss-alias

postcss-short-position

postcss-nested-props

postcss-camelcaser

postcss-responsive-font

postcss-responsive-properties

postcss-bem

Plugins

Que no usaría @diana_aceves_

[Ref]

postcss-andalusian-stylesheets

postcss-trolling

postcss-imperial

...

Plugins

😂

/Fun/

Recusos

PostCSS

PostCSS(Org. GitHub)

PostCSS (Gitter)

PostCSS.Parts

CSSnext

CSSnext (Gitter)

PostCSS – A Comprehensive Introduction

Mastering PostCSS for Web Design (Book)

Mastering PostCSS for Web Design (Code)

Stylelint Config Generator

What’s next for CSS?

PostCSS (Curso Escuela IT)

ITCSS Elastic Login Form

Komenco

Recursos

Bonus Track