Repository: tkh44/emotion
Pull request #238 (2017-08-06 03:05:55)

Make the styled content function return an object
<!--
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**:

Make the styled content function return an object.

<!-- Why are these changes necessary? -->
**Why**:

Because it's currently returning an array but it will only ever be an array with a single object.

<!-- How were these changes implemented? -->
**How**:

<!-- 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/238?src=pr&el=h1) Report
> Merging [#238](https://codecov.io/gh/tkh44/emotion/pull/238?src=pr&el=desc) into [master](https://codecov.io/gh/tkh44/emotion/commit/9a3cbcd93ff6041c34f763f3c04ea8ec8a32230d?src=pr&el=desc) will **not change** coverage.
> The diff coverage is `100%`.

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

```diff
@@           Coverage Diff           @@
##           master     #238   +/-   ##
=======================================
  Coverage   90.26%   90.26%           
=======================================
  Files          20       20           
  Lines         966      966           
  Branches      261      261           
=======================================
  Hits          872      872           
  Misses         76       76           
  Partials       18       18
```


| [Impacted Files](https://codecov.io/gh/tkh44/emotion/pull/238?src=pr&el=tree) | Coverage Δ | |
|---|---|---|
| [src/babel.js](https://codecov.io/gh/tkh44/emotion/pull/238?src=pr&el=tree#diff-c3JjL2JhYmVsLmpz) | `97.74% <ø> (ø)` | :arrow_up: |
| [src/react/index.js](https://codecov.io/gh/tkh44/emotion/pull/238?src=pr&el=tree#diff-c3JjL3JlYWN0L2luZGV4Lmpz) | `100% <100%> (ø)` | :arrow_up: |

------

[Continue to review full report at Codecov](https://codecov.io/gh/tkh44/emotion/pull/238?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/238?src=pr&el=footer). Last update [9a3cbcd...b932031](https://codecov.io/gh/tkh44/emotion/pull/238?src=pr&el=lastupdated). Read the [comment docs](https://docs.codecov.io/docs/pull-request-comments).


Patch:
diff --git a/src/babel.js b/src/babel.js
index 2499893c..fbfbc979 100644
--- a/src/babel.js
+++ b/src/babel.js
@@ -180,11 +180,7 @@ export function buildStyledCallExpression(identifier, tag, path, state, t) {
       t.identifier('createEmotionStyledRules'),
       vars.map((x, i) => t.identifier(`x${i}`)),
       t.blockStatement([
-        t.returnStatement(
-          t.arrayExpression([
-            ASTObject.fromJS(styles, composesCount, t).toAST()
-          ])
-        )
+        t.returnStatement(ASTObject.fromJS(styles, composesCount, t).toAST())
       ])
     )
   ]
diff --git a/src/react/index.js b/src/react/index.js
index 6b170044..8c36fbf3 100644
--- a/src/react/index.js
+++ b/src/react/index.js
@@ -63,7 +63,7 @@ export default function(tag, cls, objs, vars = [], content) {
         (accum, spec) => {
           push(accum, spec.objs)
           if (spec.content) {
-            push(accum, spec.content.apply(null, map(spec.vars, getValue)))
+            accum.push(spec.content.apply(null, map(spec.vars, getValue)))
           }
           accum.push(spec.cls)
           return accum


Test patch:
diff --git a/test/babel/__snapshots__/macro.test.js.snap b/test/babel/__snapshots__/macro.test.js.snap
index 9e4d1b8f..732ebe61 100644
--- a/test/babel/__snapshots__/macro.test.js.snap
+++ b/test/babel/__snapshots__/macro.test.js.snap
@@ -169,9 +169,9 @@ exports[`babel macro styled tagged template literal function 1`] = `
 "import _styled from '../../src/react';
 
 const SomeComponent = /*#__PURE__*/_styled('div', 'css-kctxs00', [], [], function createEmotionStyledRules() {
-  return [{
+  return {
     'display': '-webkit-box; display: -ms-flexbox; display: flex'
-  }];
+  };
 });"
 `;
 
@@ -179,8 +179,8 @@ exports[`babel macro styled tagged template literal member 1`] = `
 "import _styled from '../../src/react';
 
 const SomeComponent = /*#__PURE__*/_styled('div', 'css-1mkpack0', [], [], function createEmotionStyledRules() {
-  return [{
+  return {
     'display': '-webkit-box; display: -ms-flexbox; display: flex'
-  }];
+  };
 });"
 `;
diff --git a/test/babel/__snapshots__/styled.test.js.snap b/test/babel/__snapshots__/styled.test.js.snap
index dfb14348..32d18b3d 100644
--- a/test/babel/__snapshots__/styled.test.js.snap
+++ b/test/babel/__snapshots__/styled.test.js.snap
@@ -44,9 +44,9 @@ exports[`babel styled component extract no use 2`] = `".styled-0 {}"`;
 
 exports[`babel styled component inline basic 1`] = `
 "const H1 = /*#__PURE__*/styled('h1', 'css-uutogn0', [], [fontSize + 'px'], function createEmotionStyledRules(x0) {
-  return [{
+  return {
     'fontSize': x0
-  }];
+  };
 });"
 `;
 
@@ -59,38 +59,38 @@ exports[`babel styled component inline composes based on props 1`] = `
 const H1 = /*#__PURE__*/styled('h1', 'css-gzpfex0', [props => {
   return props.a ? cssA : cssB;
 }], [fontSize + 'px', props => props.translateX], function createEmotionStyledRules(x0, x1) {
-  return [{
+  return {
     'fontSize': x0,
     'height': '20px',
     'WebkitTransform': \`translateX(\${x1})\`,
     'transform': \`translateX(\${x1})\`
-  }];
+  };
 });"
 `;
 
 exports[`babel styled component inline dynamic fns 1`] = `
 "const Avatar = /*#__PURE__*/styled('img', 'css-t98w700', [], [props => props.theme.borderRadius, props => props.theme.borderColor], function createEmotionStyledRules(x0, x1) {
-  return [{
+  return {
     'width': '96px',
     'height': '96px',
     'borderRadius': x0,
     'border': \`1px solid \${x1}\`
-  }];
+  };
 });"
 `;
 
 exports[`babel styled component inline function call 1`] = `
 "/*#__PURE__*/styled(MyComponent, 'css-1gd4urc0', [], [fontSize + 'px'], function createEmotionStyledRules(x0) {
-  return [{
+  return {
     'fontSize': x0
-  }];
+  };
 });"
 `;
 
 exports[`babel styled component inline interpolation in different places 1`] = `
 "
 const H1 = /*#__PURE__*/styled('h1', 'css-16hd4av0', [], [fontSize + 'px', props => props.translateX, something, something, props => props.translateX, props => props.translateX, props => props.translateX, props => props.translateX, props => props.translateX, props => props.translateX], function createEmotionStyledRules(x0, x1, x2, x3, x4, x5, x6, x7, x8, x9) {
-  return [{
+  return {
     'fontSize': x0,
     'height': '20px',
     'WebkitTransform': \`translateX(\${x1}); -webkit-transform: translateX(\${x4}) translateY(\${x5})\`,
@@ -99,13 +99,13 @@ const H1 = /*#__PURE__*/styled('h1', 'css-16hd4av0', [], [fontSize + 'px', props
     'width': \`w\${x3}ow\`,
     'transform1': \`translateX(\${x6}) translateY(\${x7})\`,
     'transform2': \`translateX(\${x8}) \${x9}\`
-  }];
+  };
 });"
 `;
 
 exports[`babel styled component inline media query 1`] = `
 "const H1 = /*#__PURE__*/styled(\\"h1\\", \\"css-bom4yv0\\", [], [], function createEmotionStyledRules() {
-  return [{
+  return {
     \\"@media print\\": {
       \\"fontSize\\": \\"10pt\\"
     },
@@ -124,13 +124,13 @@ exports[`babel styled component inline media query 1`] = `
         \\"lineHeight\\": \\"1.4\\"
       }
     }
-  }];
+  };
 });"
 `;
 
 exports[`babel styled component inline more than 10 dynamic values 1`] = `
 "const H1 = /*#__PURE__*/styled('h1', 'css-kzo7z60', [], ['underline', 54, 'white', 'black', 'block', '3px', '25px', '500px', 100, '18px', 'center', p => p.theme.blue], function createEmotionStyledRules(x0, x1, x2, x3, x4, x5, x6, x7, x8, x9, x10, x11) {
