Removed .defaultProps support

Author: Andarist

.changeset/early-badgers-teach.md

@@ -0,0 +1,6 @@
+---
+'@emotion/styled': major
+'@emotion/react': major
+---
+
+Removed `.defaultProps` support

packages/jest/test/react-enzyme.test.js

@@ -241,16 +241,10 @@ const cases = {
   theming: {
     render() {
       const Button = styled.button`
-        color: ${props => props.theme.main};
-        border: 2px solid ${props => props.theme.main};
+        color: ${props => props.theme.main ?? 'red'};
+        border: 2px solid ${props => props.theme.main ?? 'red'};
       `
 
-      Button.defaultProps = {
-        theme: {
-          main: 'red'
-        }
-      }
-
       const theme = {
         main: 'blue'
       }

packages/react/src/theming.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 import weakMemoize from '@emotion/weak-memoize'
 import isDevelopment from '#is-development'
 import hoistNonReactStatics from './_isolated-hnrs'
-import { DistributiveOmit, PropsOf } from './types'
+import { DistributiveOmit } from './types'
 
 // tslint:disable-next-line: no-empty-interface
 export interface Theme {}
@@ -86,7 +86,7 @@ export function withTheme<
 >(
   Component: C
 ): React.ForwardRefExoticComponent<
-  DistributiveOmit<PropsOf<C>, 'theme'> & { theme?: Theme }
+  DistributiveOmit<React.ComponentProps<C>, 'theme'> & { theme?: Theme }
 >
 export function withTheme(
   Component: React.ComponentType<any>

packages/react/src/types.ts

@@ -1,13 +1,3 @@
-import { ReactJSX } from './jsx-namespace'
-
-/**
- * @desc Utility type for getting props type of React component.
- * It takes `defaultProps` into an account - making props with defaults optional.
- */
-export type PropsOf<
-  C extends keyof ReactJSX.IntrinsicElements | React.JSXElementConstructor<any>
-> = ReactJSX.LibraryManagedAttributes<C, React.ComponentProps<C>>
-
 // We need to use this version of Omit as it's distributive (Will preserve unions)
 export type DistributiveOmit<T, U> = T extends any
   ? Pick<T, Exclude<keyof T, U>>

packages/react/types/tests-theming.tsx

@@ -38,27 +38,10 @@ const ThemedComp = withTheme(CompC)
 ;<ThemedComp prop />
 ;<ThemedComp prop theme={theme} />
 
-const CompFCWithDefault = ({ prop }: Props) => (prop ? <span /> : <div />)
-CompFCWithDefault.defaultProps = { prop: false }
-class CompCWithDefault extends React.Component<Props> {
-  static defaultProps = { prop: false }
-  render() {
-    return this.props.prop ? <span /> : <div />
-  }
-}
-
 {
   const theme: Theme = useTheme()
 }
 
-const ThemedFCWithDefault = withTheme(CompFCWithDefault)
-;<ThemedFCWithDefault />
-;<ThemedFCWithDefault theme={theme} />
-
-const ThemedCompWithDefault = withTheme(CompCWithDefault)
-;<ThemedCompWithDefault />
-;<ThemedCompWithDefault theme={theme} />
-
 {
   interface Book {
     kind: 'book'

packages/styled/src/base.tsx

@@ -196,7 +196,6 @@ const createStyled = (tag: ElementType, options?: StyledOptions) => {
               : baseTag.displayName || baseTag.name || 'Component'
           })`
 
-    Styled.defaultProps = tag.defaultProps
     Styled.__emotion_real = Styled
     Styled.__emotion_base = baseTag
     Styled.__emotion_styles = styles

packages/styled/src/types.ts

@@ -31,13 +31,13 @@ export interface StyledComponent<
   withComponent<C extends React.ComponentClass<React.ComponentProps<C>>>(
     component: C
   ): StyledComponent<
-    ComponentProps & PropsOf<C>,
+    ComponentProps & React.ComponentProps<C>,
     {},
     { ref?: React.Ref<InstanceType<C>> }
   >
   withComponent<C extends React.ComponentType<React.ComponentProps<C>>>(
     component: C
-  ): StyledComponent<ComponentProps & PropsOf<C>>
+  ): StyledComponent<ComponentProps & React.ComponentProps<C>>
   withComponent<Tag extends keyof ReactJSXIntrinsicElements>(
     tag: Tag
   ): StyledComponent<ComponentProps, ReactJSXIntrinsicElements[Tag]>
@@ -113,7 +113,7 @@ export interface CreateStyled {
     component: C,
     options: FilteringStyledOptions<React.ComponentProps<C>, ForwardedProps>
   ): CreateStyledComponent<
-    Pick<PropsOf<C>, ForwardedProps> & {
+    Pick<React.ComponentProps<C>, ForwardedProps> & {
       theme?: Theme
     },
     {},
@@ -126,7 +126,7 @@ export interface CreateStyled {
     component: C,
     options?: StyledOptions<React.ComponentProps<C>>
   ): CreateStyledComponent<
-    PropsOf<C> & {
+    React.ComponentProps<C> & {
       theme?: Theme
     },
     {},
@@ -143,7 +143,7 @@ export interface CreateStyled {
     component: C,
     options: FilteringStyledOptions<React.ComponentProps<C>, ForwardedProps>
   ): CreateStyledComponent<
-    Pick<PropsOf<C>, ForwardedProps> & {
+    Pick<React.ComponentProps<C>, ForwardedProps> & {
       theme?: Theme
     }
   >
@@ -152,7 +152,7 @@ export interface CreateStyled {
     component: C,
     options?: StyledOptions<React.ComponentProps<C>>
   ): CreateStyledComponent<
-    PropsOf<C> & {
+    React.ComponentProps<C> & {
       theme?: Theme
     }
   >
@@ -182,7 +182,6 @@ export interface CreateStyled {
 }
 
 export type ElementType = React.ElementType & {
-  defaultProps?: Partial<any>
   __emotion_real?: ElementType
   __emotion_base?: ElementType
   __emotion_styles?: Interpolation<Theme>[]

packages/styled/test/__snapshots__/index.test.js.snap

@@ -200,7 +200,7 @@ exports[`styled nested 1`] = `
 <div
   className="emotion-0 emotion-1"
 >
-  hello 
+  hello
   <h1
     className="emotion-2 emotion-3"
   >
@@ -313,30 +313,6 @@ exports[`styled ref 1`] = `
 </h1>
 `;
 
-exports[`styled should forward .defaultProps when reusing __emotion_base 1`] = `
-.emotion-0 {
-  text-align: center;
-  color: red;
-}
-
-.emotion-2 {
-  text-align: center;
-  color: red;
-  font-style: italic;
-}
-
-<div>
-  <h1
-    className="emotion-0 emotion-1"
-    color="red"
-  />
-  <h1
-    className="emotion-2 emotion-3"
-    color="red"
-  />
-</div>
-`;
-
 exports[`styled throws if undefined is passed as the component 1`] = `
 "You are trying to create a styled element with an undefined component.
 You may have forgotten to import it."

packages/styled/test/index.test.js

@@ -326,32 +326,6 @@ describe('styled', () => {
     expect(tree).toMatchSnapshot()
   })
 
-  test('should forward .defaultProps when reusing __emotion_base', () => {
-    const Title = styled('h1')`
-      text-align: center;
-      ${props => ({
-        color: props.color
-      })};
-    `
-
-    Title.defaultProps = {
-      color: 'red'
-    }
-
-    const Title2 = styled(Title)`
-      font-style: italic;
-    `
-
-    const tree = renderer
-      .create(
-        <div>
-          <Title />
-          <Title2 />
-        </div>
-      )
-      .toJSON()
-    expect(tree).toMatchSnapshot()
-  })
   test('withComponent will replace tags but keep styling classes', () => {
     const Title = styled('h1')`
       color: green;

packages/styled/types/tests-base.tsx

@@ -328,30 +328,6 @@ declare const ref3_2: (element: HTMLDivElement | null) => void
   ;<StyledReadable kind="magazine" author="Hejlsberg" /> // $ExpectError
 }
 
-interface Props {
-  prop: boolean
-}
-class ClassWithDefaultProps extends React.Component<Props> {
-  static defaultProps = { prop: false }
-  render() {
-    return this.props.prop ? <Button0 /> : <Button1 />
-  }
-}
-const StyledClassWithDefaultProps = styled(ClassWithDefaultProps)`
-  background-color: red;
-`
-const classInstance = <StyledClassWithDefaultProps />
-
-const FCWithDefaultProps = ({ prop }: Props) =>
-  prop ? <Button0 /> : <Button1 />
-FCWithDefaultProps.defaultProps = {
-  prop: false
-}
-const StyledFCWithDefaultProps = styled(FCWithDefaultProps)`
-  background-color: red;
-`
-const fcInstance = <StyledFCWithDefaultProps />
-
 interface PropsA {
   title: string
 }