Il talk ha come scopo raccontare come sia stato dapprima l'introduzione di strumenti di preprocessori come sass/less/stylus e in un secondo momento il passaggio a strumento di postproduzione del css come appunto postcss

1. FROM PREPROCESSOR
TO POSTPROCESSOR

3. DA DOVE VENIAMO?
CHE SIAMO?
DOVE ANDIAMO?

4. PERCHÉ LA FETTA BISCOTTATA
CADE SEMPRE
DAL LATO IMBURRATO?

5. LE GRANDI DOMANDE DEL WEBDEV

6. LE GRANDI DOMANDE DEL WEBDEV
QUALE FRAMEWORK JS USO OGGI?
QUALE FRAMEWORK JS USO DOMANI?

8. Matteo Guidotto
@j8matteo
Project Manager

9. IL LONTANO 2006
ITALIA CAMPIONE DEL MONDO

10. IL LONTANO 2006
STAGISTA FULLSTACK

11. IL LONTANO 2006
ANGOLI TONDI
SFONDI GRADIENTI

12. ANGOLI TONDI

13. ANGOLI TONDI
.round {
-webkit-border-top-left-radius: 1px;
-webkit-border-top-right-radius: 2px;
-webkit-border-bottom-right-radius: 3px;
-webkit-border-bottom-left-radius: 4px;
-moz-border-radius-topleft: 1px;
-moz-border-radius-topright: 2px;
-moz-border-radius-bottomright: 3px;
-moz-border-radius-bottomleft: 4px;
border-top-left-radius: 1px;
border-top-right-radius: 2px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 4px;
}

14. 2010: FLAT DESIGN FTW

15. 2015 CSSDAY

16. DA CSS A SASS
.area {
@include border-radius(10px);
@include background-
image(linear-gradient(120deg,
#2ac363, #cd8c14, #9c4cc2));
}
.area {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background-image: -moz-linear-
gradient(330deg, #2ac363, #cd8c14,
#9c4cc2);
background-image: -webkit-linear-
gradient(330deg, #2ac363, #cd8c14,
#9c4cc2);
background-image: linear-
gradient(120deg, #2ac363, #cd8c14,
#9c4cc2);
}

17. SASS DARK SIDE
NO CSS STANDARD
BLOCCO MONOLITICO

19. 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.”

20. POSTCSS NON È
COSA NON E’ POSTCSS
PREPROCESSOR
CSS FUTURE SYNTAX
POSTPROCESSOR
OPTIMIZATION TOOL
MINIFIER
PLUGIN JQUERY
ALL-IN-ONE TOOL
LINTER
SUBWAY SANDWICH

22. POSTCSS
TOOL
PLUGIN ECOSYSTEM

23. POSTCSS - TOOL

24. THE MOJO
ESSENZIALE
VELOCE
MODULARE
INTEGRABILE

25. ESSENZIALE
Libsass: 110 files, 21 300 LOC of C++
Stylus: 72 files, 7 900 LOC
Less: 105 files, 9 800 LOC

26. VELOCE
PostCSS: 39 ms
Rework: 73 ms (1.9 times slower)
libsass: 77 ms (1.9 times slower)
Less: 179 ms (4.5 times slower)
Stylus: 269 ms (6.8 times slower)
Stylecow: 271 ms (6.9 times slower)
Ruby Sass: 1101 ms (28.0 times slower)

27. MODULARE
Agglomerato di plugin 200+
Creare proprio plugin

28. INTEGRABILE

29. CIOÈ?
border-radius: 10px -moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;

30. CIOÈ?
border-radius: 10px -moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
brad: round10

31. I PLUGIN - AUTOPREFIXER
Display: flex display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex

32. I PLUGIN - CSSNEXT
:root {
--color: red;
}
div {
color: var(--color);
}
div {
color: red;
}

33. I PLUGIN - NESTED
.phone {
&_title {
width: 500px;
@media (max-width: 500px) {
width: auto;
}
body.is_dark & {
color: white;
}
}
img {
display: block;
}
}
.phone_title {
width: 500px;
}
@media (max-width: 500px) {
.phone_title {
width: auto;
}
}
body.is_dark .phone_title {
color: white;
}
.phone img {
display: block;
}

34. I PLUGIN - BEM
@b nav { /* b is for block */
@e item { /* e is for element */
display: inline-block;
}
@m placement_header {
background-color: red;
}
}
.nav {}
.nav__item {
display: inline-block
}
.nav_placement_header {
background-color: red
}

35. I PLUGIN - STYLELINT

36. I PLUGIN
PRECSS
RTLCSS
POSTCSS-FOCUS
CSSNANO
http://postcss.parts/

37. HANDS ON
npm install gulp-postcss

38. HANDS ON
var gulp = require('gulp');
var postcss = require('gulp-postcss');

39. HANDS ON
gulp.task('css', function () {
var processors = [
];
return gulp.src('./src/*.css')
.pipe(postcss(processors))
.pipe(gulp.dest('./dest'));
});

40. HANDS ON
var autoprefixer = require('autoprefixer');
var cssnext = require('cssnext');
var precss = require('precss');

41. HANDS ON
var processors = [
autoprefixer({browsers: ['last 1 version']}),
cssnext,
precss
];

42. HANDS ON - PLUGIN
brad: round10 -moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;

43. HANDS ON - PLUGIN
var postcss = require('postcss');
module.exports = postcss.plugin('postcss-brad', function (opts) {
opts = opts || {};
return function(css) {
css.walkDecls(function(decl) {
if (decl.prop.match(/^brad$/)) {
if (decl.value === "round10") {
decl.replaceWith("border-radius:10px");
}
}
});
};
});

44. OLTRE GULP
GRUNT e WEBPACK
CODEPEN
CLI
NODEJS
https://github.com/postcss/postcss

45. E REACT?
let prefixer = postcssJs.sync([ autoprefixer ]);
let style = prefixer({
display: 'flex'
});
style //=> { display: ['-webkit-box', '-webkit-flex', '-ms-flexbox', 'flex'] }
https://github.com/postcss/postcss-js

46. A PICCOLI PASSI?
POSTCSS + SASS + AUTOPREFIXER
POSTCSS + PRECSS
POSTCSS + MODUL*

47. C’È DA FIDARSI?
WORDPRESS
TWITTER
GOOGLE
WIKIPEDIA
E 650 milioni di download al mese

48. LE GRANDI DOMANDE
SOLIDO E MONOLITICO
O
NUOVO E MODULARE

49. SE STATE PER FARE IL SALTO

50. PRENDETE BENE LE DISTANZE

51. GRAZIE!
Matteo Guidotto
@j8matteo