A tool for transforming CSS with JavaScript

PostCSS and why?

• It aims to reinvent CSS with an ecosystem of custom plugins and tools.

• Working with the same principles of preprocessors such as Sass and LESS, it transforms extended syntaxes and features into modern, browser-friendly css.

• Production tool that allows styles to be written efficiently

• Increase code readability

• Use Tomorrow's CSS, today! (CssNext)

• The end of global CSS

• Avoid errors in your CSS (Stylelint)

Benefits

• Maintaining a library of sass or less snippets

• Easily installable, plug-and-play modules, making the development process more flexible for the unique needs of a project.

• Over 100 community plugins are currently available that allow for such things as future CSS syntax, shortcuts, tools and extensions of the language. It is beyond a “cool tool,” and it currently counts WordPress, Google and Twitter teams among its user base.

Example

An example of this power is the plugin PostCSS FontPath

With Sass, we could include a mixin in our files that allows for custom web fonts; thus, we created @font-face tags.

@mixin importfont($font-family, $font-filename, $font-weight : normal, $font-style :normal, $font-stretch : normal) {
  @font-face {
    font-family: '#{$font-family}';
    src: url('#{$font-filename}.eot');
    src: url('#{$font-filename}.woff') format('woff'),
    url('#{$font-filename}.ttf') format('truetype');
    font-weight: $font-weight;
    font-style: $font-style;
    font-stretch: $font-stretch;
  }
}
@include importfont('mission script', 'fonts/mission-script-webfont', 300);

Using the PostCSS FontPath plugin, we can write:

@font-face {
  font-family: 'My Font';
  font-path: '/path/to/font/file';
  font-weight: normal;
  font-style: normal;
}

Adding PostCSS To Your Workflow

Because PostCSS is written in JavaScript, we can use task runners like Gulp and Grunt to transform the CSS in our projects.

To incorporate PostCSS in your workflow via either Gulp, the tutorial is in demo section.

DEMO