Introduction to PostCSS

Slide 1

Slide 1 text

Introduction to PostCSS @morishitter_

Slide 2

Slide 2 text

CodeGrid 3प೥ ͓ΊͰͱ͏͍͟͝·͢ʂʂ

Slide 3

Slide 3 text

About me • Masaaki Morishita • twitter: @morishitter_ • github: morishitter • blog: http://morishitter.hatenablog.com • αΠόʔΤʔδΣϯτ ৽ଔ1೥໨

Slide 4

Slide 4 text

What is PostCSS

Slide 5

Slide 5 text

PostCSS • https://github.com/postcss/postcs • Node.js੡ • CSS Parser + API • Plugin Architecture

Slide 6

Slide 6 text

PostCSS Parser Plugin Plugin Stringiﬁer CSS New CSS

Slide 7

Slide 7 text

The Beginning is ..

Slide 8

Slide 8 text

Rework “Modular CSS Preprocessing with Rework” ― TJ Holowaychuk http://tjholowaychuk.tumblr.com/post/44267035203/modular-css-preprocessing-with-rework “Custom CSS Preprocessing” ― Nicolas Gallagher http://nicolasgallagher.com/custom-css-preprocessing/

Slide 9

Slide 9 text

Rework PostCSS • First • Simple • Fast • Smarter Parser • Useful API • Source Maps

Slide 10

Slide 10 text

PostCSS is Fast http://ai.github.io/about-postcss/en/?full#40

Slide 11

Slide 11 text

PostCSS is Fast

Slide 12

Slide 12 text

Smarter Parser • τʔΫϯͷલޙͷۭന΍վߦ • ਌ϊʔυΛࢀর • ຤ඌͷϓϩύςΟએݴͷηϛίϩϯͷ༗ແ • etc..

Slide 13

Slide 13 text

Useful API

Slide 14

Slide 14 text

How to use PostCSS

Slide 15

Slide 15 text

Usage var postcss = require(‘postcss’) postcss([plugin_1,ɹplugin_2]) .process(css) .then(function (result) { console.log(result) })

Slide 16

Slide 16 text

Usage in gulp .pipe(postcss([ require(‘postcss-nested'), require('postcss-simple-vars'), require('postcss-mixins'), require('postcss-easings'), require('cssnext') ]))

Slide 17

Slide 17 text

Create Plugins var postcss = require('postcss'); module.exports = postcss.plugin('PLUGIN_NAME', function (opts) { opts = opts || {}; // Work with options here return function (css) { // Transform CSS AST here }; }); Use postcss-plugin-boilerplate

Slide 18

Slide 18 text

The Extensible Web Write PostCSS plugins Popularity Speciﬁcation

Slide 19

Slide 19 text

The Difference between Existing Preprocessors

Slide 20

Slide 20 text

Difference Existing Preprocessor (like Sass) PostCSS ɾMonolithic ɾCode inside CSS template ɾTuring Complete ɾModular ɾMaintainable  ɾAll features by plugins ɾJS transforms CSS

Slide 21

Slide 21 text

The Tools Built with PostCSS

Slide 22

Slide 22 text

a { display: flex; } Autopreﬁxer a { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex } Add vendor preﬁxes to rules by Can I Use

Slide 23

Slide 23 text

cssnext @custom-selector --heading h1, h2, h3, h4, h5, h6; .post-article --heading { margin-top: calc(10 * var(--row)); color: color( var(--mainColor) blackness(+20%) ); font-variant-caps: small-caps; } CSS transpiler to use tomorrow's CSS syntax today

Slide 24

Slide 24 text

Pleeease Simpliﬁes the use of preprocessors and combines them with best postprocessors.

Slide 25

Slide 25 text

AtCSS .base { /* * @base * @constant */ font-size: 12px; padding: 8px 16px; } .class { /* @extend .base */ background-color: #eee; } Annotations based CSS Processor

Slide 26

Slide 26 text

AtCSS http://morishitter.hatenablog.com/entry/2015/03/16/100122 AtCSS: Annotation based CSS Processor GitHub https://github.com/morishitter/atcss