Random object interpolations (#221)

* Allow random object interpolations

* Add composes on nested selectors error and prettier on tests

* Update snapshots

src/ast-object.js

@@ -189,7 +189,7 @@ export default class ASTObject {
     const templateExpressions = []
     let cursor = 0
     // not sure how to detect when to add 'px'
-    // let hasSingleInterpolation = false
+    let hasSingleInterpolation = false
     forEach(matches, ({ value, p1, index }, i) => {
       const preMatch = str.substring(cursor, index)
       cursor = cursor + preMatch.length + value.length
@@ -200,9 +200,9 @@ export default class ASTObject {
       } else if (i === 0) {
         templateElements.push(t.templateElement({ raw: '', cooked: '' }))
       }
-      // if (value === str) {
-      // hasSingleInterpolation = true
-      // }
+      if (value === str) {
+        hasSingleInterpolation = true
+      }
 
       templateExpressions.push(
         expressions.length
@@ -221,9 +221,9 @@ export default class ASTObject {
         )
       }
     })
-    // if (hasSingleInterpolation) {
-    //   return templateExpressions[0]
-    // }
+    if (hasSingleInterpolation) {
+      return templateExpressions[0]
+    }
     return t.templateLiteral(templateElements, templateExpressions)
   }
 

src/babel.js

@@ -44,10 +44,7 @@ export function replaceCssWithCallExpression (
       if (!removePath) {
         return path.replaceWith(t.stringLiteral(`${name}-${hash}`))
       }
-
-      path.replaceWith(t.identifier('undefined'))
-
-      return
+      return path.replaceWith(t.identifier('undefined'))
     }
 
     const { styles, composesCount } = parseCSS(src, false, getFilename(path))

src/index.js

@@ -245,11 +245,23 @@ function deconstruct (style) {
     } else if (key.indexOf('@supports') === 0) {
       supports = supports || {}
       supports[key] = deconstruct(style[key])
-    } else if (key.indexOf('css-') === 0) {
-      // replace fragments
+    } else if (key.indexOf('$') === 0) {
+      const fragment = style[key]
       plain = plain || {}
-      const registeredStyles = registered[key.split('css-')[1]].style
-      assign(plain, registeredStyles)
+
+      if (typeof fragment === 'object') {
+        assign(plain, fragment)
+      } else if (typeof fragment === 'string') {
+        const match = emotionClassRegex.exec(fragment)
+        if (match !== null && registered[match[1]]) {
+          // replace fragments
+          const reg = registered[match[1]]
+          if (reg.type !== 'css') {
+            throw new Error('cannot merge this rule')
+          }
+          assign(plain, reg.style)
+        }
+      }
     } else {
       plain = plain || {}
 
@@ -400,10 +412,6 @@ function build (
     }
 
     forEach(keys(_src || {}), key => {
-      if (key === 'undefined') {
-        // drop undefined fragment results
-        return
-      }
       if (isSelector(key)) {
         build(dest, {
           selector: joinSelectors(selector, key),

src/parser.js

@@ -1,7 +1,7 @@
 // @flow
 import Input from 'postcss/lib/input'
 import Declaration from 'postcss/lib/declaration'
-import SafeParser from 'postcss-safe-parser/lib/safe-parser'
+import Parser from 'postcss/lib/parser'
 import postcssNested from 'postcss-nested'
 import postcssJs from 'postcss-js'
 import objParse from 'postcss-js/parser'
@@ -31,7 +31,7 @@ export function parseCSS (
   if (typeof css === 'object') {
     root = objParse(css, { from: filename })
   } else {
-    root = safeParse(css, { from: filename })
+    root = parse(css, { from: filename })
   }
   let vars = 0
   let composes: number = 0
@@ -44,6 +44,9 @@ export function parseCSS (
       if (decl.parent.nodes[0] !== decl) {
         throw new Error('composes must be the first rule')
       }
+      if (decl.parent.type !== 'root') {
+        throw new Error('composes cannot be on nested selectors')
+      }
       const composeMatches = decl.value.match(/xxx(\d+)xxx/gm)
       const numOfComposes: number = !composeMatches ? 0 : composeMatches.length
       composes += numOfComposes
@@ -87,22 +90,23 @@ export function expandCSSFallbacks (style: { [string]: any }) {
 }
 
 // Parser
-export function safeParse (css, opts) {
+export function parse (css, opts) {
   let input = new Input(css, opts)
 
-  let parser = new EmotionSafeParser(input)
+  let parser = new EmotionParser(input)
   parser.parse()
 
   return parser.root
 }
 
-export class EmotionSafeParser extends SafeParser {
+export class EmotionParser extends Parser {
   unknownWord (tokens: Array<Array<any>>) {
     if (tokens[0][0] === 'word') {
-      if (/xxx(\d+)xxx/gm.exec(tokens[0][1])) {
+      const match = /xxx(\d+)xxx/gm.exec(tokens[0][1])
+      if (match) {
         this.init(
           new Declaration(
-            { prop: tokens[0][1], value: 'fragment' },
+            { prop: `$${match[1]}`, value: tokens[0][1] },
             tokens[0][2],
             tokens[0][3]
           )

test/__snapshots__/react.test.js.snap

@@ -297,7 +297,6 @@ exports[`styled handles more than 10 dynamic properties 1`] = `
   z-index: 100;
   font-size: 18px;
   text-align: center;
-  border-left: undefined;
 }
 
 <h1
@@ -310,7 +309,6 @@ exports[`styled handles more than 10 dynamic properties 1`] = `
 exports[`styled higher order component 1`] = `
 .glamor-1 {
   font-size: 20px;
-  name: onyx;
   background-color: '#343a40';
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
@@ -379,19 +377,6 @@ exports[`styled input placeholder object 1`] = `
 </input>
 `;
 
-exports[`styled name 1`] = `
-.glamor-1 {
-  name: FancyH1;
-  font-size: 20px;
-}
-
-<h1
-  className="glamor-0 glamor-1"
->
-  hello world
-</h1>
-`;
-
 exports[`styled nested 1`] = `
 .glamor-1 {
   font-size: 20px;
@@ -488,9 +473,9 @@ exports[`styled objects with spread properties 1`] = `
 exports[`styled random expressions 1`] = `
 .glamor-1 {
   font-size: 1rem;
-  margin-top: 0px;
+  margin-top: 0;
   margin-right: auto;
-  margin-bottom: 0px;
+  margin-bottom: 0;
   margin-left: auto;
   color: green;
 }
@@ -515,6 +500,25 @@ exports[`styled random expressions undefined return 1`] = `
 </h1>
 `;
 
+exports[`styled random object expression 1`] = `
+.glamor-1 {
+  background-color: hotpink;
+  font-size: 1rem;
+  margin-top: 0;
+  margin-right: auto;
+  margin-bottom: 0;
+  margin-left: auto;
+  color: green;
+}
+
+<h1
+  className="glamor-0 legacy__class glamor-1"
+  prop={true}
+>
+  hello world
+</h1>
+`;
+
 exports[`styled themes 1`] = `
 .glamor-1 {
   background-color: #ffd43b;

test/__snapshots__/server.test.js.snap

@@ -3,7 +3,7 @@
 exports[`extractCritical returns static css 1`] = `
 Object {
   "css": "@font-face{font-family:'Patrick Hand SC';font-style:normal;font-weight:400;src:local('Patrick Hand SC'), local('PatrickHandSC-Regular'), url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');unicode-range:U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;}@-webkit-keyframes animation_7jdctn{from, 20%, 53%, 80%, to {-webkit-animation-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000);animation-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}40%, 43% {-webkit-animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);-webkit-transform:translate3d(0, -30px, 0);transform:translate3d(0, -30px, 0);}70% {-webkit-animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);-webkit-transform:translate3d(0, -15px, 0);transform:translate3d(0, -15px, 0);}90% {-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0);}}@keyframes animation_7jdctn{from, 20%, 53%, 80%, to {-webkit-animation-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000);animation-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}40%, 43% {-webkit-animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);-webkit-transform:translate3d(0, -30px, 0);transform:translate3d(0, -30px, 0);}70% {-webkit-animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);-webkit-transform:translate3d(0, -15px, 0);transform:translate3d(0, -15px, 0);}90% {-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0);}}.no-prefix {display:-webkit-box; display: -ms-flexbox; display: flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;}.css-1kjabrg{color:hotpink;display:-webkit-box; display: -ms-flexbox; display: flex;}.css-1kjabrg:hover{color:white;background-color:lightgray;border-color:aqua;-webkit-box-shadow:-15px -15px 0 0 aqua, -30px -30px 0 0 cornflowerblue;box-shadow:-15px -15px 0 0 aqua, -30px -30px 0 0 cornflowerblue;}.css-1j6ha19{-webkit-animation:animation_7jdctn;animation:animation_7jdctn;border-radius:50%;height:50px;width:50px;background-color:red;}",
-  "html": "<main class=\\"css-fcaqzd0 css-1kjabrg\\" data-reactroot=\\"\\" data-reactid=\\"1\\" data-react-checksum=\\"-997632446\\"><img size=\\"30\\" class=\\"css-fcaqzd1 css-1j6ha19\\" data-reactid=\\"2\\"/><img size=\\"100\\" class=\\"css-fcaqzd1 css-1j6ha19\\" data-reactid=\\"3\\"/><img class=\\"css-fcaqzd1 css-1j6ha19\\" data-reactid=\\"4\\"/></main>",
+  "html": "<main class=\\"css-pcr4x20 css-1kjabrg\\" data-reactroot=\\"\\" data-reactid=\\"1\\" data-react-checksum=\\"230905066\\"><img size=\\"30\\" class=\\"css-pcr4x21 css-1j6ha19\\" data-reactid=\\"2\\"/><img size=\\"100\\" class=\\"css-pcr4x21 css-1j6ha19\\" data-reactid=\\"3\\"/><img class=\\"css-pcr4x21 css-1j6ha19\\" data-reactid=\\"4\\"/></main>",
   "ids": Array [
     "1vx6krt",
     "7jdctn",
@@ -40,7 +40,7 @@ Object {
 exports[`extractCritical returns static css 2`] = `
 Object {
   "css": "@font-face{font-family:'Patrick Hand SC';font-style:normal;font-weight:400;src:local('Patrick Hand SC'), local('PatrickHandSC-Regular'), url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');unicode-range:U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;}@-webkit-keyframes animation_7jdctn{from, 20%, 53%, 80%, to {-webkit-animation-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000);animation-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}40%, 43% {-webkit-animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);-webkit-transform:translate3d(0, -30px, 0);transform:translate3d(0, -30px, 0);}70% {-webkit-animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);-webkit-transform:translate3d(0, -15px, 0);transform:translate3d(0, -15px, 0);}90% {-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0);}}@keyframes animation_7jdctn{from, 20%, 53%, 80%, to {-webkit-animation-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000);animation-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}40%, 43% {-webkit-animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);-webkit-transform:translate3d(0, -30px, 0);transform:translate3d(0, -30px, 0);}70% {-webkit-animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);-webkit-transform:translate3d(0, -15px, 0);transform:translate3d(0, -15px, 0);}90% {-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0);}}.no-prefix {display:-webkit-box; display: -ms-flexbox; display: flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;}.css-1kjabrg{color:hotpink;display:-webkit-box; display: -ms-flexbox; display: flex;}.css-1kjabrg:hover{color:white;background-color:lightgray;border-color:aqua;-webkit-box-shadow:-15px -15px 0 0 aqua, -30px -30px 0 0 cornflowerblue;box-shadow:-15px -15px 0 0 aqua, -30px -30px 0 0 cornflowerblue;}",
-  "html": "<main class=\\"css-fcaqzd0 css-1kjabrg\\" data-reactroot=\\"\\" data-reactid=\\"1\\" data-react-checksum=\\"-1456331201\\"><div data-reactid=\\"2\\">Hello</div></main>",
+  "html": "<main class=\\"css-pcr4x20 css-1kjabrg\\" data-reactroot=\\"\\" data-reactid=\\"1\\" data-react-checksum=\\"-1970723351\\"><div data-reactid=\\"2\\">Hello</div></main>",
   "ids": Array [
     "1vx6krt",
     "7jdctn",
@@ -73,7 +73,7 @@ Object {
 exports[`hydration only rules that are not in the critical css are inserted 1`] = `
 Object {
   "css": "@font-face{font-family:'Patrick Hand SC';font-style:normal;font-weight:400;src:local('Patrick Hand SC'), local('PatrickHandSC-Regular'), url(https://fonts.gstatic.com/s/patrickhandsc/v4/OYFWCgfCR-7uHIovjUZXsZ71Uis0Qeb9Gqo8IZV7ckE.woff2) format('woff2');unicode-range:U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;}@-webkit-keyframes animation_7jdctn{from, 20%, 53%, 80%, to {-webkit-animation-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000);animation-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}40%, 43% {-webkit-animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);-webkit-transform:translate3d(0, -30px, 0);transform:translate3d(0, -30px, 0);}70% {-webkit-animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);-webkit-transform:translate3d(0, -15px, 0);transform:translate3d(0, -15px, 0);}90% {-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0);}}@keyframes animation_7jdctn{from, 20%, 53%, 80%, to {-webkit-animation-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000);animation-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}40%, 43% {-webkit-animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);-webkit-transform:translate3d(0, -30px, 0);transform:translate3d(0, -30px, 0);}70% {-webkit-animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);-webkit-transform:translate3d(0, -15px, 0);transform:translate3d(0, -15px, 0);}90% {-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0);}}.no-prefix {display:-webkit-box; display: -ms-flexbox; display: flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;}.css-1kjabrg{color:hotpink;display:-webkit-box; display: -ms-flexbox; display: flex;}.css-1kjabrg:hover{color:white;background-color:lightgray;border-color:aqua;-webkit-box-shadow:-15px -15px 0 0 aqua, -30px -30px 0 0 cornflowerblue;box-shadow:-15px -15px 0 0 aqua, -30px -30px 0 0 cornflowerblue;}.css-1j6ha19{-webkit-animation:animation_7jdctn;animation:animation_7jdctn;border-radius:50%;height:50px;width:50px;background-color:red;}",
-  "html": "<main class=\\"css-fcaqzd0 css-1kjabrg\\" data-reactroot=\\"\\" data-reactid=\\"1\\" data-react-checksum=\\"-997632446\\"><img size=\\"30\\" class=\\"css-fcaqzd1 css-1j6ha19\\" data-reactid=\\"2\\"/><img size=\\"100\\" class=\\"css-fcaqzd1 css-1j6ha19\\" data-reactid=\\"3\\"/><img class=\\"css-fcaqzd1 css-1j6ha19\\" data-reactid=\\"4\\"/></main>",
+  "html": "<main class=\\"css-pcr4x20 css-1kjabrg\\" data-reactroot=\\"\\" data-reactid=\\"1\\" data-react-checksum=\\"230905066\\"><img size=\\"30\\" class=\\"css-pcr4x21 css-1j6ha19\\" data-reactid=\\"2\\"/><img size=\\"100\\" class=\\"css-pcr4x21 css-1j6ha19\\" data-reactid=\\"3\\"/><img class=\\"css-pcr4x21 css-1j6ha19\\" data-reactid=\\"4\\"/></main>",
   "ids": Array [
     "1vx6krt",
     "7jdctn",

test/babel/__snapshots__/css-prop.test.js.snap

@@ -64,7 +64,7 @@ exports[`babel css prop dynamic inline 1`] = `
 "import { css as _css } from \\"emotion\\";
 <div className={\\"a\\" + \\" \\" + /*#__PURE__*/_css([], [color], function createEmotionStyledRules(x0) {
   return [{
-    \\"color\\": \`\${x0}\`
+    \\"color\\": x0
   }];
 })}></div>;"
 `;

test/babel/__snapshots__/css.test.js.snap

@@ -10,14 +10,14 @@ exports[`babel css extract composes 1`] = `
 "import './css.test.emotion.css';
 
 const cls1 = 'css-cls1-1q8jsgx';
-const cls2 = /*#__PURE__*/css([['one-class', 'another-class', cls1]], ['center'], function createEmotionStyledRules(x0) {
+const cls2 = /*#__PURE__*/css(['one-class', 'another-class', cls1], ['center'], function createEmotionStyledRules(x0) {
   return [{
     'WebkitBoxPack': 'center',
     'msFlexPack': 'center',
     'justifyContent': 'center',
-    'WebkitBoxAlign': \`\${x0}\`,
-    'msFlexAlign': \`\${x0}\`,
-    'alignItems': \`\${x0}\`
+    'WebkitBoxAlign': x0,
+    'msFlexAlign': x0,
+    'alignItems': x0
   }];
 });"
 `;
@@ -102,7 +102,7 @@ css([{
   'borderRadius': '50%',
   'WebkitBoxSizing': 'border-box',
   'boxSizing': 'border-box',
-  [\`\${display}\`]: 'flex',
+  [display]: 'flex',
   ':hover': {
     'WebkitTransform': 'scale(1.2)',
     'transform': 'scale(1.2)'
@@ -216,7 +216,7 @@ const cls2 = css([{
   'WebkitBoxFlex': '1',
   'msFlex': '1',
   'flex': '1',
-  'alignItems': \`\${'center'}\`
+  'alignItems': 'center'
 }, {
   'WebkitBoxPack': 'start',
   'msFlexPack': 'start',
@@ -236,9 +236,9 @@ const cls2 = /*#__PURE__*/css(['one-class', 'another-class', cls1], ['center'],
     'WebkitBoxPack': 'center',
     'msFlexPack': 'center',
     'justifyContent': 'center',
-    'WebkitBoxAlign': \`\${x0}\`,
-    'msFlexAlign': \`\${x0}\`,
-    'alignItems': \`\${x0}\`
+    'WebkitBoxAlign': x0,
+    'msFlexAlign': x0,
+    'alignItems': x0
   }];
 });"
 `;
@@ -256,7 +256,7 @@ exports[`babel css inline css basic 1`] = `
     \\"@media (min-width: 420px)\\": {
       \\"lineHeight\\": \\"40px\\"
     },
-    \\"width\\": \`\${x0}\`
+    \\"width\\": x0
   }];
 });"
 `;
@@ -267,15 +267,16 @@ exports[`babel css inline css random expression 1`] = `
     \\"width\\": \\"96px\\",
     \\"height\\": \\"96px\\"
   }];
-})], function createEmotionStyledRules(x0) {
+}), { backgroundColor: \\"hotpink\\" }], function createEmotionStyledRules(x0, x1) {
   return [{
     \\"fontSize\\": \\"20px\\",
     \\"@media (min-width: 420px)\\": {
       \\"color\\": \\"blue\\",
-      [\`\${x0}\`]: \\"fragment\\",
+      \\"$0\\": x0,
       \\"lineHeight\\": \\"26px\\"
     },
-    \\"background\\": \\"green\\"
+    \\"background\\": \\"green\\",
+    \\"$1\\": x1
   }];
 });"
 `;
@@ -286,7 +287,7 @@ const cls2 = /*#__PURE__*/css([], [className], function createEmotionStyledRules
   return [{
     \\"margin\\": \\"12px 48px\\",
     \\"color\\": \\"#ffffff\\",
-    [\`\${x0}\`]: {
+    [x0]: {
       \\"display\\": \\"none\\"
     }
   }];
@@ -300,9 +301,9 @@ const cls2 = /*#__PURE__*/css(['one-class', 'another-class', 'another-class', 'a
     'WebkitBoxPack': 'center',
     'msFlexPack': 'center',
     'justifyContent': 'center',
-    'WebkitBoxAlign': \`\${x0}\`,
-    'msFlexAlign': \`\${x0}\`,
-    'alignItems': \`\${x0}\`
+    'WebkitBoxAlign': x0,
+    'msFlexAlign': x0,
+    'alignItems': x0
   }];
 });"
 `;
@@ -326,7 +327,7 @@ const cls2 = css({
   'WebkitBoxFlex': '1',
   'msFlex': '1',
   'flex': '1',
-  'alignItems': \`\${'center'}\`
+  'alignItems': 'center'
 });"
 `;
 

test/babel/__snapshots__/font-face.test.js.snap

@@ -36,7 +36,7 @@ exports[`fontFace babel extract interpolation 1`] = `
 "
 fontFace([], [fontFamilyName], function createEmotionStyledRules(x0) {
      return [{
-          \\"fontFamily\\": \`\${x0}\`,
+          \\"fontFamily\\": x0,
           \\"src\\": \\"local(\\\\\\"Helvetica Neue Bold\\\\\\"),\\\\n               local(\\\\\\"HelveticaNeue-Bold\\\\\\"),\\\\n               url(MgOpenModernaBold.ttf)\\",
           \\"fontWeight\\": \\"bold\\"
      }];
@@ -58,7 +58,7 @@ exports[`fontFace babel inline interpolation 1`] = `
 "
 fontFace([], [fontFamilyName], function createEmotionStyledRules(x0) {
      return [{
-          \\"fontFamily\\": \`\${x0}\`,
+          \\"fontFamily\\": x0,
           \\"src\\": \\"local(\\\\\\"Helvetica Neue Bold\\\\\\"),\\\\n               local(\\\\\\"HelveticaNeue-Bold\\\\\\"),\\\\n               url(MgOpenModernaBold.ttf)\\",
           \\"fontWeight\\": \\"bold\\"
      }];