browserslist 4.3.7 → 4.4.0

package/CHANGELOG.md

@@ -1,6 +1,9 @@
 # Change Log
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## 4.4
+* Added `and` and `or` keywords to combine queries (by Jon Ege Ronnenberg).
+
 ## 4.3.7
 * Fix fraction years support in `last 1.5 years` (by Clément P).
 * Fix version-less browser support.

package/README.md

@@ -41,11 +41,11 @@ not dead
 
 Developers set versions list in queries like `last 2 version`
 to be free from updating versions manually.
-Browserslist will use [Can I Use] data for this queries.
+Browserslist will use [Can I Use] data for this queries.
 
 Browserslist will take queries from tool option,
 `browserslist` config, `.browserslistrc` config,
-`browserslist` section in `package.json` or environment variables.
+`browserslist` section in `package.json` or environment variables.
 
 You can test Browserslist queries in [online demo].
 
@@ -102,14 +102,38 @@ from one of this sources:
    `> 0.5%, last 2 versions, Firefox ESR, not dead`.
 
 
+### Query Composition
+
+An `or` combiner can use the keyword `or` as well as `,`.
+`last 1 version or > 1%` is equal to `last 1 version, > 1%`.
+
+`and` query combinations are also supported to perform an
+intersection of the previous query: `last 1 version and > 1%`.
+
+There is 3 different ways to combine queries as depicted below. First you start
+with a single query and then we combine the queries to get our final list.
+
+Obviously you can *not* start with a `not` combiner, since the is no left-hand
+side query to combine it with.
+
+| Query combiner type | Illustration | Example |
+| ------------------- | :----------: | ------- |
+|`or`/ `,` combiner <br> (union) | ![Union of queries](img/union.svg)  | `'> .5% or last 2 versions'` <br> `'> .5%, last 2 versions'` |
+| `and` combiner <br> (intersection) | ![intersection of queries](img/intersection.svg) | `'> .5% and last 2 versions'` |
+| `not` combiner <br> (relative complement) | ![Relative complement of queries](img/complement.svg) | `'> .5% and not last 2 versions'` <br> `'> .5% or not last 2 versions'` <br> `'> .5%, not last 2 versions'` |
+
+_A quick way to test your query is to do `npx browserslist '> 0.5%, not IE 11'`
+in your terminal._
+
+
 ### Best Practices
 
 * Select browsers directly (`last 2 Chrome versions`) only if you are making
-  a web app for a kiosk with one browser. There are a lot of browsers
+  a web app for a kiosk with one browser. There are a lot of browsers
   on the market. If you are making general web app you should respect
   browsers diversity.
 * If you want to change the default set of browsers we recommend to combine
-  `last 1 version`, `not dead` with `> 0.2%` (or `> 1% in US`,
+  `last 1 version`, `not dead` with `> 0.2%` (or `> 1% in US`,
   `> 1% in my stats`). `last n versions` adds too many dead browsers
   and does not add popular old versions. Choosing a percentage above `0.2%`
   will in the long run make popular browsers even more popular. We might run
@@ -194,9 +218,6 @@ samsung 5
 Browserslist works with separated versions of browsers.
 You should avoid queries like `Firefox > 0`.
 
-Multiple criteria are combined as a boolean `OR`. A browser version must match
-at least one of the criteria to be selected.
-
 All queries are based on the [Can I Use] support table,
 e.g. `last 3 iOS versions` might select `8.4, 9.2, 9.3` (mixed major and minor),
 whereas `last 3 Chrome versions` might select `50, 49, 48` (major only).

package/index.js

@@ -10,6 +10,12 @@ var env = require('./node') // Will load browser.js in webpack
 var FLOAT_RANGE = /^\d+(\.\d+)?(-\d+(\.\d+)?)*$/
 var YEAR = 365.259641 * 24 * 60 * 60 * 1000
 
+// Enum values MUST be powers of 2, so combination are safe
+/** @constant {number} */
+var QUERY_OR = 1
+/** @constant {number} */
+var QUERY_AND = 2
+
 function isVersionsMatch (versionA, versionB) {
   return (versionA + '.').indexOf(versionB + '.') === 0
 }
@@ -134,10 +140,23 @@ function unknownQuery (query) {
   )
 }
 
