From 6bc0d4ea574e1a6cdee622c8d0b8a7b431b2028a Mon Sep 17 00:00:00 2001
From: Marcelo Silva <marceloadsj1@gmail.com>
Date: Sun, 10 Jan 2021 18:58:33 +0100
Subject: [PATCH] fix: adding children to emotion jsx function (#166)

---
 packages/emotion/src/jsx.test.tsx | 47 +++++++++++++++++++++++++++++++
 packages/emotion/src/jsx.ts       |  5 ++--
 2 files changed, 50 insertions(+), 2 deletions(-)

diff --git a/packages/emotion/src/jsx.test.tsx b/packages/emotion/src/jsx.test.tsx
index 75523c07..01e0da50 100644
--- a/packages/emotion/src/jsx.test.tsx
+++ b/packages/emotion/src/jsx.test.tsx
@@ -87,4 +87,51 @@ describe('#jsx', () => {
       padding: 4px;
     `)
   })
+
+  it('does not render children', () => {
+    const { container } = render(
+      <SpaceTheme>
+        <div
+          // @ts-expect-error
+          css={[{ margin: '2' }, { padding: '1' }]}
+        />
+      </SpaceTheme>,
+    )
+
+    expect(container).toHaveTextContent('')
+  })
+
+  it('renders a single child', () => {
+    const { container } = render(
+      <SpaceTheme>
+        <div
+          // @ts-expect-error
+          css={[{ margin: '2' }, { padding: '1' }]}
+        >
+          <p id="test-p">A testing paragraph</p>
+        </div>
+      </SpaceTheme>,
+    )
+
+    expect(container.querySelector('#test-p')).toHaveTextContent(
+      'A testing paragraph',
+    )
+  })
+
+  it('renders multiple children', () => {
+    const { container } = render(
+      <SpaceTheme>
+        <div
+          // @ts-expect-error
+          css={[{ margin: '2' }, { padding: '1' }]}
+        >
+          <p className="test-p">First testing paragraph</p>
+
+          <p className="test-p">Second testing paragraph</p>
+        </div>
+      </SpaceTheme>,
+    )
+
+    expect(container.querySelectorAll('.test-p')).toHaveLength(2)
+  })
 })
diff --git a/packages/emotion/src/jsx.ts b/packages/emotion/src/jsx.ts
index 4403d58f..5828a074 100644
--- a/packages/emotion/src/jsx.ts
+++ b/packages/emotion/src/jsx.ts
@@ -7,12 +7,13 @@ import { cx } from './cx'
 export const jsx: typeof emJsx = function (
   type: React.ElementType,
   props?: object,
+  ...children: React.ReactNode[]
 ) {
   if (props == null || !Object.prototype.hasOwnProperty.call(props, 'css')) {
     // @ts-expect-error
-    return React.createElement.apply(undefined, arguments)
+    return React.createElement.apply(undefined, arguments, ...children)
   }
 
   // @ts-expect-error
-  return emJsx(type, { ...props, css: cx(props.css) })
+  return emJsx(type, { ...props, css: cx(props.css) }, ...children)
 }