Repository: tkh44/emotion (js)

Issue:
Drop the function call if the css was extracted and there were no dynamic values.
We can avoid most function calls by just assigning the string. On large code bases this could be significant to startup time.

```jsx
const myClassName = css("css-cu78iu", []);
```

Should be

const myClassName = "css-cu78iu";

Suggested solution:

Here: https://github.com/tkh44/emotion/blob/8fb17180f2d1cfc966ed05a59efe04bb0ece12be/src/babel.js#L142-L157

```jsx
if (isStatic) {
  state.insertStaticRules(rules)
  return t.stringLiteral(`${name}-${hash}`)
} else {
  // ...
}
return t.callExpression(identifier, args)
```


Pull request description:
Drop the function call if the css was extracted and there were no dynamic values
<!--
Thanks for your interest in the project. I appreciate bugs filed and PRs submitted!

Please make sure that you are familiar with and follow the Code of Conduct for
this project (found in the CODE_OF_CONDUCT.md file).

Also, please make sure you're familiar with and follow the instructions in the
contributing guidelines (found in the CONTRIBUTING.md file).

If you're new to contributing to open source projects, you might find this free
video course helpful: http://kcd.im/pull-request

Please fill out the information below to expedite the review and (hopefully)
merge of your pull request!
-->

<!-- What changes are being made? (What feature/bug is being fixed here?) -->
**What**:

When there is a css call, the styles have been extracted and there are no dynamic values, the css call is replaced with the class name.

This also inlines the interpolations for fragment so fragment can just be a noop. e.g.
```jsx
const color = 'yellow'
const frag = fragment`
  background-color: ${color}
`
```
turns into
```jsx
const color = 'yellow'
const frag = `background-color: ${color}`
```

This also removes the `createEmotion*` functions in everything except `styled` and `css` and instead passes the rules straight into the function. e.g.

```jsx
injectGlobal`
  body {
    margin: 0;
    padding: 0;
    display: ${display};
    & > div {
      display: none;
    }
  }
  html {
    background: green;
  }
`
```
used to turn into
```jsx
injectGlobal([display], function createEmotionGlobal (x0) {
  return [`body {
    margin: 0;
    padding: 0;
    display: ${x0};
  }`, `body > div {
    display: none;
  }`, `html {
    background: green;
  }`]
})
```
now it turns into 
```jsx
injectGlobal([
  `body {
    margin: 0;
    padding: 0;
    display: ${display};
  }`,
  `body > div {
    display: none;
  }`,
  `html {
    background: green;
  }`])
```


<!-- Why are these changes necessary? -->
**Why**:

Because it removes useless functions calls, thus improving performance.

<!-- How were these changes implemented? -->
**How**:

Previously, all the functions in `inline.js` returned an object with an `isStatic` property which had an inconsistent meaning, in some places it meant no `@apply`s and in some places it meant no `@apply`s or css vars. This changes it so that they all return objects with the properties `hasVar` and `hasApply`.

Once that was done, it was just adding an if statement to check if there was no vars and no `@apply`s then replacing the path with the class name.

<!-- Have you done all of these things?  -->
**Checklist**:
<!-- add "N/A" to the end of each line that's irrelevant to your changes -->
<!-- to check an item, place an "x" in the box like so: "- [x] Documentation" -->
- [ ] Documentation N/A
- [x] Tests
- [x] Code complete

<!-- feel free to add additional comments -->

Closes #49 

Patch:
diff --git a/src/babel.js b/src/babel.js
index ba84c117..0be11b1b 100644
--- a/src/babel.js
+++ b/src/babel.js
@@ -5,7 +5,7 @@ import { inline, keyframes, fontFace, injectGlobal } from './inline'
 import findAndReplaceAttrs from './attrs'
 import cssProps from './css-prop'
 
