Merge branch 'autoprefixer'. Closes #64

* autoprefixer:
  Added autoprefixer transform to buildProduction transform and binary
  Added autoprefixer transform
  Added test scaffold
  Aded autoprefixer to package.json

bin/buildProduction

@@ -30,6 +30,11 @@ var optimist = require('optimist'),
             type: 'boolean',
             default: false
         })
+        .options('autoprefix', {
+            describe: 'Automatically prefix all css based on the rules supplied. See https://github.com/ai/autoprefixer#browsers',
+            type: 'string',
+            demand: false
+        })
         .options('debug', {
             describe: 'Keep statement level console.*() calls and debugger statements in JavaScript assets',
             type: 'boolean',
@@ -229,6 +234,10 @@ if (commandLineOptions.inlinesize) {
     inlineByRelationType.CssImage = 8192;
 }
 
+if (commandLineOptions.autoprefix && typeof commandLineOptions === 'string') {
+    commandLineOptions.autoprefix = [commandLineOptions.autoprefix];
+}
+
 (commandLineOptions.define ? _.flatten(_.flatten([commandLineOptions.define])) : []).forEach(function (define) {
     var matchDefine = define.match(/^(\w+)(?:=(.*))?$/);
     if (matchDefine) {
@@ -314,6 +323,7 @@ new AssetGraph({root: rootUrl})
         less: !commandLineOptions.noless,
         optimizeImages: commandLineOptions.optimizeimages,
         inlineByRelationType: inlineByRelationType,
+        autoprefix: commandLineOptions.autoprefix,
         gzip: commandLineOptions.gzip,
         defines: defines,
         reservedNames: reservedNames,

lib/transforms/autoprefixer.js

@@ -0,0 +1,27 @@
+/**
+ * autoprefixer transform
+ *
+ * - Runs autoprefixer with the supplied options on each css asset
+ * - Removes all references to prefixfree
+ */
+
+var autoprefix = require('autoprefixer');
+
+module.exports = function (options) {
+    // See https://github.com/ai/autoprefixer#browsers
+    var browsers = options;
+
+    return function autoprefixer(assetGraph) {
+        assetGraph.findAssets({type: 'Css'}).forEach(function (cssAsset) {
+            cssAsset.text = autoprefix(browsers).process(cssAsset.text).css;
+        });
+
+        assetGraph.findRelations({
+            to: {
+                fileName: /prefixfree(\.min)?\.js/
+            }
+        }).forEach(function (relation) {
+            relation.remove();
+        });
+    };
+};

lib/transforms/buildProduction.js

@@ -93,6 +93,9 @@ module.exports = function (options) {
                 return assetGraph;
             })
             .removeNobundleAttribute({type: ['HtmlScript', 'HtmlStyle']})
+            .if(options.autoprefix)
+                .autoprefixer(options.autoprefix)
+            .endif()
             .if(inlineByRelationType.CssImage)
                 .inlineCssImagesWithLegacyFallback({type: 'Html', isInline: false, isFragment: false}, inlineByRelationType.CssImage)
             .endif()

package.json

@@ -33,6 +33,7 @@
   "dependencies": {
     "assetgraph": "=1.6.2",
     "async": "=0.2.9",
+    "autoprefixer": "~1.0.20140117",
     "extend": "=1.2.1",
     "chalk": "=0.4.0",
     "express-processimage": "=0.1.12",

test/autoprefixer-test.js

@@ -0,0 +1,55 @@
+var vows = require('vows'),
+    assert = require('assert'),
+    AssetGraph = require('../lib/AssetGraph');
+
+vows.describe('transforms.autoprefixer').addBatch({
+    'After loading an unprefixed test case': {
+        topic: function () {
+            new AssetGraph({root: __dirname + '/autoprefixer/'})
+                .loadAssets('index.html')
+                .populate()
+                .run(this.callback);
+        },
+        'the graph should contain 2 HtmlStyle relations': function (assetGraph) {
+            assert.equal(assetGraph.findRelations({type: 'HtmlStyle'}).length, 2);
+        },
+        'the graph should contain 1 CssImage relation': function (assetGraph) {
+            assert.equal(assetGraph.findRelations({type: 'CssImage'}).length, 1);
+        },
+        'then running the autoprefixer transform': {
+            topic: function (assetGraph) {
+                assetGraph
+                    .autoprefixer()
+                    .run(this.callback);
+            },
+            'the graph should contain 2 HtmlStyle relations': function (assetGraph) {
+                assert.equal(assetGraph.findRelations({type: 'HtmlStyle'}).length, 2);
+            },
+            'the graph should contain 3 CssImage relation': function (assetGraph) {
+                assert.equal(assetGraph.findRelations({type: 'CssImage'}).length, 3);
+            }
+        }
+    },
+    'After loading an test case using prefixfree.js': {
+        topic: function () {
+            new AssetGraph({root: __dirname + '/autoprefixer/'})
+                .loadAssets('prefixfree.html')
+                .populate()
+                .run(this.callback);
+        },
+        'the graph should contain 2 HtmlScript relations': function (assetGraph) {
+            assert.equal(assetGraph.findRelations({type: 'HtmlScript'}).length, 2);
+        },
+        'then running the autoprefixer transform': {
+            topic: function (assetGraph) {
+                assetGraph
+                    .autoprefixer()
+                    .run(this.callback);
+            },
+            'the graph should contain 0 HtmlScript relations': function (assetGraph) {
+                assert.equal(assetGraph.findRelations({type: 'HtmlScript'}).length, 0);
+            }
+        }
+    }
+
+})['export'](module);

test/autoprefixer/borderimage.css

@@ -0,0 +1,3 @@
+body {
+    border-image: url(borderimage.png) 30 30 repeat;
+}

test/autoprefixer/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Document</title>
+    <link rel="stylesheet" type="text/css" href="userselect.css">
+    <link rel="stylesheet" type="text/css" href="borderimage.css">
+</head>
+<body>
+
+</body>
+</html>

test/autoprefixer/prefixfree.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Document</title>
+
+    <script src="prefixfree.js"></script>
+    <script src="prefixfree.min.js"></script>
+</head>
+<body>
+
+</body>
+</html>