Fix shorthand property syntax in object styles and use spread syntax instead of transform in tests

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/__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}

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
+}]);"
 `;

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 => ({

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>