fix class name ordering bug in node < 11

See: #20
Special thanks to: https://github.com/owaiswiz and https://github.com/n00b2pr0

__fixtures__/-ordering.js

@@ -2,4 +2,4 @@ import tw from './macro'
 
 // This tests the screens end up in the order they are defined in the config
 
-tw.div`xl:bg-red-500 lg:bg-blue-500 fill-current md:bg-pink-500 sm:bg-orange-500 sm:text-yellow-500 hidden`
+tw.div`xl:bg-red-500 lg:bg-blue-500 bg-green-500 fill-current md:bg-pink-500 sm:bg-orange-500 sm:text-yellow-500 hidden`

__snapshots__/plugin.test.js.snap

@@ -80,14 +80,15 @@ import tw from './macro'
 
 // This tests the screens end up in the order they are defined in the config
 
-tw.div\`xl:bg-red-500 lg:bg-blue-500 fill-current md:bg-pink-500 sm:bg-orange-500 sm:text-yellow-500 hidden\`
+tw.div\`xl:bg-red-500 lg:bg-blue-500 bg-green-500 fill-current md:bg-pink-500 sm:bg-orange-500 sm:text-yellow-500 hidden\`
 
       ↓ ↓ ↓ ↓ ↓ ↓
 
 import _styled from '@emotion/styled'
 
 // This tests the screens end up in the order they are defined in the config
 _styled.div({
+  backgroundColor: '#48bb78',
   fill: 'currentColor',
   display: 'none',
   '@media (min-width: 640px)': {

package.json

@@ -47,7 +47,8 @@
     "chalk": "^3.0.0",
     "dlv": "^1.1.3",
     "dset": "^2.0.1",
-    "tailwindcss": "^1.2.0"
+    "tailwindcss": "^1.2.0",
+    "timsort": "^0.3.0"
   },
   "devDependencies": {
     "@babel/plugin-syntax-jsx": "^7.8.3",

src/screens.js

@@ -1,4 +1,5 @@
 import dlv from 'dlv'
+import timSort from 'timsort'
 
 const stringifyScreen = (config, screenName) => {
   const screen = dlv(config, ['theme', 'screens', screenName])
@@ -24,11 +25,16 @@ const stringifyScreen = (config, screenName) => {
   return str ? `@media ${str}` : ''
 }
 
-const orderByScreens = (classNames, screens) =>
-  classNames.sort((a, b) => {
+const orderByScreens = (classNames, screens) => {
+  const screenCompare = (a, b) => {
     const A = a.includes(':') ? a.split(':')[0] : a
     const B = b.includes(':') ? b.split(':')[0] : b
     return screens.indexOf(A) < screens.indexOf(B) ? -1 : 1
-  })
+  }
+  // Tim Sort provides accurate sorting in node < 11
+  // https://github.com/ben-rogerson/twin.macro/issues/20
+  timSort.sort(classNames, screenCompare)
+  return classNames
+}
 
 export { stringifyScreen, orderByScreens }