Repository: tkh44/emotion
Pull request #155 (2017-07-16 05:56:48)

Fix using an import other than styled that requires a transform in the styled macro
<!--
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**:

Fix using an import other than styled that requires a transform in the styled macro

<!-- Why are these changes necessary? -->
**Why**:

Because otherwise calls to `css` and other stuff wouldn't be transformed if they were imported from a styled macro

<!-- How were these changes implemented? -->
**How**:

Call the regular macro in the styled macro

<!-- 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 -->


codecov-io: # [Codecov](https://codecov.io/gh/tkh44/emotion/pull/155?src=pr&el=h1) Report
> Merging [#155](https://codecov.io/gh/tkh44/emotion/pull/155?src=pr&el=desc) into [master](https://codecov.io/gh/tkh44/emotion/commit/990f63fd6de0a51506dd9e51e73396461ac4df2e?src=pr&el=desc) will **decrease** coverage by `0.01%`.
> The diff coverage is `100%`.

[![Impacted file tree graph](https://codecov.io/gh/tkh44/emotion/pull/155/graphs/tree.svg?token=B1bWuYNE2t&width=650&height=150&src=pr)](https://codecov.io/gh/tkh44/emotion/pull/155?src=pr&el=tree)

```diff
@@            Coverage Diff             @@
##           master     #155      +/-   ##
==========================================
- Coverage   90.15%   90.14%   -0.02%     
==========================================
  Files          22       22              
  Lines         701      700       -1     
  Branches      167      166       -1     
==========================================
- Hits          632      631       -1     
  Misses         56       56              
  Partials       13       13
```


| [Impacted Files](https://codecov.io/gh/tkh44/emotion/pull/155?src=pr&el=tree) | Coverage Δ | |
|---|---|---|
| [src/macro-styled.js](https://codecov.io/gh/tkh44/emotion/pull/155?src=pr&el=tree#diff-c3JjL21hY3JvLXN0eWxlZC5qcw==) | `100% <100%> (ø)` | :arrow_up: |

------

[Continue to review full report at Codecov](https://codecov.io/gh/tkh44/emotion/pull/155?src=pr&el=continue).
> **Legend** - [Click here to learn more](https://docs.codecov.io/docs/codecov-delta)
> `Δ = absolute <relative> (impact)`, `ø = not affected`, `? = missing data`
> Powered by [Codecov](https://codecov.io/gh/tkh44/emotion/pull/155?src=pr&el=footer). Last update [990f63f...b314d60](https://codecov.io/gh/tkh44/emotion/pull/155?src=pr&el=lastupdated). Read the [comment docs](https://docs.codecov.io/docs/pull-request-comments).


Patch:
diff --git a/src/macro-styled.js b/src/macro-styled.js
index ce292688..791a24db 100644
--- a/src/macro-styled.js
+++ b/src/macro-styled.js
@@ -2,13 +2,16 @@ import {
   buildStyledCallExpression,
   buildStyledObjectCallExpression
 } from './babel'
-import { buildMacroRuntimeNode, addRuntimeImports } from './babel-utils'
-import forEach from '@arr/foreach'
-import { keys } from './utils'
+import { buildMacroRuntimeNode } from './babel-utils'
+import emotionMacro from './macro'
+import { omit } from './utils'
 
-module.exports = function macro ({ references, state, babel: { types: t } }) {
+module.exports = function macro (options) {
+  const { references, state, babel: { types: t } } = options
   if (!state.inline) state.inline = true
+  let referencesWithoutDefault = references
   if (references.default) {
+    referencesWithoutDefault = omit(references, ['default'])
     references.default.forEach(styledReference => {
       const path = styledReference.parentPath.parentPath
       const runtimeNode = buildMacroRuntimeNode(
@@ -48,14 +51,5 @@ module.exports = function macro ({ references, state, babel: { types: t } }) {
       }
     })
   }
-  forEach(keys(references), (referenceKey) => {
-    if (referenceKey !== 'default') {
-      references[referenceKey].forEach(reference => {
-        reference.replaceWith(
-            buildMacroRuntimeNode(reference, state, referenceKey, t)
-          )
-      })
-    }
-  })
-  addRuntimeImports(state, t)
+  emotionMacro({ ...options, references: referencesWithoutDefault })
 }


Test patch:
diff --git a/test/babel/__snapshots__/macro.test.js.snap b/test/babel/__snapshots__/macro.test.js.snap
index 9edeec7f..cde705b3 100644
--- a/test/babel/__snapshots__/macro.test.js.snap
+++ b/test/babel/__snapshots__/macro.test.js.snap
@@ -110,6 +110,14 @@ exports[`babel macro some import that does not exist 1`] = `
 const someOtherVar = _thisDoesNotExist;"
 `;
 
+exports[`babel macro styled css from react 1`] = `
+"import { css as _css } from '../../src/react';
+
+const someCls = _css(['css-someCls-ymvpej'], [], function createEmotionRules() {
+  return [\`.css-someCls-ymvpej { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; }\`];
+});"
+`;
+
 exports[`babel macro styled object function 1`] = `
 "import _styled from '../../src/react';
 
diff --git a/test/babel/macro.test.js b/test/babel/macro.test.js
index 2bc8acc5..2118ce76 100644
--- a/test/babel/macro.test.js
+++ b/test/babel/macro.test.js
@@ -72,6 +72,20 @@ describe('babel macro', () => {
       })
       expect(code).toMatchSnapshot()
     })
+    test('css from react', () => {
+      const basic = `
+      import { css } from '../../src/react/macro'
+      const someCls = css\`
+        display: flex;
+      \`
+      `
+      const { code } = babel.transform(basic, {
+        plugins: ['babel-macros'],
+        filename: __filename,
+        babelrc: false
+      })
+      expect(code).toMatchSnapshot()
+    })
     test('throws correct error when imported with commonjs', () => {
       const basic = `
       const styled = require('../../src/react/macro')
diff --git a/test/macro/react.test.js b/test/macro/react.test.js
index 93729bff..d63a1bf7 100644
--- a/test/macro/react.test.js
+++ b/test/macro/react.test.js
@@ -2,8 +2,7 @@
 import React from 'react'
 import renderer from 'react-test-renderer'
 import { matcher, serializer } from '../../jest-utils'
-import { css } from '../../src/macro'
-import styled from '../../src/react/macro'
+import styled, { css } from '../../src/react/macro'
 import { ThemeProvider } from '../../src/react/theming'
 
 import { lighten, hiDPI, modularScale } from 'polished'