+/**
+ * Resolves queries into a browser list.
+ * @param {string|string[]} queries Queries to combine.
+ * Either an array of queries or a long string of queries.
+ * @param {object} [context] Optional arguments to
+ * the select function in `queries`.
+ * @returns {string[]} A list of browsers
+ */
 function resolve (queries, context) {
-  return queries.reduce(function (result, selection, index) {
-    selection = selection.trim()
-    if (selection === '') return result
+  if (Array.isArray(queries)) {
+    queries = flatten(queries.map(parse))
+  } else {
+    queries = parse(queries)
+  }
+
+  return queries.reduce(function (result, query, index) {
+    var selection = query.queryString
 
     var isExclude = selection.indexOf('not ') === 0
     if (isExclude) {
@@ -162,19 +181,36 @@ function resolve (queries, context) {
             return j
           }
         })
-        if (isExclude) {
-          var filter = { }
-          var browsers = { }
-          array.forEach(function (j) {
-            filter[j] = true
-            var browser = j.replace(/\s\S+$/, '')
-            browsers[browser] = true
-          })
-          return result.filter(function (j) {
-            return !filter[j]
-          })
+
+        switch (query.type) {
+          case QUERY_AND:
+            if (isExclude) {
+              return result.filter(function (j) {
+                // remove result items that are in array
+                // (the relative complement of array in result)
+                return array.indexOf(j) === -1
+              })
+            } else {
+              return result.filter(function (j) {
+                // remove result items not in array
+                // (intersect of result and array)
+                return array.indexOf(j) !== -1
+              })
+            }
+          case QUERY_OR:
+          default:
+            if (isExclude) {
+              var filter = { }
+              array.forEach(function (j) {
+                filter[j] = true
+              })
+              return result.filter(function (j) {
+                return !filter[j]
+              })
+            }
+            // union of result and array
+            return result.concat(array)
         }
-        return result.concat(array)
       }
     }
 
@@ -199,7 +235,7 @@ function resolve (queries, context) {
  *                                                     version in direct query.
  * @param {boolean} [opts.dangerousExtend] Disable security checks
  *                                         for extend query.
- * @return {string[]} Array with browser names in Can I Use.
+ * @returns {string[]} Array with browser names in Can I Use.
  *
  * @example
  * browserslist('IE >= 10, IE 8') //=> ['ie 11', 'ie 10', 'ie 8']
@@ -220,13 +256,9 @@ function browserslist (queries, opts) {
     }
   }
 
-  if (typeof queries === 'string') {
-    queries = queries.split(/,\s*/)
-  }
-
-  if (!Array.isArray(queries)) {
+  if (!(typeof queries === 'string' || Array.isArray(queries))) {
     throw new BrowserslistError(
-      'Browser queries must be an array. Got ' + typeof queries + '.')
+      'Browser queries must be an array or string. Got ' + typeof queries + '.')
   }
 
   var context = {
@@ -260,6 +292,74 @@ function browserslist (queries, opts) {
   return uniq(result)
 }
 
+/**
+ * @typedef {object} BrowserslistQuery
+ * @property {number} type A type constant like QUERY_OR @see QUERY_OR.
+ * @property {string} queryString A query like "not ie < 11".
+ */
+
+/**
+ * Parse a browserslist string query
+ * @param {string} queries One or more queries as a string
+ * @returns {BrowserslistQuery[]} An array of BrowserslistQuery
+ */
+function parse (queries) {
+  var qs = []
+
+  do {
+    queries = doMatch(queries, qs)
+  } while (queries)
+
+  return qs
+}
+
+/**
+ * Find query matches in a string. This function is meant to be called
+ * repeatedly with the returned query string until there is no more matches.
+ * @param {string} string A string with one or more queries.
+ * @param {BrowserslistQuery[]} qs Out parameter,
+ * will be filled with `BrowserslistQuery`.
+ * @returns {string} The rest of the query string minus the matched part.
+ */
+function doMatch (string, qs) {
+  var or = /^(?:,\s*|\s+OR\s+)(.*)/i
+  var and = /^\s+AND\s+(.*)/i
+
+  return find(
+    string,
+    function (parsed, n, max) {
+      if (and.test(parsed)) {
+        qs.unshift({ type: QUERY_AND, queryString: parsed.match(and)[1] })
+        return true
+      } else if (or.test(parsed)) {
+        qs.unshift({ type: QUERY_OR, queryString: parsed.match(or)[1] })
+        return true
+      } else if (n === max) {
+        qs.unshift({ type: QUERY_OR, queryString: parsed.trim() })
+        return true
+      }
+      return false
+    }
+  )
+}
+
+function find (string, predicate) {
+  for (var n = 1, max = string.length; n <= max; n++) {
+    var parsed = string.substr(-n, n)
+    if (predicate(parsed, n, max)) {
+      return string.replace(parsed, '')
+    }
+  }
+  return ''
+}
+
+function flatten (array) {
+  if (!Array.isArray(array)) return [array]
+  return array.reduce(function (a, b) {
+    return a.concat(flatten(b))
+  }, [])
+}
+
 // Will be filled by Can I Use data below
 browserslist.data = { }
 browserslist.usage = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "browserslist",
-  "version": "4.3.7",
+  "version": "4.4.0",
   "description": "Share target browsers between different front-end tools, like Autoprefixer, Stylelint and babel-env-preset",
   "keywords": [
     "caniuse",
@@ -11,8 +11,8 @@
   "license": "MIT",
   "repository": "browserslist/browserslist",
   "dependencies": {
-    "caniuse-lite": "^1.0.30000925",
-    "electron-to-chromium": "^1.3.96",
+    "caniuse-lite": "^1.0.30000928",
+    "electron-to-chromium": "^1.3.100",
     "node-releases": "^1.1.3"
   },
   "bin": "./cli.js",