auto-prefixer

auto-prefixer

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.

Make sure you already setup the assets module in your project!

dependency

<dependency>
 <groupId>org.jooby</groupId>
 <artifactId>jooby-assets-auto-prefixer</artifactId>
 <version>1.0.3</version>
 <scope>provided</scope>
</dependency>

usage

assets {
  pipeline {
    dev: [auto-prefixer]
    dist: [auto-prefixer]
  }
}

Once configured, write your CSS rules without vendor prefixes (in fact, forget about them entirely):

:fullscreen a {
  display: flex

}

Output:

:-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
}

options

{ auto-prefixer { browsers: ["> 1%", "IE 7"] cascade: true add: true remove: true supports: true flexbox: true grid: true stats: {} } } 

For complete documentation about available options, please refer to the autoprefixer site.

see also

css processors

js processors

  • props: replace application properties in JavaScript files.

  • jscs: JavaScript code style checker.

  • jshint: JavaScript linter, helps to detect errors and potential problems in code..

  • babel: Ecma6 now via Babel.

  • rollup: rollup.js the next-generation ES6 module bundler.

  • ng-annotate: Add, remove and rebuild AngularJS dependency injection annotations.

  • closure-compiler: Google JavaScript optimizer and minifier.

  • uglify: uglify.js optimizer.

  • requirejs: r.js optimizer.

  • yui-js: YUI JS optimizer.

Share