Add support for object arguments in css prop with source maps

emotion-js · emmatown · Sep 25, 2017 · Sep 24, 2017 · Sep 24, 2017 · Sep 24, 2017
commit 0b6726fd8ac43d618c11940a6f53c55a0f9a56fb
diff --git a/packages/babel-plugin-emotion/src/css-prop.js b/packages/babel-plugin-emotion/src/css-prop.js
@@ -1,3 +1,5 @@
+import { addSourceMaps } from './source-map'
+
 export default function(path, state, t) {
   let cssPath
   let classNamesPath
@@ -45,7 +47,13 @@ export default function(path, state, t) {
       )
     )
   } else {
-    cssTemplateExpression = t.callExpression(getCssIdentifer(), [cssPropValue])
+    const args = state.opts.sourceMap
+      ? [
+          cssPropValue,
+          t.stringLiteral(addSourceMaps(path.node.loc.start, state))
+        ]
+      : [cssPropValue]
+    cssTemplateExpression = t.callExpression(getCssIdentifer(), args)
   }
   if (
     !classNamesValue ||

diff --git a/packages/babel-plugin-emotion/src/index.js b/packages/babel-plugin-emotion/src/index.js
@@ -56,7 +56,7 @@ export function replaceCssWithCallExpression(
       path.addComment('leading', '#__PURE__')
     }
     if (state.opts.sourceMap === true && path.node.quasi.loc !== undefined) {
-      src = src + addSourceMaps(path.node.quasi.loc.start, state)
+      src += addSourceMaps(path.node.quasi.loc.start, state)
     }
 
     return path.replaceWith(
@@ -174,7 +174,7 @@ export function buildStyledCallExpression(identifier, tag, path, state, t) {
   path.addComment('leading', '#__PURE__')
 
   if (state.opts.sourceMap === true && path.node.quasi.loc !== undefined) {
-    src = src + addSourceMaps(path.node.quasi.loc.start, state)
+    src += addSourceMaps(path.node.quasi.loc.start, state)
   }
   return t.callExpression(
     t.callExpression(identifier, [

diff --git a/packages/babel-plugin-emotion/test/__snapshots__/source-map.test.js.snap b/packages/babel-plugin-emotion/test/__snapshots__/source-map.test.js.snap
@@ -6,6 +6,14 @@ exports[`source maps css prop 1`] = `
 <div className={/*#__PURE__*/_css(\\"width:128px;height:128px;background-color:#8c81d8;border-radius:4px;& img{width:96px;height:96px;border-radius:50%;transition:all 400ms ease-in-out;&:hover{transform:scale(1.2);}}/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNpdGUuc291cmNlLW1hcC50ZXN0LmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVXIiwiZmlsZSI6InNpdGUuc291cmNlLW1hcC50ZXN0LmpzIiwic291cmNlc0NvbnRlbnQiOlsiXG4gICAgPGRpdlxuICAgICAgY3NzPXtgXG4gICAgICAgIHdpZHRoOiAxMjhweDtcbiAgICAgICAgaGVpZ2h0OiAxMjhweDtcbiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogIzhjODFkODtcbiAgICAgICAgYm9yZGVyLXJhZGl1czogNHB4O1xuICBcbiAgICAgICAgJiBpbWcge1xuICAgICAgICAgIHdpZHRoOiA5NnB4O1xuICAgICAgICAgIGhlaWdodDogOTZweDtcbiAgICAgICAgICBib3JkZXItcmFkaXVzOiA1MCU7XG4gICAgICAgICAgdHJhbnNpdGlvbjogYWxsIDQwMG1zIGVhc2UtaW4tb3V0O1xuICBcbiAgICAgICAgICAmOmhvdmVyIHtcbiAgICAgICAgICAgIHRyYW5zZm9ybTogc2NhbGUoMS4yKTtcbiAgICAgICAgICB9XG4gICAgICAgIH1cbiAgICAgIGB9XG4gICAgLz5cbiAgIl19 */\\\\n/*@ sourceURL=site.source-map.test.js */\\")} />;"
 `;
 
+exports[`source maps css prop with objects 1`] = `
+"import { css as _css } from 'emotion';
+
+<div className={_css({
+  color: 'plum'
+})} />;"
+`;
+
 exports[`source maps css source map 1`] = `
 "
 /*#__PURE__*/css(\\"margin:12px 48px;color:#ffffff;display:flex;flex:1 0 auto;color:blue;@media(min-width:420px){line-height:40px;}width:\\", widthVar, \\";/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNzcy5zb3VyY2UtbWFwLnRlc3QuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQ1ciLCJmaWxlIjoiY3NzLnNvdXJjZS1tYXAudGVzdC5qcyIsInNvdXJjZXNDb250ZW50IjpbIlxuICAgICAgICBjc3NgXG4gICAgICAgIG1hcmdpbjogMTJweCA0OHB4O1xuICAgICAgICBjb2xvcjogI2ZmZmZmZjtcbiAgICAgICAgZGlzcGxheTogZmxleDtcbiAgICAgICAgZmxleDogMSAwIGF1dG87XG4gICAgICAgIGNvbG9yOiBibHVlO1xuICAgICAgICBAbWVkaWEobWluLXdpZHRoOiA0MjBweCkge1xuICAgICAgICAgIGxpbmUtaGVpZ2h0OiA0MHB4O1xuICAgICAgICB9XG4gICAgICAgIHdpZHRoOiAke3dpZHRoVmFyfTtcbiAgICAgIGAiXX0= */\\\\n/*@ sourceURL=css.source-map.test.js */\\");"

diff --git a/packages/babel-plugin-emotion/test/source-map.test.js b/packages/babel-plugin-emotion/test/source-map.test.js
@@ -86,6 +86,7 @@ describe('source maps', () => {
     })
     expect(code).toMatchSnapshot()
   })
+
   test('css prop', () => {
     const basic = `
     <div
@@ -115,4 +116,20 @@ describe('source maps', () => {
     })
     expect(code).toMatchSnapshot()
   })
+
+  test('css prop with objects', () => {
+    const basic = `
+      <div
+        css={{
+          color: 'plum'
+        }}
+      />
+    `
+    const { code } = babel.transform(basic, {
+      babelrc: false,
+      plugins: [[plugin, { sourceMap: true }]],
+      filename: 'site.source-map.test.js'
+    })
+    expect(code).toMatchSnapshot()
+  })
 })
diff --git a/packages/site/src/main.js b/packages/site/src/main.js
@@ -136,7 +136,7 @@ class App extends React.Component {
                 <img src={logoUrl} alt="emotion" />
                 emotion
               </h1>
-              <p>The Next Generation of CSS-in-JS</p>
+              <p css={{ fontSize: '1.5em' }}>The Next Generation of CSS-in-JS</p>
             </div>
             <Playground codeText={introExample} scope={scope} />