Add browsers option

Close #32

Author: MoOx

CHANGELOG.md

@@ -28,6 +28,7 @@ cssnext({
 
 - Added: `url` option: non absolute url() are now rebased according to `from` (and `to` options if provided). Enabled by default.
 - Added: `compress` option now accept CSSWring options directly.
+- Added: `browsers` option can enable or disable features and is propagated to autoprefixer
 
 # 0.6.6 - 2014-12-22
 

README.md

@@ -191,8 +191,22 @@ fs.writeFileSync("dist/index.css", output)
 
 #### Node.js options
 
+##### `browsers` (default: [browserslist default](https://github.com/ai/browserslist#readme) - `> 1%, last 2 versions, Firefox ESR, Opera 12.1`)
+
+Allow you to specify your browser scope.
+**This option enable or disable `features` according to [caniuse](http://caniuse.com/) database.**
+This is the exact same option that you might know in Autoprefixer.
+Since cssnext includes Autoprefixer, the option is propagated.
+
+See [Browserslist](https://github.com/ai/browserslist#queries) queries syntax to adjust this option to your need.
+
+_Note: if you don't specify this option, Browserslist will automatically try to find `browserslist`
+config file or use its default value._
+
 ##### `features` (default: all features)
 
+**You should probably use `browsers` option instead of this one.**
+
 Object containing key of features to enable/disable.  
 _Features are enabled by default: no key means feature is enabled_.
 
@@ -293,26 +307,6 @@ var output = cssnext(
 fs.writeFileSync("dist/index.css", output)
 ```
 
-##### Some feature options
-
-###### `features.autoprefixer.browsers` (default: _autoprefixer default_)
-
-Array to specify browsers you want to target (for now only used by [autoprefixer](https://github.com/postcss/autoprefixer)).  
-See [autoprefixer documentation of this option for more details](https://github.com/postcss/autoprefixer#browsers).
-
-Defaults to something like `["> 1%", "last 2 versions", "Firefox ESR"]`.
-
-```js
-//eg
-var output = cssnext(input, {
-  features: {
-    autoprefixer: {
-      browsers: ["> 1%", "last 2 versions", "Firefox ESR"]
-    }
-  }
-})
-```
-
 ### Usage with other tools
 
 Here are some tools that will help you use cssnext in your current workflow

index.js

@@ -3,6 +3,28 @@
  */
 var Postcss = require("postcss")
 var assign = require("object-assign")
+var caniuse = require("caniuse-api")
+
+// Some features might affect others (eg: var() in a calc()
+// in order to prevent issue, the map contains a sort of dependencies list
+//
+// null == always enable (& no caniuse data)
+var caniuseFeaturesMap = {
+  customProperties: ["css-variables"],
+  // calc: null, // calc() transformation only make sense with transformed custom properties, don't you think ?
+  // @todo open PR on caniuse repo https://github.com/Fyrd/caniuse
+  // customMedia: [null],
+  // mediaQueriesRange: [null],
+  // customSelectors: [null],
+  // colorRebeccapurple: [null], // @todo can be done easily
+  // colorHwb: [null],
+  // colorGray: [null],
+  // colorHexAlpha: [null],
+  // colorFunction:[null],
+  // fontVariant: [null],
+  // filter: [null], // @todo can be done using a callback, this is only used for Firefox < 35
+  // autoprefixer: [null] // will always be null since autoprefixer does the same game as we do
+}
 
 var features = {
   // Reminder: order is important
@@ -51,11 +73,21 @@ function cssnext(string, options) {
 
   var features = options.features || {}
 
+  // options.browsers is deliberately undefined by defaut to inherit browserslist default behavior
+
   // default sourcemap
   // if `map` option is passed, `sourcemap` option is ignored
   // if `sourcemap` option is passed, a inline map is used
   options.map = options.map || (options.sourcemap ? true : null)
 
+  // propagate browsers option to autoprefixer
+  if (features.autoprefixer !== false) {
+    features.autoprefixer = features.autoprefixer || {}
+    features.autoprefixer.browsers = features.autoprefixer.browsers || options.browsers
+    // autoprefixer doesn't like an "undefined" value. Related to coffee ?
+    if (features.autoprefixer.browsers === undefined) {delete features.autoprefixer.browsers}
+  }
+
   var postcss = Postcss()
 
   // only enable import & url if fs module is available
@@ -74,8 +106,15 @@ function cssnext(string, options) {
 
   // features
   Object.keys(cssnext.features).forEach(function(key) {
-    // if undefined, we default to assuming this feature is wanted by the user
-    if (features[key] !== false) {
+    // feature is enabled if: not force disable && (force enabled || no data yet || !supported yet)
+    if (
+      features[key] !== false && // feature is force disabled
+      (
+        features[key] === true || // feature is forced enabled
+        caniuseFeaturesMap[key] === undefined || // feature don't have any browsers data (yet)
+        (caniuseFeaturesMap[key] && caniuseFeaturesMap[key][0] && !caniuse.isSupported(caniuseFeaturesMap[key][0], options.browsers)) // feature is not yet supported by the browsers scope
+      )
+    ) {
       postcss.use(cssnext.features[key](typeof features[key] === "object" ? features[key] : undefined))
     }
   })

package.json

@@ -28,6 +28,7 @@
   ],
   "dependencies": {
     "autoprefixer-core": "^5.0.0",
+    "caniuse-api": "^1.2.1",
     "colors": "^1.0.2",
     "commander": "^2.3.0",
     "csswring": "^3.0.0",

test/options.browsers.js

@@ -0,0 +1,47 @@
+var test = require("tape")
+
+var cssnext = require("..")
+
+test("cssnext browsers option", function(t) {
+  var input = ":root{--foo:bar}baz{qux:var(--foo)}"
+  var output = "baz{qux: bar}"
+
+  t.equal(
+    cssnext(input, {browsers: "Firefox >= 30"}), // fx 30 doesn't handle custom prop
+    output,
+    "should enable custom properties when browsers do not support it"
+  )
+
+  t.equal(
+    cssnext(input, {browsers: "Firefox >= 31"}), // fx 31 handle custom prop
+    input,
+    "should NOT enable custom properties when browsers support it"
+  )
+
+  t.equal(
+    cssnext(input, {browsers: "Firefox >= 31, IE 8"}), // fx 31 support but not IE 8
+    output,
+    "should enable custom properties when at least one browsers do not support it"
+  )
+
+  t.end()
+})
+
+test("cssnext browsers option propagation", function(t) {
+  var input = "body{transition: 1s}"
+  var output = "body{-webkit-transition: 1s;transition: 1s}"
+
+  t.equal(
+    cssnext(input, {browsers: "Safari 6"}), // Safari 6 need -webkit prefix
+    output,
+    "should propagate browsers option to autoprefixer"
+  )
+
+  t.equal(
+    cssnext(input, {browsers: "Safari 6.1"}), // Safari 6.1 do not need -webkit prefix
+    input,
+    "should propagate browsers option to autoprefixer"
+  )
+
+  t.end()
+})