Accept objects as className in jsx-created components (they are str…

…ingified) to match React behavior (#1548)

.changeset/five-cycles-listen/changes.json

@@ -0,0 +1 @@
+{ "releases": [{ "name": "@emotion/core", "type": "patch" }], "dependents": [] }

.changeset/five-cycles-listen/changes.md

@@ -0,0 +1 @@
+Accept objects as `className` in jsx-created components (they are stringified) to match React behavior

packages/core/__tests__/__snapshots__/legacy-class-name.js.snap

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`object className 1`] = `
+.emotion-0 {
+  color: hotpink;
+}
+
+<div
+  className="legacy__class emotion-0"
+/>
+`;
+
+exports[`string className 1`] = `
+.emotion-0 {
+  color: hotpink;
+}
+
+<div
+  className="legacy__class emotion-0"
+/>
+`;

packages/core/__tests__/legacy-class-name.js

@@ -0,0 +1,35 @@
+// @flow
+/** @jsx jsx */
+import 'test-utils/next-env'
+import { jsx, css } from '@emotion/core'
+import renderer from 'react-test-renderer'
+
+test('string className', () => {
+  const tree = renderer
+    .create(
+      <div
+        className="legacy__class"
+        css={css`
+          color: hotpink;
+        `}
+      />
+    )
+    .toJSON()
+
+  expect(tree).toMatchSnapshot()
+})
+
+test('object className', () => {
+  const tree = renderer
+    .create(
+      <div
+        className={{ toString: () => 'legacy__class' }}
+        css={css`
+          color: hotpink;
+        `}
+      />
+    )
+    .toJSON()
+
+  expect(tree).toMatchSnapshot()
+})

packages/core/src/jsx.js

@@ -30,12 +30,14 @@ let render = (cache, props, theme: null | Object, ref) => {
   let registeredStyles = [cssProp]
   let className = ''
 
-  if (props.className !== undefined) {
+  if (typeof props.className === 'string') {
     className = getRegisteredStyles(
       cache.registered,
       registeredStyles,
       props.className
     )
+  } else if (props.className != null) {
+    className = `${props.className} `
   }
 
   let serialized = serializeStyles(registeredStyles)

packages/styled-base/src/index.js

@@ -100,13 +100,13 @@ let createStyled: CreateStyled = (tag: any, options?: StyledOptions) => {
             }
 
             if (typeof props.className === 'string') {
-              className += getRegisteredStyles(
+              className = getRegisteredStyles(
                 context.registered,
                 classInterpolations,
                 props.className
               )
             } else if (props.className != null) {
-              className += `${props.className} `
+              className = `${props.className} `
             }
 
             const serialized = serializeStyles(