3/30/2017 - 12:17 PM

Notes for interview about PostCSS on

Notes for interview about PostCSS on

PostCSS what?

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 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
  • 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


Write Pure CSS



  • 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

  • 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)
  • 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)

樂 Mmmm... plugins (IMHO)

CSS Craftsmanship
I like write a Vanilla CSS

 Fun plugins

I wrote a plugin 


One more think...

SUIT CSS Preprocessor

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

Bonus Track


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