diff --git a/CHANGELOG.md b/CHANGELOG.md index 4dd4e80..a0a1282 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,7 @@ All notable changes to this project will be documented in this file. ## [Unreleased] - transform anonymous default exports (fix #371 in #367) +- remove deprecated .extend transformation pattern (fix #48 in #370) ## [1.4.4] diff --git a/src/__tests__/baselines/base/issue33.ts.baseline b/src/__tests__/baselines/base/issue33.ts.baseline index e5dee69..8051f5b 100644 --- a/src/__tests__/baselines/base/issue33.ts.baseline +++ b/src/__tests__/baselines/base/issue33.ts.baseline @@ -39,7 +39,7 @@ TypeScript after transform: declare const jQuery: any; declare const _: any; declare const Button: any; - const Button1 = Button.extend.withConfig({ displayName: "Button1" }) \` color: red \`; + const Button1 = Button.extend \` color: red \`; const Button2 = $.extend \` color: red \`; const Button3 = jQuery.extend \` color: red \`; const Button4 = _.extend \` color: red \`; diff --git a/src/__tests__/baselines/base/sample1.ts.baseline b/src/__tests__/baselines/base/sample1.ts.baseline index 44a62f8..e82141a 100644 --- a/src/__tests__/baselines/base/sample1.ts.baseline +++ b/src/__tests__/baselines/base/sample1.ts.baseline @@ -78,13 +78,13 @@ TypeScript after transform: const OtherButton = styled(Button).withConfig({ displayName: "OtherButton" }) \` color: blue; \`; - const SuperButton = Button.extend.withConfig({ displayName: "SuperButton" }) \` + const SuperButton = Button.extend \` color: super; \`; export default styled.link \` color: black; \`; - export const SmallButton = Button.extend.withConfig({ displayName: "SmallButton" }) \` + export const SmallButton = Button.extend \` font-size: .7em; \`; const MiniButton = styled(SmallButton).attrs({ size: "mini" }).withConfig({ displayName: "MiniButton" }) \` diff --git a/src/__tests__/baselines/base/style-objects.ts.baseline b/src/__tests__/baselines/base/style-objects.ts.baseline index baa37f5..95d4e16 100644 --- a/src/__tests__/baselines/base/style-objects.ts.baseline +++ b/src/__tests__/baselines/base/style-objects.ts.baseline @@ -78,13 +78,13 @@ TypeScript after transform: const OtherButton = styled(Button).withConfig({ displayName: "OtherButton" })({ color: 'blue' }); - const SuperButton = Button.extend.withConfig({ displayName: "SuperButton" })({ + const SuperButton = Button.extend({ color: 'super' }); export default styled.link({ color: 'black' }); - export const SmallButton = Button.extend.withConfig({ displayName: "SmallButton" })({ + export const SmallButton = Button.extend({ fontSize: '.7em' }); const MiniButton = styled(SmallButton).attrs({ size: "mini" }).withConfig({ displayName: "MiniButton" })({ diff --git a/src/__tests__/baselines/ssr/issue33.ts.baseline b/src/__tests__/baselines/ssr/issue33.ts.baseline index 1b6ee9b..8051f5b 100644 --- a/src/__tests__/baselines/ssr/issue33.ts.baseline +++ b/src/__tests__/baselines/ssr/issue33.ts.baseline @@ -39,7 +39,7 @@ TypeScript after transform: declare const jQuery: any; declare const _: any; declare const Button: any; - const Button1 = Button.extend.withConfig({ displayName: "Button1", componentId: "sc-1iinolv" }) \` color: red \`; + const Button1 = Button.extend \` color: red \`; const Button2 = $.extend \` color: red \`; const Button3 = jQuery.extend \` color: red \`; const Button4 = _.extend \` color: red \`; diff --git a/src/__tests__/baselines/ssr/sample1.ts.baseline b/src/__tests__/baselines/ssr/sample1.ts.baseline index 029297d..50ae487 100644 --- a/src/__tests__/baselines/ssr/sample1.ts.baseline +++ b/src/__tests__/baselines/ssr/sample1.ts.baseline @@ -78,16 +78,16 @@ TypeScript after transform: const OtherButton = styled(Button).withConfig({ displayName: "OtherButton", componentId: "sc-ce0fkl" }) \` color: blue; \`; - const SuperButton = Button.extend.withConfig({ displayName: "SuperButton", componentId: "sc-10xv1bi" }) \` + const SuperButton = Button.extend \` color: super; \`; - export default styled.link.withConfig({ componentId: "sc-iechwg" }) \` + export default styled.link.withConfig({ componentId: "sc-vba0dl" }) \` color: black; \`; - export const SmallButton = Button.extend.withConfig({ displayName: "SmallButton", componentId: "sc-3ane8u" }) \` + export const SmallButton = Button.extend \` font-size: .7em; \`; - const MiniButton = styled(SmallButton).attrs({ size: "mini" }).withConfig({ displayName: "MiniButton", componentId: "sc-12a48t6" }) \` + const MiniButton = styled(SmallButton).attrs({ size: "mini" }).withConfig({ displayName: "MiniButton", componentId: "sc-ndnumj" }) \` font-size: .1em; \`; diff --git a/src/__tests__/baselines/ssr/style-objects.ts.baseline b/src/__tests__/baselines/ssr/style-objects.ts.baseline index 91f25e4..623e570 100644 --- a/src/__tests__/baselines/ssr/style-objects.ts.baseline +++ b/src/__tests__/baselines/ssr/style-objects.ts.baseline @@ -78,16 +78,16 @@ TypeScript after transform: const OtherButton = styled(Button).withConfig({ displayName: "OtherButton", componentId: "sc-14ah7t" })({ color: 'blue' }); - const SuperButton = Button.extend.withConfig({ displayName: "SuperButton", componentId: "sc-1t5v351" })({ + const SuperButton = Button.extend({ color: 'super' }); - export default styled.link.withConfig({ componentId: "sc-115bov" })({ + export default styled.link.withConfig({ componentId: "sc-8xjslt" })({ color: 'black' }); - export const SmallButton = Button.extend.withConfig({ displayName: "SmallButton", componentId: "sc-blt0bk" })({ + export const SmallButton = Button.extend({ fontSize: '.7em' }); - const MiniButton = styled(SmallButton).attrs({ size: "mini" }).withConfig({ displayName: "MiniButton", componentId: "sc-96ogu9" })({ + const MiniButton = styled(SmallButton).attrs({ size: "mini" }).withConfig({ displayName: "MiniButton", componentId: "sc-ad4g7l" })({ fontSize: '.1em' }); diff --git a/src/createTransformer.ts b/src/createTransformer.ts index fe55ffa..ad02b56 100644 --- a/src/createTransformer.ts +++ b/src/createTransformer.ts @@ -28,9 +28,8 @@ function isStyledFunction(node: ts.Node, identifiers: CustomStyledIdentifiers): return true; } - if (node.name.text === 'extend' + if (isStyledExtendIdentifier(node.name.text, identifiers) && isValidComponent(node.expression)) { - return true; } @@ -97,6 +96,10 @@ function isStyledCreateGlobalStyleIdentifier(name: string, { createGlobalStyle = return createGlobalStyle.indexOf(name) >= 0; } +function isStyledExtendIdentifier(name: string, { extend = [] }: CustomStyledIdentifiers) { + return extend.indexOf(name) >= 0; +} + function isMinifyableStyledFunction(node: ts.Node, identifiers: CustomStyledIdentifiers) { return isStyledFunction(node, identifiers) || ( diff --git a/src/models/Options.ts b/src/models/Options.ts index 01e659d..116103b 100644 --- a/src/models/Options.ts +++ b/src/models/Options.ts @@ -76,4 +76,11 @@ export interface CustomStyledIdentifiers { * @defaultValue `['createGlobalStyle']` */ createGlobalStyle?: string[]; + + /** + * Identifiers of `extend` function. + * + * @defaultValue `[]` + */ + extend?: string[]; }