PostCSS - Beyond preprocessors

A presentation about our current CSS scenario, and how PostCSS can contribute to make it reach the next level.

Transcript

1. PostCSS Beyond preprocessors
2. About fleury.io
3. github.com/leroy-merlin-br
4. Background
5. /* COLORS orange: #FF530D red: #E82C0C */ .sticky-header { background-color: #FF530D; /* ORANGE */ height: 84px; } .content { border-bottom: 1px solid #E82C0C; /* RED */ /* header height */ margin-top: 84px; }
6. github.com/sass/sass
7. CSS with superpowers
8. $font-stack: Helvetica, sans-serif $primary-color: #333 body font: 100% $font-stack color: $primary-color body { font: 100% Helvetica, sans-serif; color: #333; }
9. github.com/less/less.js
10. github.com/stylus/stylus
11. Current scenario
12. github.com/postcss/postcss
13. What is it?
14. “PostCSS is a tool for transforming CSS”
15. .box { box-sizing: border-box; } .box { box-sizing: border-box; }
16. “PostCSS is a tool for transforming CSS with JavaScript plugins”
18. github.com/postcss/autoprefixer .box { box-sizing: border-box; } .box { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } postcss-autoprefixer
19. Under the hood
20. .css Parser Plugins Stringifier .css
21. Anatomy of a plugin live coding
23. Getting started
24. postcss: { options: { processors: [ require('autoprefixer')() ] }, dist: { src: 'build' } } github.com/nDmitry/grunt-postcss
25. gulp.task('postcss', function () { var postcss = require('gulp-postcss'); return gulp.src('src/**/*.css') .pipe(postcss([ require('autoprefixer')(), ])) .pipe(gulp.dest('build')); }); github.com/postcss/gulp-postcss
26. module: { loaders: [{ test: /\.css$/, loader: "style-loader!css-loader!postcss-loader" }] }, postcss: function () { return [require('autoprefixer')]; } github.com/postcss/postcss-loader
27. Performance github.com/postcss/benchmark - live coding
28. Ok, what about the features I already have?
29. postcss-simple-vars .menu { width: calc(4 * 200px); } .menu_link { background: #056ef0; width: 200px; } $blue: #056ef0; $column: 200px; $type: 'link'; .menu { width: calc(4 * $column); } .menu_$(type) { background: $blue; width: $column; } github.com/postcss/postcss-simple-vars
30. @for $i from 1 to 3 { .b-$i { width: $(i)px; } } .b-1 { width: 1px } .b-2 { width: 2px } .b-3 { width: 3px } postcss-for github.com/antyakushev/postcss-for
31. .foo { @if 3 < 5 { background: green; } @else { background: blue; } } .foo { background: green; } postcss-conditionals github.com/andyjansson/postcss-conditionals
32. @each $icon in foo, bar, baz { .icon-$(icon) { background: url('$(icon).png'); } } .icon-foo { background: url('foo.png'); } .icon-bar { background: url('bar.png'); } .icon-baz { background: url('baz.png'); } postcss-each github.com/outpunk/postcss-each
33. body { background: color(red a(90%)) } body { background: rgba(255, 0, 0, 0.9) } postcss-color-function (W3C specs) github.com/postcss/postcss-color-function
34. @define-mixin icon $social, $color { .icon-$(social) { color: $color; @mixin-content; } } @mixin icon twitter { background: url(twt.png); } .icon-twitter { color: blue; background: url(twt.png); } postcss-mixin github.com/postcss/postcss-mixin
35. @define-extend list { list-style-type: none; margin: 0; padding: 0; } .default-list { @extend list } .default-list { list-style-type: none; margin: 0; padding: 0; } postcss-extend github.com/travco/postcss-extend
36. .phone { &_title { width: 500px; @media (max-width: 500px) { width: auto; } body.is_dark & { color: white; } } } .phone_title { width: 500px; } @media (max-width: 500px) { .phone_title { width: auto; } } body.is_dark .phone_title { color: white; } postcss-nested github.com/postcss/postcss-nested
37. .test { margin-left: 20px; margin-right: @margin-left; color: red; background: @color url('test.png'); } .test { margin-left: 20px; margin-right: 20px; color: red; background: red url('test.png'); } postcss-property-lookup github.com/simonsmith/postcss-property-lookup
38. But why stopping there?
39. @alias { fs: font-size; fw: font-weight; bg: background; } .foo { fs: 16px; fw: 400; transition: bg 200ms ease; } .foo { font-size: 16px; font-weight: 400; transition: background 200ms ease; } postcss-alias github.com/seaneking/postcss-alias
40. postcss-custom-selectors (W3C specs) github.com/postcss/postcss-custom-selectors @custom-selector :--heading h1, h2, h3, h4, h5, h6; article :--heading + p { margin-top: 0; } article h1 + p, article h2 + p, article h3 + p, article h4 + p, article h5 + p, article h6 + p { margin-top: 0; }
41. postcss-define-property github.com/daleeidd/postcss-define-property size: $height $width { height: $height; width: $width; } .rectangle { size: 50px 100px; } .rectangle { height: 50px; width: 100px; }
42. postcss-match github.com/rtsao/postcss-match $animal: bear; .zoo { @match $animal { snake => { color: green; }, buffalo | bear => { background: brown; }, lion => { font-weight: bold; } } } .zoo { background: brown; }
43. cssgrace github.com/cssdream/cssgrace .bar { display: inline-block; opacity: .5; } .bar { display: inline-block; *display: inline; *zoom: 1; opacity: .5; filter: alpha(opacity=50); }
44. postcss-js github.com/postcss/postcss-js let prefixer = postcssJs.sync([ autoprefixer ]); let style = prefixer({ border-radius: '10px' }); { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; }
45. doiuse (caniuse api) github.com/anandthakker/doiuse .box { transform: scaleX(2) user-select: none; } box.css: line 2, col 3: CSS3 Transforms not supported by: IE (8) box.css: line 3, col 3: CSS user-select: none not supported by: IE (8,9)
46. css-modules atcss postcss-colorblind rtlcss postcss-constants postcss-cssstats csstyle immutable-css postcss.parts
47. What about my libraries?
48. postcss-short github.com/jonathantneal/postcss-short .icon { size: 48px; } .banner { position: fixed 0 0 *; } .icon { width: 48px; height: 48px; } .banner { position: fixed; top: 0; right: 0; left: 0; }
49. postcss-short-border postcss-short-color postcss-short-font-size postcss-short-position postcss-short-size postcss-short-spacing postcss-short-text github.com/jonathantneal/postcss-short
50. cssnext :root { --mainColor: #ffbbaaff; } @custom-media --mobile (width <= 640px); @custom-selector --heading h1, h2, h3, h4, h5, h6; .post-article :--heading { color: color( var(--mainColor) blackness(+20%) ); } @media (--mobile) { .post-article :--heading { margin-top: 0; } } github.com/cssnext/cssnext
51. postcss-color-function postcss-extend postcss-custom-properties postcss-custom-selectors postcss-custom-media github.com/cssnext/cssnext
52. Points for attention
53. Questions?
54. Thanks ( ＾◡＾)