postcss-cli: using locally vs globally installed postcss modules

Question

How can I install postcss modules locally, and use them through postcss-cli installed globally?

For example:

postcss -u autoprefixer -o style.css index.css

This command works, if I have postcss-cli and autoprefixer installed globally, or if both are installed locally. But it does not work, if I have postcss-cli installed globally, and autoprefixer locally.

The question is not specific to autoprefixer, since autoprefixer would be a module, that I would what to have installed globally anyways. Any advice would be helpful.

This is the error I get, if postcss-cli is installed globally, and autoprefixer locally:

> postcss -u autoprefixer -o style.css index.css -w

module.js:327
    throw err;
    ^

Error: Cannot find module 'autoprefixer'
    at Function.Module._resolveFilename (module.js:325:15)
    at Function.Module._load (module.js:276:25)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at /home/user/.nvm/versions/node/v4.4.2/lib/node_modules/postcss-cli/index.js:104:14
    at Array.map (native)
    at Object.<anonymous> (/home/user/.nvm/versions/node/v4.4.2/lib/node_modules/postcss-cli/index.js:97:24)
    at Module._compile (module.js:409:26)
    at Object.Module._extensions..js (module.js:416:10)
    at Module.load (module.js:343:32)

npm ERR! Linux 3.19.0-58-generic
npm ERR! argv "/home/user/.nvm/versions/node/v4.4.2/bin/node" "/home/user/.nvm/versions/node/v4.4.2/bin/npm" "run" "css"
npm ERR! node v4.4.2
npm ERR! npm  v2.15.0
npm ERR! code ELIFECYCLE
npm ERR! Node.js@1.0.0 css: `postcss -u autoprefixer -o style.css index.css -w`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the Node.js@1.0.0 css script 'postcss -u autoprefixer -o style.css index.css -w'.
npm ERR! This is most likely a problem with the Node.js package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     postcss -u autoprefixer -o style.css index.css -w
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs Node.js
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! 
npm ERR!     npm owner ls Node.js
npm ERR! There is likely additional logging output above.

Answer 1

If you're using postcss-cli you can create a config file like so:

{
    "use": [
      "postcss-import",
      "postcss-cssnext",
      "lost",
      "rucksack-css",
      "postcss-autoreset",
      "postcss-font-magician"
    ],
    "input": "src/app.css",
    "output": "css/main.css",
    "local-plugins": true,
    "autoprefixer": {
      "browsers": "last 2 versions"
    }
}

Notice the "local-plugins": true, line. From the docs:

Look up plugins starting from node_modules located in the current working directory. Without this option, postcss-cli will look for the plugins in the node_modules in which it is installed - specifically if it is installed globally it will only look for plugins that are globally installed.

If you don't want to use a configuration file you can use the option --local-plugins.

It's a good idea to always install locally. You can always create NPM scripts in package.json to make it easier to run postcss-cli like so:

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "node_modules/postcss-cli/bin/postcss -c config.json",
    "watch": "node_modules/postcss-cli/bin/postcss -c config.json -w",
    "minify": "node_modules/postcss-cli/bin/postcss -c config-minify.json"
 },

Now you simply use:

npm run build