http://wpsv.se

Why

What
How

CSS Templating

a {
    <%= include clickable %>
    color: <%= $link-color %>;
}

Syntax

1. Variables

$blue: #00263e

2. Nestling

ul { ... li { ... a { ... } } div { section { ... } ... } }

3. Mixins

@include super-fancy-mixin

4. Functions

darken(green,15%)

Difficult to maintain

Why

What
How

PostCSS

November 4, 2013

650 000+ downloads / week

Built on JavaScript

:fullscreen a {
    transition: transform 1s;
}

:-webkit-full-screen a {
    -webkit-transition: -webkit-transform 1s;
            transition: transform 1s;
}

:-moz-full-screen a {
    transition: transform 1s;
}

:-ms-fullscreen a {
    transition: transform 1s;
}
:fullscreen a {
    -webkit-transition: -webkit-transform 1s;
            transition: transform 1s;
}

:fullscreen a {
 transition: transform 1s;
}

Autoprefixer

a:hover {
 color: blue;
}

a:hover,
a:focus {
 color: blue;
}

PostCSS-focus

input.css

output.css

@custom-selector --heading h1, h2, h3

.post-article --heading {
    margin-top: calc(10 * var(--row));
    font-variant-caps: small-caps;
}

PostCSS-cssnext

doiuse

main.css: line 15, col 3 -
  CSS user-select: none not supported by: IE (8,9)

main.css: line 32, col 3 -
  CSS3 Transforms not supported by: IE (8)

PostCSS-flexbugs

.flex-beginner {
  flex: 1;
}

.flex-beginner {
  flex: 1 1 0%;
}

output.css

input.css

PostCSS-initial 

.reset {
  all: initial;
}

.reset {
  columns: auto;
  column-count: auto;
  column-fill: balance;
  column-gap: normal;
  column-span: 1;
  column-width: auto;
  counter-reset: none;
  cursor: auto;
  .....
}

output.css

input.css

200+ postcss-plugins

So, you want to make a PostCSS plugin?

https://css-tricks.com/want-make-postcss-plugin/

    

    
    var postcss = require('postcss');
    
    module.exports = postcss.plugin('postcss-bakåtvänd', function (opts) {
      opts = opts || {};
      return function (css, result) {
    
        // Runs through all of the nodes (declorations) in the file
        css.walkDecls(declaration => { 
          declaration.value = declaration.value.split('').reverse().join(''); 
        });
    
      };
    });

color: eulb --> color: blue

postcss-reverse

Why

What
How

.pipe( postcss([
    require('postcss-nested'),
    require('postcss-mixins'),
    require('postcss-simple-vars'),
    require('autoprefixer'),
    require('postcss-easings'),
    require('cssnext')
]) )

Build tool

webpack, gulp, grunt, cli, ....

Works with

Sass, Less and Stylus

.pipe( sass() )
.pipe( postcss([
    require('autoprefixer')
]) )

Everyone is adopting PostCSS

Explore PostCSS

Thank you!

https://marcustisater.github.io/

github: marcustisater

twitter: MarcusTister

twitter:  @postcss

postcss.org

slides.com/marcustisater/postcss