fix: CXS media query ordering

tempoary switch to this PR: cxs-css/cxs#82 which fixes media query ordering to prevent incorrect css overriding.

src/__snapshots__/breakbox.test.js.snap

@@ -72,12 +72,12 @@ exports[`can specify element tag: container can render an article tag 1`] = `
 
 exports[`handle single values: null value 1`] = `
 <div
-  className="_bbx_0"
+  className=""
 >
   <style
     dangerouslySetInnerHTML={
       Object {
-        "__html": "._bbx_0{}",
+        "__html": "",
       }
     }
   />
@@ -100,12 +100,12 @@ exports[`handle single values: single value 1`] = `
 
 exports[`skips breakpoints: skips empty 1`] = `
 <div
-  className="_bbx_0"
+  className=""
 >
   <style
     dangerouslySetInnerHTML={
       Object {
-        "__html": "._bbx_0{}",
+        "__html": "",
       }
     }
   />
@@ -114,12 +114,12 @@ exports[`skips breakpoints: skips empty 1`] = `
 
 exports[`skips breakpoints: skips empty string 1`] = `
 <div
-  className="_bbx_0"
+  className=""
 >
   <style
     dangerouslySetInnerHTML={
       Object {
-        "__html": "._bbx_0{}",
+        "__html": "",
       }
     }
   />
@@ -156,12 +156,12 @@ exports[`skips breakpoints: skips multiple values 1`] = `
 
 exports[`skips breakpoints: skips null 1`] = `
 <div
-  className="_bbx_0"
+  className=""
 >
   <style
     dangerouslySetInnerHTML={
       Object {
-        "__html": "._bbx_0{}",
+        "__html": "",
       }
     }
   />
@@ -170,12 +170,12 @@ exports[`skips breakpoints: skips null 1`] = `
 
 exports[`skips breakpoints: skips undefined 1`] = `
 <div
-  className="_bbx_0"
+  className=""
 >
   <style
     dangerouslySetInnerHTML={
       Object {
-        "__html": "._bbx_0{}",
+        "__html": "",
       }
     }
   />

src/breakbox.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import cxs from 'cxs/monolithic'
+import cxs from './lib/cxs'
 import defaultConfig from './config'
 import contextTypes from './context-types'
 

src/lib/cxs.js

@@ -0,0 +1,57 @@
+/*
+  CXS taken from this PR which fixes media queries ordering:
+  https://github.com/cxs-css/cxs/pull/82
+*/
+let cache = {}
+let mqs = 0
+let prefix = 'x'
+const rules = []
+let insert = rule => rules.push(rule)
+const hyph = s => s.replace(/[A-Z]|^ms/g, '-$&').toLowerCase()
+const mx = (rule, media) => media ? `${media}{${rule}}` : rule
+const rx = (cn, prop, val) => `.${cn}{${hyph(prop)}:${val}}`
+const noAnd = s => s.replace(/&/g, '')
+
+const parse = (obj, child = '', media) =>
+  Object.keys(obj).map(key => {
+    const val = obj[key]
+    if (val === null) return ''
+    if (typeof val === 'object') {
+      const m2 = /^@/.test(key) ? key : null
+      const c2 = m2 ? child : child + key
+      return parse(val, c2, m2 || media)
+    }
+    const _key = key + val + child + media
+    if (cache[_key]) return cache[_key]
+    const className = prefix + (rules.length).toString(36)
+    insert(mx(rx(className + noAnd(child), key, val), media), !!media)
+    cache[_key] = className
+    return className
+  })
+    .join(' ')
+
+module.exports = (...styles) =>
+  styles.map(style => parse(style))
+  .join(' ').trim()
+
+module.exports.css = () => rules.sort().join('')
+
+module.exports.reset = () => {
+  cache = {}
+  while (rules.length) rules.pop()
+}
+
+module.exports.prefix = (val) => {
+  prefix = val
+}
+
+if (typeof document !== 'undefined') {
+  const sheet = document.head.appendChild(
+    document.createElement('style')
+  ).sheet
+  insert = (rule, media) => {
+    rules.push(rule)
+    if (media) mqs += 1
+    sheet.insertRule(rule, sheet.cssRules.length - (media ? 0 : mqs))
+  }
+}