fix(transformer/styled-components): should use source path to generate file hash when the path is absoulte path

crates/oxc_transformer/src/plugins/styled_components.rs

@@ -681,7 +681,7 @@ impl<'a> StyledComponents<'a, '_> {
         }
 
         let mut hasher = FxHasher::default();
-        if self.ctx.source_path.is_relative() {
+        if self.ctx.source_path.is_absolute() {
             self.ctx.source_path.hash(&mut hasher);
         } else {
             self.ctx.source_text.hash(&mut hasher);

napi/transform/test/transform.test.ts

@@ -438,7 +438,7 @@ describe('styled-components', () => {
 			"import styled, { css } from "styled-components";
 			styled.div.withConfig({
 				displayName: "test",
-				componentId: "sc-ziiqn7-0"
+				componentId: "sc-3q0sbi-0"
 			})(["color:red;"]);
 			const v = /* @__PURE__ */ css(["color: red;"]);
 			"

tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/add-identifier-and-display-name/output.js

@@ -1,65 +1,65 @@
 import styled from 'styled-components';
 const Test = styled.div.withConfig({
   displayName: "Test",
-  componentId: "sc-mkpq9u-0"
+  componentId: "sc-68njp2-0"
 })`width:100%;`;
 const Test2 = true ? styled.div.withConfig({
   displayName: "Test2",
-  componentId: "sc-mkpq9u-1"
+  componentId: "sc-68njp2-1"
 })`` : styled.div.withConfig({
   displayName: "Test2",
-  componentId: "sc-mkpq9u-2"
+  componentId: "sc-68njp2-2"
 })``;
 const styles = {
   One: styled.div.withConfig({
     displayName: "One",
-    componentId: "sc-mkpq9u-3"
+    componentId: "sc-68njp2-3"
   })``
 };
 let Component;
 Component = styled.div.withConfig({
   displayName: "Component",
-  componentId: "sc-mkpq9u-4"
+  componentId: "sc-68njp2-4"
 })``;
 const WrappedComponent = styled(Inner).withConfig({
   displayName: "WrappedComponent",
-  componentId: "sc-mkpq9u-5"
+  componentId: "sc-68njp2-5"
 })``;
 const WrappedComponent2 = styled.div.withConfig({
   displayName: "WrappedComponent2",
-  componentId: "sc-mkpq9u-6"
+  componentId: "sc-68njp2-6"
 })({});
 const WrappedComponent3 = styled(Inner).withConfig({
   displayName: "WrappedComponent3",
-  componentId: "sc-mkpq9u-7"
+  componentId: "sc-68njp2-7"
 })({});
 const WrappedComponent4 = styled(Inner).attrs(() => ({
   something: 'else'
 })).withConfig({
   displayName: "WrappedComponent4",
-  componentId: "sc-mkpq9u-8"
+  componentId: "sc-68njp2-8"
 })({});
 const WrappedComponent5 = styled.div.attrs(() => ({
   something: 'else'
 })).withConfig({
   displayName: "WrappedComponent5",
-  componentId: "sc-mkpq9u-9"
+  componentId: "sc-68njp2-9"
 })({});
 const WrappedComponent6 = styled.div.attrs(() => ({
   something: 'else'
 })).withConfig({
   displayName: "WrappedComponent6",
-  componentId: "sc-mkpq9u-10"
+  componentId: "sc-68njp2-10"
 })``;
 const WrappedComponent7 = styled.div.withConfig({
   shouldForwardProp: () => { },
   displayName: "WrappedComponent7",
-  componentId: "sc-mkpq9u-11"
+  componentId: "sc-68njp2-11"
 })({});
 const WrappedComponent8 = styled.div.withConfig({
   shouldForwardProp: () => { },
   displayName: "WrappedComponent8",
-  componentId: "sc-mkpq9u-12"
+  componentId: "sc-68njp2-12"
 }).attrs(() => ({
   something: 'else'
 }))({});
@@ -68,5 +68,5 @@ const WrappedComponent9 = styled.div.attrs(() => ({
 })).withConfig({
   shouldForwardProp: () => { },
   displayName: "WrappedComponent9",
-  componentId: "sc-mkpq9u-13"
+  componentId: "sc-68njp2-13"
 })({});

tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/add-identifier/output.js

@@ -1,21 +1,21 @@
 import styled from 'styled-components';
 const Test = styled.div.withConfig({
-  componentId: "sc-80sor8-0"
+  componentId: "sc-yv1qfe-0"
 })`width:100%;`;
 const Test2 = true ? styled.div.withConfig({
-  componentId: "sc-80sor8-1"
+  componentId: "sc-yv1qfe-1"
 })`` : styled.div.withConfig({
-  componentId: "sc-80sor8-2"
+  componentId: "sc-yv1qfe-2"
 })``;
 const styles = {
   One: styled.div.withConfig({
-    componentId: "sc-80sor8-3"
+    componentId: "sc-yv1qfe-3"
   })``
 };
 let Component;
 Component = styled.div.withConfig({
-  componentId: "sc-80sor8-4"
+  componentId: "sc-yv1qfe-4"
 })``;
 const WrappedComponent = styled(Inner).withConfig({
-  componentId: "sc-80sor8-5"
+  componentId: "sc-yv1qfe-5"
 })``;

tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/ignore-external-styled-import/output.jsx

@@ -2,7 +2,7 @@ import { styled } from '@material/ui';
 import s from 'styled-components';
 const Paragraph = s.p.withConfig({
   displayName: "input__Paragraph",
-  componentId: "sc-33emk6-0"
+  componentId: "sc-g689do-0"
 })(["color:green;"]);
 const Foo = p => <Paragraph {...p} />;
 const TestNormal = styled(Foo)({

tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/minify-single-line-comments-with-interpolations/output.js

@@ -1,17 +1,17 @@
 import styled from 'styled-components';
 
-const Test1 = styled.div.withConfig({ displayName: "input__Test1", componentId: "sc-clieju-0" })(["width:100%;"]);
-const Test2 = styled.div.withConfig({ displayName: "input__Test2", componentId: "sc-clieju-1" })(["width:100%;"]);
-const Test3 = styled.div.withConfig({ displayName: "input__Test3", componentId: "sc-clieju-2" })(["width:100%;", ";"], 'red');
-const Test4 = styled.div.withConfig({ displayName: "input__Test4", componentId: "sc-clieju-3" })(["width:100%;"]);
-const Test5 = styled.div.withConfig({ displayName: "input__Test5", componentId: "sc-clieju-4" })(["width:100%;"]);
-const Test6 = styled.div.withConfig({ displayName: "input__Test6", componentId: "sc-clieju-5" })(
+const Test1 = styled.div.withConfig({ displayName: "input__Test1", componentId: "sc-4bekfz-0" })(["width:100%;"]);
+const Test2 = styled.div.withConfig({ displayName: "input__Test2", componentId: "sc-4bekfz-1" })(["width:100%;"]);
+const Test3 = styled.div.withConfig({ displayName: "input__Test3", componentId: "sc-4bekfz-2" })(["width:100%;", ";"], 'red');
+const Test4 = styled.div.withConfig({ displayName: "input__Test4", componentId: "sc-4bekfz-3" })(["width:100%;"]);
+const Test5 = styled.div.withConfig({ displayName: "input__Test5", componentId: "sc-4bekfz-4" })(["width:100%;"]);
+const Test6 = styled.div.withConfig({ displayName: "input__Test6", componentId: "sc-4bekfz-5" })(
   ["background:url(\"https://google.com\");width:100%;", ""],
   'green',
 );
-const Test7 = styled.div.withConfig({ displayName: "input__Test7", componentId: "sc-clieju-6" })(
+const Test7 = styled.div.withConfig({ displayName: "input__Test7", componentId: "sc-4bekfz-6" })(
   ["background:url(\"https://google.com\");width:", ";", "height:", ";"],
   p => p.props.width,
   'green',
   p => p.props.height,
-);
+);

tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/track-the-imported-variable/output.js

@@ -1,27 +1,27 @@
 import s from "styled-components";
 const Test = s.div.withConfig({
   displayName: "Test",
-  componentId: "sc-4ndp5k-0"
+  componentId: "sc-etvu4p-0"
 })`width:100%;`;
 const Test2 = true ? s.div.withConfig({
   displayName: "Test2",
-  componentId: "sc-4ndp5k-1"
+  componentId: "sc-etvu4p-1"
 })`` : s.div.withConfig({
   displayName: "Test2",
-  componentId: "sc-4ndp5k-2"
+  componentId: "sc-etvu4p-2"
 })``;
 const styles = {
   One: s.div.withConfig({
     displayName: "One",
-    componentId: "sc-4ndp5k-3"
+    componentId: "sc-etvu4p-3"
   })``
 };
 let Component;
 Component = s.div.withConfig({
   displayName: "Component",
-  componentId: "sc-4ndp5k-4"
+  componentId: "sc-etvu4p-4"
 })``;
 const WrappedComponent = s(Inner).withConfig({
   displayName: "WrappedComponent",
-  componentId: "sc-4ndp5k-5"
+  componentId: "sc-etvu4p-5"
 })``;

tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/use-directory-name/output.js

@@ -1,17 +1,17 @@
 import styled from "styled-components";
 const Test = styled.div.withConfig({
   displayName: "use-directory-name__Test",
-  componentId: "sc-885txi-0"
+  componentId: "sc-bccdtg-0"
 })`color:red;`;
 const before = styled.div.withConfig({
   displayName: "use-directory-name__before",
-  componentId: "sc-885txi-1"
+  componentId: "sc-bccdtg-1"
 })`color:blue;`;
 styled.div.withConfig({
   displayName: "use-directory-name",
-  componentId: "sc-885txi-2"
+  componentId: "sc-bccdtg-2"
 })``;
 export default styled.button.withConfig({
   displayName: "use-directory-name",
-  componentId: "sc-885txi-3"
+  componentId: "sc-bccdtg-3"
 })``;

tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/use-file-name/output.js

@@ -1,17 +1,17 @@
 import styled from "styled-components";
 const Test = styled.div.withConfig({
   displayName: "input__Test",
-  componentId: "sc-3maeg5-0"
+  componentId: "sc-bccdtg-0"
 })`color:red;`;
 const before = styled.div.withConfig({
   displayName: "input__before",
-  componentId: "sc-3maeg5-1"
+  componentId: "sc-bccdtg-1"
 })`color:blue;`;
 styled.div.withConfig({
   displayName: "input",
-  componentId: "sc-3maeg5-2"
+  componentId: "sc-bccdtg-2"
 })``;
 export default styled.button.withConfig({
   displayName: "input",
-  componentId: "sc-3maeg5-3"
+  componentId: "sc-bccdtg-3"
 })``;

tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/use-namespace/output.js

@@ -9,17 +9,17 @@ const GlobalStyle = styled.createGlobalStyle`
 `;
 const Test = styled.default.div.withConfig({
   displayName: "input__Test",
-  componentId: "test-namespace__sc-ko2l8q-0"
+  componentId: "test-namespace__sc-zljhv7-0"
 })`color:red;`;
 const before = styled.default.div.withConfig({
   displayName: "input__before",
-  componentId: "test-namespace__sc-ko2l8q-1"
+  componentId: "test-namespace__sc-zljhv7-1"
 })`color:blue;`;
 styled.default.div.withConfig({
   displayName: "input",
-  componentId: "test-namespace__sc-ko2l8q-2"
+  componentId: "test-namespace__sc-zljhv7-2"
 })``;
 export default styled.default.button.withConfig({
   displayName: "input",
-  componentId: "test-namespace__sc-ko2l8q-3"
+  componentId: "test-namespace__sc-zljhv7-3"
 })``;

tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/work-with-hoisted-default-as-import/output.js

@@ -1,5 +1,5 @@
 const Test = s.div.withConfig({
   displayName: "input__Test",
-  componentId: "sc-ii5gby-0"
+  componentId: "sc-eygmw0-0"
 })`width:100%;`;
 import { default as s, css } from 'styled-components';