Simplify browser ranges

Fixes #184

Author: edg2s

README.md

@@ -23,15 +23,15 @@ cat main.css | doiuse --browsers "ie >= 9, > 1%, last 2 versions"
 
 **Sample output:**
 ```
-/projects/website/main.css:5:3: CSS3 Box-sizing not supported by: IE (8,9,10,11), Chrome (36,37,38), Safari (8,7.1), Opera (24,25), iOS Safari (8,7.1,8.1), Android Browser (4.1,4.4,4.4.4), IE Mobile (10,11)
-/projects/website/main.css:6:3: CSS3 Box-sizing not supported by: IE (8,9,10,11), Chrome (36,37,38), Safari (8,7.1), Opera (24,25), iOS Safari (8,7.1,8.1), Android Browser (4.1,4.4,4.4.4), IE Mobile (10,11)
-/projects/website/main.css:8:3: CSS user-select: none not supported by: IE (8,9)
-/projects/website/main.css:9:3: CSS user-select: none not supported by: IE (8,9)
-/projects/website/main.css:10:3: CSS user-select: none not supported by: IE (8,9)
-/projects/website/main.css:11:3: CSS user-select: none not supported by: IE (8,9)
-/projects/website/main.css:12:3: CSS user-select: none not supported by: IE (8,9)
-/projects/website/main.css:13:3: Pointer events not supported by: IE (8,9,10), Firefox (32,33), Chrome (36,37,38), Safari (8,7.1), Opera (24,25), iOS Safari (8,7.1,8.1), Android Browser (4.1,4.4,4.4.4), IE Mobile (10)
-/projects/website/main.css:14:3: Pointer events not supported by: IE (8,9,10), Firefox (32,33), Chrome (36,37,38), Safari (8,7.1), Opera (24,25), iOS Safari (8,7.1,8.1), Android Browser (4.1,4.4,4.4.4), IE Mobile (10)
+/projects/website/main.css:5:3: CSS3 Box-sizing not supported by: IE (8-11), Chrome (36-38), Safari (8,7.1), Opera (24-25), iOS Safari (8,7.1,8.1), Android Browser (4.1,4.4,4.4.4), IE Mobile (10-11)
+/projects/website/main.css:6:3: CSS3 Box-sizing not supported by: IE (8-11), Chrome (36-38), Safari (8,7.1), Opera (24-25), iOS Safari (8,7.1,8.1), Android Browser (4.1,4.4,4.4.4), IE Mobile (10-11)
+/projects/website/main.css:8:3: CSS user-select: none not supported by: IE (8-9)
+/projects/website/main.css:9:3: CSS user-select: none not supported by: IE (8-9)
+/projects/website/main.css:10:3: CSS user-select: none not supported by: IE (8-9)
+/projects/website/main.css:11:3: CSS user-select: none not supported by: IE (8-9)
+/projects/website/main.css:12:3: CSS user-select: none not supported by: IE (8-9)
+/projects/website/main.css:13:3: Pointer events not supported by: IE (8-10), Firefox (32-33), Chrome (36-38), Safari (8,7.1), Opera (24-25), iOS Safari (8,7.1,8.1), Android Browser (4.1,4.4,4.4.4), IE Mobile (10)
+/projects/website/main.css:14:3: Pointer events not supported by: IE (8-10), Firefox (32-33), Chrome (36-38), Safari (8,7.1), Opera (24-25), iOS Safari (8,7.1,8.1), Android Browser (4.1,4.4,4.4.4), IE Mobile (10)
 /projects/website/main.css:32:3: CSS3 Transforms not supported by: IE (8)
 ```
 

test/cli.js

@@ -11,13 +11,13 @@ const pathToCli = ` node ${joinPath(selfPath, '../bin/cli.js')}`;
 const catCss = ` cat ${cssFile} `;
 
 const expectedCssGradients = [
-  '<streaming css input>:8:1: CSS Gradients not supported by: IE (8,9) (css-gradients)\n',
-  '<streaming css input>:12:1: CSS Gradients not supported by: IE (8,9) (css-gradients)\n',
+  '<streaming css input>:8:1: CSS Gradients not supported by: IE (8-9) (css-gradients)\n',
+  '<streaming css input>:12:1: CSS Gradients not supported by: IE (8-9) (css-gradients)\n',
 ];
 
 const expectedCssRepeatingGradients = [
-  '<streaming css input>:16:1: CSS Repeating Gradients not supported by: IE (8,9) (css-repeating-gradients)\n',
-  '<streaming css input>:20:1: CSS Repeating Gradients not supported by: IE (8,9) (css-repeating-gradients)\n',
+  '<streaming css input>:16:1: CSS Repeating Gradients not supported by: IE (8-9) (css-repeating-gradients)\n',
+  '<streaming css input>:20:1: CSS Repeating Gradients not supported by: IE (8-9) (css-repeating-gradients)\n',
 ];
 const expected = [
   ...expectedCssGradients,

test/util.js

@@ -0,0 +1,33 @@
+import { test } from 'tap';
+import { formatBrowserName } from '../utils/util.js';
+
+test('works', (t) => {
+  const cases = [
+    {
+      msg: 'consecutive integers',
+      versions: ['8', '9', '10', '11'],
+      expected: 'IE (8-11)',
+    },
+    {
+      msg: 'multiple ranges',
+      versions: ['8', '9', '11', '12', '17', '19'],
+      expected: 'IE (8-9,11-12,17,19)',
+    },
+    {
+      msg: 'minor version',
+      versions: ['8', '9', '9.1', '10', '11'],
+      expected: 'IE (8-9,9.1,10-11)',
+    },
+    {
+      msg: 'non numerical version',
+      versions: ['8', '9', '9-beta', '10', '11'],
+      expected: 'IE (8-9,9-beta,10-11)',
+    },
+  ];
+
+  for (const caseItem of cases) {
+    const actual = formatBrowserName('ie', caseItem.versions);
+    t.same(actual, caseItem.expected, caseItem.msg);
+  }
+  t.end();
+});

utils/util.js

@@ -23,7 +23,45 @@ export function formatBrowserName(browserKey, versions) {
   if (!versions) {
     return browserName || '';
   }
-  return (`${browserName} (${versions.join(',')})`);
+
+  const ranges = [];
+  let rangeStart = -1;
+  let rangeEnd = -1;
+
+  for (const [index, versionString] of versions.entries()) {
+    const current = +versionString;
+    const next = +versions[index + 1];
+
+    if (Number.isInteger(current)) {
+      if (rangeStart === -1) {
+        rangeStart = current;
+        rangeEnd = current;
+      } else if (current === rangeEnd + 1) {
+        rangeEnd = current;
+      } else {
+        ranges.push(rangeStart === rangeEnd ? [rangeStart] : [rangeStart, rangeEnd]);
+        rangeStart = current;
+        rangeEnd = current;
+      }
+
+      if (!Number.isInteger(next) || current + 1 !== next) {
+        ranges.push(rangeStart === rangeEnd ? [rangeStart] : [rangeStart, rangeEnd]);
+        rangeStart = -1;
+        rangeEnd = -1;
+      }
+    } else {
+      if (rangeStart !== -1) {
+        ranges.push(rangeStart === rangeEnd ? [rangeStart] : [rangeStart, rangeEnd]);
+        rangeStart = -1;
+        rangeEnd = -1;
+      }
+      ranges.push([versionString]);
+    }
+  }
+
+  const versionString = ranges.map((range) => range.join('-')).join(',');
+
+  return `${browserName} (${versionString})`;
 }
 
 /**