Autoprefixer: --autoprefixer.browsers 'last ... versions' breaks on windows

[Pomax]

It looks like autoprefixer relies on bash-specific syntax (or at least nx-specific syntax) for its autoprefix.browsers flag that lets you specify how many versions to support. As this affects all devs that have to work on cross-platform codebases that rely on either autoprefixer or even postcss in general, this feels like something worth examining to see if the bash syntax can be turned into something node can execute instead (since node's API is guaranteed cross-platform compatible)

Minimal broken example:

input.css

body {
  margin: 0;
  padding: 0;
}

package.json

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "with": "postcss --use autoprefixer --autoprefixer.browsers 'last 3 versions' -o result.css input.css",
    "without": "postcss --use autoprefixer -o result.css input.css"
  },
  "author": "",
  "license": "PD",
  "dependencies": {
    "autoprefixer": "^6.4.0",
    "postcss-cli-simple": "^1.0.1"
  }
}

Guaranteed broken on Windows 7, 8, 8.1 and 10 (not tested older versions, as only Vista SP2 is not EOL yet, but I will horribly generalize and say I don't really expect anyone on Vista to be a node developer...):

$> npm run with

Not broken:

$> npm run without

[ai]

Sorry, I have no Windows. Could you post full error name and stack trace.

[Pomax]

I could, but it's 100% more valuable to point you to https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/, which is Microsoft's _free_ windows virtual machines website. Grab a copy of the windows 10 VM to test this locally (and to do cross-platform regression testing in the future).

[Pomax]

That said, plain console log:

c:\Users\Mike\Documents\git\temp\postcss>npm run with

> [email protected] with c:\Users\Mike\Documents\git\temp\postcss
> postcss --use autoprefixer --autoprefixer.browsers 'last 3 versions' -o result.css input.css

Usage: C:\Program Files\nodejs\node.exe
c:\Users\Mike\Documents\git\temp\postcss\node_modules\postcss-cli-simple\bin\postcss -use plugin [--config|-c
config.json] [--output|-o output.css] [input.css]

Options:
  -c, --config       JSON file with plugin configuration
  -u, --use          postcss plugin name (can be used multiple times)
  -o, --output       Output file
  -m, --map          Source map
  -s, --syntax       Alternative input syntax parser
  -p, --parser       Alternative CSS parser
  -t, --stringifier  Alternative output stringifier
  -v, --version      Show version number                                                                  [boolean]
  -h, --help         Show help                                                                            [boolean]

Examples:
  postcss --use autoprefixer -c options.json -o screen.css   Use autoprefixer as a postcss plugin
  screen.css
  postcss --use autoprefixer --autoprefixer.browsers "> 5%"  Pass plugin parameters in plugin.option notation
  -o screen.css screen.css

Please specify a single input file.

npm ERR! Windows_NT 10.0.10586
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "with"
npm ERR! node v6.2.2
npm ERR! npm  v3.9.5
npm ERR! code ELIFECYCLE
npm ERR! [email protected] with: `postcss --use autoprefixer --autoprefixer.browsers 'last 3 versions' -o result.css input.css`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] with script 'postcss --use autoprefixer --autoprefixer.browsers 'last 3 versions' -o result.css input.css'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the test package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     postcss --use autoprefixer --autoprefixer.browsers 'last 3 versions' -o result.css input.css
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs test
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls test
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     c:\Users\Mike\Documents\git\temp\postcss\npm-debug.log

[Pomax]

And npm-debug.log

