Create your account

Already have an account? Login here

Note: By joining, you will receive periodic emails from Coursetro. You can unsubscribe from these emails.

Create account

A PostCSS Tutorial to Empower your CSS

By Gary simon - Jan 29, 2018

PostCSS has been around for awhile and you may have heard about it, but if not, it's worth taking a look. PostCSS allows you to transform CSS with a large variety of PostCSS plugins that have been created by third party developers.

These plugins can handle a variety of tasks, including:

  • Future CSS Syntax
  • Fallbacks
  • CSS language extensions
  • Colors
  • Images & Fonts
  • Grids
  • Optimizations
  • Shortcuts
  • ..and others

There are literally hundreds of plugins at your disposal that you can easily integrate with your JavaScript task runner, all enabled by PostCSS.

So, let's get started!

We have some pretty awesome courses

Check them out

If you prefer watching a video..

Be sure to Subscribe to the Official Coursetro Youtube Channel for more videos.

Starting the Project

We're going to keep things simple and stay away from using any type of framework (CSS or JS). We're just going to need Nodejs to install PostCSS and Gulp.

If you don't have Nodejs, visit Nodejs.org and visit the Downloads section. Download the appropriate installer based on your OS and follow the default setup options. Reload your console or command line if it was already loaded, and you will be good to go.

Next, open up your console / command line and create a new project folder:

> mkdir pcss && cd pcss

Next, we'll create a package.json file for storing project dependencies by issuing the following command:

> npm init -y

Now, we'll install Gulp and PostCSS with the Node Package Manager (NPM):

> npm install gulp gulp-postcss --save-dev

Note: PostCSS can also be used with a bunch of other Task Runners, just checkout their Github page for more details.

Setting up the Task Runner

Open up your code editor and create a gulpfile.js in the project root folder. Paste the following contents:

var postcss = require('gulp-postcss');
var gulp = require('gulp');

gulp.task('serve', ['css'], function() {
    gulp.watch("./css/*.css", ['css']);
});

gulp.task('css', function() {
    var plugin = [
        // PostCSS Plugins Here
    ];
    return gulp.src('./css/*.css')
        .pipe(postcss(plugin))
        .pipe(gulp.dest('./dest'));
});

gulp.task('default', ['serve']);

At the moment, we're not actually including any PostCSS plugins, so this won't do anything. We'll get to that part shortly.

But first, create a /css folder with a main.css file inside of it. Once you have done that, you can proceed to the next step.

Using a PostCSS Plugin

You can browse all of the PostCSS Plugins here. Your needs will vary based on your project.

Let's assume you don't want to worry about browser prefixes. There's autoprefixer for that task. It's listed as one of the PostCSS plugins.

To install it, first we go to the console and run:

> npm install autoprefixer --save-dev

Then, we go back to our /gulpfile.js and import it at the top:

// postcss & gulp vars removed for brevity

var autoprefixer = require('autoprefixer');

Then, we add it within the plugin array:

    var plugin = [
        autoprefixer()
    ];

That's it. That's all it takes.

To give this a test, let's use one of the examples that demonstrates what this plugin does from the autoprefixer github page and paste it inside of our /css/main.css file:

:fullscreen a {
    display: flex;
}

Next, go to the console and run:

> gulp

If you go back to your code editor, you will notice a new /dest folder with a new CSS file that contains the autoprefixed version of our /css/main.css file:

:-webkit-full-screen a {
    display: -webkit-box;
    display: flex;
}
:-moz-full-screen a {
    display: flex;
}
:-ms-fullscreen a {
    display: -ms-flexbox;
    display: flex;
}
:fullscreen a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

Simple!

Using Multiple PostCSS Plugins

Right now, we're only using one plugin. But of course, we can use a bunch of them at the same time. CSSNano is a fairly popular plugin pack that optimizes your CSS for production use.

After we run autoprefixer, we'll run CSSNano. The process remains completely the same as before.

Go to the console and install it:

> npm i cssnano --save-dev

Import it to the top of your /gulpfile.js:

// other vars removed for brevity

var cssnano = require('cssnano');

Then, add it to the plugin array:

    var plugin = [
        autoprefixer(),
        cssnano()
    ];

Great. Re-run the gulp command:

> gulp

And now, our /dest/main.css file should look like this:

:-webkit-full-screen a{display:-webkit-box;display:flex}:-moz-full-screen a{display:flex}:-ms-fullscreen a{display:-ms-flexbox;display:flex}:fullscreen a{display:-webkit-box;display:-ms-flexbox;display:flex}

Creating your own PostCSS Plugin

Yes, you can even create your own PostCSS plugin if you have an ultra-specific use case that isn't already covered in the existing plugins list.

Unfortunately, I will not be covering that here, as that would be better suited for its own tutorial. 

If you're interested in creating your own PostCSS Plugin, check out their development documentation.

Conclusion

As you can see, it's fairly straight forward to use PostCSS with your project. Hopefully you enjoyed this PostCSS tutorial and I will see you soon.


Share this post




Say something about this awesome post!