|
| 1 | +# auto-prefixer |
| 2 | + |
| 3 | +<a href="https://github.com/postcss/postcss">PostCSS</a> plugin to parse CSS and add vendor prefixes to CSS rules using values from <a href="http://caniuse.com">Can I Use</a>. It is recommended by Google and used in Twitter, and Taobao. |
| 4 | + |
| 5 | +Make sure you already setup the [assets module](https://github.com/jooby-project/jooby/tree/master/jooby-assets) in your project! |
| 6 | + |
| 7 | +## dependency |
| 8 | + |
| 9 | +```xml |
| 10 | +<dependency> |
| 11 | + <groupId>org.jooby</groupId> |
| 12 | + <artifactId>jooby-assets-auto-prefixer</artifactId> |
| 13 | + <version>1.0.0</version> |
| 14 | + <scope>provided</scope> |
| 15 | +</dependency> |
| 16 | +``` |
| 17 | + |
| 18 | +## usage |
| 19 | + |
| 20 | +``` |
| 21 | +assets { |
| 22 | + pipeline { |
| 23 | + dev: [auto-prefixer] |
| 24 | + dist: [auto-prefixer] |
| 25 | + } |
| 26 | +} |
| 27 | +``` |
| 28 | + |
| 29 | +Once configured, write your CSS rules without vendor prefixes (in fact, forget about them entirely): |
| 30 | + |
| 31 | +```css |
| 32 | +:fullscreen a { |
| 33 | + display: flex |
| 34 | + |
| 35 | +} |
| 36 | +``` |
| 37 | + |
| 38 | +Output: |
| 39 | + |
| 40 | +```css |
| 41 | +:-webkit-full-screen a { |
| 42 | + display: -webkit-box; |
| 43 | + display: flex |
| 44 | +} |
| 45 | +:-moz-full-screen a { |
| 46 | + display: flex |
| 47 | +} |
| 48 | +:-ms-fullscreen a { |
| 49 | + display: -ms-flexbox; |
| 50 | + display: flex |
| 51 | +} |
| 52 | +:fullscreen a { |
| 53 | + display: -webkit-box; |
| 54 | + display: -ms-flexbox; |
| 55 | + display: flex |
| 56 | +} |
| 57 | +``` |
| 58 | + |
| 59 | +## options |
| 60 | + |
| 61 | +``` |
| 62 | +{ |
| 63 | + auto-prefixer { |
| 64 | +
|
| 65 | + browsers: ["> 1%", "IE 7"] |
| 66 | + cascade: true |
| 67 | + add: true |
| 68 | + remove: true |
| 69 | + supports: true |
| 70 | + flexbox: true |
| 71 | + grid: true |
| 72 | + stats: {} |
| 73 | + } |
| 74 | +
|
| 75 | +} |
| 76 | +``` |
| 77 | + |
| 78 | +For complete documentation about available options, please refer to the <a href="https://github.com/postcss/autoprefixer">autoprefixer</a> site. |
| 79 | + |
| 80 | +# see also |
| 81 | + |
| 82 | +## css processors |
| 83 | + |
| 84 | +* [autoprefixer](https://github.com/jooby-project/jooby/tree/master/jooby-assets-autoprefixer): parse CSS and add vendor prefixes to CSS rules via [autoprefixer](https://github.com/postcss/autoprefixer). |
| 85 | + |
| 86 | +* [props](https://github.com/jooby-project/jooby/tree/master/jooby-assets-props): replace application properties in CSS files. |
| 87 | + |
| 88 | +* [clean-css](https://github.com/jooby-project/jooby/tree/master/jooby-assets-clean-css): minify css. |
| 89 | + |
| 90 | +* [csslint](https://github.com/jooby-project/jooby/tree/master/jooby-assets-csslint): check and validate css rules. |
| 91 | + |
| 92 | +* [less4j](https://github.com/jooby-project/jooby/tree/master/jooby-assets-less4j): Less support from [less4j](https://github.com/SomMeri/less4j). |
| 93 | + |
| 94 | +* [less](https://github.com/jooby-project/jooby/tree/master/jooby-assets-less): Less support from [less.js](http://lesscss.org). |
| 95 | + |
| 96 | +* [sass](https://github.com/jooby-project/jooby/tree/master/jooby-assets-sass): Sass support from <a href="https://github.com/bit3/jsass">Java Sass Compiler (libsass)</a>. |
| 97 | + |
| 98 | +* [svg-sprites](https://github.com/jooby-project/jooby/tree/master/jooby-assets-svg-sprites): Generates SVG and CSS sprites with PNG fallbacks via [dr-svg-sprites](https://github.com/drdk/dr-svg-sprites). |
| 99 | + |
| 100 | +* [svg-symbol](https://github.com/jooby-project/jooby/tree/master/jooby-assets-svg-symbol): Generates SVG and CSS sprites using svg `symbols`. |
| 101 | + |
| 102 | +* [yui-css](https://github.com/jooby-project/jooby/tree/master/jooby-assets-yui-compressor): YUI CSS optimizer. |
| 103 | + |
| 104 | +## js processors |
| 105 | + |
| 106 | +* [props](https://github.com/jooby-project/jooby/tree/master/jooby-assets-props): replace application properties in JavaScript files. |
| 107 | + |
| 108 | +* [jscs](https://github.com/jooby-project/jooby/tree/master/jooby-assets-jscs): JavaScript code style checker. |
| 109 | + |
| 110 | +* [jshint](https://github.com/jooby-project/jooby/tree/master/jooby-assets-jshint): JavaScript linter, helps to detect errors and potential problems in code.. |
| 111 | + |
| 112 | +* [babel](https://github.com/jooby-project/jooby/tree/master/jooby-assets-babel): Ecma6 now via <a href="http://babeljs.io/">Babel</a>. |
| 113 | + |
| 114 | +* [rollup](https://github.com/jooby-project/jooby/tree/master/jooby-assets-rollup): <a href="http://rollupjs.org/">rollup.js</a> the next-generation ES6 module bundler. |
| 115 | + |
| 116 | +* [ng-annotate](https://github.com/jooby-project/jooby/tree/master/jooby-assets-ng-annotate): Add, remove and rebuild AngularJS dependency injection annotations. |
| 117 | + |
| 118 | +* [closure-compiler](https://github.com/jooby-project/jooby/tree/master/jooby-assets-closure-compiler): Google JavaScript optimizer and minifier. |
| 119 | + |
| 120 | +* [uglify](https://github.com/jooby-project/jooby/tree/master/jooby-assets-uglify): uglify.js optimizer. |
| 121 | + |
| 122 | +* [requirejs](https://github.com/jooby-project/jooby/tree/master/jooby-assets-requirejs): r.js optimizer. |
| 123 | + |
| 124 | +* [yui-js](https://github.com/jooby-project/jooby/tree/master/jooby-assets-yui-compressor#yui-js): YUI JS optimizer. |
0 commit comments