add options of autoprefix

Change-Id: I4055d92638f49f15bcb88aceaddfd8cf6e3e2f8e
dlutwuwei · Jul 27, 2016 · e1da4c7 · e1da4c7
1 parent 7943b3a
commit e1da4c7
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 15 deletions.
diff --git a/README.md b/README.md
@@ -1,21 +1,28 @@
 # gulp-inline-autoprefixer
 
-![gulp-inline-autoprefixer](../master/gulp-inline-autoprefixer.png?raw=true)
-
 [Gulp](http://gulpjs.com/) plugin to Autoprefix all CSS inside an html page - CSS inside style tags and inside style attributes. Uses [inline-autoprefixer](http://github.com/rebelmail/inline-autoprefixer) under the hood.
 
 [![NPM version](https://badge.fury.io/js/gulp-inline-autoprefixer.png)](http://badge.fury.io/js/gulp-inline-autoprefixer)
 
 ```javascript
 var gulp = require( "gulp" );
-var htmlAutoprefixer = require( "gulp-inline-autoprefixer" );
+var htmlInlineAutoprefixer = require( "gulp-inline-autoprefixer" );
 
 gulp.task( "html-autoprefix", function( ) {
   return gulp.src( "./path/to/index-or-other.html" )
-    .pipe( htmlAutoprefixer( ) )
+    .pipe( htmlInlineAutoprefixer({'browsers':['ios 7', 'Android 4.3']},{},{}) )
     .pipe( gulp.dest( "dist" ) );
 } );
 ```
+## options
+
+1. autoprefixerOpts
+  options for [autoprefix](https://www.npmjs.com/package/autoprefixer)
+2. cheerioOpts
+  options for cheerio
+3. postcssOpts
+  options for postcss
+
 
 ## Installation
 

diff --git a/lib/main.js b/lib/main.js
@@ -1,17 +1,44 @@
 "use strict";
 
-var
-htmlAutoprefixer = require( "html-autoprefixer" ),
-es = require( "event-stream" );
+var es = require( "event-stream" );
+var autoprefixer = require('autoprefixer');
+var postcss = require('postcss');
+var cheerio = require('cheerio');
 
-module.exports = function( ) {
+var VERSION = require('../package.json').version;
+
+var HTMLPostCSS = function(plugins) {
+  this.version = VERSION;
+  this.plugins = plugins || [];
+  this.processor = postcss(this.plugins);
+  return this;
+};
+
+HTMLPostCSS.prototype.process = function(htmlString, cheerioOpts, postcssOpts) {
+  var $ = cheerio.load(htmlString, cheerioOpts);
+  var processor = this.processor;
+
+  $('style').contents().each(function(index, style) {
+    var prefixed = processor.process(style.data, postcssOpts).css;
+    style.data = prefixed;
+  });
+
+  $('[style]').each(function(index, element) {
+    var prefixed = processor.process(element.attribs.style, postcssOpts).css;
+    element.attribs.style = prefixed;
+  });
+
+  return $.html();
+};
+
+
+module.exports = function(autoprefixerOpts, cheerioOpts, postcssOpts) {
   return es.map( function( file, done ) {
     var htmlString = file.contents.toString( );
+    var res = new HTMLPostCSS([autoprefixer(autoprefixerOpts)]).process(htmlString, cheerioOpts, postcssOpts );
+    file.contents = new Buffer(res);
 
-    var res = htmlAutoprefixer.process( htmlString );
-    file.contents = new Buffer( res.html );
-
-    next( );
+    next();
 
     function next( err ) {
       done(err, file);

diff --git a/package.json b/package.json
@@ -4,8 +4,10 @@
     "url": "https://github.com/rebelmail/gulp-html-autoprefixer/issues"
   },
   "dependencies": {
-    "event-stream": "^3.1.7",
-    "html-autoprefixer": "^0.3.8"
+    "autoprefixer": "^6.3.7",
+    "cheerio": "^0.20.0",
+    "event-stream": "^3.3.4",
+    "postcss": "^5.1.1"
   },
   "description": "Gulp plugin to Autoprefix all CSS inside an html page - CSS inside style tags and inside style attributes. Uses html-autoprefixer under the hood.",
   "directories": {
@@ -38,5 +40,5 @@
   "scripts": {
     "test": "mocha test/*.js"
   },
-  "version": "0.0.2"
+  "version": "0.1.2"
 }