UNPKG

motion

Version:

motion - moving development forward

87 lines (86 loc) 17.7 kB
{ "_args": [ [ "autoprefixer@https://registry.npmjs.org/autoprefixer/-/autoprefixer-6.2.3.tgz", "/Users/nw/flint/packages/flint" ] ], "_from": "autoprefixer@6.2.3", "_id": "autoprefixer@6.2.3", "_inCache": true, "_location": "/autoprefixer", "_phantomChildren": { "js-base64": "2.1.9", "source-map": "0.5.3", "supports-color": "3.1.2" }, "_requested": { "name": "autoprefixer", "raw": "autoprefixer@https://registry.npmjs.org/autoprefixer/-/autoprefixer-6.2.3.tgz", "rawSpec": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-6.2.3.tgz", "scope": null, "spec": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-6.2.3.tgz", "type": "remote" }, "_requiredBy": [ "/", "/cssnano" ], "_resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-6.2.3.tgz", "_shasum": "a9ecc9fe1a7b52b0b32d110257375d02fa841f1c", "_shrinkwrap": null, "_spec": "autoprefixer@https://registry.npmjs.org/autoprefixer/-/autoprefixer-6.2.3.tgz", "_where": "/Users/nw/flint/packages/flint", "author": { "email": "andrey@sitnik.ru", "name": "Andrey Sitnik" }, "bugs": { "url": "https://github.com/postcss/autoprefixer/issues" }, "dependencies": { "browserslist": "~1.0.1", "caniuse-db": "^1.0.30000382", "normalize-range": "^0.1.2", "num2fraction": "^1.2.2", "postcss": "^5.0.13", "postcss-value-parser": "^3.2.3" }, "description": "Parse CSS and add vendor prefixes to CSS rules using values from the Can I Use website", "devDependencies": { "browserify": "12.0.1", "coffee-script": "1.10.0", "fs-extra": "0.26.3", "gulp": "3.9.0", "gulp-coffee": "2.3.1", "gulp-eslint": "1.1.1", "gulp-json-editor": "2.2.1", "gulp-mocha": "2.2.0", "gulp-replace": "0.5.4", "mocha": "2.3.4", "should": "8.0.2", "vinyl-source-stream": "1.1.0" }, "homepage": "https://github.com/postcss/autoprefixer#readme", "keywords": [ "autoprefixer", "css", "postcss", "postcss-plugin", "prefix" ], "license": "MIT", "main": "lib/autoprefixer", "name": "autoprefixer", "optionalDependencies": {}, "readme": "# Autoprefixer [![Build Status][ci-img]][ci]\n\n<img align=\"right\" width=\"94\" height=\"71\"\n src=\"http://postcss.github.io/autoprefixer/logo.svg\"\n title=\"Autoprefixer logo by Anton Lovchikov\">\n\n[PostCSS] plugin to parse CSS and add vendor prefixes to CSS rules using values\nfrom [Can I Use]. It is [recommended] by Google and used in Twitter,\nand Taobao.\n\nWrite your CSS rules without vendor prefixes (in fact, forget about them\nentirely):\n\n```css\n:fullscreen a {\n display: flex\n}\n```\n\nAutoprefixer will use the data based on current browser popularity and property\nsupport to apply prefixes for you. You can try the [interactive demo]\nof Autoprefixer.\n\n```css\n:-webkit-full-screen a {\n display: -webkit-box;\n display: -webkit-flex;\n display: flex\n}\n:-moz-full-screen a {\n display: flex\n}\n:-ms-fullscreen a {\n display: -ms-flexbox;\n display: flex\n}\n:fullscreen a {\n display: -webkit-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: flex\n}\n```\n\nTwitter account for news and releases: [@autoprefixer].\n\n<a href=\"https://evilmartians.com/?utm_source=autoprefixer\">\n<img src=\"https://evilmartians.com/badges/sponsored-by-evil-martians.svg\" alt=\"Sponsored by Evil Martians\" width=\"236\" height=\"54\">\n</a>\n\n[interactive demo]: http://autoprefixer.github.io/\n[@autoprefixer]: https://twitter.com/autoprefixer\n[recommended]: https://developers.google.com/web/tools/setup/setup-buildtools#dont-trip-up-with-vendor-prefixes\n[Can I Use]: http://caniuse.com/\n[PostCSS]: https://github.com/postcss/postcss\n[ci-img]: https://travis-ci.org/postcss/autoprefixer.svg\n[ci]: https://travis-ci.org/postcss/autoprefixer\n\n## Features\n\n### Write Pure CSS\n\nWorking with Autoprefixer is simple: just forget about vendor prefixes\nand write normal CSS according to the latest W3C specs. You don’t need\na special language (like Sass) or remember where you must use mixins.\n\nAutoprefixer supports selectors (like `:fullscreen` and `::selection`),\nunit function (`calc()`), at‑rules (`@supports` and `@keyframes`)\nand properties.\n\nBecause Autoprefixer is a postprocessor for CSS,\nyou can also use it with preprocessors such as Sass, Stylus or LESS.\n\n### Flexbox, Filters, etc.\n\nJust write normal CSS according to the latest W3C specs and Autoprefixer\nwill produce the code for old browsers.\n\n```css\na {\n display: flex;\n}\n```\n\ncompiles to:\n\n```css\na {\n display: -webkit-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: flex\n}\n```\n\nAutoprefixer has [27 special hacks] to fix web browser differences.\n\n[27 special hacks]: https://github.com/postcss/autoprefixer/tree/master/lib/hacks\n\n### Only Actual Prefixes\n\nAutoprefixer utilizes the most recent data from [Can I Use]\nto add only necessary vendor prefixes.\n\nIt also removes old, unnecessary prefixes from your CSS\n(like `border-radius` prefixes, produced by many CSS libraries).\n\n```css\na {\n -webkit-border-radius: 5px;\n border-radius: 5px;\n}\n```\n\ncompiles to:\n\n```css\na {\n border-radius: 5px;\n}\n```\n\n[Can I Use]: http://caniuse.com/\n\n## Browsers\n\nAutoprefixer uses [Browserslist], so you can specify the browsers\nyou want to target in your project by queries like `last 2 versions`\nor `> 5%`.\n\nIf you don’t provide the browsers option, Browserslist will try\nto find the `browserslist` config in parent dirs.\n\nSee [Browserslist docs] for queries, browser names, config format,\nand default value.\n\n[Browserslist]: https://github.com/ai/browserslist\n[Browserslist docs]: https://github.com/ai/browserslist#queries\n\n## Outdated Prefixes\n\nBy default, Autoprefixer also removes outdated prefixes.\n\nYou can disable this behavior with the `remove: false` option. If you have\nno legacy code, this option will make Autoprefixer about 10% faster.\n\nAlso, you can set the `add: false` option. Autoprefixer will only clean outdated\nprefixes, but will not add any new prefixes.\n\nAutoprefixer adds new prefixes between any unprefixed properties and already\nwritten prefixes in your CSS. If it will break the expected prefixes order,\nyou can clean all prefixes from your CSS and then\nadd the necessary prefixes again:\n\n```js\nvar cleaner = postcss([ autoprefixer({ add: false, browsers: [] }) ]);\nvar prefixer = postcss([ autoprefixer ]);\n\ncleaner.process(css).then(function (cleaned) {\n return prefixer.process(cleaned.css)\n}).then(function (result) {\n console.log(result.css);\n});\n```\n\n## FAQ\n\n#### Does it add polyfills?\n\nNo. Autoprefixer only adds prefixes.\n\nMost new CSS features will require client side JavaScript to handle a new\nbehavior correctly.\n\nDepending on what you consider to be a “polyfill”, you can take a look at some\nother tools and libraries. If you are just looking for syntax sugar,\nyou might take a look at:\n\n- [Oldie], a PostCSS plugin that handles some IE hacks (opacity, rgba, etc).\n- [cssnext], a tool that allows you to write standard CSS syntax non-implemented\n yet in browsers (custom properties, custom media, color functions, etc).\n\n[cssnext]: https://github.com/cssnext/postcss-cssnext\n[Oldie]: https://github.com/jonathantneal/oldie\n\n#### Why doesn’t Autoprefixer add prefixes to `border-radius`?\n\nDevelopers are often surprised by how few prefixes are required today.\nIf Autoprefixer doesn’t add prefixes to your CSS, check if they’re still\nrequired on [Can I Use].\n\nThere is a [list with all supported] properties, values, and selectors.\n\n[list with all supported]: https://github.com/postcss/autoprefixer/wiki/support-list\n[Can I Use]: http://caniuse.com/\n\n#### Why Autoprefixer uses unprefixed properties in `@-webkit-keyframes`?\n\nBrowser teams can remove some prefixes before others. So we try to use\nall combinations of prefixed/unprefixed values.\n\n#### How to work with legacy `-webkit-` only code?\n\nAutoprefixer needs unprefixed property to add prefixes. So if you only\nwrote `-webkit-gradient` without W3C’s `gradient`,\nAutoprefixer will not add other prefixes.\n\nBut [PostCSS] has a plugins to convert CSS to unprefixed state.\nUse them before Autoprefixer:\n\n* [postcss-unprefix]\n* [postcss-flexboxfixer]\n* [postcss-gradientfixer]\n\n[postcss-gradientfixer]: https://github.com/hallvors/postcss-gradientfixer\n[postcss-flexboxfixer]: https://github.com/hallvors/postcss-flexboxfixer\n[postcss-unprefix]: https://github.com/yisibl/postcss-unprefix\n\n#### Does Autoprefixer add `-epub-` prefix?\n\nNo, Autoprefixer works only with browsers prefixes from Can I Use.\nBut you can use [postcss-epub](https://github.com/Rycochet/postcss-epub)\nfor prefixing ePub3 properties.\n\n## Usage\n\n### Gulp\n\nIn Gulp you can use [gulp-postcss] with `autoprefixer` npm package.\n\n```js\ngulp.task('autoprefixer', function () {\n var postcss = require('gulp-postcss');\n var sourcemaps = require('gulp-sourcemaps');\n var autoprefixer = require('autoprefixer');\n\n return gulp.src('./src/*.css')\n .pipe(sourcemaps.init())\n .pipe(postcss([ autoprefixer({ browsers: ['last 2 versions'] }) ]))\n .pipe(sourcemaps.write('.'))\n .pipe(gulp.dest('./dest'));\n});\n```\n\nWith `gulp-postcss` you also can combine Autoprefixer\nwith [other PostCSS plugins].\n\n[other PostCSS plugins]: https://github.com/postcss/postcss#plugins\n[gulp-postcss]: https://github.com/postcss/gulp-postcss\n\n### Webpack\n\nIn [webpack] you can use [postcss-loader] with `autoprefixer`\nand [other PostCSS plugins].\n\n```js\nvar autoprefixer = require('autoprefixer');\n\nmodule.exports = {\n module: {\n loaders: [\n {\n test: /\\.css$/,\n loader: \"style-loader!css-loader!postcss-loader\"\n }\n ]\n },\n postcss: [ autoprefixer({ browsers: ['last 2 versions'] }) ]\n}\n```\n\n[other PostCSS plugins]: https://github.com/postcss/postcss#plugins\n[postcss-loader]: https://github.com/postcss/postcss-loader\n[webpack]: http://webpack.github.io/\n\n### Grunt\n\nIn Grunt you can use [grunt-postcss] with `autoprefixer` npm package.\n\n```js\nmodule.exports = function(grunt) {\n grunt.loadNpmTasks('grunt-postcss');\n\n grunt.initConfig({\n postcss: {\n options: {\n map: true,\n processors: [\n require('autoprefixer')({\n browsers: ['last 2 versions']\n })\n ]\n },\n dist: {\n src: 'css/*.css'\n }\n }\n });\n\n grunt.registerTask('default', ['postcss:dist']);\n};\n```\n\nWith `grunt-postcss` you also can combine Autoprefixer\nwith [other PostCSS plugins].\n\n[other PostCSS plugins]: https://github.com/postcss/postcss#plugins\n[grunt-postcss]: https://github.com/nDmitry/grunt-postcss\n\n### Other Build Tools:\n\n* **Ruby on Rails**: [autoprefixer-rails]\n* **Brunch**: [postcss-brunch]\n* **Broccoli**: [broccoli-postcss]\n* **Middleman**: [middleman-autoprefixer]\n* **Mincer**: add `autoprefixer` npm package and enable it:\n `environment.enable('autoprefixer')`\n* **Jekyll**: add `autoprefixer-rails` and `jekyll-assets` to `Gemfile`\n\n[middleman-autoprefixer]: https://github.com/middleman/middleman-autoprefixer\n[autoprefixer-rails]: https://github.com/ai/autoprefixer-rails\n[broccoli-postcss]: https://github.com/jeffjewiss/broccoli-postcss\n[postcss-brunch]: https://github.com/iamvdo/postcss-brunch\n\n### Preprocessors\n\n* **Less**: [less-plugin-autoprefix]\n* **Stylus**: [autoprefixer-stylus]\n* **Compass**: [autoprefixer-rails]\n\n [less-plugin-autoprefix]: https://github.com/less/less-plugin-autoprefix\n [autoprefixer-stylus]: https://github.com/jenius/autoprefixer-stylus\n [autoprefixer-rails]: https://github.com/ai/autoprefixer-rails#compass\n\n### CSS-in-JS\n\nThere is [postcss-js] to use Autoprefixer in React Inline Styles, [Free Style],\nRadium and other CSS-in-JS solutions.\n\n```js\nlet prefixer = postcssJs.sync([ autoprefixer ]);\nlet style = prefixer({\n display: 'flex'\n});\n```\n\n[postcss-js]: https://github.com/postcss/postcss-js\n[Free Style]: https://github.com/blakeembrey/free-style\n\n### GUI Tools\n\n* [CodeKit](https://incident57.com/codekit/help.html#autoprefixer)\n* [Prepros](https://prepros.io)\n\n### CLI\n\nYou can use the [postcss-cli] to run Autoprefixer from CLI:\n\n```sh\nnpm install --global postcss-cli autoprefixer\npostcss --use autoprefixer *.css -d build/\n```\n\nSee `postcss -h` for help.\n\n[postcss-cli]: https://github.com/code42day/postcss-cli\n\n### JavaScript\n\nYou can use Autoprefixer with [PostCSS] in your Node.js application\nor if you want to develop an Autoprefixer plugin for new environment.\n\n```js\nvar autoprefixer = require('autoprefixer');\nvar postcss = require('postcss');\n\npostcss([ autoprefixer ]).process(css).then(function (result) {\n result.warnings().forEach(function (warn) {\n console.warn(warn.toString());\n });\n console.log(result.css);\n});\n```\n\nThere is also [standalone build] for the browser or as a non-Node.js runtime.\n\nYou can use [html-autoprefixer] to process HTML with inlined CSS.\n\n[html-autoprefixer]: https://github.com/RebelMail/html-autoprefixer\n[standalone build]: https://raw.github.com/ai/autoprefixer-rails/master/vendor/autoprefixer.js\n[PostCSS]: https://github.com/postcss/postcss\n\n### Text Editors and IDE\n\nAutoprefixer should be used in assets build tools. Text editor plugins are not\na good solution, because prefixes decrease code readability and you will need\nto change value in all prefixed properties.\n\nI recommend you to learn how to use build tools like [Gulp].\nThey work much better and will open you a whole new world of useful plugins\nand automatization.\n\nBut, if you can’t move to a build tool, you can use text editor plugins:\n\n* [Sublime Text](https://github.com/sindresorhus/sublime-autoprefixer)\n* [Brackets](https://github.com/mikaeljorhult/brackets-autoprefixer)\n* [Atom Editor](https://github.com/sindresorhus/atom-autoprefixer)\n* [Visual Studio](http://vswebessentials.com/)\n\n[Gulp]: http://gulpjs.com/\n\n## Warnings\n\nAutoprefixer uses the [PostCSS warning API] to warn about really important problems\nin your CSS:\n\n* Old direction syntax in gradients.\n* Old unprefixed `display: box` instead of `display: flex`\n by latest specification version.\n\nYou can get warnings from `result.warnings()`:\n\n```js\nresult.warnings().forEach(function (warn) {\n console.warn(warn.toString());\n});\n```\n\nEvery Autoprefixer runner should display this warnings.\n\n[PostCSS warning API]: https://github.com/postcss/postcss/blob/master/docs/api.md#warning-class\n\n## Disabling\n\nAutoprefixer was designed to have no interface – it just works.\nIf you need some browser specific hack just write a prefixed property\nafter the unprefixed one.\n\n```css\na {\n transform: scale(0.5);\n -moz-transform: scale(0.6);\n}\n```\n\nIf some prefixes were generated in a wrong way,\nplease create an issue on GitHub.\n\nBut if you do not need Autoprefixer in some part of your CSS,\nyou can use control comments to disable Autoprefixer.\n\n```css\na {\n transition: 1s; /* it will be prefixed */\n}\n\nb {\n /* autoprefixer: off */\n transition: 1s; /* it will not be prefixed */\n}\n```\n\nControl comments disable Autoprefixer within the whole rule in which\nyou place it. In the above example, Autoprefixer will be disabled\nin the entire `b` rule scope, not only after the comment.\n\nYou can also use comments recursively:\n\n```css\n/* autoprefixer: off */\n@supports (transition: all) {\n /* autoprefixer: on */\n a {\n /* autoprefixer: off */\n }\n}\n```\n\n## Options\n\nFunction `autoprefixer(options)` returns new PostCSS plugin.\nSee [PostCSS API] for plugin usage documentation.\n\n```js\nvar plugin = autoprefixer({ browsers: ['> 1%', 'IE 7'], cascade: false });\n```\n\nThere are 4 options:\n\n* `browsers` (array): list of browsers, which are supported in your project.\n You can directly specify browser version (like `IE 7`) or use selections\n (like `last 2 version` or `> 5%`). See [Browserslist docs] for available\n queries and default value.\n* `cascade` (boolean): should Autoprefixer use Visual Cascade,\n if CSS is uncompressed. Default: `true`\n* `add` (boolean): should Autoprefixer add prefixes. Default is `true`.\n* `remove` (boolean): should Autoprefixer [remove outdated] prefixes.\n Default is `true`.\n\nPlugin object has `info()` method for debugging purpose.\n\nYou can use PostCSS processor to process several CSS files\nto increase performance.\n\n[PostCSS API]: https://github.com/postcss/postcss/blob/master/docs/api.md\n\n## Debug\n\nYou can check which browsers are selected and which properties will be prefixed:\n\n```js\nvar info = autoprefixer({ browsers: ['last 1 version'] }).info();\nconsole.log(info);\n```\n", "readmeFilename": "README.md", "repository": { "type": "git", "url": "git+https://github.com/postcss/autoprefixer.git" }, "scripts": { "test": "gulp" }, "version": "6.2.3" }