Ghost Themes
SimpleChat.Support - Open Source Live Chat App
How to use PostCSS in Meteor
words - read.

How to use PostCSS in Meteor

What's so special about PostCSS and why is everyone are talking about it? That’s a really good question. I am about to tell you why it's awesome and how you can use it with Meteor.

Because PostCSS isn't a standard tool like preprocessors, it's hard to integrate it with the current Meteor build stack. But of course from version 1.2 it's possible without many hacks. However, some of them are still necessary. I hope that the future Meteor releases will improve the build process.

Let's see what we'll cover here:

  • PostCSS introduction.
  • How to use PostCSS with Meteor?

PostCSS introduction

In short, PostCSS is a tool which can transform CSS files using JavaScript plugins. It will take your CSS file with additional custom syntax and transform it into proper CSS syntax. It can do the same thing as other preprocessors, and moreover, you can write your own PostCSS plugins. If you can imagine it, you can do it. It’s also faster and modular. You'll be able to use it side by side with your favourite preprocessor too.

For example, let's look into the Rucksack plugin. As you can see, with this tool you can enable some special features in your daily work with CSS such as making the font responsive with one declaration:

.foo {
    font-size: responsive;

This is of course not CSS specific standard but the Rucksack plugin in your PostCSS stack could manage such operations.

Sometimes you use PostCSS without knowing about it. I mean if you use the Autoprefixer tool you might also use PostCSS. The same with other complex tools like CSSNext, Rucksack etc. With PostCSS you are able to write CSS linters, use future CSS4 syntax and many more including funny stuff like German Stylesheets

There is a list of ready-to-use plugins here:

As you can see, there are plenty of plugins available. You can use PostCSS with well-known build tools like Grunt, Gulp and Webpack. The JavaScript API is really nice and there is very good documentation.

So why is it complicated with Meteor and how do you use it?

Meteor has a special build system and build lifecycle. You can plug into it with your stuff but it isn't very flexible. There are no simple configuration options. We can write 3 types of plugins in Meteor packages. There are 3 phases when a package's plugin can run:

  • linting,
  • compilation,
  • minification

We have some preprocessors which are tools plugged into the compilation phase. Just look at the Stylus core package. As you can see, it registers a compile plugin for files with the extension .styl:

  extensions: ['styl'],
  archMatching: 'web'
}, () => new StylusCompiler());

All files with this extension will be compiled by the Stylus preprocessor.

With PostCSS, we don't want to register our own extension (although we could do that). We want to use the .css extension. For now with Meteor there isn't any other way but to modify plugins responsible for minification. Let's take a look at the standard-minifier-css package - standard-minifier-css. What we want to do here is add PostCSS processing and leave all the old functionalities untouched.

I prepared a custom package with css minifier which has full support for PostCSS. You will find it on Atmosphere: juliancwirko:postcss

Let's see how to use it.

First of all (in Meteor 1.3 and above), you need to remove the standard-minifier-css package. This is a core Meteor package which includes CSS minifiers. We need to remove it because there shouldn't be two similar plugins which operates on the same extension (.css in this case). So my package is a replacement for standard-minifier-css and there aren't any differences except for handling PostCSS processing in the CSS minifier.

Remove it:

$ meteor remove standard-minifier-css

When you remove the standard-minifier-css package you need to add the juliancwirko:postcss package.

Add my package:

$ meteor add juliancwirko:postcss

You should have package.json file in your root directory (from Meteor 1.3 and above), in this file you need to declare which PostCSS plugins you want to use. You always use this file when you want to download some Npm packages. In our case we need it because all PostCSS plugins are standard Npm packages.

See here how it should look. Here is an example of that kind of file:

  "name": "demo PostCSS app",
  "version": "1.0.0",
  "description": "",
  "author": "",
  "devDependencies": {
    "autoprefixer": "^6.3.5",
    "mocha": "^2.4.5",
    "postcss-easy-import": "^1.0.1",
    "postcss-nested": "^1.0.0",
    "postcss-simple-vars": "^1.2.0",
    "rucksack-css": "^0.8.5"
  "postcss": {
    "plugins": {
      "postcss-easy-import": {},
      "postcss-nested": {},
      "postcss-simple-vars": {},
      "rucksack-css": {},
      "autoprefixer": {"browsers": ["last 2 versions"]}

So, we want some of the plugins in our PostCSS stack. All these plugins have their own GitHub pages with documentation so just Google it and you'll find more information. For now we need to know that these Npm packages are PostCSS plugins and that they will be downloaded into the standard node_modules folder of your Meteor app. What's next?

Actually this is all what you need to do. My modified minification plugin will know which Npm package is a PostCSS plugin because it reads postcss key in package.json file. It will pass all PostCSS plugins to the PostCSS processing stream. It will 'require' them from node_modules folder. What is important here is that we need to be careful with the order of the plugins. They will be loaded in the same order as in postcss key so the plugin responsible for imports should be loaded first and the autoprefixer last. Otherwise we could have some parts of the app not autoprefixed or not imported. This is a little tricky but you should always think about it and test your plugins set.

Besides passing plugins, there should be also a way to pass options to particular plugins. And of course there is a way. If you want, for example, to configure your autoprefixer plugin you should pass the options as in the example above.

"postcss": {
  "plugins": {
    "autoprefixer": {"browsers": ["last 2 versions"]}

So we have just told our PostCSS build plugin that our autoprefixer should prefix only the last 2 versions of browsers. Of course all other plugins can take its own options, and you can list all of them here. Go to the documentation of each plugin to see what options set they have.

Remember that if you change something in the package.json file, you should restart your Meteor app and also you should change something in any .css file to rerun the .css minification plugin.

You can read more in the file.

Wow! PostCSS is awesome I want to learn more about it!

Yes it is. There are plenty of materials which you can find in Google. Some of them:

Package on Atmosphere that I mentioned here:


PostCSS can work with Meteor but there is some stuff that needs to be done in the Meteor core to make it better. My PostCSS package needs some tests in many different cases and some other work for sure. I encourage you to test it. This could be a very good way to prepare a list of changes and improvements for it. I am also open to discussing it so let me know if you have any questions.

You may also want to check an experiment in which I use PostCSS to compile .scss files from Bootstrap 4 Npm package.


comments powered by Disqus