WIP: buildProduction: Add support for --browsers switch.

Used to control autoprefixer and the splitCssIfIeLimitIsReached transform.

Removes support for --autoprefix (autoprefixer is now used if and only if --browsers is specified)

Currently requires autoprefixer to be available. Keeping an eye on segmentio/myth#94

Author: papandreou

bin/buildProduction

@@ -35,8 +35,9 @@ 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',
+        .options('browsers', {
+            alias: 'b',
+            describe: 'Specify which browsers to support. Configures autoprefixer and controls which IE hacks to apply. Syntax: https://github.com/ai/autoprefixer#browsers',
             type: 'string',
             demand: false
         })
@@ -291,6 +292,7 @@ new AssetGraph({root: rootUrl})
     .loadAssets(inputUrls)
     .buildProduction({
         version: commandLineOptions.version,
+        browsers: commandLineOptions.browsers,
         less: !commandLineOptions.noless,
         optimizeImages: commandLineOptions.optimizeimages,
         inlineByRelationType: inlineByRelationType,

lib/transforms/autoprefixer.js

@@ -5,23 +5,26 @@
  */
 
 module.exports = function (options) {
-    // See https://github.com/ai/autoprefixer#browsers
-    var browsers = typeof options === 'string' ? options.split(/,\s*/) : options;
-
     return function autoprefixer(assetGraph) {
-        var autoprefix;
         var cssAssets = assetGraph.findAssets({type: 'Css'});
 
         if (cssAssets.length > 0) {
-            try {
-                autoprefix = require('autoprefixer');
-            } catch (e) {
-                assetGraph.emit('warn', new Error('autoprefixerTransform: Found ' + cssAssets.length + ' css asset(s), but no autoprefixer module is available. Please use npm to install autoprefixer in your project so the autoprefixer transform can require it.'));
-                return;
+            // See https://github.com/ai/autoprefixer#browsers
+            var autoprefixer;
+            if (typeof options === 'function') {
+                autoprefixer = options;
+            } else {
+                var browsers = typeof options === 'string' ? options.split(/,\s*/) : options;
+                try {
+                    autoprefixer = require('autoprefixer')(browsers);
+                } catch (e) {
+                    assetGraph.emit('warn', new Error('autoprefixer transform: Found ' + cssAssets.length + ' css asset(s), but no autoprefixer module is available. Please use npm to install autoprefixer in your project so the autoprefixer transform can require it.'));
+                    return;
+                }
             }
 
             cssAssets.forEach(function (cssAsset) {
-                cssAsset.text = autoprefix(browsers).process(cssAsset.text).css;
+                cssAsset.text = autoprefixer.process(cssAsset.text).css;
             });
         }
     };

lib/transforms/buildProduction.js

@@ -3,6 +3,64 @@ var urlTools = require('urltools');
 module.exports = function (options) {
     options = options || {};
 
+    var autoprefixer,
+        // Default to try to support all browsers
+        browsers = {
+            has: function () { return true; },
+            minimum: function () { return 1; }
+        };
+
+    if (options.browsers) {
+        try {
+            autoprefixer = require('autoprefixer')(Array.isArray(options.browsers) ? options.browsers : String(options.browsers).split(/,\s*/));
+        } catch (e) {
+            throw new Error('The \'browsers\' option requires the autoprefixer module to be available. Please install it in the containing project.');
+        }
+        // Waiting for https://github.com/segmentio/myth/issues/94
+        browsers = autoprefixer.prefixes.browsers;
+        browsers.requirements.olderThan = {
+            regexp: /^(\w+) (<=?)\s*([\d\.]+)/,
+            select: function (browser, sign, version) {
+                version = parseFloat(version);
+                var data = this.byName(browser);
+                return data.versions.filter(function (v) {
+                    return sign === '<' ? v < version : v <= version;
+                }).map(function(v) {
+                    return "" + data.name + " " + v;
+                });
+            }
+        };
+        browsers.has = function (browserOrBrowsers) {
+            try {
+                return browsers.parse(browserOrBrowsers).some(function (browser) {
+                    return browsers.selected.some(function (selectedBrowser) {
+                        return selectedBrowser === browser || selectedBrowser.indexOf(browser + ' ') === 0;
+                    });
+                });
+            } catch (e) {
+                // Parse error, try to match it as a browser name (any version) so that
+                // browsers.has('ie') does the expected.
+                return browsers.selected.some(function (selectedBrowser) {
+                    return selectedBrowser.indexOf(browserOrBrowsers + ' ') === 0;
+                });
+            }
+        };
+        // Find the minimum version of a given browser that is to be supported.
+        // For example: browsers.minimum('ie'); // 10
+        browsers.minimum = function (browser) {
+            var minimumVersion = null;
+            browsers.selected.forEach(function (selectedBrowser) {
+                if (selectedBrowser.indexOf(browser + ' ') === 0) {
+                    var version = parseFloat(selectedBrowser.substr(browser.length + 1));
+                    if (minimumVersion === null || version < minimumVersion) {
+                        minimumVersion = version;
+                    }
+                }
+            });
+            return minimumVersion;
+        };
+    }
+
     var bundleStrategyName = options.sharedBundles ? 'sharedBundles' : 'oneBundlePerIncludingAsset',
         inlineByRelationType = options.inlineByRelationType || {HtmlScript: 4096, HtmlStyle: 4096};
 
@@ -72,11 +130,16 @@ module.exports = function (options) {
             .convertCssImportsToHtmlStyles()
             .removeDuplicateHtmlStyles({type: 'Html', isInitial: true})
             .mergeIdenticalAssets({isLoaded: true, isInline: false, type: ['JavaScript', 'Css']})
-            .if(options.autoprefix)
-                .autoprefixer(options.autoprefix)
+            .if(autoprefixer)
+                .autoprefixer(autoprefixer)
             .endif()
             .bundleRelations({type: 'HtmlStyle', to: {type: 'Css', isLoaded: true}, node: function (node) {return !node.hasAttribute('nobundle');}}, {strategyName: bundleStrategyName})
-            .splitCssIfIeLimitIsReached()
+            .if(browsers.has('ie'))
+                .splitCssIfIeLimitIsReached({type: 'Css'}, {
+                    // http://blogs.msdn.com/b/ieinternals/archive/2011/05/14/internet-explorer-stylesheet-rule-selector-import-sheet-limit-maximum.aspx
+                    rulesPerStylesheetLimit: browsers.has('ie < 10') ? 4095 : 65534
+                })
+            .endif()
             .replaceRequireJsWithAlmond()
             .bundleRelations({type: 'HtmlScript', to: {type: 'JavaScript', isLoaded: true}, node: function (node) {return !node.hasAttribute('nobundle');}}, {strategyName: bundleStrategyName})
             .mergeIdenticalAssets({isLoaded: true, isInline: false, type: ['JavaScript', 'Css']}) // The bundling might produce several identical files, especially the 'oneBundlePerIncludingAsset' strategy.
@@ -106,7 +169,14 @@ module.exports = function (options) {
             })
             .removeNobundleAttribute({type: ['HtmlScript', 'HtmlStyle']})
             .if(inlineByRelationType.CssImage && !options.noInlineCssImagesWithLegacyFallback)
-                .inlineCssImagesWithLegacyFallback({type: 'Html', isInline: false, isFragment: false}, inlineByRelationType.CssImage)
+                .inlineCssImagesWithLegacyFallback({
+                    type: 'Html',
+                    isInline: false,
+                    isFragment: false
+                }, {
+                    sizeThreshold: inlineByRelationType.CssImage,
+                    minimumIeVersion: browsers.minimum('ie')
+                })
             .endif()
             .minifyAssets({isLoaded: true})
             .if(options.addInitialHtmlExtension)

test/buildProduction.js

@@ -820,7 +820,7 @@ describe('buildProduction', function () {
         new AssetGraph({root: __dirname + '/../testdata/buildProduction/issue107/'})
             .registerRequireJsConfig({preventPopulationOfJavaScriptAssetsUntilConfigHasBeenFound: true})
             .loadAssets('falcon.html')
-            .buildProduction({version: false})
+            .buildProduction({version: false, browsers: 'ie >= 8'})
             .queue(function (assetGraph) {
                 expect(assetGraph, 'to contain relations', {type: 'HtmlStyle'}, 3);
                 expect(assetGraph, 'to contain assets', {type: 'Css'}, 3);
@@ -843,6 +843,18 @@ describe('buildProduction', function () {
             .run(done);
     });
 
+    it('should leave the big stylesheet alone if IE < 10 does not need to be supported', function (done) {
+        new AssetGraph({root: __dirname + '/../testdata/buildProduction/issue107/'})
+            .registerRequireJsConfig({preventPopulationOfJavaScriptAssetsUntilConfigHasBeenFound: true})
+            .loadAssets('falcon.html')
+            .buildProduction({version: false, browsers: 'ie >= 10'})
+            .queue(function (assetGraph) {
+                expect(assetGraph, 'to contain relations', {type: 'HtmlStyle'}, 1);
+                expect(assetGraph, 'to contain assets', {type: 'Css'}, 1);
+            })
+            .run(done);
+    });
+
     it('should handle a test case where an initial asset has no <html> element and no incoming relations (#109)', function (done) {
         new AssetGraph({root: __dirname + '/../testdata/buildProduction/initialAssetWithoutHtmlElement/'})
             .registerRequireJsConfig({preventPopulationOfJavaScriptAssetsUntilConfigHasBeenFound: true})