Skip to content

Commit ffa4ad2

Browse files
roikoren755Igorbek
roikoren755
and
Igorbek
authored
Restore componentIdPrefix fallback to getIdFromNode (#518)
![image](https://user-images.githubusercontent.com/26850796/137908491-2c7bb89a-8ef6-4d7d-a6c9-1133250abcc9.png) As part of the changes for v2, `componentId`s lost their default `sc` prefix in the `withConfig` call. Co-authored-by: Igor Oleinikov <igor@oleinikov.ru>
1 parent 6ced1c1 commit ffa4ad2

File tree

6 files changed

+29
-29
lines changed

6 files changed

+29
-29
lines changed

‎src/__tests__/baselines/ssr/multiple-components.tsx.baseline‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -41,13 +41,13 @@ TypeScript after transform:
4141

4242
import styled from 'styled-components';
4343
export function createButtons() {
44-
const A = styled.button.withConfig({ displayName: "A", componentId: "-hana72" }) \` color: red; \`;
45-
const B = styled(A).withConfig({ displayName: "B", componentId: "-ke4nds" }) \` color: blue; \`;
44+
const A = styled.button.withConfig({ displayName: "A", componentId: "sc-hana72" }) \` color: red; \`;
45+
const B = styled(A).withConfig({ displayName: "B", componentId: "sc-ke4nds" }) \` color: blue; \`;
4646
return { A, B };
4747
}
4848
export function createDivs() {
49-
const A = styled.div.withConfig({ displayName: "A", componentId: "-1q7vmnt" }) \` color: green; \`;
50-
const B = styled(A).withConfig({ displayName: "B", componentId: "-7q8oop" }) \` color: yellow; \`;
49+
const A = styled.div.withConfig({ displayName: "A", componentId: "sc-1q7vmnt" }) \` color: green; \`;
50+
const B = styled(A).withConfig({ displayName: "B", componentId: "sc-7q8oop" }) \` color: yellow; \`;
5151
return { A, B };
5252
}
5353

@@ -56,13 +56,13 @@ TypeScript after transpile module:
5656

5757
import styled from 'styled-components';
5858
export function createButtons() {
59-
const A = styled.button.withConfig({ displayName: "A", componentId: "-67koye" }) \` color: red; \`;
60-
const B = styled(A).withConfig({ displayName: "B", componentId: "-1svbc9u" }) \` color: blue; \`;
59+
const A = styled.button.withConfig({ displayName: "A", componentId: "sc-67koye" }) \` color: red; \`;
60+
const B = styled(A).withConfig({ displayName: "B", componentId: "sc-1svbc9u" }) \` color: blue; \`;
6161
return { A, B };
6262
}
6363
export function createDivs() {
64-
const A = styled.div.withConfig({ displayName: "A", componentId: "-uo2lv8" }) \` color: green; \`;
65-
const B = styled(A).withConfig({ displayName: "B", componentId: "-1cxyj9q" }) \` color: yellow; \`;
64+
const A = styled.div.withConfig({ displayName: "A", componentId: "sc-uo2lv8" }) \` color: green; \`;
65+
const B = styled(A).withConfig({ displayName: "B", componentId: "sc-1cxyj9q" }) \` color: yellow; \`;
6666
return { A, B };
6767
}
6868

‎src/__tests__/baselines/ssr/sample1.ts.baseline‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -68,52 +68,52 @@ TypeScript before transform:
6868
TypeScript after transform:
6969

7070
import styled from 'styled-components';
71-
const Button = styled.button.withConfig({ displayName: "Button", componentId: "-1okqsxw" }) \`
71+
const Button = styled.button.withConfig({ displayName: "Button", componentId: "sc-1okqsxw" }) \`
7272
color: red;
7373
\`;
7474
declare const nonStyled: any;
7575
const NonButton = nonStyled.button \`
7676
yo
7777
\`;
78-
const OtherButton = styled(Button).withConfig({ displayName: "OtherButton", componentId: "-ce0fkl" }) \`
78+
const OtherButton = styled(Button).withConfig({ displayName: "OtherButton", componentId: "sc-ce0fkl" }) \`
7979
color: blue;
8080
\`;
8181
const SuperButton = Button.extend \`
8282
color: super;
8383
\`;
84-
export default styled.link.withConfig({ componentId: "-vba0dl" }) \`
84+
export default styled.link.withConfig({ componentId: "sc-vba0dl" }) \`
8585
color: black;
8686
\`;
8787
export const SmallButton = Button.extend \`
8888
font-size: .7em;
8989
\`;
90-
const MiniButton = styled(SmallButton).attrs({ size: 'mini' }).withConfig({ displayName: "MiniButton", componentId: "-ndnumj" }) \`
90+
const MiniButton = styled(SmallButton).attrs({ size: 'mini' }).withConfig({ displayName: "MiniButton", componentId: "sc-ndnumj" }) \`
9191
font-size: .1em;
9292
\`;
9393

9494

9595
TypeScript after transpile module:
9696

9797
import styled from 'styled-components';
98-
const Button = styled.button.withConfig({ displayName: "Button", componentId: "-13dat8f" }) \`
98+
const Button = styled.button.withConfig({ displayName: "Button", componentId: "sc-13dat8f" }) \`
9999
color: red;
100100
\`;
101101
const NonButton = nonStyled.button \`
102102
yo
103103
\`;
104-
const OtherButton = styled(Button).withConfig({ displayName: "OtherButton", componentId: "-1pbo6g5" }) \`
104+
const OtherButton = styled(Button).withConfig({ displayName: "OtherButton", componentId: "sc-1pbo6g5" }) \`
105105
color: blue;
106106
\`;
107107
const SuperButton = Button.extend \`
108108
color: super;
109109
\`;
110-
export default styled.link.withConfig({ componentId: "-ep20on" }) \`
110+
export default styled.link.withConfig({ componentId: "sc-ep20on" }) \`
111111
color: black;
112112
\`;
113113
export const SmallButton = Button.extend \`
114114
font-size: .7em;
115115
\`;
116-
const MiniButton = styled(SmallButton).attrs({ size: 'mini' }).withConfig({ displayName: "MiniButton", componentId: "-1cgykmr" }) \`
116+
const MiniButton = styled(SmallButton).attrs({ size: 'mini' }).withConfig({ displayName: "MiniButton", componentId: "sc-1cgykmr" }) \`
117117
font-size: .1em;
118118
\`;
119119

‎src/__tests__/baselines/ssr/sample2.ts.baseline‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ TypeScript after transform:
2828
const styled2 = styled;
2929
const NonButton = styled.button;
3030
const NonStyled = styled \` color: red; \`;
31-
const Link = styled(NonStyled).withConfig({ displayName: "Link", componentId: "-1xlc242" }) \` color: red; \`;
31+
const Link = styled(NonStyled).withConfig({ displayName: "Link", componentId: "sc-1xlc242" }) \` color: red; \`;
3232

3333

3434
TypeScript after transpile module:
@@ -37,7 +37,7 @@ TypeScript after transpile module:
3737
const styled2 = styled;
3838
const NonButton = styled.button;
3939
const NonStyled = styled \` color: red; \`;
40-
const Link = styled(NonStyled).withConfig({ displayName: "Link", componentId: "-z7xxm1" }) \` color: red; \`;
40+
const Link = styled(NonStyled).withConfig({ displayName: "Link", componentId: "sc-z7xxm1" }) \` color: red; \`;
4141

4242

4343

‎src/__tests__/baselines/ssr/sample3.tsx.baseline‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ TypeScript after transform:
4545
interface LabelProps {
4646
size: number;
4747
}
48-
const CustomLabel = styled.label.withConfig({ displayName: "CustomLabel", componentId: "-1ydgk9x" }) \`
48+
const CustomLabel = styled.label.withConfig({ displayName: "CustomLabel", componentId: "sc-1ydgk9x" }) \`
4949
font-size: \${(props: LabelProps) => props.size + 'px'}
5050
\`;
5151
const LabeledLink = () => <SmallButton />;
@@ -55,7 +55,7 @@ TypeScript after transform:
5555
TypeScript after transpile module:
5656

5757
import styled from '../themed-styled';
58-
const CustomLabel = styled.label.withConfig({ displayName: "CustomLabel", componentId: "-xc3x4h" }) \`
58+
const CustomLabel = styled.label.withConfig({ displayName: "CustomLabel", componentId: "sc-xc3x4h" }) \`
5959
font-size: \${(props) => props.size + 'px'}
6060
\`;
6161
const LabeledLink = () => />;;

‎src/__tests__/baselines/ssr/style-objects.ts.baseline‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -68,51 +68,51 @@ TypeScript before transform:
6868
TypeScript after transform:
6969

7070
declare const styled: any;
71-
const Button = styled.button.withConfig({ displayName: "Button", componentId: "-7b7p9e" })({
71+
const Button = styled.button.withConfig({ displayName: "Button", componentId: "sc-7b7p9e" })({
7272
color: 'red'
7373
});
7474
declare const nonStyled: any;
7575
const NonButton = nonStyled.button({
7676
color: 'red'
7777
});
78-
const OtherButton = styled(Button).withConfig({ displayName: "OtherButton", componentId: "-14ah7t" })({
78+
const OtherButton = styled(Button).withConfig({ displayName: "OtherButton", componentId: "sc-14ah7t" })({
7979
color: 'blue'
8080
});
8181
const SuperButton = Button.extend({
8282
color: 'super'
8383
});
84-
export default styled.link.withConfig({ componentId: "-8xjslt" })({
84+
export default styled.link.withConfig({ componentId: "sc-8xjslt" })({
8585
color: 'black'
8686
});
8787
export const SmallButton = Button.extend({
8888
fontSize: '.7em'
8989
});
90-
const MiniButton = styled(SmallButton).attrs({ size: 'mini' }).withConfig({ displayName: "MiniButton", componentId: "-ad4g7l" })({
90+
const MiniButton = styled(SmallButton).attrs({ size: 'mini' }).withConfig({ displayName: "MiniButton", componentId: "sc-ad4g7l" })({
9191
fontSize: '.1em'
9292
});
9393

9494

9595
TypeScript after transpile module:
9696

97-
const Button = styled.button.withConfig({ displayName: "Button", componentId: "-13dat8f" })({
97+
const Button = styled.button.withConfig({ displayName: "Button", componentId: "sc-13dat8f" })({
9898
color: 'red'
9999
});
100100
const NonButton = nonStyled.button({
101101
color: 'red'
102102
});
103-
const OtherButton = styled(Button).withConfig({ displayName: "OtherButton", componentId: "-1pbo6g5" })({
103+
const OtherButton = styled(Button).withConfig({ displayName: "OtherButton", componentId: "sc-1pbo6g5" })({
104104
color: 'blue'
105105
});
106106
const SuperButton = Button.extend({
107107
color: 'super'
108108
});
109-
export default styled.link.withConfig({ componentId: "-ep20on" })({
109+
export default styled.link.withConfig({ componentId: "sc-ep20on" })({
110110
color: 'black'
111111
});
112112
export const SmallButton = Button.extend({
113113
fontSize: '.7em'
114114
});
115-
const MiniButton = styled(SmallButton).attrs({ size: 'mini' }).withConfig({ displayName: "MiniButton", componentId: "-1cgykmr" })({
115+
const MiniButton = styled(SmallButton).attrs({ size: 'mini' }).withConfig({ displayName: "MiniButton", componentId: "sc-1cgykmr" })({
116116
fontSize: '.1em'
117117
});
118118

‎src/createTransformer.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -160,7 +160,7 @@ export function createTransformer({
160160
const filePath = sourceRoot
161161
? path.relative(sourceRoot, fileName).replace(path.sep, path.posix.sep)
162162
: fileName;
163-
return (componentIdPrefix ?? 'sc') + '-' + hash(`${getDisplayNameFromNode(node, sourceFile)}${filePath}${position}`);
163+
return (componentIdPrefix || 'sc') + '-' + hash(`${getDisplayNameFromNode(node, sourceFile)}${filePath}${position}`);
164164
}
165165
return undefined;
166166
}

0 commit comments

Comments
 (0)