diff --git a/.changeset/early-badgers-teach.md b/.changeset/early-badgers-teach.md new file mode 100644 index 0000000000..4da8da5f9e --- /dev/null +++ b/.changeset/early-badgers-teach.md @@ -0,0 +1,6 @@ +--- +'@emotion/styled': major +'@emotion/react': major +--- + +Removed `.defaultProps` support diff --git a/packages/jest/test/__snapshots__/react-enzyme.test.js.snap b/packages/jest/test/__snapshots__/react-enzyme.test.js.snap index 0117cc108c..12f2a6d524 100644 --- a/packages/jest/test/__snapshots__/react-enzyme.test.js.snap +++ b/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; +} +
- @@ -664,13 +657,7 @@ exports[`enzyme shallow styled with css prop 1`] = ` exports[`enzyme shallow theming 1`] = `
- - diff --git a/packages/jest/test/react-enzyme.test.js b/packages/jest/test/react-enzyme.test.js index e91e2e9f83..487da8d954 100644 --- a/packages/jest/test/react-enzyme.test.js +++ b/packages/jest/test/react-enzyme.test.js @@ -3,7 +3,13 @@ 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' @@ -11,6 +17,19 @@ 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() + + 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' } diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts index c112759c86..60905b8f6b 100644 --- a/packages/react/src/index.ts +++ b/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 declare const jest: unknown diff --git a/packages/react/src/theming.tsx b/packages/react/src/theming.tsx index dd513d0335..6d84bf36b3 100644 --- a/packages/react/src/theming.tsx +++ b/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, 'theme'> & { theme?: Theme } + DistributiveOmit, 'theme'> & { theme?: Theme } > export function withTheme( Component: React.ComponentType diff --git a/packages/react/src/types.ts b/packages/react/src/types.ts index 592bd3e7f7..db8e5ea140 100644 --- a/packages/react/src/types.ts +++ b/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 -> = ReactJSX.LibraryManagedAttributes> - // We need to use this version of Omit as it's distributive (Will preserve unions) export type DistributiveOmit = T extends any ? Pick> diff --git a/packages/react/types/tests-theming.tsx b/packages/react/types/tests-theming.tsx index 3481deb181..0519d3fd0c 100644 --- a/packages/react/types/tests-theming.tsx +++ b/packages/react/types/tests-theming.tsx @@ -38,27 +38,10 @@ const ThemedComp = withTheme(CompC) ; ; -const CompFCWithDefault = ({ prop }: Props) => (prop ? :
) -CompFCWithDefault.defaultProps = { prop: false } -class CompCWithDefault extends React.Component { - static defaultProps = { prop: false } - render() { - return this.props.prop ? :
- } -} - { const theme: Theme = useTheme() } -const ThemedFCWithDefault = withTheme(CompFCWithDefault) -; -; - -const ThemedCompWithDefault = withTheme(CompCWithDefault) -; -; - { interface Book { kind: 'book' diff --git a/packages/styled/src/base.tsx b/packages/styled/src/base.tsx index 66e49a725d..213a6a3ba1 100644 --- a/packages/styled/src/base.tsx +++ b/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 diff --git a/packages/styled/src/types.ts b/packages/styled/src/types.ts index 74ce3dcc81..b66897604a 100644 --- a/packages/styled/src/types.ts +++ b/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>>( component: C ): StyledComponent< - ComponentProps & PropsOf, + ComponentProps & React.ComponentProps, {}, { ref?: React.Ref> } > withComponent>>( component: C - ): StyledComponent> + ): StyledComponent> withComponent( tag: Tag ): StyledComponent @@ -113,7 +113,7 @@ export interface CreateStyled { component: C, options: FilteringStyledOptions, ForwardedProps> ): CreateStyledComponent< - Pick, ForwardedProps> & { + Pick, ForwardedProps> & { theme?: Theme }, {}, @@ -126,7 +126,7 @@ export interface CreateStyled { component: C, options?: StyledOptions> ): CreateStyledComponent< - PropsOf & { + React.ComponentProps & { theme?: Theme }, {}, @@ -143,7 +143,7 @@ export interface CreateStyled { component: C, options: FilteringStyledOptions, ForwardedProps> ): CreateStyledComponent< - Pick, ForwardedProps> & { + Pick, ForwardedProps> & { theme?: Theme } > @@ -152,7 +152,7 @@ export interface CreateStyled { component: C, options?: StyledOptions> ): CreateStyledComponent< - PropsOf & { + React.ComponentProps & { theme?: Theme } > @@ -182,7 +182,6 @@ export interface CreateStyled { } export type ElementType = React.ElementType & { - defaultProps?: Partial __emotion_real?: ElementType __emotion_base?: ElementType __emotion_styles?: Interpolation[] diff --git a/packages/styled/test/__snapshots__/index.test.js.snap b/packages/styled/test/__snapshots__/index.test.js.snap index ed1d5bb24a..ea9b2bf5d5 100644 --- a/packages/styled/test/__snapshots__/index.test.js.snap +++ b/packages/styled/test/__snapshots__/index.test.js.snap @@ -313,30 +313,6 @@ exports[`styled ref 1`] = ` `; -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; -} - -
-

-

-

-`; - 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

My Subtitle

diff --git a/packages/styled/test/index.test.js b/packages/styled/test/index.test.js index 9b37633a47..14e596a1bc 100644 --- a/packages/styled/test/index.test.js +++ b/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( -
- - <Title2 /> - </div> - ) - .toJSON() - expect(tree).toMatchSnapshot() - }) test('withComponent will replace tags but keep styling classes', () => { const Title = styled('h1')` color: green; diff --git a/packages/styled/types/tests-base.tsx b/packages/styled/types/tests-base.tsx index 497910a826..f6775c86e2 100644 --- a/packages/styled/types/tests-base.tsx +++ b/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 }