MozillaFoundation / mofo-standards

Mozilla Foundation – Engineering Guidebook
6 stars 2 forks source link

Use "postcss" with "browserslist" if autoprefixing is needed #30

Open mmmavis opened 7 years ago

mmmavis commented 7 years ago

Related ticket: https://github.com/mozilla/network-pulse/issues/323

Fix for the above ticket: https://github.com/mozilla/network-pulse/pull/345

e.g., in some package.json

...
...
...
"bootstrap:prefix": "postcss --use autoprefixer --autoprefixer.browsers 'last 3 versions' -o dist/css/mofo-bootstrap.css dist/css/mofo-bootstrap.css",
...
...
...

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

In order for this to work across different operating systems, let's use browserslist instead of passing the autoprefixer option directly to the cli command.

e.g.,

{
  "name": "network-pulse",
  "version": "2.0.0",
  "description": "",
  "main": "dist/server.bundle.js",
  "scripts": {
    ...
    "bootstrap:prefix": "postcss --use autoprefixer -o dist/css/mofo-bootstrap.css dist/css/mofo-bootstrap.css",
    ...
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}
mmmavis commented 7 years ago

/cc @Pomax @gvn