This document provides an overview of PostCSS, including what it is, how it works, popular plugins, and how to create your own PostCSS plugin. Some key points: - PostCSS is a tool for transforming CSS with JS plugins that parses CSS into an AST, passes it through plugins, and outputs modified CSS. It allows for variables, mixins, future syntax support, and more. - Popular plugins include Autoprefixer, CSSnext, PreCSS, StyleLint, PostCSS Assets, and CSSNano. - To create a plugin, make a node module with index.js, require PostCSS, and use the PostCSS API to modify the AST and output CSS.

1. Introducing PostCSS
The Swiss army knife for CSS production

2. PostCSS Evolution
PostCSS Evolution in npm-stat
From 2015 to today, PostCSS already
has more than 25,884,079 downloads
https://npm-
stat.com/charts.html?package=postcs
s&from=2015-01-01&to=2017-01-01

3. WTF is PostCSS?
Santisima Trinidad - Los Católicos creen que la
trinidad es una, no creen en tres Dioses sino en un solo
Dios en tres personas distintas, cada una de las
personas es enteramente Dios, Padre, Hijo, Espíritu
Santo tienen la misma naturaleza la misma divinidad,
la misma eternidad, el mismo poder, la misma
perfección.

4. WTF is PostCSS?
=

6. what PostCSS is NOT
 The most compelling thing about PostCSS is it is not
restricted to any one type of functionality;
 The diverse functionality available via its plugin
ecosystem
 Its modular, “use what you need” nature
 Its rapid compilation time
 The accessibility of creating your own plugins
 The option to use it with regular CSS
 The ability to create libraries that don’t depend on
one preprocessor
 Its seamless deployment with many popular build
tools
- It’s not a pre-processor (SASS, LESS
…), though it can optionally behave
like one.
- It’s not a post-processor(Autoprefixer
…), though it can optionally behave
like one.
- It’s not about “future syntax”, though
it can facilitate support for future
syntax
- It’s not a clean up / optimization tool,
though it can provide such
functionality.
It’s not any one thing; it’s a means to
potentially unlimited functionality
configured as you choose.

7. what is PostCSS
So what is PostCSS? The best definition
comes from the project’s own GitHub
page:
“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.

8. what is PostCSS
 The tool itself is a Node.js module that parses
CSS into an abstract syntax tree (AST); passes
that AST through any number of “plugin”
functions; and then converts that AST back
into a string,
 The AST provides a very simple API that we
can use to write plugins.
 PostCSS API makes it pretty easy to work with
CSS source code.

9. what is PostCSS
Rule Structure
A rule or "rule set" is a statement that tells
browsers how to render particular elements on
an HTML page. A rule set consists of a selector
followed by a declaration block.

10. Finding Plugins
As you start getting into working with
PostCSS there are three locations you’ll
want to keep an eye on for finding great
plugins.
PostCSS Github repo
Catalog Site postcss.parts
@PostCSS Twitter account

11. #1 Autoprefixer
Autoprefixer uses data from Can I Use.
This way it doesn’t get dated, and can
always apply the most recent rules.
You can check out how it works on
its interactive demo site.

12. #2. CSSnext
CSSnext is a CSS transpiler that allows
you to use future CSS syntax on current
sites. W3C has many new CSS rules
that aren’t currently implemented by
browsers, but could enable developers
to write more sophisticated CSS faster
and easier. CSSnext has been made to
bridge this gap.

13. #3. PreCSS
PreCSS is one of the PstCSS plugins
that work like a CSS preprocessor. It
makes it possible to take advantage of
a Sass-like markup in your
sytlesheet files.
You can use variables, if-else
statements, loops, mixins, @extend and
@import rules, nesting …

14. #4. StyleLint
StyleLint is a modern CSS linter
that proofreads and validates your CSS
code. It makes it easy to avoid errors
and pushes you to follow consistent
coding conventions.

15. #5. PostCSS Assets
1
2
3
body {
background: resolve('foobar.jpg');
}
The PostCSS Assets plugin is a
handy asset manager for your CSS
files. It can be a great choice if you
tend to have trouble with URL paths, as
PostCSS Assets isolates your stylesheet
files from environmental changes.

16. #6. CSSNano
CSSNano it’s a modular plugin that
consists of many smaller, single-
responsibility PostCSS plugins. It doesn’t
only perform basic minification
techniques such as removing
whitespaces, but also has advanced
options that make focused
optimizations possible.
Among many other features, CSSNano
is capable of rebasing z-index values,
reducing custom identifiers, converting
length, time and colour values, and
removing outdated vendor prefixes.

17. SetUp postCSS using Grunt
Gruntfile.js
module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-postcss');
};
 Node.js and NPM installed
 npm install grunt-postcss –save-dev
 Create and edit Gruntfile.js

18. SetUp postCSS using Grunt
Gruntfile.js
module.exports = function(grunt) {
grunt.initConfig({
postcss: {
}
});
grunt.loadNpmTasks('grunt-postcss');
};
 Node.js and NPM installed
 npm install grunt-postcss –save-dev
 Create and edit Gruntfile.js

19. SetUp postCSS using Grunt
Gruntfile.js
module.exports = function(grunt) {
grunt.initConfig({
postcss: {
options: {
processors: [
require('autoprefixer')()
]
},
dist: {
src: 'css/src/style.css',
dest: 'css/style.css'
}
}
});
grunt.loadNpmTasks('grunt-postcss');
};
 Node.js and NPM installed
 npm install grunt-postcss –save-dev
 Create and edit Gruntfile.js
 npm install autoprefixer –save-dev

20. How to do your own
PostCSS plugin

21. What is dinottizator??!!
Convert all the values of font-family property to ‘din-ot’

23. Creating your PostCSS plugin
Plugins for PostCSS are written in JavaScript, and as such
anyone who can (or NOT !!) write JavaScript can create a
plugin for any purpose they want.
Create a new node module inside your project, which will
become your plugin.
Load your new plugin into your project.
Add some test CSS in the syntax you want your plugin to use.
Use methods from the PostCSS API to scan through a
stylesheet.
Write JavaScript and use the PostCSS API to make the
appropriate transformations (and/or additions) to the original
code and send it into the processed CSS.

24. Create a Basic Plugin Shell
 Create a folder in node_modules
 All PostCSS plugins are node modules. We need to turn our
new folder into one.
 Cd plugin_name folder
 npm init
 All PostCSS plugins need PostCSS installed as a dependency
 npm install postcss –save-dev
 Create a index.js file

25. Index.js file
var postcss = require('postcss');
module.exports = postcss.plugin('myplugin', function
myplugin(options) {
return function (css) {
options = options || {};
// Processing code will be added here
}
});

26. Creating your PostCSS plugin
http://api.postcss.org/AtRule.html#walkRules

27. Submiting your Plugin
https://github.com/himynameisdave/postcss-
plugins#submitting-a-new-plugin