Developer Advocate & Training Manager
at
@SchibstedSpain


#Web #CSS #Javascript

#Animation #PostCSS

Joan León

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.

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.

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/') );
});

CLI

CLI + npm

{
  "scripts": {
    "postcss": "postcss src/css/index.css -o src/css/styles.css -m -w",
  }
}
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

postcss-extend-rule
postcss-advanced-variables
postcss-preset-env
postcss-atroot
postcss-property-lookup
postcss-nested

PreCSS

Plugins

/precss/

Imports

Variables
Nesting
Mixins
Iterators

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

cssnext

Usando cssnext

#browsers

Usando cssnext

#features

Plugins

Plugins

Interesantes

😜

Plugins

Que no usaría @diana_aceves_

[Ref]

Plugins

😂

Recusos

Recursos

Bonus Track

Enjoy CSS

Gracias

Developer Advocate & Training Manager
at
@SchibstedSpain


#Web #CSS #Javascript

#Animation #PostCSS

Joan León

PostCSS

By Joan León

PostCSS

  • 3,945