Removed .defaultProps support (#3286)

* Removed `.defaultProps` support

* fix tests

* remove unused import

Author: Andarist

.changeset/early-badgers-teach.md

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

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

@@ -250,14 +250,13 @@ exports[`enzyme mount theming 1`] = `
   border: 2px solid red;
 }
 
+.emotion-2 {
+  color: blue;
+  border: 2px solid blue;
+}
+
 <div>
-  <Button
-    theme={
-      {
-        "main": "red",
-      }
-    }
-  >
+  <Button>
     <button
       className="emotion-0 emotion-1"
     >
@@ -271,15 +270,9 @@ exports[`enzyme mount theming 1`] = `
       }
     }
   >
-    <Button
-      theme={
-        {
-          "main": "red",
-        }
-      }
-    >
+    <Button>
       <button
-        className="emotion-0 emotion-1"
+        className="emotion-2 emotion-1"
       >
         Themed
       </button>
@@ -664,13 +657,7 @@ exports[`enzyme shallow styled with css prop 1`] = `
 
 exports[`enzyme shallow theming 1`] = `
 <div>
-  <Button
-    theme={
-      {
-        "main": "red",
-      }
-    }
-  >
+  <Button>
     Normal
   </Button>
   <ThemeProvider
@@ -680,13 +667,7 @@ exports[`enzyme shallow theming 1`] = `
       }
     }
   >
-    <Button
-      theme={
-        {
-          "main": "red",
-        }
-      }
-    >
+    <Button>
       Themed
     </Button>
   </ThemeProvider>

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

@@ -3,14 +3,33 @@ import 'test-utils/enzyme-env'
 
 import jestInCase from 'jest-in-case'
 import * as enzyme from 'enzyme'
-import { css, jsx, ThemeProvider } from '@emotion/react'
+import {
+  __unsafe_useEmotionCache,
+  css,
+  jsx,
+  ThemeProvider,
+  EmotionCache
+} from '@emotion/react'
 import styled from '@emotion/styled'
 import React from 'react'
 import toJson from 'enzyme-to-json'
 
 import { matchers } from '@emotion/jest'
 import * as serializer from '@emotion/jest/enzyme-serializer'
 
+afterEach(() => {
+  let cache
+  function GetCache() {
+    cache = __unsafe_useEmotionCache()
+    return null
+  }
+  enzyme.shallow(<GetCache />)
+
+  cache.registered = {}
+  cache.inserted = {}
+  cache.sheet.flush()
+})
+
 const isReact16 = React.version.split('.')[0] === '16'
 
 expect.extend(matchers)
@@ -241,16 +260,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/index.ts

@@ -30,7 +30,7 @@ export type {
 export { ThemeContext, useTheme, ThemeProvider, withTheme } from './theming'
 export type { Theme, ThemeProviderProps, WithTheme } from './theming'
 export { default as css } from './css'
-export type { DistributiveOmit, PropsOf } from './types'
+export type { DistributiveOmit } from './types'
 
 declare const global: Record<string, unknown>
 declare const jest: unknown

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

@@ -1,6 +1,6 @@
 import { ComponentSelector, Interpolation } from '@emotion/serialize'
 import { ReactJSXIntrinsicElements } from './jsx-namespace'
-import { PropsOf, Theme } from '@emotion/react'
+import { Theme } from '@emotion/react'
 
 /** Same as StyledOptions but shouldForwardProp must be a type guard */
 export interface FilteringStyledOptions<
@@ -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

@@ -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."
@@ -384,7 +360,7 @@ exports[`styled withComponent will replace tags but keep styling classes 1`] = `
     My Title
   </h1>
   <h2
-    className="emotion-2 emotion-3"
+    className="emotion-2 emotion-19"
   >
     My Subtitle
   </h2>

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
 }