Feature/babel plugin emotion auto label object properties #1293 (#1387)

* Added labels for object properties (#1293)

* Added object property fixture for tests (#1293)

* Object property auto label changeset (#1293)

* Updated snapshots (#1293)

* Removed speculative fallback (#1293)

.changeset/good-sloths-repeat/changes.json

@@ -0,0 +1,4 @@
+{
+  "releases": [{ "name": "babel-plugin-emotion", "type": "patch" }],
+  "dependents": []
+}

.changeset/good-sloths-repeat/changes.md

@@ -0,0 +1 @@
+Added object property auto label support for babel-plugin-emotion

packages/babel-plugin-emotion/__tests__/__fixtures__/object-property.js

@@ -0,0 +1,12 @@
+// @flow
+import * as React from 'react'
+import { jsx } from '@emotion/core'
+import styled from '@emotion/styled'
+
+const MyObject = {
+  MyProperty: styled.div({ color: 'hotpink' })
+}
+
+function Logo(props) {
+  return <MyObject.MyProperty />
+}

packages/babel-plugin-emotion/__tests__/__snapshots__/index.js.snap

@@ -124,6 +124,46 @@ var _ref = process.env.NODE_ENV === \\"production\\" ? {
 const SomeComponent = props => <div css={_ref} {...props} />;"
 `;
 
+exports[`@emotion/babel-plugin-core object-property 1`] = `
+"// @flow
+import * as React from 'react'
+import { jsx } from '@emotion/core'
+import styled from '@emotion/styled'
+
+const MyObject = {
+  MyProperty: styled.div({ color: 'hotpink' })
+}
+
+function Logo(props) {
+  return <MyObject.MyProperty />
+}
+
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+import _styled from \\"@emotion/styled-base\\";
+// @flow
+import * as React from 'react';
+import { jsx } from '@emotion/core';
+const MyObject = {
+  MyProperty: _styled(\\"div\\", {
+    target: \\"e1mmqgwa0\\",
+    label: \\"MyProperty\\"
+  })(process.env.NODE_ENV === \\"production\\" ? {
+    name: \\"1lrxbo5\\",
+    styles: \\"color:hotpink;\\"
+  } : {
+    name: \\"1lrxbo5\\",
+    styles: \\"color:hotpink;\\",
+    map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm9iamVjdC1wcm9wZXJ0eS5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFNYyIsImZpbGUiOiJvYmplY3QtcHJvcGVydHkuanMiLCJzb3VyY2VzQ29udGVudCI6WyIvLyBAZmxvd1xuaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnXG5pbXBvcnQgeyBqc3ggfSBmcm9tICdAZW1vdGlvbi9jb3JlJ1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5cbmNvbnN0IE15T2JqZWN0ID0ge1xuICBNeVByb3BlcnR5OiBzdHlsZWQuZGl2KHsgY29sb3I6ICdob3RwaW5rJyB9KVxufVxuXG5mdW5jdGlvbiBMb2dvKHByb3BzKSB7XG4gIHJldHVybiA8TXlPYmplY3QuTXlQcm9wZXJ0eSAvPlxufVxuIl19 */\\"
+  })
+};
+
+function Logo(props) {
+  return <MyObject.MyProperty />;
+}"
+`;
+
 exports[`@emotion/babel-plugin-core static-object-with-camel-case 1`] = `
 "/** @jsx jsx */
 import { jsx } from '@emotion/core'

packages/babel-plugin-emotion/src/utils/label.js

@@ -44,15 +44,16 @@ function getDeclaratorName(path, t) {
       p.isVariableDeclarator() ||
       p.isFunctionDeclaration() ||
       p.isFunctionExpression() ||
-      p.isArrowFunctionExpression()
+      p.isArrowFunctionExpression() ||
+      p.isObjectProperty()
   )
   if (!parent) {
     return ''
   }
 
+  // we probably have a css call assigned to a variable
+  // so we'll just return the variable name
   if (parent.isVariableDeclarator()) {
-    // we probably have a css call assigned to a variable
-    // so we'll just return the variable name
     return parent.node.id.name
   }
 
@@ -65,6 +66,11 @@ function getDeclaratorName(path, t) {
     return ''
   }
 
+  // we could also have an object property
+  if (parent.isObjectProperty()) {
+    return parent.node.key.name
+  }
+
   let variableDeclarator = path.findParent(p => p.isVariableDeclarator())
   if (!variableDeclarator) {
     return ''