fix(styled-components): fix keyframes error in v5

styled-components · Apr 29, 2020 · ccf3469 · ccf3469
1 parent 15affbb
commit ccf3469
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 1 deletion.
diff --git a/packages/styled-components/src/styled.js b/packages/styled-components/src/styled.js
@@ -6,7 +6,7 @@ import { createSystemComponent } from '@xstyled/system'
 import { css } from './css'
 
 function getCreateStyle(baseCreateStyle) {
-  const createStyle = (...args) => baseCreateStyle([css(...args)])
+  const createStyle = (...args) => baseCreateStyle`${css(...args)}`
   createStyle.attrs = (attrs) => {
     const nextCreateStyle = baseCreateStyle.attrs(attrs)
     return getCreateStyle(nextCreateStyle)

diff --git a/packages/styled-components/src/styled.test.js b/packages/styled-components/src/styled.test.js
@@ -102,6 +102,28 @@ describe('#styled', () => {
     expect(container.firstChild).toHaveAttribute('aria-label', 'label')
     expect(container.firstChild).toHaveStyle('margin: 8px;')
   })
+
+  it('works with keyframes', () => {
+    const animation = keyframes`
+      from {
+        transform: translateX(0%);
+      }
+
+      to {
+        transform: translateX(100%);
+      }
+    `
+    const Dummy = styled.div`
+      ${css`
+        animation: ${animation};
+      `}
+    `
+    const { container } = render(<Dummy />)
+
+    expect(container.firstChild).toHaveStyle(
+      `animation: ${animation.getName()};`,
+    )
+  })
 })
 
 describe('#styled.xxx', () => {