fix(emotion): add transient props support (#252)

Emotion allows its consumer apps to change styles based on props. See here. By default, emotion would prevent invalid props from being rendered to the DOM element but since xstyled is overriding the "shouldForwardProp" this functionality is being removed.

Styled-components handle this by prefixing the prop name with a dollar sign $.

Author: maxmedina05

packages/emotion/src/createX.ts

@@ -33,7 +33,7 @@ export const createX: CreateX = <TProps extends object>(
     // @ts-ignore
     x[tag] = styled(tag, {
       shouldForwardProp: (prop: string) =>
-        prop !== 'as' && !generator.meta.props.includes(prop),
+        prop !== 'as' && !prop.startsWith('$') && !generator.meta.props.includes(prop),
       // @ts-ignore
     })<TProps>(() => [`&&{`, generator, `}`])
   })

packages/emotion/src/styled.test.tsx

@@ -151,6 +151,20 @@ describe('#styled', () => {
     const { container } = render(<Dummy color="lemonchiffon" />)
     expect(container.firstChild).not.toHaveAttribute('color', 'lemonchiffon')
   })
+
+  it('should not pass props that are invalid html attributes', () => {
+    // https://emotion.sh/docs/styled#customizing-prop-forwarding
+    const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(jest.fn())
+    const Dummy = styled.box({})
+    
+    // @ts-ignore
+    const { container } = render(<Dummy $dark={false} />)
+
+    expect(container.firstChild).not.toHaveAttribute('$dark', false)
+    expect(consoleErrorSpy).not.toHaveBeenCalled()
+
+    consoleErrorSpy.mockRestore()
+  })
 })
 
 describe('#styled.xxx', () => {