PostCSS what?

• Tweet by Mark Otto wrote on Apr 24 2015

Oh, btw—Bootstrap 4 will be in SCSS.
And if you care, v5 will likely be in PostCSS because holy crap that sounds cool.

• It's not post-processing Jul 21 2015

It's not post-processing if it happens before hitting the browser.
@prefixfree is a post-processing tool. @PostCSS is not.

• It is time admit my mistakes. “Postprocessor” term was bad. PostCSS team stoped to use it. Jul 28 2015

It is time admit my mistakes. “Postprocessor” term was bad. PostCSS team stoped to use it

• PostCSS is a module of Node.js that parse your CSS and transform in to Abstract syntax tree for add the magic with Javascript. Demo

Autoprefixer

• Web
• Parse CSS and add vendor prefixes to rules by Can I Use
• Author: Andrey Sitnik
• Initial commit: Mar 14, 2013
• 12.267 Stars
• Autoprefixer CSS online
• @autoprefixer
• Autoprefixer uses Browserslist, so you can specify the browsers you want to target in your project by queries like last 2 versions or > 5%.
• GUI Tools
  • Codekit
  • Prepros
  • Codepen

Write Pure CSS

Rework

• Web
• Plugin framework for CSS preprocessing in Node.js
• Author: TJ Holowaychuk
• Initial commit: Sep 1, 2012
• 2,692 Stars
• reworkcss/rework#70 Apr 16, 2013
• Remove Autoprefixer from “Built with rework” Jun 2, 2014

PostCSS

• Web
• PostCSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more.
• Author: Andrey Sitnik
• Initial commit: Sep 7, 2013
• 14.154 Stars
• Support / Discussion: Gitter's PostCSS
• Official Plugins (Mar 2017): autoprefixer postcss-bem-linter postcss-brand-colors postcss-browser-reporter postcss-calc postcss-color postcss-color-function postcss-color-gray postcss-color-hex-alpha postcss-color-hwb postcss-color-rebeccapurple postcss-color-rgba-fallback postcss-custom-media postcss-custom-properties postcss-custom-selectors postcss-easings postcss-focus postcss-font-variant postcss-import postcss-media-minmax postcss-mixins postcss-nested postcss-plugin-boilerplate postcss-simple-vars postcss-size postcss-url postcss-will-change
• PostCSS is 1.5 times faster
• PostCSS Playground
• Writing a PostCSS Plugin

---

PostCSS Plugins

• Plugins list

PostCSS.parts

• Web
• A searchable catalog of PostCSS plugins
• Categories: Analysis Color Debug Extensions Fallbacks Fonts Future Fun Grids Images Media-queries Optimizations Other Pack Sass Shortcuts Svg

---

Plugins Rockstars

• Autoprefixer
  • Parse CSS and add vendor prefixes to rules by Can I Use
  • Web
• cssnext (Maxime Thirouin)
  • A plugin to use tomorrow's CSS syntax, today
  • Web
  • Gitter's CSS next
• PreCSS (Jonathan Neal)
  • PreCSS is a tool that allows you to use Sass-like markup in your CSS files
  • Web
• cssnano (Ben Briggs)
  • A modular minifier, built on top of the PostCSS ecosystem
  • Web
• stylelint
  • A mighty, modern CSS linter that helps you enforce consistent conventions and avoid errors in your stylesheets
  • Web
• postcss-import
  • A plugin to transform @import rules by inlining content.
  • Web
• postcss-custom-properties
  • A plugin to transform W3C CSS Custom Properties for variables syntax to more compatible CSS.
  • Web
• postcss-sprites
  • A plugin that generates spritesheets from your stylesheets
  • Web
• postcss-inline-svg
  • Plugin to reference an SVG file and control its attributes with CSS syntax.
  • Web

---

PostCSS's plugins I used in my last project (with Gulp)

• gulp-postcss
• autoprefixer
• postcss-color-function
• postcss-css-variables
• postcss-custom-media
• postcss-devtools
• postcss-for
• postcss-inline-svg
• postcss-math
• postcss-nested
• postcss-partial-import
• postcss-reporter
• postcss-style-guide

---

樂 Mmmm... plugins (IMHO)

• PostCSS Shape
• Postcss Extract Animations
• PostCSS Alias
• Postcss Triangle
• Position Shorthand
• Short Text

CSS Craftsmanship
I like write a Vanilla CSS

---

 Fun plugins

• PostCSS Andalusian Stylesheets
• PostCSS Trolling
• PostCSS Imperial
• More Fun Plugins...

---

I wrote a plugin 

• PostCSS Magic Animations
• A plugin that adds @keyframes from Magic Animations

---

References

• List of PostCSS referecnes

---

One more think...

SUIT CSS Preprocessor

• Web
• Provides a CLI and Node.js interface for a preprocessor that combines various PostCSS plugins

Bonus Track

PostHTML

• Web
• PostHTML is a tool to transform HTML/XML with JS plugins
• Author: Protein Team
• Initial commit: Jun 24, 2015
• 809 Stars