question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:12 (2 by maintainers)

github_iconTop GitHub Comments

4reactions
DigitalVillacommented, Jan 24, 2018

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”

0reactions
Pomaxcommented, Feb 19, 2020

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

last 2 versions autoprefixer browserslist - Stack Overflow
I am wondering can I easily see on caniuse.com what exact browser versions: last 2 versions , last 3 versions , last 4...
Read more >
Is Vendor Prefixing Dead? - CSS-Tricks
The solution was to use box-decoration-break: clone . Most browsers require the -webkit prefixed version of this property, so you need to use ......
Read more >
Vendor Prefix - MDN Web Docs Glossary
Browser vendors used to add prefixes to experimental or nonstandard CSS properties and JavaScript APIs, so developers could experiment with ...
Read more >
Tweets with replies by Autoprefixer (@Autoprefixer ... - Twitter
The latest Can I Use update broke Autoprefixer. ... create PR with browsers DB update and your `last 2 version` or `>1%` queries...
Read more >
Say Goodbye to Vendor Prefixes
There are no vendor prefixes or browser inconsistencies, ... Microsoft can add a new CSS property grid without breaking pages that depend on ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found