DEV Community

Cover image for PostCSS - Introduction and Setup
Promise Tochi
Promise Tochi

Posted on

PostCSS - Introduction and Setup

In this article, I will quickly walk you through what PostCSS is and how to set it up.

So I mentioned PostCSS to a developer and he did not know what it was. It’s such a great tool, that I wonder how it’s managed to remain quite hushed since it‘s release over a year ago.

PostCSS allows you to write CSS much more conveniently. Plain and simple. It allows you write more convenient syntax, future CSS, LESS, SASS, etc. Yes, SASS. All those cool things you can do in your .scss files, you can do with a PostCSS setup. PostCSS itself doesn’t do anything per se, all of it’s features comes from it’s numerous plugins. These plugins are written by different developers from around the world.

To get setup, you need to have Node and npm installed.

Run node -v to check if you have Nodejs installed. If you don’t, head over to nodejs.org to download it, npm comes bundled with Nodejs.

Next step, create an empty folder on your PC (you can name it postcss_intro. Open a terminal and make sure it’s pointing at the folder you just created. Next, run npm init and follow the prompt, just keep hitting the enter key till you get the prompt below,

Is this ok? (yes)
Enter fullscreen mode Exit fullscreen mode

Type y and hit enter. This will create a package.json file for you within that folder.

Next up, run

npm i -D gulp gulp-postcss
Enter fullscreen mode Exit fullscreen mode

This will install the gulp and gulp-postcss modules and save them as a dev dependency within the folder you created.

Next up create a folder named src within the postcss_intro folder, or whatever name you might have given it. Create another folder named build also at the top level directory of postcss_intro.

You should now have a directory that looks like this,

Demo folder snapshot

Next up, create a Javascript file named gulpfile.js. This is where all our settings for running Gulp and PostCSS will go. 😃

Copy the code snippet below and paste it in the gulpfile.js

const gulp = require("gulp")
const postcss = require("gulp-postcss")

gulp.task("css", function() {
  const processors = [
    //postcss plugins will go here
  ]
  return gulp
    .src("./src/*.css")
    .pipe(postcss(processors))
    .pipe(gulp.dest("./build"))
})
Enter fullscreen mode Exit fullscreen mode

What this does is use the gulp module to load all css files in the src/ directory, feeds the loaded file to PostCSS and it’s plugins, before finally saving it in the build/ directory.

Next up, open the package.json file. It should look like this

{
  "name": "postcss_intro",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-postcss": "^7.0.0"
  }
}
Enter fullscreen mode Exit fullscreen mode

Add the snippet below, add it above "test": "echo \"Err

"postcss": "gulp css",
Enter fullscreen mode Exit fullscreen mode

Your package.json file should now look like this

{
  "name": "postcss_intro",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "postcss": "gulp css",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-postcss": "^7.0.0"
  }
}
Enter fullscreen mode Exit fullscreen mode

Next up, create a master.css file in the src folder, open and add some CSS to it, you can add this,

html {
  transform: translate(0%);
}
Enter fullscreen mode Exit fullscreen mode

Go to your terminal, pointing at the postcss_intro folder and run

npm run postcss
Enter fullscreen mode Exit fullscreen mode

You should get an output that looks like this,

[19:58:56] Starting 'css'...
[19:58:56] Finished 'css' after 29 ms
Enter fullscreen mode Exit fullscreen mode

Check your build directory and you should find a shiny new master.css created by gulp.

We have successfully gotten gulp to take our CSS file, feed it to PostCSS and save it in the build/ directory.

To actually process our CSS file, we will install and add some PostCSS plugins to our gulp build process. From your terminal, run

npm i -D autoprefixer

Enter fullscreen mode Exit fullscreen mode

When that’s done, open the gulpfile.js file again and edit it to look like this

const gulp = require("gulp")
const postcss = require("gulp-postcss")
const autoprefixer = require('autoprefixer') //new line

gulp.task("css", function() {
  const processors = [
    autoprefixer //new line
  ]
  return gulp
    .src("./src/*.css")
    .pipe(postcss(processors))
    .pipe(gulp.dest("./build"))
})
Enter fullscreen mode Exit fullscreen mode

We have added autoprefixer as a plugin, that will work on the CSS , when it’s fed to PostCSS.

Next run, npm run postcss again, you should get the same output as before, only now, when you check the generated master.css file in build, you would see property rules with prefixes, automatically added.

html {
  -webkit-transform: translate(0%);
          transform: translate(0%);
}
Enter fullscreen mode Exit fullscreen mode

That’s it. That’s the setup.

Let’s add another plugin, the responsive-type plugin. You can install it by running

npm i -D postcss-responsive-type
Enter fullscreen mode Exit fullscreen mode

Just as we did for autoprefixer, we need to add the responsive-type plugin to our gulpfile.js. Once more, open the gulpfile.js and edit it to look like this,

const gulp = require("gulp")
const postcss = require("gulp-postcss")
const autoprefixer = require("autoprefixer")
const responsiveType = require("postcss-responsive-type") //new line

