@@ -40,7 +40,7 @@ Source code:
4040
4141TypeScript before transform:
4242
43- import styled from " styled-components" ;
43+ import styled from ' styled-components' ;
4444 const Button = styled.button \`
4545 color: red;
4646 \`;
@@ -60,7 +60,7 @@ TypeScript before transform:
6060 export const SmallButton = Button.extend \`
6161 font-size: .7em;
6262 \`;
63- const MiniButton = styled(SmallButton).attrs({ size: " mini" }) \`
63+ const MiniButton = styled(SmallButton).attrs({ size: ' mini' }) \`
6464 font-size: .1em;
6565 \`;
6666
@@ -87,7 +87,33 @@ TypeScript after transform:
8787 export const SmallButton = Button.extend \`
8888 font-size: .7em;
8989 \`;
90- const MiniButton = styled(SmallButton).attrs({ size: "mini" }).withConfig({ displayName: "MiniButton" }) \`
90+ const MiniButton = styled(SmallButton).attrs({ size: 'mini' }).withConfig({ displayName: "MiniButton" }) \`
91+ font-size: .1em;
92+ \`;
93+
94+
95+ TypeScript after transpile module:
96+
97+ import styled from 'styled-components';
98+ const Button = styled.button.withConfig({ displayName: "Button" }) \`
99+ color: red;
100+ \`;
101+ const NonButton = nonStyled.button \`
102+ yo
103+ \`;
104+ const OtherButton = styled(Button).withConfig({ displayName: "OtherButton" }) \`
105+ color: blue;
106+ \`;
107+ const SuperButton = Button.extend \`
108+ color: super;
109+ \`;
110+ export default styled.link \`
111+ color: black;
112+ \`;
113+ export const SmallButton = Button.extend \`
114+ font-size: .7em;
115+ \`;
116+ const MiniButton = styled(SmallButton).attrs({ size: 'mini' }).withConfig({ displayName: "MiniButton" }) \`
91117 font-size: .1em;
92118 \`;
93119
0 commit comments