Add dynamic value support for extract static in the styled function.

packages/emotion/src/index.js

@@ -9,6 +9,7 @@ import {
   clean,
   createMarkupForStyles,
   hashString as hash,
+  hashArray,
   hashObject
 } from 'emotion-utils'
 
@@ -82,7 +83,38 @@ export function css(objs: any, vars: Array<any>, content: () => Array<any>) {
   return computedClassName.trim()
 }
 
-function insertRawRule(css: string) {
+type inputVar = string | number
+
+export function customProperties(baseClassName: string, vars: Array<inputVar>) {
+  const hash = hashArray([baseClassName, ...vars])
+  const varCls = `css-vars-${hash}`
+  if (inserted[hash]) {
+    return varCls
+  }
+
+  let src = ''
+  forEach(vars, (val: inputVar, i: number) => {
+    src && (src += '; ')
+    src += `--${baseClassName}-${i}: ${val}`
+  })
+
+  let spec = {
+    id: hash,
+    css: `.${varCls} {${src}}`,
+    type: 'raw'
+  }
+
+  register(spec)
+
+  if (!inserted[spec.id]) {
+    sheet.insert(spec.css)
+    inserted[spec.id] = true
+  }
+
+  return varCls
+}
+
+export function insertRawRule(css: string) {
   let spec = {
     id: hash(css),
     css,

packages/emotion/test/extract/__snapshots__/extract.test.js.snap

@@ -6,36 +6,35 @@ exports[`styled basic render nested 1`] = `
 >
   hello world
 </h1>
-`
+`;
 
 exports[`styled name 1`] = `
 <h1
   className="styled-H1-131pfth styled-H1-r6dkuc3"
 >
   hello world
 </h1>
-`
+`;
 
 exports[`styled no dynamic 1`] = `
 <h1
   className="styled-H1-ijh7uz styled-H1-r6dkuc0"
 >
   hello world
 </h1>
-`
+`;
 
 exports[`styled with expressions 1`] = `
+.glamor-0 {
+  --styled-H1-1t8i2zo-0: 24;
+}
+
 <h1
-  className="styled-H1-1t8i2zo styled-H1-r6dkuc2"
-  style={
-    Object {
-      "styled-H1-1t8i2zo-0": 24,
-    }
-  }
+  className="styled-H1-1t8i2zo glamor-0 styled-H1-r6dkuc2"
 >
   hello world
 </h1>
-`
+`;
 
 exports[`styled writes the correct css 1`] = `
 ".styled-H1-ijh7uz {
@@ -68,4 +67,4 @@ html {
     color: yellow;
     background-color: purple
 }"
-`
+`;

packages/react-emotion/src/index.js

@@ -1,5 +1,5 @@
 import { createElement as h } from 'react'
-import { css } from 'emotion'
+import { css, customProperties } from 'emotion'
 import { map, reduce, assign, omit } from 'emotion-utils'
 import propsRegexString from /* preval */ './props'
 
@@ -18,7 +18,7 @@ export default function(tag, cls, objs, vars = [], content) {
     )
   }
 
-  const FAST_PATH = vars && vars.length && !content
+  const EXTRACTED_DYNAMIC = vars && vars.length && !content
 
   const componentTag = tag.displayName || tag.name || 'Component'
   const spec = {
@@ -48,31 +48,6 @@ export default function(tag, cls, objs, vars = [], content) {
       return v
     }
 
-    if (FAST_PATH) {
-      return h(
-        localTag,
-        omit(
-          assign({}, props, {
-            ref: props.innerRef,
-            className: objs[0],
-            style: assign(
-              {},
-              props.style,
-              reduce(
-                map(vars, getValue),
-                (accum, value, i) => {
-                  accum[`${objs[0]}-${i}`] = value
-                  return accum
-                },
-                {}
-              )
-            )
-          }),
-          omitFn
-        )
-      )
-    }
-
     let finalObjs = []
 
     push(
@@ -83,6 +58,10 @@ export default function(tag, cls, objs, vars = [], content) {
           push(accum, spec.objs)
           if (spec.content) {
             accum.push(spec.content.apply(null, map(spec.vars, getValue)))
+          } else if (spec.vars.length) {
+            // Dynamic properties for extracted css will have variables
+            // but no content function
+            accum.push(customProperties(spec.objs[0], map(spec.vars, getValue)))
           }
           accum.push(spec.cls)
           return accum