Improv sorting of selectors to be more human-like (#68)

Author: bartveneman

package-lock.json

@@ -37,6 +37,7 @@
     "postcss": "^7.0.2",
     "postcss-values-parser": "^2.0.0",
     "specificity": "^0.4.1",
+    "string-natural-compare": "^2.0.3",
     "tinycolor2": "^1.4.1"
   },
   "devDependencies": {

package.json

@@ -1,13 +1,7 @@
-function stringCompare(a, b) {
-  return a
-    .toLowerCase()
-    .localeCompare(
-      b.toLowerCase()
-    )
-}
+const stringSortFn = require('string-natural-compare')
 
 module.exports = (values, sortFn) => {
-  sortFn = sortFn || stringCompare
+  sortFn = sortFn || stringSortFn.caseInsensitive
 
   const reduced = [...values.reduce((map, value) => {
     // Create a Map of unique values and their counts

src/utils/uniquer.js

@@ -2,6 +2,14 @@
   "total": 6,
   "totalUnique": 5,
   "unique": [
+    {
+      "count": 1,
+      "value": {
+        "font-family": "MyHelvetica",
+        "src": "local(\"Helvetica Neue Bold\"), local(\"HelveticaNeue-Bold\"), url(MgOpenModernaBold.ttf)",
+        "font-weight": "bold"
+      }
+    },
     {
       "count": 1,
       "value": {
@@ -17,21 +25,6 @@
         "unicode-range": "U+0025-00FF"
       }
     },
-    {
-      "count": 1,
-      "value": {
-        "font-family": "MyHelvetica",
-        "src": "local(\"Helvetica Neue Bold\"), local(\"HelveticaNeue-Bold\"), url(MgOpenModernaBold.ttf)",
-        "font-weight": "bold"
-      }
-    },
-    {
-      "count": 2,
-      "value": {
-        "src": "url('https://example.com')",
-        "font-family": "'Example Duplicate'"
-      }
-    },
     {
       "count": 1,
       "value": {
@@ -45,6 +38,13 @@
         "font-family": "\"Bitstream Vera Serif Bold\"",
         "src": "url(\"https://mdn.mozillademos.org/files/2468/VeraSeBd.ttf\")"
       }
+    },
+    {
+      "count": 2,
+      "value": {
+        "src": "url('https://example.com')",
+        "font-family": "'Example Duplicate'"
+      }
     }
   ]
 }

test/analyzer/atrules/fontfaces/output.json

@@ -5,6 +5,10 @@
     "total": 6,
     "totalUnique": 6,
     "unique": [
+      {
+        "value": "#jsSelector",
+        "count": 1
+      },
       {
         "value": ".adjecent.js-selector",
         "count": 1
@@ -24,21 +28,13 @@
       {
         "value": "[id='js-selector']",
         "count": 1
-      },
-      {
-        "value": "#jsSelector",
-        "count": 1
       }
     ]
   },
   "id": {
     "total": 4,
     "totalUnique": 4,
     "unique": [
-      {
-        "value": ".Foo > .Bar ~ .Baz [type=\"text\"] + span:before #bazz #fizz #buzz #drank #drugs",
-        "count": 1
-      },
       {
         "value": "#foo",
         "count": 1
@@ -50,6 +46,10 @@
       {
         "value": "#multipe #ids #counted #as #one",
         "count": 1
+      },
+      {
+        "value": ".Foo > .Bar ~ .Baz [type=\"text\"] + span:before #bazz #fizz #buzz #drank #drugs",
+        "count": 1
       }
     ]
   },
@@ -58,43 +58,43 @@
     "totalUnique": 11,
     "unique": [
       {
-        "value": ".foo *",
+        "value": "*",
         "count": 1
       },
       {
-        "value": ".foo * .bar",
+        "value": "* + html .selector",
         "count": 1
       },
       {
-        "value": ".selector:not(*:root)",
-        "count": 1
+        "value": "* html .selector",
+        "count": 2
       },
       {
-        "value": "*",
+        "value": "*+html .selector",
         "count": 1
       },
       {
-        "value": "* + html .selector",
+        "value": "*:first-child + html .selector",
         "count": 1
       },
       {
-        "value": "* html .selector",
-        "count": 2
+        "value": "*:first-child+html .selector",
+        "count": 1
       },
       {
-        "value": "*:first-child + html .selector",
+        "value": "*|html[xmlns*=\"\"] .selector",
         "count": 1
       },
       {
-        "value": "*:first-child+html .selector",
+        "value": ".foo *",
         "count": 1
       },
       {
-        "value": "*+html .selector",
+        "value": ".foo * .bar",
         "count": 1
       },
       {
-        "value": "*|html[xmlns*=\"\"] .selector",
+        "value": ".selector:not(*:root)",
         "count": 1
       },
       {

test/analyzer/selectors/output.json

@@ -4,10 +4,6 @@
     "total": 18,
     "totalUnique": 12,
     "unique": [
-      {
-        "value": "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"",
-        "count": 1
-      },
       {
         "value": "\"-apple-system\", \"BlinkMacSystemFont\", \"Segoe UI\", \"Roboto\", \"Helvetica\", \"Arial\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"",
         "count": 1
@@ -36,6 +32,10 @@
         "value": "\"Source Sans Pro\", serif",
         "count": 1
       },
+      {
+        "value": "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"",
+        "count": 1
+      },
       {
         "value": "Consolas, \"Liberation Mono\", Menlo, Courier, monospace",
         "count": 1
@@ -140,11 +140,11 @@
         "count": 1
       },
       {
-        "value": "rgb(100, 200, 10)",
+        "value": "rgba(100, 200, 10, .5)",
         "count": 1
       },
       {
-        "value": "rgba(100, 200, 10, .5)",
+        "value": "rgb(100, 200, 10)",
         "count": 1
       },
       {