Skip to content

Commit

Permalink
Restore componentIdPrefix fallback to getIdFromNode (#518)
Browse files Browse the repository at this point in the history 
![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>
  • Loading branch information
@roikoren755 @Igorbek
roikoren755 and Igorbek authored Mar 23, 2023
1 parent 6ced1c1 commit ffa4ad2
Show file tree
Hide file tree
Showing 6 changed files with 29 additions and 29 deletions.
16 changes: 8 additions & 8 deletions src/__tests__/baselines/ssr/multiple-components.tsx.baseline
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,13 +41,13 @@ TypeScript after transform:

import styled from 'styled-components';
export function createButtons() {
const A = styled.button.withConfig({ displayName: "A", componentId: "-hana72" }) \` color: red; \`;
const B = styled(A).withConfig({ displayName: "B", componentId: "-ke4nds" }) \` color: blue; \`;
const A = styled.button.withConfig({ displayName: "A", componentId: "sc-hana72" }) \` color: red; \`;
const B = styled(A).withConfig({ displayName: "B", componentId: "sc-ke4nds" }) \` color: blue; \`;
return { A, B };
}
export function createDivs() {
const A = styled.div.withConfig({ displayName: "A", componentId: "-1q7vmnt" }) \` color: green; \`;
const B = styled(A).withConfig({ displayName: "B", componentId: "-7q8oop" }) \` color: yellow; \`;
const A = styled.div.withConfig({ displayName: "A", componentId: "sc-1q7vmnt" }) \` color: green; \`;
const B = styled(A).withConfig({ displayName: "B", componentId: "sc-7q8oop" }) \` color: yellow; \`;
return { A, B };
}

Expand All @@ -56,13 +56,13 @@ TypeScript after transpile module:

import styled from 'styled-components';
export function createButtons() {
const A = styled.button.withConfig({ displayName: "A", componentId: "-67koye" }) \` color: red; \`;
const B = styled(A).withConfig({ displayName: "B", componentId: "-1svbc9u" }) \` color: blue; \`;
const A = styled.button.withConfig({ displayName: "A", componentId: "sc-67koye" }) \` color: red; \`;
const B = styled(A).withConfig({ displayName: "B", componentId: "sc-1svbc9u" }) \` color: blue; \`;
return { A, B };
}
export function createDivs() {
const A = styled.div.withConfig({ displayName: "A", componentId: "-uo2lv8" }) \` color: green; \`;
const B = styled(A).withConfig({ displayName: "B", componentId: "-1cxyj9q" }) \` color: yellow; \`;
const A = styled.div.withConfig({ displayName: "A", componentId: "sc-uo2lv8" }) \` color: green; \`;
const B = styled(A).withConfig({ displayName: "B", componentId: "sc-1cxyj9q" }) \` color: yellow; \`;
return { A, B };
}

Expand Down
16 changes: 8 additions & 8 deletions src/__tests__/baselines/ssr/sample1.ts.baseline
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,52 +68,52 @@ TypeScript before transform:
TypeScript after transform:

import styled from 'styled-components';
const Button = styled.button.withConfig({ displayName: "Button", componentId: "-1okqsxw" }) \`
const Button = styled.button.withConfig({ displayName: "Button", componentId: "sc-1okqsxw" }) \`
color: red;
\`;
declare const nonStyled: any;
const NonButton = nonStyled.button \`
yo
\`;
const OtherButton = styled(Button).withConfig({ displayName: "OtherButton", componentId: "-ce0fkl" }) \`
const OtherButton = styled(Button).withConfig({ displayName: "OtherButton", componentId: "sc-ce0fkl" }) \`
color: blue;
\`;
const SuperButton = Button.extend \`
color: super;
\`;
export default styled.link.withConfig({ componentId: "-vba0dl" }) \`
export default styled.link.withConfig({ componentId: "sc-vba0dl" }) \`
color: black;
\`;
export const SmallButton = Button.extend \`
font-size: .7em;
\`;
const MiniButton = styled(SmallButton).attrs({ size: 'mini' }).withConfig({ displayName: "MiniButton", componentId: "-ndnumj" }) \`
const MiniButton = styled(SmallButton).attrs({ size: 'mini' }).withConfig({ displayName: "MiniButton", componentId: "sc-ndnumj" }) \`
font-size: .1em;
\`;


TypeScript after transpile module:

import styled from 'styled-components';
const Button = styled.button.withConfig({ displayName: "Button", componentId: "-13dat8f" }) \`
const Button = styled.button.withConfig({ displayName: "Button", componentId: "sc-13dat8f" }) \`
color: red;
\`;
const NonButton = nonStyled.button \`
yo
\`;
const OtherButton = styled(Button).withConfig({ displayName: "OtherButton", componentId: "-1pbo6g5" }) \`
const OtherButton = styled(Button).withConfig({ displayName: "OtherButton", componentId: "sc-1pbo6g5" }) \`
color: blue;
\`;
const SuperButton = Button.extend \`
color: super;
\`;
export default styled.link.withConfig({ componentId: "-ep20on" }) \`
export default styled.link.withConfig({ componentId: "sc-ep20on" }) \`
color: black;
\`;
export const SmallButton = Button.extend \`
font-size: .7em;
\`;
const MiniButton = styled(SmallButton).attrs({ size: 'mini' }).withConfig({ displayName: "MiniButton", componentId: "-1cgykmr" }) \`
const MiniButton = styled(SmallButton).attrs({ size: 'mini' }).withConfig({ displayName: "MiniButton", componentId: "sc-1cgykmr" }) \`
font-size: .1em;
\`;

Expand Down
4 changes: 2 additions & 2 deletions src/__tests__/baselines/ssr/sample2.ts.baseline
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ TypeScript after transform:
const styled2 = styled;
const NonButton = styled.button;
const NonStyled = styled \` color: red; \`;
const Link = styled(NonStyled).withConfig({ displayName: "Link", componentId: "-1xlc242" }) \` color: red; \`;
const Link = styled(NonStyled).withConfig({ displayName: "Link", componentId: "sc-1xlc242" }) \` color: red; \`;


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



Expand Down
4 changes: 2 additions & 2 deletions src/__tests__/baselines/ssr/sample3.tsx.baseline
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ TypeScript after transform:
interface LabelProps {
size: number;
}
const CustomLabel = styled.label.withConfig({ displayName: "CustomLabel", componentId: "-1ydgk9x" }) \`
const CustomLabel = styled.label.withConfig({ displayName: "CustomLabel", componentId: "sc-1ydgk9x" }) \`
font-size: \${(props: LabelProps) => props.size + 'px'}
\`;
const LabeledLink = () => <SmallButton />;
Expand All @@ -55,7 +55,7 @@ TypeScript after transform:
TypeScript after transpile module:

import styled from '../themed-styled';
const CustomLabel = styled.label.withConfig({ displayName: "CustomLabel", componentId: "-xc3x4h" }) \`
const CustomLabel = styled.label.withConfig({ displayName: "CustomLabel", componentId: "sc-xc3x4h" }) \`
font-size: \${(props) => props.size + 'px'}
\`;
const LabeledLink = () => />;;
Expand Down
16 changes: 8 additions & 8 deletions src/__tests__/baselines/ssr/style-objects.ts.baseline
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,51 +68,51 @@ TypeScript before transform:
TypeScript after transform:

declare const styled: any;
const Button = styled.button.withConfig({ displayName: "Button", componentId: "-7b7p9e" })({
const Button = styled.button.withConfig({ displayName: "Button", componentId: "sc-7b7p9e" })({
color: 'red'
});
declare const nonStyled: any;
const NonButton = nonStyled.button({
color: 'red'
});
const OtherButton = styled(Button).withConfig({ displayName: "OtherButton", componentId: "-14ah7t" })({
const OtherButton = styled(Button).withConfig({ displayName: "OtherButton", componentId: "sc-14ah7t" })({
color: 'blue'
});
const SuperButton = Button.extend({
color: 'super'
});
export default styled.link.withConfig({ componentId: "-8xjslt" })({
export default styled.link.withConfig({ componentId: "sc-8xjslt" })({
color: 'black'
});
export const SmallButton = Button.extend({
fontSize: '.7em'
});
const MiniButton = styled(SmallButton).attrs({ size: 'mini' }).withConfig({ displayName: "MiniButton", componentId: "-ad4g7l" })({
const MiniButton = styled(SmallButton).attrs({ size: 'mini' }).withConfig({ displayName: "MiniButton", componentId: "sc-ad4g7l" })({
fontSize: '.1em'
});


TypeScript after transpile module:

const Button = styled.button.withConfig({ displayName: "Button", componentId: "-13dat8f" })({
const Button = styled.button.withConfig({ displayName: "Button", componentId: "sc-13dat8f" })({
color: 'red'
});
const NonButton = nonStyled.button({
color: 'red'
});
const OtherButton = styled(Button).withConfig({ displayName: "OtherButton", componentId: "-1pbo6g5" })({
const OtherButton = styled(Button).withConfig({ displayName: "OtherButton", componentId: "sc-1pbo6g5" })({
color: 'blue'
});
const SuperButton = Button.extend({
color: 'super'
});
export default styled.link.withConfig({ componentId: "-ep20on" })({
export default styled.link.withConfig({ componentId: "sc-ep20on" })({
color: 'black'
});
export const SmallButton = Button.extend({
fontSize: '.7em'
});
const MiniButton = styled(SmallButton).attrs({ size: 'mini' }).withConfig({ displayName: "MiniButton", componentId: "-1cgykmr" })({
const MiniButton = styled(SmallButton).attrs({ size: 'mini' }).withConfig({ displayName: "MiniButton", componentId: "sc-1cgykmr" })({
fontSize: '.1em'
});

Expand Down
2 changes: 1 addition & 1 deletion src/createTransformer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -160,7 +160,7 @@ export function createTransformer({
const filePath = sourceRoot
? path.relative(sourceRoot, fileName).replace(path.sep, path.posix.sep)
: fileName;
return (componentIdPrefix ?? 'sc') + '-' + hash(`${getDisplayNameFromNode(node, sourceFile)}${filePath}${position}`);
return (componentIdPrefix || 'sc') + '-' + hash(`${getDisplayNameFromNode(node, sourceFile)}${filePath}${position}`);
}
return undefined;
}
Expand Down

0 comments on commit ffa4ad2

Please sign in to comment.