From 5d57842af639ab666b4478fa9a526608eef8f0c9 Mon Sep 17 00:00:00 2001 From: renatonouman Date: Tue, 30 Mar 2021 20:52:42 -0300 Subject: [PATCH 1/5] Make .extend pattern optional as a custom identifier --- src/createTransformer.ts | 8 +++++--- src/models/Options.ts | 7 +++++++ 2 files changed, 12 insertions(+), 3 deletions(-) diff --git a/src/createTransformer.ts b/src/createTransformer.ts index 40e1c6a..5b03418 100644 --- a/src/createTransformer.ts +++ b/src/createTransformer.ts @@ -28,9 +28,7 @@ function isStyledFunction(node: ts.Node, identifiers: CustomStyledIdentifiers): return true; } - if (node.name.text === 'extend' - && isValidComponent(node.expression)) { - + if (isStyledExtendIdentifier(node.name.text, identifiers)) { return true; } @@ -97,6 +95,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[]; } From 5b11b8e5267cac0b24dc1c7bd5559a2701cf0b95 Mon Sep 17 00:00:00 2001 From: renatonouman Date: Tue, 30 Mar 2021 20:52:53 -0300 Subject: [PATCH 2/5] Update snapshots --- src/__tests__/baselines/base/issue33.ts.baseline | 2 +- src/__tests__/baselines/base/sample1.ts.baseline | 4 ++-- src/__tests__/baselines/base/style-objects.ts.baseline | 4 ++-- src/__tests__/baselines/ssr/issue33.ts.baseline | 2 +- src/__tests__/baselines/ssr/sample1.ts.baseline | 6 +++--- src/__tests__/baselines/ssr/style-objects.ts.baseline | 6 +++--- 6 files changed, 12 insertions(+), 12 deletions(-) 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 fef7e0b..bc605de 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 \` color: black; \`; - export const SmallButton = Button.extend.withConfig({ displayName: "SmallButton", componentId: "sc-8sh5f7" }) \` + export const SmallButton = Button.extend \` font-size: .7em; \`; - const MiniButton = styled(SmallButton).attrs({ size: "mini" }).withConfig({ displayName: "MiniButton", componentId: "sc-v7haos" }) \` + const MiniButton = styled(SmallButton).attrs({ size: "mini" }).withConfig({ displayName: "MiniButton", componentId: "sc-13fgjrc" }) \` font-size: .1em; \`; diff --git a/src/__tests__/baselines/ssr/style-objects.ts.baseline b/src/__tests__/baselines/ssr/style-objects.ts.baseline index 2782561..71276a0 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({ color: 'black' }); - export const SmallButton = Button.extend.withConfig({ displayName: "SmallButton", componentId: "sc-ftk9hu" })({ + export const SmallButton = Button.extend({ fontSize: '.7em' }); - const MiniButton = styled(SmallButton).attrs({ size: "mini" }).withConfig({ displayName: "MiniButton", componentId: "sc-15rszef" })({ + const MiniButton = styled(SmallButton).attrs({ size: "mini" }).withConfig({ displayName: "MiniButton", componentId: "sc-v7xcd0" })({ fontSize: '.1em' }); From 459ae067a33de77a674cdafb40bb552c7d6fede6 Mon Sep 17 00:00:00 2001 From: renatonouman Date: Thu, 1 Apr 2021 20:07:42 -0300 Subject: [PATCH 3/5] Add line to CHANGELOG.md --- CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 07e3ae6..d9df008 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,8 @@ All notable changes to this project will be documented in this file. ## [Unreleased] +- remove deprecated .extend transformation pattern (fix #48 in #152) + ## [1.4.4] - bugfix in minification of tabs (fix #142 in #152) From 9604c9624de6de3a1aacf1f5a5707dfdf3b5a998 Mon Sep 17 00:00:00 2001 From: Renato Nouman Date: Thu, 1 Apr 2021 20:08:56 -0300 Subject: [PATCH 4/5] Check that styled extend pattern is also valid component Co-authored-by: Igor Oleinikov --- src/createTransformer.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/createTransformer.ts b/src/createTransformer.ts index 5b03418..cde6cde 100644 --- a/src/createTransformer.ts +++ b/src/createTransformer.ts @@ -28,7 +28,8 @@ function isStyledFunction(node: ts.Node, identifiers: CustomStyledIdentifiers): return true; } - if (isStyledExtendIdentifier(node.name.text, identifiers)) { + if (isStyledExtendIdentifier(node.name.text, identifiers) + && isValidComponent(node.expression)) { return true; } From ddd6db4361ac1bbd5920fa7206818294afbdb085 Mon Sep 17 00:00:00 2001 From: Igor Oleinikov Date: Fri, 2 Apr 2021 12:42:18 -0700 Subject: [PATCH 5/5] Update CHANGELOG.md --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index d9df008..29f28a0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,7 +3,7 @@ All notable changes to this project will be documented in this file. ## [Unreleased] -- remove deprecated .extend transformation pattern (fix #48 in #152) +- remove deprecated .extend transformation pattern (fix #48 in #370) ## [1.4.4]