Repository: tkh44/emotion
Pull request #204 (2017-07-30 02:00:50)

Fix shorthand property syntax in object styles and use spread syntax instead of transform in tests

<!--
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**:

<!-- Why are these changes necessary? -->
**Why**:

<!-- 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/204?src=pr&el=h1) Report
> :exclamation: No coverage uploaded for pull request base (`master@f890ccc`). [Click here to learn what that means](https://docs.codecov.io/docs/error-reference#section-missing-base-commit).
> The diff coverage is `n/a`.

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

```diff
@@            Coverage Diff            @@
##             master     #204   +/-   ##
=========================================
  Coverage          ?   89.89%           
=========================================
  Files             ?       22           
  Lines             ?      910           
  Branches          ?      245           
=========================================
  Hits              ?      818           
  Misses            ?       74           
  Partials          ?       18
```


| [Impacted Files](https://codecov.io/gh/tkh44/emotion/pull/204?src=pr&el=tree) | Coverage Δ | |
|---|---|---|
| [src/ast-object.js](https://codecov.io/gh/tkh44/emotion/pull/204?src=pr&el=tree#diff-c3JjL2FzdC1vYmplY3QuanM=) | `88.18% <ø> (ø)` | |

------

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


Patch:
diff --git a/src/ast-object.js b/src/ast-object.js
index 773a7652..1fbedd9c 100644
--- a/src/ast-object.js
+++ b/src/ast-object.js
@@ -205,8 +205,6 @@ export default class ASTObject {
           return prop
         }
 
-        // console.log(JSON.stringify(prop, null, 2))
-
         const { property, key, value, spread, shorthand } = prop
 
         if (spread || shorthand) {
@@ -241,12 +239,9 @@ export default class ASTObject {
   static fromJS (jsObj, composesCount, t) {
     const props = []
     for (let key in jsObj) {
-      // console.log(key)
       if (jsObj.hasOwnProperty(key)) {
         let value
         if (Object.prototype.toString.call(jsObj[key]) === '[object Object]') {
-          // console.log("what the fuck", jsObj[key])
-          // value = ASTObject.fromJS(jsObj[key], composesCount, t)
           value = jsObj[key]
         } else {
           value = jsObj[key]
@@ -321,10 +316,6 @@ export default class ASTObject {
           return
         }
 
-        if (property.shorthand) {
-          return property
-        }
-
         if (property.computed) {
           key = replaceExpressionsWithPlaceholders(property.key)
         } else {


Test patch:
diff --git a/test/__snapshots__/react.test.js.snap b/test/__snapshots__/react.test.js.snap
index b810db91..ccddacbf 100644
--- a/test/__snapshots__/react.test.js.snap
+++ b/test/__snapshots__/react.test.js.snap
@@ -14,8 +14,12 @@ exports[`styled basic render 1`] = `
 `;
 
 exports[`styled basic render with object as style 1`] = `
+.glamor-1 {
+  font-size: 20px;
+}
+
 <h1
-  className="css-1g5wfzh2 css-nil"
+  className="glamor-0 glamor-1"
 >
   hello world
 </h1>
@@ -143,6 +147,10 @@ exports[`styled component as selector 1`] = `
 `;
 
 exports[`styled component as selector function interpolation 1`] = `
+.glamor-1 {
+  font-size: 20px;
+}
+
 .glamor-3 {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -153,10 +161,6 @@ exports[`styled component as selector function interpolation 1`] = `
   color: green;
 }
 
-.glamor-1 {
-  font-size: 20px;
-}
-
 <div
   className="glamor-2 glamor-3"
   fontSize={10}
diff --git a/test/babel/__snapshots__/styled.test.js.snap b/test/babel/__snapshots__/styled.test.js.snap
index accae229..71ad877a 100644
--- a/test/babel/__snapshots__/styled.test.js.snap
+++ b/test/babel/__snapshots__/styled.test.js.snap
@@ -217,6 +217,12 @@ const H1 = styled('h1', 'css-13vphhj0', [{
 }]);"
 `;
 
+exports[`babel styled component inline shorthand property 1`] = `
+"const H1 = styled(\\"h1\\", \\"css-1o8pmqr0\\", [{
+  \\"fontSize\\": \`\${fontSize}\`
+}]);"
+`;
+
 exports[`babel styled component inline styled component as selector 1`] = `
 "
 const SomeComponent = /*#__PURE__*/styled(\\"div\\", \\"css-1jq2uck0\\", [], [], function createEmotionStyledRules() {
@@ -260,24 +266,30 @@ const H1 = styled(\\"h1\\", \\"css-hqyr220\\", [{
 `;
 
 exports[`babel styled component inline styled. objects with a multiple spread properties 1`] = `
-"var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
+"
 const defaultText = { fontSize: 20 };
-const Figure = styled(\\"figure\\", \\"css-1f2fuyv0\\", [_extends({}, defaultText, defaultFigure)]);"
+const Figure = styled(\\"figure\\", \\"css-1f2fuyv0\\", [{
+  ...defaultText,
+  ...defaultFigure
+}]);"
 `;
 
 exports[`babel styled component inline styled. objects with a multiple spread properties and other keys 1`] = `
-"var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
+"
 const defaultText = { fontSize: 20 };
-const Figure = styled('figure', 'css-lb5dzq0', [_extends({}, defaultText, {
-  'fontSize': '20px'
-}, defaultFigure, defaultText2)]);"
+const Figure = styled('figure', 'css-lb5dzq0', [{
+  ...defaultText,
+  'fontSize': '20px',
+
+  ...defaultFigure,
+  ...defaultText2
+}]);"
 `;
 
 exports[`babel styled component inline styled. objects with a single spread property 1`] = `
-"var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
+"
 const defaultText = { fontSize: 20 };
-const Figure = styled(\\"figure\\", \\"css-1mp0w960\\", [_extends({}, defaultText)]);"
+const Figure = styled(\\"figure\\", \\"css-1mp0w960\\", [{
+  ...defaultText
+}]);"
 `;
diff --git a/test/babel/styled.test.js b/test/babel/styled.test.js
index 7fd40a11..e1c5b31a 100644
--- a/test/babel/styled.test.js
+++ b/test/babel/styled.test.js
@@ -2,7 +2,7 @@
 /* eslint-env jest */
 import * as babel from 'babel-core'
 import plugin from '../../src/babel'
-import stage2 from 'babel-plugin-transform-object-rest-spread'
+import stage2 from 'babel-plugin-syntax-object-rest-spread'
 import * as fs from 'fs'
 jest.mock('fs')
 
@@ -181,6 +181,15 @@ describe('babel styled component', () => {
       expect(code).toMatchSnapshot()
     })
 
+    test('shorthand property', () => {
+      const basic = `const H1 = styled.h1({ fontSize })`
+
+      const { code } = babel.transform(basic, {
+        plugins: [plugin]
+      })
+      expect(code).toMatchSnapshot()
+    })
+
     test('object composes with classes', () => {
       const basic = `
       const H1 = styled('h1')('some-class',props => ({
diff --git a/test/macro/__snapshots__/react.test.js.snap b/test/macro/__snapshots__/react.test.js.snap
index 31e5f28d..ab0614e3 100644
--- a/test/macro/__snapshots__/react.test.js.snap
+++ b/test/macro/__snapshots__/react.test.js.snap
@@ -13,8 +13,12 @@ exports[`styled basic render 1`] = `
 `;
 
 exports[`styled basic render with object as style 1`] = `
+.glamor-1 {
+  font-size: 20px;
+}
+
 <h1
-  className="css-1djsizu2 css-nil"
+  className="glamor-0 glamor-1"
 >
   hello world
 </h1>