How to autoprefix css files generated by less, in Webstorm?

Question

I've got Webstorm 7 (on Win7) compiling my .less files into minified css with sourcemaps (using lessc on nodejs v0.10.26, run from a File Watcher in Webstorm), and I can then run autoprefixer on that generated css to automatically insert vendor prefixes.

What I'm not sure how to do, is combine the two steps. Is it possible to chain File Watchers in Webstorm?

Possible approaches:

• Create a batch script that is called from the file watcher, then calls less and autoprefixer in sequence.
• Create a node.js script/module that calls less, then autoprefixer.
• Have the less transpiler output the css with a custom extension (e.g., .unprefixedcss), then have a File Watcher specifically for that extension.
• Something I'm missing?

Answer 1

There is a plugin for less which does this job without adding a watcher: https://github.com/less/less-plugin-autoprefix

After installation you can add --autoprefix="…" to your arguments for the output in webstorms file watcher.

Answer 2

yes, it's possible to chain file watchers. The autoprefixer file watcher will listen to css changes and run after less. The first and secong approaches will work too