--- /dev/null
+# Autoprefixer [![Build Status][ci-img]][ci]
+
+<img align="right" width="94" height="71"
+ src="http://postcss.github.io/autoprefixer/logo.svg"
+ title="Autoprefixer logo by Anton Lovchikov">
+
+[PostCSS] plugin to parse CSS and add vendor prefixes to CSS rules using values
+from [Can I Use]. It is [recommended] by Google and used in Twitter and Taobao.
+
+Write your CSS rules without vendor prefixes (in fact, forget about them
+entirely):
+
+```css
+:fullscreen a {
+ display: flex;
+}
+```
+
+Autoprefixer will use the data based on current browser popularity and property
+support to apply prefixes for you. You can try the [interactive demo]
+of Autoprefixer.
+
+```css
+:-webkit-full-screen a {
+ display: -webkit-box;
+ display: flex;
+}
+:-moz-full-screen a {
+ display: flex;
+}
+:-ms-fullscreen a {
+ display: -ms-flexbox;
+ display: flex;
+}
+:fullscreen a {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+```
+
+Twitter account for news and releases: [@autoprefixer].
+
+<a href="https://evilmartians.com/?utm_source=autoprefixer">
+<img src="https://evilmartians.com/badges/sponsored-by-evil-martians.svg" alt="Sponsored by Evil Martians" width="236" height="54">
+</a>
+
+[interactive demo]: http://autoprefixer.github.io/
+[@autoprefixer]: https://twitter.com/autoprefixer
+[recommended]: https://developers.google.com/web/tools/setup/setup-buildtools#dont_trip_up_with_vendor_prefixes
+[Can I Use]: http://caniuse.com/
+[PostCSS]: https://github.com/postcss/postcss
+[ci-img]: https://travis-ci.org/postcss/autoprefixer.svg
+[ci]: https://travis-ci.org/postcss/autoprefixer
+
+## Features
+
+### Write Pure CSS
+
+Working with Autoprefixer is simple: just forget about vendor prefixes
+and write normal CSS according to the latest W3C specs. You don’t need
+a special language (like Sass) or remember where you must use mixins.
+
+Autoprefixer supports selectors (like `:fullscreen` and `::selection`),
+unit function (`calc()`), at‑rules (`@supports` and `@keyframes`)
+and properties.
+
+Because Autoprefixer is a postprocessor for CSS,
+you can also use it with preprocessors such as Sass, Stylus or LESS.
+
+### Flexbox, Filters, etc.
+
+Just write normal CSS according to the latest W3C specs and Autoprefixer
+will produce the code for old browsers.
+
+```css
+a {
+ display: flex;
+}
+```
+
+compiles to:
+
+```css
+a {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+}
+```
+
+Autoprefixer has [27 special hacks] to fix web browser differences.
+
+[27 special hacks]: https://github.com/postcss/autoprefixer/tree/master/lib/hacks
+
+### Only Actual Prefixes
+
+Autoprefixer utilizes the most recent data from [Can I Use]
+to add only necessary vendor prefixes.
+
+It also removes old, unnecessary prefixes from your CSS
+(like `border-radius` prefixes, produced by many CSS libraries).
+
+```css
+a {
+ -webkit-border-radius: 5px;
+ border-radius: 5px;
+}
+```
+
+compiles to:
+
+```css
+a {
+ border-radius: 5px;
+}
+```
+
+[Can I Use]: http://caniuse.com/
+
+## Browsers
+
+Autoprefixer uses [Browserslist], so you can specify the browsers
+you want to target in your project by queries like `last 2 versions`
+or `> 5%`.
+
+The best way to provide browsers is `.browserslistrc` config
+or `package.json` with `browserslist` key. Put it in your project root.
+
+We recommend to avoid Autoprefixer option and use `.browserslistrc` config
+or `package.json`. In this case browsers will be shared with other tools
+like [babel-preset-env] or [Stylelint].
+
+See [Browserslist docs] for queries, browser names, config format,
+and default value.
+
+[Browserslist docs]: https://github.com/ai/browserslist#queries
+[babel-preset-env]: https://github.com/babel/babel-preset-env
+[Browserslist]: https://github.com/ai/browserslist
+[Stylelint]: http://stylelint.io/
+
+## Outdated Prefixes
+
+By default, Autoprefixer also removes outdated prefixes.
+
+You can disable this behavior with the `remove: false` option. If you have
+no legacy code, this option will make Autoprefixer about 10% faster.
+
+Also, you can set the `add: false` option. Autoprefixer will only clean outdated
+prefixes, but will not add any new prefixes.
+
+Autoprefixer adds new prefixes between any unprefixed properties and already
+written prefixes in your CSS. If it will break the expected prefixes order,
+you can clean all prefixes from your CSS and then
+add the necessary prefixes again:
+
+```js
+var cleaner = postcss([ autoprefixer({ add: false, browsers: [] }) ]);
+var prefixer = postcss([ autoprefixer ]);
+
+cleaner.process(css).then(function (cleaned) {
+ return prefixer.process(cleaned.css);
+}).then(function (result) {
+ console.log(result.css);
+});
+```
+
+## FAQ
+
+#### No prefixes in production
+
+Many other tools contain Autoprefixer. For example, webpack uses Autoprefixer
+to minify CSS by cleaning unnecessary prefixes.
+
+If you set browsers list to Autoprefixer by `browsers` option, only first
+Autoprefixer will know your browsers. Autoprefixer inside webpack will use
+default browsers list. As result, webpack will remove prefixes, that first
+Autoprefixer added.
+
+You need to put your browsers to [`browserslist` config] in project root —
+as result all tools (Autoprefixer, cssnano, doiuse, cssnext) will use same
+browsers list.
+
+[`browserslist` config]: https://github.com/ai/browserslist#config-file
+
+#### What is unprefixed version for `-webkit-min-device-pixel-ratio`?
+
+```css
+@media (min-resolution: 2dppx) {
+ .image {
+ background-image: url(image@2x.png);
+ }
+}
+```
+
+Will be compiled to:
+
+```css
+@media (-webkit-min-device-pixel-ratio: 2),
+ (-o-min-device-pixel-ratio: 2/1),
+ (min-resolution: 2dppx) {
+ .image {
+ background-image: url(image@2x.png);
+ }
+}
+```
+
+#### Does it add polyfills?
+
+No. Autoprefixer only adds prefixes.
+
+Most new CSS features will require client side JavaScript to handle a new
+behavior correctly.
+
+Depending on what you consider to be a “polyfill”, you can take a look at some
+other tools and libraries. If you are just looking for syntax sugar,
+you might take a look at:
+
+- [Oldie], a PostCSS plugin that handles some IE hacks (opacity, rgba, etc).
+- [postcss-flexbugs-fixes], a PostCSS plugin to fix flexbox issues.
+- [cssnext], a tool that allows you to write standard CSS syntax non-implemented
+ yet in browsers (custom properties, custom media, color functions, etc).
+
+[postcss-flexbugs-fixes]: https://github.com/luisrudge/postcss-flexbugs-fixes
+[cssnext]: https://github.com/MoOx/postcss-cssnext
+[Oldie]: https://github.com/jonathantneal/oldie
+
+#### Why doesn’t Autoprefixer add prefixes to `border-radius`?
+
+Developers are often surprised by how few prefixes are required today.
+If Autoprefixer doesn’t add prefixes to your CSS, check if they’re still
+required on [Can I Use].
+
+There is a [list with all supported] properties, values, and selectors.
+
+[list with all supported]: https://github.com/postcss/autoprefixer/wiki/support-list
+[Can I Use]: http://caniuse.com/
+
+#### Why Autoprefixer uses unprefixed properties in `@-webkit-keyframes`?
+
+Browser teams can remove some prefixes before others. So we try to use
+all combinations of prefixed/unprefixed values.
+
+#### How to work with legacy `-webkit-` only code?
+
+Autoprefixer needs unprefixed property to add prefixes. So if you only
+wrote `-webkit-gradient` without W3C’s `gradient`,
+Autoprefixer will not add other prefixes.
+
+But [PostCSS] has a plugins to convert CSS to unprefixed state.
+Use [postcss-unprefix] before Autoprefixer.
+
+[postcss-unprefix]: https://github.com/gucong3000/postcss-unprefix
+
+#### Does Autoprefixer add `-epub-` prefix?
+
+No, Autoprefixer works only with browsers prefixes from Can I Use.
+But you can use [postcss-epub](https://github.com/Rycochet/postcss-epub)
+for prefixing ePub3 properties.
+
+#### Why doesn’t Autoprefixer transform generic font-family `system-ui`?
+
+`system-ui` is technically not a prefix and the transformation is not future-proof. But you can use [postcss-font-family-system-ui](https://github.com/JLHwung/postcss-font-family-system-ui) to transform `system-ui` to a practical font-family list.
+
+## Usage
+
+### Gulp
+
+In Gulp you can use [gulp-postcss] with `autoprefixer` npm package.
+
+```js
+gulp.task('autoprefixer', function () {
+ var postcss = require('gulp-postcss');
+ var sourcemaps = require('gulp-sourcemaps');
+ var autoprefixer = require('autoprefixer');
+
+ return gulp.src('./src/*.css')
+ .pipe(sourcemaps.init())
+ .pipe(postcss([ autoprefixer() ]))
+ .pipe(sourcemaps.write('.'))
+ .pipe(gulp.dest('./dest'));
+});
+```
+
+With `gulp-postcss` you also can combine Autoprefixer
+with [other PostCSS plugins].
+
+[other PostCSS plugins]: https://github.com/postcss/postcss#plugins
+[gulp-postcss]: https://github.com/postcss/gulp-postcss
+
+### Webpack
+
+In [webpack] you can use [postcss-loader] with `autoprefixer`
+and [other PostCSS plugins].
+
+```js
+module.exports = {
+ module: {
+ rules: [
+ {
+ test: /\.css$/,
+ use: ["style-loader", "css-loader", "postcss-loader"]
+ }
+ ]
+ }
+}
+```
+
+And create a `postcss.config.js` with:
+
+```js
+module.exports = {
+ plugins: [
+ require('autoprefixer')
+ ]
+}
+```
+
+[other PostCSS plugins]: https://github.com/postcss/postcss#plugins
+[postcss-loader]: https://github.com/postcss/postcss-loader
+[webpack]: http://webpack.github.io/
+
+### Grunt
+
+In Grunt you can use [grunt-postcss] with `autoprefixer` npm package.
+
+```js
+module.exports = function(grunt) {
+ grunt.loadNpmTasks('grunt-postcss');
+
+ grunt.initConfig({
+ postcss: {
+ options: {
+ map: true,
+ processors: [
+ require('autoprefixer')
+ ]
+ },
+ dist: {
+ src: 'css/*.css'
+ }
+ }
+ });
+
+ grunt.registerTask('default', ['postcss:dist']);
+};
+```
+
+With `grunt-postcss` you also can combine Autoprefixer
+with [other PostCSS plugins].
+
+[other PostCSS plugins]: https://github.com/postcss/postcss#plugins
+[grunt-postcss]: https://github.com/nDmitry/grunt-postcss
+
+### Other Build Tools:
+
+* **Ruby on Rails**: [autoprefixer-rails]
+* **Neutrino**: [neutrino-middleware-postcss]
+* **Jekyll**: add `autoprefixer-rails` and `jekyll-assets` to `Gemfile`
+* **Brunch**: [postcss-brunch]
+* **Broccoli**: [broccoli-postcss]
+* **Middleman**: [middleman-autoprefixer]
+* **Mincer**: add `autoprefixer` npm package and enable it:
+ `environment.enable('autoprefixer')`
+
+[neutrino-middleware-postcss]: https://www.npmjs.com/package/neutrino-middleware-postcss
+[middleman-autoprefixer]: https://github.com/middleman/middleman-autoprefixer
+[autoprefixer-rails]: https://github.com/ai/autoprefixer-rails
+[broccoli-postcss]: https://github.com/jeffjewiss/broccoli-postcss
+[postcss-brunch]: https://github.com/iamvdo/postcss-brunch
+
+### Preprocessors
+
+* **Less**: [less-plugin-autoprefix]
+* **Stylus**: [autoprefixer-stylus]
+* **Compass**: [autoprefixer-rails#compass]
+
+[less-plugin-autoprefix]: https://github.com/less/less-plugin-autoprefix
+[autoprefixer-stylus]: https://github.com/jenius/autoprefixer-stylus
+[autoprefixer-rails#compass]: https://github.com/ai/autoprefixer-rails#compass
+
+### CSS-in-JS
+
+There is [postcss-js] to use Autoprefixer in React Inline Styles, [Free Style],
+Radium and other CSS-in-JS solutions.
+
+```js
+let prefixer = postcssJs.sync([ autoprefixer ]);
+let style = prefixer({
+ display: 'flex'
+});
+```
+
+[postcss-js]: https://github.com/postcss/postcss-js
+[Free Style]: https://github.com/blakeembrey/free-style
+
+### GUI Tools
+
+* [CodeKit](https://codekitapp.com/help/autoprefixer/)
+* [Prepros](https://prepros.io)
+
+### CLI
+
+You can use the [postcss-cli] to run Autoprefixer from CLI:
+
+```sh
+npm install postcss-cli autoprefixer
+npx postcss *.css --use autoprefixer -d build/
+```
+
+See `postcss -h` for help.
+
+[postcss-cli]: https://github.com/postcss/postcss-cli
+
+### JavaScript
+
+You can use Autoprefixer with [PostCSS] in your Node.js application
+or if you want to develop an Autoprefixer plugin for new environment.
+
+```js
+var autoprefixer = require('autoprefixer');
+var postcss = require('postcss');
+
+postcss([ autoprefixer ]).process(css).then(function (result) {
+ result.warnings().forEach(function (warn) {
+ console.warn(warn.toString());
+ });
+ console.log(result.css);
+});
+```
+
+There is also [standalone build] for the browser or as a non-Node.js runtime.
+
+You can use [html-autoprefixer] to process HTML with inlined CSS.
+
+[html-autoprefixer]: https://github.com/RebelMail/html-autoprefixer
+[standalone build]: https://raw.github.com/ai/autoprefixer-rails/master/vendor/autoprefixer.js
+[PostCSS]: https://github.com/postcss/postcss
+
+### Text Editors and IDE
+
+Autoprefixer should be used in assets build tools. Text editor plugins are not
+a good solution, because prefixes decrease code readability and you will need
+to change value in all prefixed properties.
+
+I recommend you to learn how to use build tools like [Gulp].
+They work much better and will open you a whole new world of useful plugins
+and automatization.
+
+But, if you can’t move to a build tool, you can use text editor plugins:
+
+* [Sublime Text](https://github.com/sindresorhus/sublime-autoprefixer)
+* [Brackets](https://github.com/mikaeljorhult/brackets-autoprefixer)
+* [Atom Editor](https://github.com/sindresorhus/atom-autoprefixer)
+* [Visual Studio](http://vswebessentials.com/)
+
+[Gulp]: http://gulpjs.com/
+
+## Warnings
+
+Autoprefixer uses the [PostCSS warning API] to warn about really important problems
+in your CSS:
+
+* Old direction syntax in gradients.
+* Old unprefixed `display: box` instead of `display: flex`
+ by latest specification version.
+
+You can get warnings from `result.warnings()`:
+
+```js
+result.warnings().forEach(function (warn) {
+ console.warn(warn.toString());
+});
+```
+
+Every Autoprefixer runner should display this warnings.
+
+[PostCSS warning API]: https://github.com/postcss/postcss/blob/master/docs/api.md#warning-class
+
+## Disabling
+
+### Prefixes
+
+Autoprefixer was designed to have no interface – it just works.
+If you need some browser specific hack just write a prefixed property
+after the unprefixed one.
+
+```css
+a {
+ transform: scale(0.5);
+ -moz-transform: scale(0.6);
+}
+```
+
+If some prefixes were generated in a wrong way,
+please create an issue on GitHub.
+
+### Features
+
+There are 4 plugin’s options to disable some Autoprefixer features.
+
+* `supports: false` will disable `@supports` parameters prefixing.
+* `flexbox: false` will disable flexbox properties prefixing.
+ Or `flexbox: "no-2009"` will add prefixes only for final and IE
+ versions of specification.
+* `remove: false` will disable cleaning outdated prefixes.
+
+You shoud set them to the plugin:
+
+```js
+autoprefixer({ grid: true });
+```
+
+### Control Comments
+
+If you do not need Autoprefixer in some part of your CSS,
+you can use control comments to disable Autoprefixer.
+
+```css
+a {
+ transition: 1s; /* it will be prefixed */
+}
+
+b {
+ /* autoprefixer: off */
+ transition: 1s; /* it will not be prefixed */
+}
+```
+
+Control comments disable Autoprefixer within the whole rule in which
+you place it. In the above example, Autoprefixer will be disabled
+in the entire `b` rule scope, not only after the comment.
+
+You can also use comments recursively:
+
+```css
+/* autoprefixer: off */
+@supports (transition: all) {
+ /* autoprefixer: on */
+ a {
+ /* autoprefixer: off */
+ }
+}
+```
+
+In Sass/SCSS you can use all the disable options above, add an exclamation mark
+in the start of comment: `/*! autoprefixer: off */`.
+
+## Options
+
+Function `autoprefixer(options)` returns new PostCSS plugin.
+See [PostCSS API] for plugin usage documentation.
+
+```js
+autoprefixer({ cascade: false })
+```
+
+There are 8 options:
+
+* `browsers` (array): list of browsers query (like `last 2 versions`),
+ which are supported in your project. We recommend to use `browserslist`
+ config or `browserslist` key in `package.json`, rather than this option
+ to share browsers with other tools. See [Browserslist docs] for available
+ queries and default value.
+* `env` (string): environment for Browserslist.
+* `cascade` (boolean): should Autoprefixer use Visual Cascade,
+ if CSS is uncompressed. Default: `true`
+* `add` (boolean): should Autoprefixer add prefixes. Default is `true`.
+* `remove` (boolean): should Autoprefixer [remove outdated] prefixes.
+ Default is `true`.
+* `supports` (boolean): should Autoprefixer add prefixes for `@supports`
+ parameters. Default is `true`.
+* `flexbox` (boolean|string): should Autoprefixer add prefixes for flexbox
+ properties. With `"no-2009"` value Autoprefixer will add prefixes only
+ for final and IE versions of specification. Default is `true`.
+* `grid` (boolean): should Autoprefixer add IE prefixes for Grid Layout
+ properties. Default is `false`.
+* `stats` (object): custom [usage statistics] for `> 10% in my stats`
+ browsers query.
+
+Plugin object has `info()` method for debugging purpose.
+
+You can use PostCSS processor to process several CSS files
+to increase performance.
+
+[usage statistics]: https://github.com/ai/browserslist#custom-usage-data
+[PostCSS API]: http://api.postcss.org
+
+## Debug
+
+Run `npx autoprefixer-info --package autoprefixer` in your project directory to check
+which browsers are selected and which properties will be prefixed:
+
+```
+$ npx autoprefixer-info --package autoprefixer
+Browsers:
+ Edge: 16
+
+These browsers account for 0.04% of all users globally
+
+At-Rules:
+ @viewport: ms
+
+Selectors:
+ ::placeholder: ms
+
+Properties:
+ user-select: ms
+ hyphens: ms
+ appearance: webkit
+ scroll-snap-type: ms
+ scroll-snap-coordinate: ms
+ scroll-snap-destination: ms
+ scroll-snap-points-x: ms
+ scroll-snap-points-y: ms
+ flow-into: ms
+ flow-from: ms
+ region-fragment: ms
+ text-spacing: ms
+```
+
+JS API is also available:
+
+```js
+var info = autoprefixer().info();
+console.log(info);
+```
projects / dotfiles / .git / blobdiff