-function parseDynamicValues (rules, t) {
+function parseDynamicValues (rules, t, inputExpressions) {
   return rules.map(rule => {
     const re = /xxx(\S)xxx/gm
     let varMatch
@@ -28,7 +28,7 @@ function parseDynamicValues (rules, t) {
           quasis.push(t.templateElement({ raw: preMatch, cooked: preMatch }))
         }
 
-        expressions.push(t.identifier(`x${p1}`))
+        expressions.push(inputExpressions[p1])
 
         if (i === matches.length - 1 && cursor <= rule.length) {
           const postMatch = rule.substring(cursor)
@@ -116,14 +116,13 @@ export default function (babel) {
         // });
 
         const parent = path.findParent(p => p.isVariableDeclarator())
-        const identifierName = parent && t.isIdentifier(parent.node.id)
-          ? parent.node.id.name
-          : ''
+        const identifierName =
+          parent && t.isIdentifier(parent.node.id) ? parent.node.id.name : ''
 
         function buildCallExpression (identifier, tag, path) {
           const built = findAndReplaceAttrs(path, t)
 
-          let { hash, rules, name, isStatic } = inline(
+          let { hash, rules, name, hasVar, hasApply } = inline(
             built,
             identifierName,
             'css',
@@ -139,15 +138,18 @@ export default function (babel) {
             t.stringLiteral(`${name}-${hash}`),
             t.arrayExpression(built.expressions)
           ]
-          if (isStatic) {
+          if (!hasApply && !state.inline) {
             state.insertStaticRules(rules)
           } else {
+            const expressions = built.expressions.map((x, i) =>
+              t.identifier(`x${i}`)
+            )
             const inlineContentExpr = t.functionExpression(
               t.identifier('createEmotionStyledRules'),
-              built.expressions.map((x, i) => t.identifier(`x${i}`)),
+              expressions,
               t.blockStatement([
                 t.returnStatement(
-                  t.arrayExpression(parseDynamicValues(rules, t))
+                  t.arrayExpression(parseDynamicValues(rules, t, expressions))
                 )
               ])
             )
@@ -199,44 +201,45 @@ export default function (babel) {
             )
           }
           const rulesWithoutSelector = rules.map(rule =>
-            rule.substring(rule.indexOf('{') + 1, rule.length - 1)
+            rule.substring(rule.indexOf('{') + 1, rule.length - 1).trim()
           )
-          const dynamicRules = parseDynamicValues(rulesWithoutSelector, t)
           path.replaceWith(
-            t.callExpression(t.identifier('fragment'), [
-              t.arrayExpression(path.node.quasi.expressions),
-              t.functionExpression(
-                t.identifier('createEmotionFragment'),
-                path.node.quasi.expressions.map((x, i) =>
-                  t.identifier(`x${i}`)
-                ),
-                t.blockStatement([t.returnStatement(dynamicRules[0])])
-              )
-            ])
+            parseDynamicValues(
+              rulesWithoutSelector,
+              t,
+              path.node.quasi.expressions
+            )[0]
           )
         } else if (
           t.isIdentifier(path.node.tag) &&
           path.node.tag.name === 'css'
         ) {
-          const { hash, name, rules, isStatic } = inline(
+          const { hash, name, rules, hasApply, hasVar } = inline(
             path.node.quasi,
             identifierName,
             'css',
             state.inline
           )
+          const classNameStringLiteral = t.stringLiteral(`${name}-${hash}`)
           const args = [
-            t.stringLiteral(`${name}-${hash}`),
+            classNameStringLiteral,
             t.arrayExpression(path.node.quasi.expressions)
           ]
-          if (isStatic) {
+          if (!hasApply && !state.inline) {
             state.insertStaticRules(rules)
+            if (!hasVar) {
+              return path.replaceWith(classNameStringLiteral)
+            }
           } else {
+            const expressions = path.node.quasi.expressions.map((x, i) =>
+              t.identifier(`x${i}`)
+            )
             const inlineContentExpr = t.functionExpression(
               t.identifier('createEmotionRules'),
-              path.node.quasi.expressions.map((x, i) => t.identifier(`x${i}`)),
+              expressions,
               t.blockStatement([
                 t.returnStatement(
-                  t.arrayExpression(parseDynamicValues(rules, t))
+                  t.arrayExpression(parseDynamicValues(rules, t, expressions))
                 )
               ])
             )
@@ -247,14 +250,13 @@ export default function (babel) {
           t.isIdentifier(path.node.tag) &&
           path.node.tag.name === 'keyframes'
         ) {
-          const { hash, name, rules, isStatic } = keyframes(
+          const { hash, name, rules, hasApply, hasVar } = keyframes(
             path.node.quasi,
             identifierName,
-            'animation',
-            state.inline
+            'animation'
           )
           const animationName = `${name}-${hash}`
-          if (isStatic) {
+          if (!hasApply && !hasVar && !state.inline) {
             state.insertStaticRules([
               `@keyframes ${animationName} ${rules.join('')}`
             ])
@@ -263,17 +265,8 @@ export default function (babel) {
             path.replaceWith(
               t.callExpression(t.identifier('keyframes'), [
                 t.stringLiteral(animationName),
-                t.arrayExpression(path.node.quasi.expressions),
-                t.functionExpression(
-                  t.identifier('createEmotionKeyframes'),
-                  path.node.quasi.expressions.map((x, i) =>
-                    t.identifier(`x${i}`)
-                  ),
-                  t.blockStatement([
-                    t.returnStatement(
-                      t.arrayExpression(parseDynamicValues(rules, t))
-                    )
-                  ])
+                t.arrayExpression(
+                  parseDynamicValues(rules, t, path.node.quasi.expressions)
                 )
               ])
             )
@@ -282,8 +275,11 @@ export default function (babel) {
           t.isIdentifier(path.node.tag) &&
           path.node.tag.name === 'fontFace'
         ) {
-          const { rules, isStatic } = fontFace(path.node.quasi, state.inline)
-          if (isStatic) {
+          const { rules, hasApply, hasVar } = fontFace(
+            path.node.quasi,
+            state.inline
+          )
+          if (!hasApply && !hasVar && !state.inline) {
             state.insertStaticRules(rules)
             if (t.isExpressionStatement(path.parent)) {
               path.parentPath.remove()
@@ -293,17 +289,8 @@ export default function (babel) {
           } else {
             path.replaceWith(
               t.callExpression(t.identifier('fontFace'), [
-                t.arrayExpression(path.node.quasi.expressions),
-                t.functionExpression(
-                  t.identifier('createEmotionFontFace'),
-                  path.node.quasi.expressions.map((x, i) =>
-                    t.identifier(`x${i}`)
-                  ),
-                  t.blockStatement([
-                    t.returnStatement(
-                      t.arrayExpression(parseDynamicValues(rules, t))
-                    )
-                  ])
+                t.arrayExpression(
+                  parseDynamicValues(rules, t, path.node.quasi.expressions)
                 )
               ])
             )
@@ -313,11 +300,8 @@ export default function (babel) {
           path.node.tag.name === 'injectGlobal' &&
           t.isTemplateLiteral(path.node.quasi)
         ) {
-          const { isStatic, rules } = injectGlobal(
-            path.node.quasi,
-            state.inline
-          )
-          if (isStatic) {
+          const { rules, hasApply, hasVar } = injectGlobal(path.node.quasi)
+          if (!hasApply && !hasVar && !state.inline) {
             state.insertStaticRules(rules)
             if (t.isExpressionStatement(path.parent)) {
               path.parentPath.remove()
@@ -327,17 +311,8 @@ export default function (babel) {
           } else {
             path.replaceWith(
               t.callExpression(t.identifier('injectGlobal'), [
-                t.arrayExpression(path.node.quasi.expressions),
-                t.functionExpression(
-                  t.identifier('createEmotionGlobal'),
-                  path.node.quasi.expressions.map((x, i) =>
-                    t.identifier(`x${i}`)
-                  ),
-                  t.blockStatement([
-                    t.returnStatement(
-                      t.arrayExpression(parseDynamicValues(rules, t))
-                    )
-                  ])
+                t.arrayExpression(
+                  parseDynamicValues(rules, t, path.node.quasi.expressions)
                 )
               ])
             )
diff --git a/src/index.js b/src/index.js
index 4b1b9bb7..203db1f1 100644
--- a/src/index.js
+++ b/src/index.js
@@ -49,12 +49,9 @@ export function css (cls: string, vars: vars, content: () => string[]) {
   return cls + (vars && vars.length > 0 ? ' ' + values(cls, vars) : '')
 }
 
-export function fragment (vars: vars, content: () => string) {
-  return content(...vars)
-}
+export function fragment () {}
 
-export function injectGlobal (vars: vars, content: () => string[]) {
-  const src = content(...vars)
+export function injectGlobal (src: string[]) {
   const hash = hashArray(src)
   if (!inserted[hash]) {
     inserted[hash] = true
@@ -64,8 +61,7 @@ export function injectGlobal (vars: vars, content: () => string[]) {
 
 export const fontFace = injectGlobal
 
-export function keyframes (kfm: string, vars: vars, content: () => string[]) {
-  const src = content(...vars)
+export function keyframes (kfm: string, src: string[]) {
   const hash = hashArray(src)
   const animationName = `${kfm}-${hash}`
   if (!inserted[hash]) {
diff --git a/src/inline.js b/src/inline.js
index cfb01511..ee7b8b43 100644
--- a/src/inline.js
+++ b/src/inline.js
@@ -43,52 +43,82 @@ function replaceApplyWithPlaceholders (rules: string[]): string[] {
   )
 }
 
-export function inline (
-  quasi: any,
-  identifierName?: string,
-  prefix: string,
-  inlineVars: boolean
-): { hash: string, name: string, rules: string[], isStatic: boolean } {
-  let strs = quasi.quasis.map(x => x.value.cooked)
-  let hash = hashArray([...strs]) // todo - add current filename?
-  let name = getName(
-    extractNameFromProperty(strs.join('xxx')),
-    identifierName,
-    prefix
-  )
-  let hasApply
-  let src = strs
+function createSrc (
+  strs: string[],
+  name: string,
+  hash: string,
+  expressionLength: number
+): { src: string, hasApply: boolean, hasVar: boolean } {
+  let hasApply = false
+  let hasVar = false
+  const src = strs
     .reduce((arr, str, i) => {
       arr.push(str)
-      if (i !== quasi.expressions.length) {
+      if (i !== expressionLength) {
         // todo - test for preceding @apply
         let applyMatch = /@apply\s*$/gm.exec(str)
         if (applyMatch) {
           hasApply = true
           arr.push(`--${name}-${hash}-${i}`)
-        } else arr.push(`var(--${name}-${hash}-${i})`)
+        } else {
+          hasVar = true
+          arr.push(`var(--${name}-${hash}-${i})`)
+        }
       }
       return arr
     }, [])
     .join('')
     .trim()
+  return { src, hasApply, hasVar }
+}
+
+export function inline (
+  quasi: any,
+  identifierName?: string,
+  prefix: string,
+  inlineMode: boolean
+): {
+  hash: string,
+  name: string,
+  rules: string[],
+  hasApply: boolean,
+  hasVar: boolean
+} {
+  let strs = quasi.quasis.map(x => x.value.cooked)
+  let hash = hashArray([...strs]) // todo - add current filename?
+  let name = getName(
+    extractNameFromProperty(strs.join('xxx')),
+    identifierName,
+    prefix
+  )
+  let { src, hasApply, hasVar } = createSrc(
+    strs,
+    name,
+    hash,
+    quasi.expressions.length
+  )
 
   let rules = parseCSS(`.${name}-${hash} { ${src} }`)
-  if (inlineVars || hasApply) {
+  if (inlineMode || hasApply) {
     rules = replaceVarsWithPlaceholders(rules)
   }
   if (hasApply) {
     rules = replaceApplyWithPlaceholders(rules)
   }
-  return { hash, name, rules, isStatic: !hasApply && !inlineVars }
+  return { hash, name, rules, hasApply, hasVar }
 }
 
 export function keyframes (
   quasi: any,
   identifierName?: string,
-  prefix: string,
-  inlineVars: boolean
-): { hash: string, name: string, rules: string[] } {
+  prefix: string
+): {
+  hash: string,
+  name: string,
+  rules: string[],
+  hasApply: boolean,
+  hasVar: boolean
+} {
   const strs = quasi.quasis.map(x => x.value.cooked)
   const hash = hashArray([...strs])
   const name = getName(
@@ -96,79 +126,55 @@ export function keyframes (
     identifierName,
     prefix
   )
-  let hasApplyOrVar = false
-  const src = strs
-    .reduce((arr, str, i) => {
-      arr.push(str)
-      if (i !== quasi.expressions.length) {
-        hasApplyOrVar = true
-        // todo - test for preceding @apply
-        let applyMatch = /@apply\s*$/gm.exec(str)
-        if (applyMatch) {
-          arr.push(`--name-hash-${i}`)
-        } else arr.push(`var(--name-hash-${i})`)
-      }
-      return arr
-    }, [])
-    .join('')
-    .trim()
+  const { src, hasApply, hasVar } = createSrc(
+    strs,
+    name,
+    hash,
+    quasi.expressions.length
+  )
   let rules = parseCSS(`{ ${src} }`, { nested: false })
-  if (hasApplyOrVar) {
-    rules = replaceVarsWithPlaceholders(rules)
+  if (hasApply) {
     rules = replaceApplyWithPlaceholders(rules)
   }
-  return { hash, name, rules, isStatic: !hasApplyOrVar && !inlineVars }
+  if (hasVar) {
+    rules = replaceVarsWithPlaceholders(rules)
+  }
+  return { hash, name, rules, hasApply, hasVar }
 }
 
 export function fontFace (
-  quasi: any,
-  inlineVars: boolean
-): { rules: string[], isStatic: boolean } {
+  quasi: any
+): { rules: string[], hasApply: boolean, hasVar: boolean } {
   let strs = quasi.quasis.map(x => x.value.cooked)
-  let hasVar
-  let src = strs
-    .reduce((arr, str, i) => {
-      arr.push(str)
-      if (i !== quasi.expressions.length) {
-        hasVar = true
-        arr.push(`var(--name-hash-${i})`)
-      }
-      return arr
-    }, [])
-    .join('')
-    .trim()
+  const { src, hasApply, hasVar } = createSrc(
+    strs,
+    'name',
+    'hash',
+    quasi.expressions.length
+  )
   let rules = parseCSS(`@font-face {${src}}`)
   if (hasVar) {
     rules = replaceVarsWithPlaceholders(rules)
   }
-  return { rules, isStatic: !inlineVars && !hasVar }
+  return { rules, hasApply, hasVar }
 }
 
 export function injectGlobal (
-  quasi: any,
-  inlineVars: boolean
-): { rules: string[], isStatic: boolean } {
+  quasi: any
+): { rules: string[], hasApply: boolean, hasVar: boolean } {
   let strs = quasi.quasis.map(x => x.value.cooked)
-  let hasApplyOrVar = false
-  let src = strs
-    .reduce((arr, str, i) => {
-      arr.push(str)
-      if (i !== quasi.expressions.length) {
-        hasApplyOrVar = true
-        // todo - test for preceding @apply
-        let applyMatch = /@apply\s*$/gm.exec(str)
-        if (applyMatch) {
-          arr.push(`--name-hash-${i}`)
-        } else arr.push(`var(--name-hash-${i})`)
-      }
-      return arr
-    }, [])
-    .join('')
-    .trim()
+  const { src, hasVar, hasApply } = createSrc(
+    strs,
+    'name',
+    'hash',
+    quasi.expressions.length
+  )
   let rules = parseCSS(src)
-  if (hasApplyOrVar) {
-    rules = replaceVarsWithPlaceholders(rules)
+  if (hasApply) {
     rules = replaceApplyWithPlaceholders(rules)
   }
-  return { rules, isStatic: !inlineVars && !hasApplyOrVar }
+  if (hasVar) {
+    rules = replaceVarsWithPlaceholders(rules)
+  }
+  return { rules, hasApply, hasVar }
 }
diff --git a/src/vue.js b/src/vue.js
index c5c03285..ce35e9c6 100644
--- a/src/vue.js
+++ b/src/vue.js
@@ -9,10 +9,14 @@ const styled = (tag, cls, vars = [], content) => {
         vars.map(v => (v && typeof v === 'function' ? v(context.props) : v)),
         content
       )
-      return h(tag, {
-        ...context.data,
-        class: [context.data.class, className]
-      }, context.children)
+      return h(
+        tag,
+        {
+          ...context.data,
+          class: [context.data.class, className]
+        },
+        context.children
+      )
     }
   }
 }


Test patch:
diff --git a/test/__snapshots__/css-prop.test.js.snap b/test/__snapshots__/css-prop.test.js.snap
index f74d2bdc..541b222a 100644
--- a/test/__snapshots__/css-prop.test.js.snap
+++ b/test/__snapshots__/css-prop.test.js.snap
@@ -14,7 +14,7 @@ exports[`css prop react basic 1`] = `
 `;
 
 exports[`css prop react kitchen sink 1`] = `
-.css-tree-1170hdn-140nofh {
+.css-tree-1170hdn-1o62cat {
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
@@ -36,7 +36,7 @@ exports[`css prop react kitchen sink 1`] = `
   align-items: center;
 }
 
-.css-tree-wjhr0q-2fv2qw {
+.css-tree-wjhr0q-imh2fa {
   font-size: 6;
   color: red;
 }
@@ -64,10 +64,10 @@ exports[`css prop react kitchen sink 1`] = `
 }
 
 <div
-  className="css__legacy-stuff css-tree-1170hdn-140nofh"
+  className="css__legacy-stuff css-tree-1170hdn-1o62cat"
 >
   <h1
-    className="css-tree-wjhr0q-2fv2qw"
+    className="css-tree-wjhr0q-imh2fa"
   >
     BOOM
   </h1>
diff --git a/test/__snapshots__/inject-global.test.js.snap b/test/__snapshots__/inject-global.test.js.snap
index 944c4de3..1738e66c 100644
--- a/test/__snapshots__/inject-global.test.js.snap
+++ b/test/__snapshots__/inject-global.test.js.snap
@@ -7,7 +7,7 @@ exports[`injectGlobal 1`] = `
       background: red;
     }body {
       color: yellow
-       margin: 0;
-    padding: 0; 
+      margin: 0;
+    padding: 0;
     }"
 `;
diff --git a/test/__snapshots__/server.test.js.snap b/test/__snapshots__/server.test.js.snap
index bf9b79ba..65ca6a58 100644
--- a/test/__snapshots__/server.test.js.snap
+++ b/test/__snapshots__/server.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`server renderStatic returns static css 1`] = `
 Object {
-  "css": ".css-unused-class-hlb84m-1kfvr9c { display: none; }.no-prefix { display: flex; justify-content: center; }.css-Main-ov1ktg-pvm7rn { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; }.css-Image-z4ry8g-1qx25bk { border-radius: 50%;
+  "css": ".css-unused-class-hlb84m-1kfvr9c { display: none; }.no-prefix { display: flex; justify-content: center; }.css-Main-17vxl0k-1g2c78b { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; }.css-Image-z4ry8g-1qx25bk { border-radius: 50%;
   height: 30;
   width: 30;
   background-color: red }.css-Image-z4ry8g-141jzk4 { border-radius: 50%;
@@ -12,10 +12,10 @@ Object {
   height: 50pxpx;
   width: 50pxpx;
   background-color: red }",
-  "html": "<main class=\\"css-Main-ov1ktg-pvm7rn\\" data-reactroot=\\"\\" data-reactid=\\"1\\" data-react-checksum=\\"1383946074\\"><img size=\\"30\\" class=\\"css-Image-z4ry8g-1qx25bk\\" data-reactid=\\"2\\"/><img size=\\"100\\" class=\\"css-Image-z4ry8g-141jzk4\\" data-reactid=\\"3\\"/><img class=\\"css-Image-z4ry8g-jpu7qc\\" data-reactid=\\"4\\"/></main>",
+  "html": "<main class=\\"css-Main-17vxl0k-1g2c78b\\" data-reactroot=\\"\\" data-reactid=\\"1\\" data-react-checksum=\\"52123375\\"><img size=\\"30\\" class=\\"css-Image-z4ry8g-1qx25bk\\" data-reactid=\\"2\\"/><img size=\\"100\\" class=\\"css-Image-z4ry8g-141jzk4\\" data-reactid=\\"3\\"/><img class=\\"css-Image-z4ry8g-jpu7qc\\" data-reactid=\\"4\\"/></main>",
   "ids": Array [
     "1kfvr9c",
-    "pvm7rn",
+    "1g2c78b",
     "1qx25bk",
     "141jzk4",
     "jpu7qc",
@@ -28,7 +28,7 @@ Object {
       "cssText": ".no-prefix { display: flex; justify-content: center; }",
     },
     Object {
-      "cssText": ".css-Main-ov1ktg-pvm7rn { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; }",
+      "cssText": ".css-Main-17vxl0k-1g2c78b { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; }",
     },
     Object {
       "cssText": ".css-Image-z4ry8g-1qx25bk { border-radius: 50%;
@@ -56,7 +56,7 @@ exports[`server renderStatic throws if the fn does not return anything 1`] = `"d
 
 exports[`server renderStaticOptimized returns static css 1`] = `
 Object {
-  "css": ".no-prefix { display: flex; justify-content: center; }.css-Main-ov1ktg-pvm7rn { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; }.css-Image-z4ry8g-1qx25bk { border-radius: 50%;
+  "css": ".no-prefix { display: flex; justify-content: center; }.css-Main-17vxl0k-1g2c78b { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; }.css-Image-z4ry8g-1qx25bk { border-radius: 50%;
   height: 30;
   width: 30;
   background-color: red }.css-Image-z4ry8g-141jzk4 { border-radius: 50%;
@@ -66,14 +66,14 @@ Object {
   height: 50pxpx;
   width: 50pxpx;
   background-color: red }",
-  "html": "<main class=\\"css-Main-ov1ktg-pvm7rn\\" data-reactroot=\\"\\" data-reactid=\\"1\\" data-react-checksum=\\"1383946074\\"><img size=\\"30\\" class=\\"css-Image-z4ry8g-1qx25bk\\" data-reactid=\\"2\\"/><img size=\\"100\\" class=\\"css-Image-z4ry8g-141jzk4\\" data-reactid=\\"3\\"/><img class=\\"css-Image-z4ry8g-jpu7qc\\" data-reactid=\\"4\\"/></main>",
+  "html": "<main class=\\"css-Main-17vxl0k-1g2c78b\\" data-reactroot=\\"\\" data-reactid=\\"1\\" data-react-checksum=\\"52123375\\"><img size=\\"30\\" class=\\"css-Image-z4ry8g-1qx25bk\\" data-reactid=\\"2\\"/><img size=\\"100\\" class=\\"css-Image-z4ry8g-141jzk4\\" data-reactid=\\"3\\"/><img class=\\"css-Image-z4ry8g-jpu7qc\\" data-reactid=\\"4\\"/></main>",
   "ids": Array [],
   "rules": Array [
     Object {
       "cssText": ".no-prefix { display: flex; justify-content: center; }",
     },
     Object {
-      "cssText": ".css-Main-ov1ktg-pvm7rn { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; }",
+      "cssText": ".css-Main-17vxl0k-1g2c78b { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; }",
     },
     Object {
       "cssText": ".css-Image-z4ry8g-1qx25bk { border-radius: 50%;
diff --git a/test/__snapshots__/styled.test.js.snap b/test/__snapshots__/styled.test.js.snap
index 2af557f0..8a6c3f0a 100644
--- a/test/__snapshots__/styled.test.js.snap
+++ b/test/__snapshots__/styled.test.js.snap
@@ -57,14 +57,14 @@ exports[`styled fragments 1`] = `
   font-size: 32px;
 }
 
-.css-H1-1qd8mfb-1mxqzi0 {
+.css-H1-1qd8mfb-1u8p6i5 {
   font-size: 20px;
   height: 64px;
   color: blue;
 }
 
 <h1
-  className="css-H1-1qd8mfb-1mxqzi0 css-H2-idm3bz-361gww legacy__class"
+  className="css-H1-1qd8mfb-1u8p6i5 css-H2-idm3bz-361gww legacy__class"
   scale={2}
 >
   hello world
@@ -89,7 +89,7 @@ exports[`styled function in expression 1`] = `
 `;
 
 exports[`styled higher order component 1`] = `
-.css-onyx-wn422p-oy3rok {
+.css-onyx-wn422p-10htdr6 {
   background-color: '#343a40';
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
@@ -104,17 +104,17 @@ exports[`styled higher order component 1`] = `
 }
 
 <div
-  className="css-Content-13wdnau-1z6hk6 css-onyx-wn422p-oy3rok"
+  className="css-Content-13wdnau-1z6hk6 css-onyx-wn422p-10htdr6"
 />
 `;
 
 exports[`styled innerRef 1`] = `
-.css-H1-dae0kw-kdrkuq {
+.css-H1-ijh7uz-10q50rl {
   font-size: 12px;
 }
 
 <h1
-  className="css-H1-dae0kw-kdrkuq"
+  className="css-H1-ijh7uz-10q50rl"
   innerRef={[Function]}
 >
   hello world
diff --git a/test/__snapshots__/vue.test.js.snap b/test/__snapshots__/vue.test.js.snap
index f081adb2..78e18d92 100644
--- a/test/__snapshots__/vue.test.js.snap
+++ b/test/__snapshots__/vue.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`vue styled based on props 1`] = `
 "
-      <div id=\\"app\\"><h1 weight=\\"bold\\" class=\\"css-BasedOnProps-1ayt7kx-wy28h4\\"></h1></div>
+      <div id=\\"app\\"><h1 weight=\\"bold\\" class=\\"css-BasedOnProps-csm9t8-1qo3zsu\\"></h1></div>
     "
 `;
 
@@ -22,7 +22,7 @@ exports[`vue styled creates the correct styles 1`] = `
   -ms-flex-align: center;
   -webkit-box-align: center;
   align-items: center;
-  position: inherit; }.css-BasedOnProps-1ayt7kx-wy28h4 { font-weight: bold; }.css-NonHtmlComponent-15287sz-1wq2ikh { background-color: purple;
+  position: inherit; }.css-BasedOnProps-csm9t8-1qo3zsu { font-weight: bold; }.css-NonHtmlComponent-15287sz-1wq2ikh { background-color: purple;
   color: green; }"
 `;
 
diff --git a/test/babel/__snapshots__/css-prop.test.js.snap b/test/babel/__snapshots__/css-prop.test.js.snap
index 41e11d30..4602904b 100644
--- a/test/babel/__snapshots__/css-prop.test.js.snap
+++ b/test/babel/__snapshots__/css-prop.test.js.snap
@@ -8,7 +8,7 @@ exports[`babel css prop StringLiteral css prop value 1`] = `
 
 exports[`babel css prop basic 1`] = `
 "import \\"./css-prop.test.emotion.css\\";
-<div className={\\"a\\" + \\" \\" + css(\\"css-jf1v9l\\", [])}></div>;"
+<div className={\\"a\\" + \\" \\" + \\"css-jf1v9l\\"}></div>;"
 `;
 
 exports[`babel css prop basic 2`] = `".css-jf1v9l { color: brown; }"`;
diff --git a/test/babel/__snapshots__/css.test.js.snap b/test/babel/__snapshots__/css.test.js.snap
index 22a3d37b..bc3dfd6a 100644
--- a/test/babel/__snapshots__/css.test.js.snap
+++ b/test/babel/__snapshots__/css.test.js.snap
@@ -23,12 +23,8 @@ exports[`babel css extract css basic 2`] = `
 
 exports[`babel css extract css kitchen sink 1`] = `
 "
-const frag = fragment([], function createEmotionFragment() {
-        return \` padding: 8px; \`;
-});
-const fragB = fragment([heightVar, frag], function createEmotionFragment(x0, x1) {
-        return \` height: \${x0};\${x1}; \`;
-});
+const frag = \`padding: 8px;\`;
+const fragB = \`height: \${heightVar};\${frag};\`;
 const cls2 = css(\\"css-cls2-1b4c3x0\\", [frag, fragB], function createEmotionRules(x0, x1) {
         return [\`.css-cls2-1b4c3x0 { \${x0};
         \${x1};
@@ -60,12 +56,8 @@ exports[`babel css inline css kitchen sink 1`] = `
 const cls = css(\\"css-cls-h5t3cu\\", [margin], function createEmotionRules(x0) {
         return [\`.css-cls-h5t3cu { font-size: 58pt;margin: \${x0}; }\`];
 });
-const frag = fragment([], function createEmotionFragment() {
-        return \` padding: 8px; \`;
-});
-const fragB = fragment([heightVar, frag], function createEmotionFragment(x0, x1) {
-        return \` height: \${x0};\${x1}; \`;
-});
+const frag = \`padding: 8px;\`;
+const fragB = \`height: \${heightVar};\${frag};\`;
 const cls2 = css(\\"css-cls2-1b4c3x0\\", [frag, fragB], function createEmotionRules(x0, x1) {
         return [\`.css-cls2-1b4c3x0 { \${x0};
         \${x1};
diff --git a/test/babel/__snapshots__/font-face.test.js.snap b/test/babel/__snapshots__/font-face.test.js.snap
index 75c2cd9e..3f286407 100644
--- a/test/babel/__snapshots__/font-face.test.js.snap
+++ b/test/babel/__snapshots__/font-face.test.js.snap
@@ -26,33 +26,27 @@ exports[`fontFace babel extract basic assign to variable 2`] = `
 
 exports[`fontFace babel extract interpolation 1`] = `
 "
-fontFace([fontFamilyName], function createEmotionFontFace(x0) {
-     return [\`@font-face {font-family: \${x0};
+fontFace([\`@font-face {font-family: \${fontFamilyName};
           src: local(\\"Helvetica Neue Bold\\"),
                local(\\"HelveticaNeue-Bold\\"),
                url(MgOpenModernaBold.ttf);
-          font-weight: bold;}\`];
-});"
+          font-weight: bold;}\`]);"
 `;
 
 exports[`fontFace babel inline basic 1`] = `
 "
-fontFace([], function createEmotionFontFace() {
-     return [\`@font-face {font-family: MyHelvetica;
+fontFace([\`@font-face {font-family: MyHelvetica;
           src: local(\\"Helvetica Neue Bold\\"),
                local(\\"HelveticaNeue-Bold\\"),
                url(MgOpenModernaBold.ttf);
-          font-weight: bold;}\`];
-});"
+          font-weight: bold;}\`]);"
 `;
 
 exports[`fontFace babel inline interpolation 1`] = `
 "
-fontFace([fontFamilyName], function createEmotionFontFace(x0) {
-     return [\`@font-face {font-family: \${x0};
+fontFace([\`@font-face {font-family: \${fontFamilyName};
           src: local(\\"Helvetica Neue Bold\\"),
                local(\\"HelveticaNeue-Bold\\"),
                url(MgOpenModernaBold.ttf);
-          font-weight: bold;}\`];
-});"
+          font-weight: bold;}\`]);"
 `;
diff --git a/test/babel/__snapshots__/fragment.test.js.snap b/test/babel/__snapshots__/fragment.test.js.snap
index 43205560..a52c7313 100644
--- a/test/babel/__snapshots__/fragment.test.js.snap
+++ b/test/babel/__snapshots__/fragment.test.js.snap
@@ -2,9 +2,7 @@
 
 exports[`babel fragment basic fragment 1`] = `
 "
-const frag = fragment([], function createEmotionFragment() {
-      return \` color: green \`;
-});
+const frag = \`color: green\`;
 styled(\\"h1\\", \\"css-u3lc8x\\", [frag], function createEmotionStyledRules(x0) {
       return [\`.css-u3lc8x { font-size: 20px; \${x0}; }\`];
 });"
@@ -12,15 +10,9 @@ styled(\\"h1\\", \\"css-u3lc8x\\", [frag], function createEmotionStyledRules(x0)
 
 exports[`babel fragment fragment kitchen sink 1`] = `
 "
-const frag = fragment([backgroundColor], function createEmotionFragment(x0) {
-      return \` color: green; background-color: \${x0} \`;
-});
-const frag1 = fragment([], function createEmotionFragment() {
-      return \` width: 20px; \`;
-});
-const frag2 = fragment([frag1], function createEmotionFragment(x0) {
-      return \` height: 20px; \${x0}; \`;
-});
+const frag = \`color: green; background-color: \${backgroundColor}\`;
+const frag1 = \`width: 20px;\`;
+const frag2 = \`height: 20px; \${frag1};\`;
 styled('h1', 'css-some-name-9k8moo', [fontSize + 'px', frag, frag2], function createEmotionStyledRules(x0, x1, x2) {
       return [\`.css-some-name-9k8moo { font-size: \${x0}; \${x1}; \${x2} }\`];
 });"
diff --git a/test/babel/__snapshots__/inject-global.test.js.snap b/test/babel/__snapshots__/inject-global.test.js.snap
index 745652b5..10f8f9e9 100644
--- a/test/babel/__snapshots__/inject-global.test.js.snap
+++ b/test/babel/__snapshots__/inject-global.test.js.snap
@@ -36,59 +36,51 @@ html {
 
 exports[`babel injectGlobal extract injectGlobal with interpolation 1`] = `
 "
-injectGlobal([display], function createEmotionGlobal(x0) {
-  return [\`body {
+injectGlobal([\`body {
             margin: 0;
             padding: 0;
-            display: \${x0};
+            display: \${display};
           }\`, \`body > div {
             display: none;
 }\`, \`html {
             background: green;
-          }\`];
-});"
+          }\`]);"
 `;
 
 exports[`babel injectGlobal inline injectGlobal basic 1`] = `
 "
-injectGlobal([], function createEmotionGlobal() {
-  return [\`body {
+injectGlobal([\`body {
             margin: 0;
             padding: 0;
           }\`, \`body > div {
             display: none;
 }\`, \`html {
             background: green;
-          }\`];
-});"
+          }\`]);"
 `;
 
 exports[`babel injectGlobal inline injectGlobal with fragment 1`] = `
 "
-injectGlobal([display, htmlStyled], function createEmotionGlobal(x0, x1) {
-  return [\`body {
+injectGlobal([\`body {
             margin: 0;
             padding: 0;
-            display: \${x0};
+            display: \${display};
           }\`, \`body > div {
             display: none;
 }\`, \`html {
-            \${x1}
-          }\`];
-});"
+            \${htmlStyled}
+          }\`]);"
 `;
 
 exports[`babel injectGlobal inline injectGlobal with interpolation 1`] = `
 "
-injectGlobal([display], function createEmotionGlobal(x0) {
-  return [\`body {
+injectGlobal([\`body {
             margin: 0;
             padding: 0;
-            display: \${x0};
+            display: \${display};
           }\`, \`body > div {
             display: none;
 }\`, \`html {
             background: green;
-          }\`];
-});"
+          }\`]);"
 `;
diff --git a/test/babel/__snapshots__/keyframes.test.js.snap b/test/babel/__snapshots__/keyframes.test.js.snap
index a03e7673..cf15a069 100644
--- a/test/babel/__snapshots__/keyframes.test.js.snap
+++ b/test/babel/__snapshots__/keyframes.test.js.snap
@@ -22,25 +22,22 @@ exports[`babel keyframes extract keyframes basic 2`] = `
 
 exports[`babel keyframes extract keyframes with interpolation 1`] = `
 "
-const rotate360 = keyframes(\\"animation-rotate360-9bsj7q\\", [endingRotation], function createEmotionKeyframes(x0) {
-  return [\`{ from {
+const rotate360 = keyframes(\\"animation-rotate360-9bsj7q\\", [\`{ from {
             -webkit-transform: rotate(0deg);
             -ms-transform: rotate(0deg);
             transform: rotate(0deg);
           }
         
           to {
-            -webkit-transform: rotate(\${x0});
-            -ms-transform: rotate(\${x0});
-            transform: rotate(\${x0});
-          } }\`];
-});"
+            -webkit-transform: rotate(\${endingRotation});
+            -ms-transform: rotate(\${endingRotation});
+            transform: rotate(\${endingRotation});
+          } }\`]);"
 `;
 
 exports[`babel keyframes inline keyframes basic 1`] = `
 "
-const rotate360 = keyframes(\\"animation-rotate360-10gy9ar\\", [], function createEmotionKeyframes() {
-  return [\`{ from {
+const rotate360 = keyframes(\\"animation-rotate360-10gy9ar\\", [\`{ from {
             -webkit-transform: rotate(0deg);
             -ms-transform: rotate(0deg);
             transform: rotate(0deg);
@@ -49,39 +46,34 @@ const rotate360 = keyframes(\\"animation-rotate360-10gy9ar\\", [], function crea
             -webkit-transform: rotate(360deg);
             -ms-transform: rotate(360deg);
             transform: rotate(360deg);
-          } }\`];
-});"
+          } }\`]);"
 `;
 
 exports[`babel keyframes inline keyframes with fragment 1`] = `
 "
-const rotate360 = keyframes(\\"animation-rotate360-b0ufjw\\", [endingRotation, frag1], function createEmotionKeyframes(x0, x1) {
-  return [\`{ from {
+const rotate360 = keyframes(\\"animation-rotate360-b0ufjw\\", [\`{ from {
             -webkit-transform: rotate(0deg);
             -ms-transform: rotate(0deg);
             transform: rotate(0deg);
           }
           to {
-            -webkit-transform: rotate(\${x0});
-            -ms-transform: rotate(\${x0});
-            transform: rotate(\${x0});
-            \${x1}
-          } }\`];
-});"
+            -webkit-transform: rotate(\${endingRotation});
+            -ms-transform: rotate(\${endingRotation});
+            transform: rotate(\${endingRotation});
+            \${frag1}
+          } }\`]);"
 `;
 
 exports[`babel keyframes inline keyframes with interpolation 1`] = `
 "
-const rotate360 = keyframes(\\"animation-rotate360-r2494l\\", [endingRotation], function createEmotionKeyframes(x0) {
-  return [\`{ from {
+const rotate360 = keyframes(\\"animation-rotate360-r2494l\\", [\`{ from {
             -webkit-transform: rotate(0deg);
             -ms-transform: rotate(0deg);
             transform: rotate(0deg);
           }
           to {
-            -webkit-transform: rotate(\${x0});
-            -ms-transform: rotate(\${x0});
-            transform: rotate(\${x0});
-          } }\`];
-});"
+            -webkit-transform: rotate(\${endingRotation});
+            -ms-transform: rotate(\${endingRotation});
+            transform: rotate(\${endingRotation});
+          } }\`]);"
 `;
diff --git a/test/babel/__snapshots__/styled.test.js.snap b/test/babel/__snapshots__/styled.test.js.snap
index 4c275c2d..da119ba5 100644
--- a/test/babel/__snapshots__/styled.test.js.snap
+++ b/test/babel/__snapshots__/styled.test.js.snap
@@ -24,9 +24,7 @@ exports[`babel styled component extract no dynamic 2`] = `".css-14ksm7b { color:
 exports[`babel styled component extract no use 1`] = `"\\"h1\\";"`;
 
 exports[`babel styled component extract with fragment 1`] = `
-"const frag1 = fragment([], function createEmotionFragment() {
-  return \` width: 20px; \`;
-});
+"const frag1 = \`width: 20px;\`;
 const H1 = styled('h1', 'css-H1-osx1au', [fontSize + 'px', props => props.translateX, frag1], function createEmotionStyledRules(x0, x1, x2) {
   return [\`.css-H1-osx1au { font-size: \${x0};
         height: 20px;
diff --git a/test/css-prop.test.js b/test/css-prop.test.js
index 95bb2504..7bc8e5e5 100644
--- a/test/css-prop.test.js
+++ b/test/css-prop.test.js
@@ -14,11 +14,7 @@ describe('css prop react', () => {
   test('basic', () => {
     const fontSize = '1px'
     const tree = renderer
-      .create(
-        <p css={`color: red;font-size:${fontSize}`}>
-          hello world
-        </p>
-      )
+      .create(<p css={`color: red;font-size:${fontSize}`}>hello world</p>)
       .toJSON()
 
     expect(tree).toMatchSnapshotWithEmotion()
@@ -27,9 +23,7 @@ describe('css prop react', () => {
   test('string expression', () => {
     const tree = renderer
       .create(
-        <p css="color:red;background:blue;font-size:48px;">
-          hello world
-        </p>
+        <p css="color:red;background:blue;font-size:48px;">hello world</p>
       )
       .toJSON()
 
@@ -74,7 +68,9 @@ describe('css prop react', () => {
           >
             BOOM
           </h1>
-          <p className="test_class1" css={`color: blue;`}>Hello</p>
+          <p className="test_class1" css={`color: blue;`}>
+            Hello
+          </p>
           <p
             className="test_class1 test___class45"
             css={`display: inline-flex`}
@@ -93,7 +89,6 @@ describe('css prop react', () => {
           >
             hello world
           </p>
-
         </div>
       )
       .toJSON()
diff --git a/test/extract/__snapshots__/extract.test.js.snap b/test/extract/__snapshots__/extract.test.js.snap
index 4c675095..aaa515e2 100644
--- a/test/extract/__snapshots__/extract.test.js.snap
+++ b/test/extract/__snapshots__/extract.test.js.snap
@@ -53,14 +53,14 @@ exports[`styled composition 1`] = `
 `;
 
 exports[`styled fragments 1`] = `
-.css-H1-1qd8mfb-1mxqzi0 {
+.css-H1-1qd8mfb-1u8p6i5 {
   font-size: 20px;
   height: 64px;
   color: blue;
 }
 
 <h1
-  className="css-H1-1qd8mfb-1mxqzi0 css-H2-idm3bz legacy__class"
+  className="css-H1-1qd8mfb-1u8p6i5 css-H2-idm3bz legacy__class"
   scale={2}
 >
   hello world
@@ -85,7 +85,7 @@ exports[`styled function in expression 1`] = `
 `;
 
 exports[`styled higher order component 1`] = `
-.css-onyx-wn422p-oy3rok {
+.css-onyx-wn422p-10htdr6 {
   background-color: '#343a40';
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
@@ -100,7 +100,7 @@ exports[`styled higher order component 1`] = `
 }
 
 <div
-  className="css-Content-13wdnau vars-1x8swp css-onyx-wn422p-oy3rok"
+  className="css-Content-13wdnau vars-1x8swp css-onyx-wn422p-10htdr6"
 />
 `;
 
@@ -140,5 +140,8 @@ exports[`styled writes the correct css 1`] = `
 .css-Content-13wdnau { font-size: var(--css-Content-13wdnau-0)px; }
 html {
         background: pink;
-      }"
+      }
+.css-14yvnlz { font-family: sans-serif;
+      color: yellow;
+      background-color: purple; }"
 `;
diff --git a/test/extract/extract.test.emotion.css b/test/extract/extract.test.emotion.css
index 90ce6709..3e24291b 100644
--- a/test/extract/extract.test.emotion.css
+++ b/test/extract/extract.test.emotion.css
@@ -13,4 +13,7 @@
 .css-Content-13wdnau { font-size: var(--css-Content-13wdnau-0)px; }
 html {
         background: pink;
-      }
\ No newline at end of file
+      }
+.css-14yvnlz { font-family: sans-serif;
+      color: yellow;
+      background-color: purple; }
\ No newline at end of file
diff --git a/test/extract/extract.test.js b/test/extract/extract.test.js
index e9270bfe..365ee3ba 100644
--- a/test/extract/extract.test.js
+++ b/test/extract/extract.test.js
@@ -4,7 +4,7 @@ import React from 'react'
 import renderer from 'react-test-renderer'
 import { basename } from 'path'
 import { matcher, serializer } from '../../jest-utils'
-import { fragment, injectGlobal } from '../../src/index'
+import { fragment, injectGlobal, css } from '../../src/index'
 import styled from '../../src/styled'
 
 expect.addSnapshotSerializer(serializer)
@@ -173,6 +173,13 @@ describe('styled', () => {
       }
     `
   })
+  test('css', () => {
+    expect(css`
+      font-family: sans-serif;
+      color: yellow;
+      background-color: purple;
+    `)
+  })
   test('writes the correct css', () => {
     const filenameArr = basename(__filename).split('.')
     filenameArr.pop()
diff --git a/test/server.test.js b/test/server.test.js
index ccbca1a1..620ffa57 100644
--- a/test/server.test.js
+++ b/test/server.test.js
@@ -10,9 +10,7 @@ import { renderStatic, renderStaticOptimized } from '../src/server'
 
 const color = 'red'
 
-const Main = styled.main`
-  display: flex;
-`
+const Main = styled.main`display: flex;`
 
 const Image = styled.img`
   border-radius: 50%;
@@ -31,7 +29,12 @@ css`
 
 sheet.insert('.no-prefix { display: flex; justify-content: center; }')
 
-const Page = () => <Main><Image size={30} /><Image size={100} /><Image /></Main>
+const Page = () =>
+  <Main>
+    <Image size={30} />
+    <Image size={100} />
+    <Image />
+  </Main>
 
 describe('server', () => {
   describe('renderStatic', () => {
@@ -44,10 +47,14 @@ describe('server', () => {
   })
   describe('renderStaticOptimized', () => {
     test('returns static css', () => {
-      expect(renderStaticOptimized(() => renderToString(<Page />))).toMatchSnapshot()
+      expect(
+        renderStaticOptimized(() => renderToString(<Page />))
+      ).toMatchSnapshot()
     })
     test('throws if the fn does not return anything', () => {
-      expect(() => renderStaticOptimized(() => {})).toThrowErrorMatchingSnapshot()
+      expect(() =>
+        renderStaticOptimized(() => {})
+      ).toThrowErrorMatchingSnapshot()
     })
   })
 })
diff --git a/test/styled.test.js b/test/styled.test.js
index f755d791..51f7c4bf 100644
--- a/test/styled.test.js
+++ b/test/styled.test.js
@@ -138,18 +138,12 @@ describe('styled', () => {
   })
 
   test('innerRef', () => {
-    const H1 = styled.h1`
-      font-size: 12px;
-    `
+    const H1 = styled.h1`font-size: 12px;`
 
     const refFunction = jest.fn()
 
     const tree = renderer
-      .create(
-        <H1 innerRef={refFunction}>
-          hello world
-        </H1>
-      )
+      .create(<H1 innerRef={refFunction}>hello world</H1>)
       .toJSON()
 
     expect(tree).toMatchSnapshotWithEmotion()
diff --git a/test/vue.test.js b/test/vue.test.js
index f1009207..1eedee29 100644
--- a/test/vue.test.js
+++ b/test/vue.test.js
@@ -13,13 +13,16 @@ const StyledComponent = styled.div`
   position: ${inherit};
 `
 
-const BasedOnProps = styled.h1`
-  font-weight: ${(props) => props.weight}; 
-`
+const BasedOnProps = styled.h1`font-weight: ${props => props.weight};`
 
 const baseComponent = {
   render (h) {
-    return h('div', {}, [h('div'), h('div'), h('h1', {}, 'some text'), h('div')])
+    return h('div', {}, [
+      h('div'),
+      h('div'),
+      h('h1', {}, 'some text'),
+      h('div')
+    ])
   }
 }