Automate css browser vendors prefixes in meteor

Question

I'm trying to find out if it is possible to use autoprefixer (https://npmjs.org/package/autoprefixer) to automatically process the CSS with meteor.

I'm trying to enable the node package to work with meteor with meteor-npm but then I don't really get what to do or if it is at all possible.

Answer 1

My first choice would be to use stylus (see below), but based on your comments it looks like you are using less. It may be possible to create a local package which adds a source handler for all less files. See the less plugin and the stylus plugin.

Alternatively, you could use an external process to compile your files. I use a Cakefile to watch my .jade files and turn them into html. Maybe you could do something similar with autoprefixer.

---

$ meteor add stylus

The package comes with nib which solves the problem you are asking about. Here's an example:

example.styl

@import 'nib'

$bluestart = #0076b8
$bluestop = #005a8d

footer
  border-radius: 5px
  background: linear-gradient(top, $bluestart, $bluestop)

The compiled css will have all of the border radius and gradient prefixes expanded for you.

Answer 2

There are ever more meteor packages available! At the time of writing, there are three less+autoprefixer packages amongst the offerings:

https://atmospherejs.com/?q=autoprefix

Answer 3

You should just use seba:minifiers-autoprefixer package. For Meteor 1.3+:

meteor remove standard-minifier-css
meteor add seba:minifiers-autoprefixer

It will autoprefix all CSS processed by Meteor in production. It does not matter where CSS is coming from (SCSS, Stylus, raw, etc.).