Add support for object arguments in css prop with source maps (#332)

* Add support for object arguments in css prop with source maps * stfu linter * Make source map from css prop path instead of the JSXOpeningElement path * Fix edge case with css prop and className * Update snapshots
emotion-js · Sep 25, 2017 · 8ff5264 · 8ff5264
1 parent bb383f4
commit 8ff5264
Show file tree

Hide file tree

Showing 9 changed files with 152 additions and 30 deletions.
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(cssPath.node.loc.start, state))
+        ]
+      : [cssPropValue]
+    cssTemplateExpression = t.callExpression(getCssIdentifer(), args)
   }
   if (
     !classNamesValue ||
@@ -58,15 +66,19 @@ export default function(path, state, t) {
 
   cssPath.parentPath.remove()
   if (t.isJSXExpressionContainer(classNamesValue)) {
-    classNamesPath.parentPath.replaceWith(
-      createClassNameAttr(
-        t.callExpression(getMergeIdentifier(), [
-          add(
-            cssTemplateExpression,
-            add(t.stringLiteral(' '), classNamesValue.expression)
-          )
-        ])
+    const args = [
+      add(
+        cssTemplateExpression,
+        add(t.stringLiteral(' '), classNamesValue.expression)
       )
+    ]
+
+    if (state.opts.sourceMap) {
+      args.push(t.stringLiteral(addSourceMaps(cssPath.node.loc.start, state)))
+    }
+
+    classNamesPath.parentPath.replaceWith(
+      createClassNameAttr(t.callExpression(getMergeIdentifier(), args))
     )
   } else {
     classNamesPath.parentPath.replaceWith(

diff --git a/packages/babel-plugin-emotion/src/index.js b/packages/babel-plugin-emotion/src/index.js
@@ -50,7 +50,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(
@@ -101,7 +101,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, [tag]),

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,23 @@ 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 merge 1`] = `
+"import { merge as _merge } from 'emotion';
+import { css as _css } from 'emotion';
+
+<div className={_merge(_css({
+  color: 'plum'
+}, '/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNpdGUuc291cmNlLW1hcC50ZXN0LmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUdRIiwiZmlsZSI6InNpdGUuc291cmNlLW1hcC50ZXN0LmpzIiwic291cmNlc0NvbnRlbnQiOlsiXG4gICAgICA8ZGl2XG4gICAgICAgIGNsYXNzTmFtZT17c29tZUNsYXNzTmFtZX1cbiAgICAgICAgY3NzPXt7XG4gICAgICAgICAgY29sb3I6ICdwbHVtJ1xuICAgICAgICB9fVxuICAgICAgLz5cbiAgICAiXX0= */\\\\n/*@ sourceURL=site.source-map.test.js */') + (' ' + someClassName), '/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNpdGUuc291cmNlLW1hcC50ZXN0LmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUdRIiwiZmlsZSI6InNpdGUuc291cmNlLW1hcC50ZXN0LmpzIiwic291cmNlc0NvbnRlbnQiOlsiXG4gICAgICA8ZGl2XG4gICAgICAgIGNsYXNzTmFtZT17c29tZUNsYXNzTmFtZX1cbiAgICAgICAgY3NzPXt7XG4gICAgICAgICAgY29sb3I6ICdwbHVtJ1xuICAgICAgICB9fVxuICAgICAgLz5cbiAgICAiXX0= */\\\\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'
+}, '/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNpdGUuc291cmNlLW1hcC50ZXN0LmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVRIiwiZmlsZSI6InNpdGUuc291cmNlLW1hcC50ZXN0LmpzIiwic291cmNlc0NvbnRlbnQiOlsiXG4gICAgICA8ZGl2XG4gICAgICAgIGNzcz17e1xuICAgICAgICAgIGNvbG9yOiAncGx1bSdcbiAgICAgICAgfX1cbiAgICAgIC8+XG4gICAgIl19 */\\\\n/*@ sourceURL=site.source-map.test.js */')} />;"
+`;
+
 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,37 @@ 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()
+  })
+
+  test('css prop with merge', () => {
+    const basic = `
+      <div
+        className={someClassName}
+        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/emotion/src/index.js b/packages/emotion/src/index.js
@@ -264,15 +264,15 @@ export function getRegisteredStyles(registeredStyles, classNames) {
   return rawClassName
 }
 
-export function merge(className) {
+export function merge(className, sourceMap) {
   const registeredStyles = []
 
   const rawClassName = getRegisteredStyles(registeredStyles, className)
 
   if (registeredStyles.length < 2) {
     return className
   }
-  return rawClassName + css(...registeredStyles)
+  return rawClassName + css(registeredStyles, sourceMap)
 }
 
 export function hydrate(ids) {