0 info it worked if it ends with ok
1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe',
1 verbose cli   'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'run',
1 verbose cli   'with' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prewith', 'with', 'postwith' ]
5 info lifecycle [email protected]~prewith: [email protected]
6 silly lifecycle [email protected]~prewith: no script for prewith, continuing
7 info lifecycle [email protected]~with: [email protected]
8 verbose lifecycle [email protected]~with: unsafe-perm in lifecycle true
9 verbose lifecycle [email protected]~with: PATH: C:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin;c:\Users\Mike\Documents\git\temp\postcss\node_modules\.bin;C:\Program Files\nodejs;C:\Python27\;C:\Python27\Scripts;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Program Files\nodejs\;C:\Program Files (x86)\NVIDIA Corporation\PhysX\Common;C:\Program Files\Git\cmd;C:\Program Files\Git\mingw64\bin;C:\Program Files\Git\usr\bin;C:\Program Files (x86)\Skype\Phone\;C:\Program Files (x86)\Windows Kits\10\Windows Performance Toolkit\;C:\Program Files\PostgreSQL\9.5\bin;C:\Program Files (x86)\Heroku\bin;C:\Program Files (x86)\git\cmd;C:\Users\Mike\AppData\Roaming\npm
10 verbose lifecycle [email protected]~with: CWD: c:\Users\Mike\Documents\git\temp\postcss
11 silly lifecycle [email protected]~with: Args: [ '/d /s /c',
11 silly lifecycle   'postcss --use autoprefixer --autoprefixer.browsers \'last 3 versions\' -o result.css input.css' ]
12 silly lifecycle [email protected]~with: Returned: code: 1  signal: null
13 info lifecycle [email protected]~with: Failed to exec with script
14 verbose stack Error: [email protected] with: `postcss --use autoprefixer --autoprefixer.browsers 'last 3 versions' -o result.css input.css`
14 verbose stack Exit status 1
14 verbose stack     at EventEmitter.<anonymous> (C:\Program Files\nodejs\node_modules\npm\lib\utils\lifecycle.js:245:16)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at EventEmitter.emit (events.js:191:7)
14 verbose stack     at ChildProcess.<anonymous> (C:\Program Files\nodejs\node_modules\npm\lib\utils\spawn.js:24:14)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at ChildProcess.emit (events.js:191:7)
14 verbose stack     at maybeClose (internal/child_process.js:852:16)
14 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:215:5)
15 verbose pkgid [email protected]
16 verbose cwd c:\Users\Mike\Documents\git\temp\postcss
17 error Windows_NT 10.0.10586
18 error argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "with"
19 error node v6.2.2
20 error npm  v3.9.5
21 error code ELIFECYCLE
22 error [email protected] with: `postcss --use autoprefixer --autoprefixer.browsers 'last 3 versions' -o result.css input.css`
22 error Exit status 1
23 error Failed at the [email protected] with script 'postcss --use autoprefixer --autoprefixer.browsers 'last 3 versions' -o result.css input.css'.
23 error Make sure you have the latest version of node.js and npm installed.
23 error If you do, this is most likely a problem with the test package,
23 error not with npm itself.
23 error Tell the author that this fails on your system:
23 error     postcss --use autoprefixer --autoprefixer.browsers 'last 3 versions' -o result.css input.css
23 error You can get information on how to open an issue for this project with:
23 error     npm bugs test
23 error Or if that isn't available, you can get their info via:
23 error     npm owner ls test
23 error There is likely additional logging output above.
24 verbose exit [ 1, true ]

[Pomax]

But really: grab those VMs, because it helps cross-platform development tremendously. Free VMs → "I don't have windows" has not been true for developers for a while now =)

[ai]

Sorry, there is no errors from Autoprefixer in this stacktraces ;)

You should ask postcss-cli developers how to use it on Windows.

[kashifimran]

@Pomax You could use https://github.com/ai/browserslist (e.g. "browserslist": ["> 1%"]) in package.json file as a workaround.

[Pomax]

@kashifimran pretty sure that > 1% breaks windows, literally writing to a file called 1%.

[kashifimran]

@Pomax The browserslist solution is working for me; > 1% not causing trouble.

[DigitalVilla]

windows needs backslashes! this script is tested and it works.
"prefix:css": "postcss --use autoprefixer -b \"last 10 versions\" -o css/style.prefix.css css/style.css"

[siddharthborderwala]

Yes it works on windows with backslashes-
"prefix:css": "postcss --use autoprefixer -b \"last 10 versions\" -o css/style.prefix.css css/style.css"

[Pomax]

Conclusion: windows only supports double quotes in the standard command interpreter for quoted arguments (singles quotes will not work), and because NPM scripts area already in double quotes, if you want quoted arguments in an NPM script, you need to escape your double quotes.

This is effectively a general cross-platform issue around NPM scripts that work in Windows as well as in linux/macos, rather than an autoprefixer or even postcss-cli issue.