fix: adding children to emotion jsx function (#166)

styled-components · Jan 10, 2021 · 6bc0d4e · 6bc0d4e
1 parent f28b100
commit 6bc0d4e
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 2 deletions.
diff --git 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
@@ -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)
 }