More tests, use fns from utils and rework core

src/glamor/CSSPropertyOperations/CSSProperty.js

@@ -79,7 +79,7 @@ let prefixes = ['Webkit', 'ms', 'Moz', 'O']
 
 // Using Object.keys here, or else the vanilla for-in loop makes IE8 go into an
 // infinite loop, because it iterates over the newly added props too.
-keys(isUnitlessNumber).forEach(function (prop) {
+forEach(keys(isUnitlessNumber), function (prop) {
   forEach(prefixes, function (prefix) {
     isUnitlessNumber[prefixKey(prefix, prop)] = 1
   })

src/glamor/CSSPropertyOperations/index.js

@@ -10,10 +10,13 @@
  */
 
 import dangerousStyleValue from './dangerousStyleValue'
-import hyphenateStyleName from 'fbjs/lib/hyphenateStyleName'
 import memoizeStringOnly from 'fbjs/lib/memoizeStringOnly'
 
-export const processStyleName = memoizeStringOnly(hyphenateStyleName)
+const hyphenateRegex = /[A-Z]|^ms/g
+
+export const processStyleName = memoizeStringOnly(styleName =>
+  styleName.replace(hyphenateRegex, '-$&').toLowerCase()
+)
 
 if (process.env.NODE_ENV !== 'production') {
   const warning = require('fbjs/lib/warning')

src/glamor/clean.js

@@ -16,7 +16,7 @@ function cleanObject (object) {
 
   let acc = {}
   let hasFalsy = false
-  forEach(keys(object), (value) => {
+  forEach(keys(object), value => {
     const filteredValue = clean(value)
     if (filteredValue === null || filteredValue !== value) {
       hasFalsy = true

src/index.js

@@ -1,6 +1,6 @@
 // @flow
 import { StyleSheet } from './sheet'
-import { forEach, map, reduce } from './utils'
+import { forEach, map, reduce, keys } from './utils'
 import { hashString as hash, hashObject } from './hash'
 import { createMarkupForStyles } from './glamor/CSSPropertyOperations'
 import clean from './glamor/clean.js'
@@ -45,27 +45,15 @@ function _getRegistered (rule) {
   return rule
 }
 
-// The idea on how to merge object class names come from glamorous
-// 💄
-// https://github.com/paypal/glamorous/blob/master/src/get-glamor-classname.js
-function getEmotionStylesFromClassName (className) {
-  const id = className.trim().slice('css-'.length)
-  if (sheet.registered[id]) {
-    return sheet.registered[id].style
-  } else {
-    return []
-  }
-}
-
 function buildStyles (objs) {
   let computedClassName = ''
   let objectStyles = []
-
   // This needs to be moved into the core
   forEach(objs, (cls): void => {
     if (typeof cls === 'string') {
-      if (cls.trim().indexOf('css-') === 0) {
-        objectStyles.push(getEmotionStylesFromClassName(cls))
+      const match = emotionClassRegex.exec(cls)
+      if (match) {
+        objectStyles.push(ruleCache[match[1]])
       } else {
         computedClassName && (computedClassName += ' ')
         computedClassName += cls
@@ -118,7 +106,7 @@ export function injectGlobal (
   // injectGlobal is flattened by postcss
   // we don't support nested selectors on objects
   forEach(combined, obj => {
-    forEach(Object.keys(obj), selector => {
+    forEach(keys(obj), selector => {
       insertRawRule(`${selector} {${createMarkupForStyles(obj[selector])}}`)
     })
   })
@@ -141,7 +129,7 @@ export function fontFace (
 function insertKeyframe (spec) {
   if (!inserted[spec.id]) {
     const inner = map(
-      Object.keys(spec.keyframes),
+      keys(spec.keyframes),
       kf => `${kf} {${createMarkupForStyles(spec.keyframes[kf])}}`
     ).join('')
 
@@ -181,16 +169,12 @@ type EmotionRule = { [string]: any }
 
 type CSSRuleList = Array<EmotionRule>
 
-type EmotionClassName = {
-  [string]: any
-}
-
-let cachedCss: (rules: CSSRuleList) => EmotionClassName =
+let cachedCss: (rules: CSSRuleList) => EmotionRule =
   typeof WeakMap !== 'undefined' ? multiIndexCache(_css) : _css
 
 // 🍩
 // https://github.com/threepointone/glamor
-export function objStyle (...rules: CSSRuleList): EmotionClassName {
+export function objStyle (...rules: CSSRuleList): EmotionRule {
   rules = clean(rules)
   if (!rules) {
     return nullrule
@@ -211,21 +195,22 @@ function _css (rules) {
   return toRule(spec)
 }
 
+const emotionClassRegex = /css-([a-zA-Z0-9]+)/
+
 // of shape { 'data-css-<id>': '' }
 export function isLikeRule (rule: EmotionRule) {
-  let keys = Object.keys(rule).filter(x => x !== 'toString')
-  if (keys.length !== 1) {
+  let ruleKeys = keys(rule).filter(x => x !== 'toString')
+  if (ruleKeys.length !== 1) {
     return false
   }
-  return !!/css-([a-zA-Z0-9]+)/.exec(keys[0])
+  return !!emotionClassRegex.exec(ruleKeys[0])
 }
 
 // extracts id from a { 'css-<id>': ''} like object
 export function idFor (rule: EmotionRule) {
-  let keys = Object.keys(rule).filter(x => x !== 'toString')
-  if (keys.length !== 1) throw new Error('not a rule')
-  let regex = /css-([a-zA-Z0-9]+)/
-  let match = regex.exec(keys[0])
+  let ruleKeys = keys(rule).filter(x => x !== 'toString')
+  if (ruleKeys.length !== 1) throw new Error('not a rule')
+  let match = emotionClassRegex.exec(ruleKeys[0])
   if (!match) throw new Error('not a rule')
   return match[1]
 }
@@ -236,21 +221,22 @@ function selector (id: string, path: string = '') {
   }
   if (!path) return `.css-${id}`
 
-  let x = path
-    .split(',')
-    .map(
-      x =>
-        x.indexOf('&') >= 0 ? x.replace(/&/gm, `.css-${id}`) : `.css-${id}${x}`
-    )
-    .join(',')
+  let x = map(
+    path.split(','),
+    x =>
+      x.indexOf('&') >= 0 ? x.replace(/&/gm, `.css-${id}`) : `.css-${id}${x}`
+  ).join(',')
 
   return x
 }
 
 function deconstruct (style) {
   // we can be sure it's not infinitely nested here
-  let plain, selects, medias, supports
-  Object.keys(style).forEach(key => {
+  let plain
+  let selects
+  let medias
+  let supports
+  forEach(keys(style), key => {
     if (key.indexOf('&') >= 0) {
       selects = selects || {}
       selects[key] = style[key]
@@ -276,17 +262,17 @@ function deconstructedStyleToCSS (id, style) {
     css.push(`${selector(id)}{${createMarkupForStyles(plain)}}`)
   }
   if (selects) {
-    Object.keys(selects).forEach((key: string) =>
+    forEach(keys(selects), (key: string) =>
       css.push(`${selector(id, key)}{${createMarkupForStyles(selects[key])}}`)
     )
   }
   if (medias) {
-    Object.keys(medias).forEach(key =>
+    forEach(keys(medias), key =>
       css.push(`${key}{${deconstructedStyleToCSS(id, medias[key]).join('')}}`)
     )
   }
   if (supports) {
-    Object.keys(supports).forEach(key =>
+    forEach(keys(supports), key =>
       css.push(`${key}{${deconstructedStyleToCSS(id, supports[key]).join('')}}`)
     )
   }
@@ -298,7 +284,7 @@ function insert (spec) {
   if (!inserted[spec.id]) {
     inserted[spec.id] = true
     let deconstructed = deconstruct(spec.style)
-    deconstructedStyleToCSS(spec.id, deconstructed).map(cssRule =>
+    map(deconstructedStyleToCSS(spec.id, deconstructed), cssRule =>
       sheet.insert(cssRule)
     )
   }
@@ -342,9 +328,11 @@ function joinSelectors (a, b) {
   let as = map(a.split(','), a => (!(a.indexOf('&') >= 0) ? '&' + a : a))
   let bs = map(b.split(','), b => (!(b.indexOf('&') >= 0) ? '&' + b : b))
 
-  return bs
-    .reduce((arr, b) => arr.concat(as.map(a => b.replace(/&/g, a))), [])
-    .join(',')
+  return reduce(
+    bs,
+    (arr, b) => arr.concat(map(as, a => b.replace(/&/g, a))),
+    []
+  ).join(',')
 }
 
 function joinMediaQueries (a, b) {
@@ -366,10 +354,11 @@ function joinSupports (a, b) {
 // flatten a nested array
 function flatten (inArr) {
   let arr = []
-  for (let i = 0; i < inArr.length; i++) {
-    if (Array.isArray(inArr[i])) arr = arr.concat(flatten(inArr[i]))
-    else arr = arr.concat(inArr[i])
-  }
+  forEach(inArr, val => {
+    if (Array.isArray(val)) arr = arr.concat(flatten(val))
+    else arr = arr.concat(val)
+  })
+
   return arr
 }
 
@@ -380,7 +369,7 @@ function build (dest, { selector = '', mq = '', supp = '', src = {} }) {
   }
   src = flatten(src)
 
-  src.forEach(_src => {
+  forEach(src, _src => {
     if (isLikeRule(_src)) {
       let reg = _getRegistered(_src)
       if (reg.type !== 'css') {
@@ -392,7 +381,7 @@ function build (dest, { selector = '', mq = '', supp = '', src = {} }) {
     if (_src && _src.composes) {
       build(dest, { selector, mq, supp, src: _src.composes })
     }
-    Object.keys(_src || {}).forEach(key => {
+    forEach(keys(_src || {}), key => {
       if (isSelector(key)) {
         build(dest, {
           selector: joinSelectors(selector, key),

src/sheet.js

@@ -22,6 +22,8 @@ styleSheet.flush()
 
 */
 
+import { forEach } from './utils'
+
 function last (arr) {
   return arr[arr.length - 1]
 }
@@ -157,7 +159,7 @@ Object.assign(StyleSheet.prototype, {
   },
   flush () {
     if (isBrowser) {
-      this.tags.forEach(tag => tag.parentNode.removeChild(tag))
+      forEach(this.tags, tag => tag.parentNode.removeChild(tag))
       this.tags = []
       this.sheet = null
       this.ctr = 0
@@ -173,7 +175,7 @@ Object.assign(StyleSheet.prototype, {
       return this.sheet.cssRules
     }
     let arr = []
-    this.tags.forEach(tag =>
+    forEach(this.tags, tag =>
       arr.splice(arr.length, 0, ...Array.from(sheetForTag(tag).cssRules))
     )
     return arr

test/__snapshots__/css.test.js.snap

@@ -1,5 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`css @supports 1`] = `
+<div
+  className="css-1u5pet7"
+/>
+`;
+
 exports[`css composes 1`] = `
 .glamor-0 {
   display: -webkit-box;
@@ -60,6 +66,30 @@ exports[`css composes with undefined values 1`] = `
 />
 `;
 
+exports[`css composition stuff 1`] = `
+.glamor-0 {
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
+<div
+  className="glamor-0"
+/>
+`;
+
+exports[`css composition stuff 2`] = `
+.glamor-0 {
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
+<div
+  className="glamor-0"
+/>
+`;
+
 exports[`css computed key is only dynamic 1`] = `
 .glamor-0 {
   font-size: 10px;
@@ -71,6 +101,17 @@ exports[`css computed key is only dynamic 1`] = `
 />
 `;
 
+exports[`css css variables 1`] = `
+.glamor-0 {
+  --some-var: 1px;
+  width: var(--some-var);
+}
+
+<div
+  className="glamor-0"
+/>
+`;
+
 exports[`css flushes correctly 1`] = `
 .glamor-0 {
   display: -webkit-box;
@@ -126,6 +167,36 @@ exports[`css handles objects 1`] = `
 />
 `;
 
+exports[`css nested array 1`] = `
+.glamor-0 {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+<div
+  className="glamor-0"
+/>
+`;
+
+exports[`css nested at rules 1`] = `
+@media (min-width: 420px) {
+  .glamor-0 {
+    color: pink;
+  }
+}
+
+@media (min-width: 420px) and  (max-width: 500px) {
+  .glamor-0 {
+    color: hotpink;
+  }
+}
+
+<div
+  className="glamor-0"
+/>
+`;
+
 exports[`css null rule 1`] = `
 <div
   className="css-nil"