Remove deprecated .extend transformation pattern

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]
 

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

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" }) \`

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" })({

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

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

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'
   });
 

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)
         || (

src/models/Options.ts

@@ -76,4 +76,11 @@ export interface CustomStyledIdentifiers {
      * @defaultValue `['createGlobalStyle']`
      */
     createGlobalStyle?: string[];
+
+    /**
+     * Identifiers of `extend` function.
+     * 
+     * @defaultValue `[]`
+     */
+     extend?: string[];
 }