gulp.task("css", function() {
  const processors = [autoprefixer, responsiveType] //new line
  return gulp
    .src("./src/*.css")
    .pipe(postcss(processors))
    .pipe(gulp.dest("./build"))
})
Enter fullscreen mode Exit fullscreen mode

Responsive type allows you to write fluid size values that I wrote about in my completely responsive CSS sizes article. So instead of manually writing

html {
  font-size: 14px + 10 * ((100vw - 769px) / 2048px);
}
Enter fullscreen mode Exit fullscreen mode

You can write,

html {
  font-size: responsive;
  min-font-size: 14px;
  max-font-size: 24px;
  lower-font-range: 769px;
  upper-font-range: 2048px;
}
Enter fullscreen mode Exit fullscreen mode

which is much more readable. So go to your master.css in the src/ directory, and edit it to look like this,

html {
  transform: translate(0%);
  font-size: responsive;
  min-font-size: 14px;
  max-font-size: 24px;
  lower-font-range: 769px;
  upper-font-range: 2048px;
}
Enter fullscreen mode Exit fullscreen mode

Run npm run postcss again and you should have a build/master.css file that looks like this,

html {
  -webkit-transform: translate(0%);
          transform: translate(0%);
  font-size: calc(14px + 10 * ((100vw - 769px) / 1279));
}
@media screen and (min-width: 2048px) {
  html {
    font-size: 24px;
  }
}
@media screen and (max-width: 769px) {
  html {
    font-size: 14px;
  }
}
Enter fullscreen mode Exit fullscreen mode

Isn’t that just awesome.

Running npm run postcss everytime we make a change is boring, we are too lazy for that sort of thing. So we will set a gulp task runner, to watch and automatically transform and build our CSS files, anytime we save them.

Fire up your gulpfile.js file for the last time and add this snippet at the bottom,

gulp.task("watch", function() {
  gulp.watch("./src/*", ["css"])
})
Enter fullscreen mode Exit fullscreen mode

Your gulpfile should now look like this,

const gulp = require("gulp")
const postcss = require("gulp-postcss")
const autoprefixer = require("autoprefixer")
const responsiveType = require("postcss-responsive-type")

gulp.task("css", function() {
  const processors = [autoprefixer, responsiveType]
  return gulp
    .src("./src/*.css")
    .pipe(postcss(processors))
    .pipe(gulp.dest("./build"))
})

gulp.task("watch", function() {
  gulp.watch("./src/*", ["css"])
})
Enter fullscreen mode Exit fullscreen mode

Next add the snippet of code below to your package.json file, below the "postcss": "gulp css" line

"postcss-watch": "gulp watch",
Enter fullscreen mode Exit fullscreen mode

You should now have a package.json file that looks like this,

{
  "name": "postcss_intro",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "postcss": "gulp css",
    "postcss-watch": "gulp watch",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^7.1.5",
    "gulp": "^3.9.1",
    "gulp-postcss": "^7.0.0",
    "postcss-responsive-type": "^1.0.0"
  }
}
Enter fullscreen mode Exit fullscreen mode

With this, you can now run

npm run postcss-watch
Enter fullscreen mode Exit fullscreen mode

in your terminal once, and gulp would be watching your src/master.css file and automatically transforming it, whenever you make a change and save it. Make sure your terminal is showing something like this,

Gulp terminal process snapshot

Now, make a change to the src/master.css file. Say, change the min-font-size to 16px, your terminal will output something like

Gulp terminal process snapshot

Open your build/master.css and you should see the your changes reflecting. Anytime you want to stop the process, go to the terminal where the gulp task is running and hit CTRL+C, type yes and hit enter.

PostCSS has several more plugins, much more powerful, with very useful functionalities. You can view them at https://postcss.parts.

My specific build process, which hasn’t changed much in over a year that I’ve been using PostCSS includes plugins such as,

*postcss-inline-media
*css-mqpacker
*postcss-simple-vars
*postcss-media-variables
*postcss-responsive-type
*autoprefixer
*rucksack

My favourite is the combination of postcss-media-variables and postcss-inline-media, makes CSS like this possible

.sidebar {
  width: @ml 30%;
}
Enter fullscreen mode Exit fullscreen mode

That rule now will only be applied to larger screens, as I have defined this somewhere else,

$ml: (min-width: 769px);
Enter fullscreen mode Exit fullscreen mode

If you haven’t used PostCSS previously, I hope you explore its numerous plugins and give it a trial. There are numerous plugins that bring SASS functionality to PostCSS, https://www.postcss.parts/tag/sass . Companies like Twitter, Alibaba, use PostCSS, you should give it a shot if you haven’t.

This article was originally published by me on medium on the 17th of October.

Top comments (4)

Collapse
 
duchsuvaa profile image
DuchSuvaa

Great article! Very well written, easy and pleasant to read. Thanks!!

Collapse
 
promisetochi profile image
Promise Tochi

thank you 😊😁

Collapse
 
malcolmkee profile image
Malcolm Kee

Wow, thanks for this informative article! Definitely would give postcss a try!

Collapse
 
promisetochi profile image
Promise Tochi • Edited

Glad you enjoyed it, Malcolm. And thanks for the feedback.