-      return [{
+      return {
             'WebkitTextDecoration': x0,
             'textDecoration': x0,
             'borderRight': \`solid blue \${x1}px\`,
@@ -144,13 +144,13 @@ exports[`babel styled component inline more than 10 dynamic values 1`] = `
             'fontSize': x9,
             'textAlign': x10,
             'borderLeft': x11
-      }];
+      };
 });"
 `;
 
 exports[`babel styled component inline nested 1`] = `
 "const H1 = /*#__PURE__*/styled('h1', 'css-17vfrab0', [], [fontSize + 'px'], function createEmotionStyledRules(x0) {
-  return [{
+  return {
     'fontSize': x0,
     '& div': {
       'color': 'blue'
@@ -158,21 +158,21 @@ exports[`babel styled component inline nested 1`] = `
     '& div span': {
       'color': 'red'
     }
-  }];
+  };
 });"
 `;
 
 exports[`babel styled component inline no dynamic 1`] = `
 "/*#__PURE__*/styled(\\"h1\\", \\"css-1cds4610\\", [], [], function createEmotionStyledRules() {
-  return [{
+  return {
     \\"color\\": \\"blue\\"
-  }];
+  };
 });"
 `;
 
 exports[`babel styled component inline no use 1`] = `
 "/*#__PURE__*/styled(\\"h1\\", \\"css-kmoct0\\", [], [], function createEmotionStyledRules() {
-  return [{}];
+  return {};
 });"
 `;
 
@@ -229,7 +229,7 @@ const a = () => /*#__PURE__*/css([], [], function createEmotionStyledRules() {
     \\"fontSize\\": \\"32px\\"
   }];
 }), props => props.prop && a(), { backgroundColor: \\"hotpink\\" }], function createEmotionStyledRules(x0, x1, x2) {
-  return [{
+  return {
     \\"margin\\": \\"12px 48px\\",
     \\"$0\\": x0,
     \\"color\\": \\"#ffffff\\",
@@ -237,7 +237,7 @@ const a = () => /*#__PURE__*/css([], [], function createEmotionStyledRules() {
       \\"$1\\": x1
     },
     \\"$2\\": x2
-  }];
+  };
 });"
 `;
 
@@ -250,15 +250,15 @@ exports[`babel styled component inline shorthand property 1`] = `
 exports[`babel styled component inline styled component as selector 1`] = `
 "
 const SomeComponent = /*#__PURE__*/styled(\\"div\\", \\"css-1jq2uck0\\", [], [], function createEmotionStyledRules() {
-  return [{}];
+  return {};
 });
 /*#__PURE__*/styled(\\"h1\\", \\"css-1jq2uck1\\", [], [SomeComponent], function createEmotionStyledRules(x0) {
-  return [{
+  return {
     \\"color\\": \\"blue\\",
     [x0]: {
       \\"color\\": \\"green\\"
     }
-  }];
+  };
 });"
 `;