Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: add story about autoprefixer config #5975

Closed
wants to merge 2 commits into from
Closed
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
43 changes: 43 additions & 0 deletions docs/documentation/stories/autoprefixer.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
# Change target browsers for Autoprefixer

Currently, the CLI uses [Autoprefixer](https://github.com/postcss/autoprefixer) to ensure compatibility
with different browser and browser versions. You may find it necessary to target specific browsers
or exclude certain browser versions from your build.

Internally, Autoprefixer relies on a library called [Browserslist](https://github.com/ai/browserslist)
to figure out which browsers to support with prefixing.

There are a few ways to tell Autoprefixer what browsers to target:

### Add a browserslist property to the `package.json` file
```
"browserslist": [
"> 1%",
"last 2 versions"
]
```

### Add a new file to the project directory called `.browserslistrc`
```
### Supported Browsers

> 1%
last 2 versions
```

Autoprefixer will look for the configuration file/property to use when it prefixes your css.
Check out the [browserslist repo](https://github.com/ai/browserslist) for more examples of how to target
specific browsers and versions.

_Side note:_
Those who are seeking to produce a [progressive web app](https://developers.google.com/web/progressive-web-apps/) and are using [Lighthouse](https://developers.google.com/web/tools/lighthouse/) to grade the project will
need to add the following browserslist config to their package.json file to eliminate the [old flexbox](https://developers.google.com/web/tools/lighthouse/audits/old-flexbox) prefixes:

`package.json` config:
```
"browserslist": [
"last 2 versions",
"not ie <= 10",
"not ie_mob <= 10"
]
```