Restore componentIdPrefix fallback to getIdFromNode (#518)

roikoren755 · Igorbek · web-flow · commit ffa4ad2276d9 · 2023-03-23T15:01:09.000-07:00
![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>
diff --git a/src/__tests__/baselines/ssr/multiple-components.tsx.baseline b/src/__tests__/baselines/ssr/multiple-components.tsx.baseline
@@ -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 };
   }
   
@@ -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 };
   }
   
diff --git a/src/__tests__/baselines/ssr/sample1.ts.baseline b/src/__tests__/baselines/ssr/sample1.ts.baseline
@@ -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;
   \`;
   
diff --git a/src/__tests__/baselines/ssr/sample2.ts.baseline b/src/__tests__/baselines/ssr/sample2.ts.baseline
@@ -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:
@@ -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; \`;
   
 
 
diff --git a/src/__tests__/baselines/ssr/sample3.tsx.baseline b/src/__tests__/baselines/ssr/sample3.tsx.baseline
@@ -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 />;
@@ -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 = () => />;;
diff --git a/src/__tests__/baselines/ssr/style-objects.ts.baseline b/src/__tests__/baselines/ssr/style-objects.ts.baseline
@@ -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'
   });
   
diff --git a/src/createTransformer.ts b/src/createTransformer.ts
@@ -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;
     }

Original file line number	Diff line number	Diff line change
`@@ -160,7 +160,7 @@ export function createTransformer({`
`160`	`160`	`const filePath = sourceRoot`
`161`	`161`	`? path.relative(sourceRoot, fileName).replace(path.sep, path.posix.sep)`
`162`	`162`	`: fileName;`
`163`		- return (componentIdPrefix ?? 'sc') + '-' + hash(`${getDisplayNameFromNode(node, sourceFile)}${filePath}${position}`);
	`163`	+ return (componentIdPrefix \|\| 'sc') + '-' + hash(`${getDisplayNameFromNode(node, sourceFile)}${filePath}${position}`);
`164`	`164`	`}`
`165`	`165`	`return undefined;`
`166`	`166`	`}`