PostCSS
Andrey Sitnik
Evil Martians
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/2479657/2dc3d70b11fe7f.jpg)
Russia
We Work with
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/2369968/gett.png)
Our Open Source
1. PostCSS is Important
2 000 000 downloads per month
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/2474717/ZsFV4Rz.png)
Users
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/2470160/library_logos_alibababv_large.png)
Used Inside
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/2474747/687474703a2f2f7765627061636b2e6769746875622e696f2f6173736574732f6c6f676f2e706e67.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/2474753/css-modules-logo.png)
UnCSS
2. What is PostCSS?
CSS
Stringifier
Parser
Plugin 1
Plugin 2
New CSS
gulp.task('css', () => {
let postcss = require('gulp-postcss');
return gulp.src('src/*.css')
.pipe( postcss([ plugin1, plugin2 ]) )
.pipe( gulp.desc('build/') );
});
Usage
postcss.plugin('my-plugin', function () {
return function (css) {
doSomething(css);
};
});
Plugin
.block {
&_title {
font-size: 200%;
}
}
Plugins like Less / Sass
.block_title {
font-size: 200%;
}
.foo {
opacity: 0.8;
}
Plugins for Fallbacks
.foo {
opacity: 0.8;
filter: alpha(opacity=80)\9;
}
.foo {
border: none;
}
Plugins for Minify
.foo{border:0}
.foo {
margin-top: 10px;
margin: 0 auto;
}
Plugins for Lint
foo.css:3:5: margin overrides margin-top.
Is it accidentally mistake?
PostCSS vs. Less / Sass
PostCSS:
Less:
Mixins
Mixins
Transform
Lint
PostCSS vs. Gulp
PostCSS:
Gulp:
Parse
Transform
Fallbacks
Minify
Parse
Transform
Fallbacks
Minify
Parse
Parse
3. How to Start
Step 1
Less + PostCSS
return gulp.src('src/*.less')
.pipe( less() )
.pipe( postcss([]) )
.pipe( gulp.desc('build/') );
postcss( no plugins ):
input == output
*.less
Less
CSS
PostCSS
Same CSS
Happy
product manager
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/2471564/873_tuzki_014_o.png)
Step 2
postcss([
require('autoprefixer')
])
"last 2 version", "ie > 8"
+
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/2476501/N9dPTCk.png)
.foo {
user-select: none;
}
.foo {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
No Mixins
.foo {
transform: rotate(10deg);
}
.foo {
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
}
Only Actual Prefixes
.foo {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.foo {
border-radius: 5px;
}
Clean Old Prefixes
Step 2
postcss([
require('postcss-csssimple'),
require('autoprefixer')
])
IE Fallbacks
.foo {
display: inline-block;
}
.foo {
display: inline-block;
*display: inline;
*zoom: 1;
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/2471550/tuzki_2013_avatar_23.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/2480030/20131217-ie8.png)
postcss-svg-fallback
.icon {
background: url(icon.svg) no-repeat;
background-size: 20px 20px;
}
.icon {
background: url(icon.svg) no-repeat;
background-size: 20px 20px;
}
.no-svg .icon {
background-image: url(icon-20x20.png);
}
Step 3
postcss([
require('postcss-cssnext'),
require('postcss-csssimple'),
require('autoprefixer')
])
@custom-media --phone (width <= 600px);
@media (--phone) {
.promo-image {
display: none;
}
}
“CSS 4” today
Step 4
postcss-sprites
.comment {
background: url(sprite/comment.png) no-repeat 0 0;
}
.bubble {
background: url(sprite/bubble.png) no-repeat 0 0;
}
.comment {
background: url(sprite.png) no-repeat 0 0;
}
.bubble {
background: url(sprite.png) no-repeat 0 -50px;
}
postcss-url
.comment {
background: url(comment.png);
}
.comment {
background: url(data:image/png;base64,
R0lGODdhMAAwA…);
}
Step 5
gulp.task('lint:css', function () {
return gulp.src('src/*.less')
.pipe( postcss([
require('stylelint'),
require('postcss-reporter'),
], {
syntax: require('postcss-less')
}) );
});
Stylelint
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/2470369/tuzki_2013_avatar_21.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/2471434/97.png)
Lead
Junior
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/2470369/tuzki_2013_avatar_21.jpg)
Junior
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/2471224/tuzki_tact.png)
Stylelint
Lead
RTLCSS
.logo {
float: left;
margin: 0 0 0 10px;
}
.logo {
float: right;
margin: 10px 0 0 0;
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/2553002/463a6550-f674-11e4-9f7b-e2d43bf72f1b.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/2553003/463dd410-f674-11e4-8a4a-7b26025b79b5.png)
RTLCSS
Advanced Topics
PreCSS
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/2480207/68747470733a2f2f692e696d6775722e636f6d2f7a78784e334f582e706e67.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/2474753/css-modules-logo.png)
Links
twitter.com/ andreysitnik
twitter.com/ postcss
gitter.im/ postcss/postcss
PostCSS Intro
By Andrey Sitnik
PostCSS Intro
- 11,032