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

Dunqing · Dunqing · commit 0cfc455054e7 · 2025-07-11T09:55:20.000+08:00
diff --git a/crates/oxc_transformer/src/plugins/styled_components.rs b/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);
diff --git a/napi/transform/test/transform.test.ts b/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;"]);
 			"
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/add-identifier-and-display-name/output.js b/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"
 })({});
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/add-identifier/output.js b/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"
 })``;
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/ignore-external-styled-import/output.jsx b/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)({
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/minify-single-line-comments-with-interpolations/output.js b/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/minify-single-line-comments-with-interpolations/output.js
@@ -14,4 +14,4 @@ const Test7 = styled.div.withConfig({ displayName: "input__Test7", componentId:
   p => p.props.width,
   'green',
   p => p.props.height,
-);
+);
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/track-the-imported-variable/output.js b/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"
 })``;
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/use-directory-name/output.js b/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"
 })``;
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/use-file-name/output.js b/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"
 })``;
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/use-namespace/output.js b/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"
 })``;
diff --git a/tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/work-with-hoisted-default-as-import/output.js b/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';

Original file line number	Diff line number	Diff line change
`@@ -681,7 +681,7 @@ impl<'a> StyledComponents<'a, '_> {`
`681`	`681`	`}`
`682`	`682`
`683`	`683`	`let mut hasher = FxHasher::default();`
`684`		`- if self.ctx.source_path.is_relative() {`
	`684`	`+ if self.ctx.source_path.is_absolute() {`
`685`	`685`	`self.ctx.source_path.hash(&mut hasher);`
`686`	`686`	`} else {`
`687`	`687`	`self.ctx.source_text.hash(&mut hasher);`
Original file line number	Diff line number	Diff line change
`@@ -438,7 +438,7 @@ describe('styled-components', () => {`
`438`	`438`	`"import styled, { css } from "styled-components";`
`439`	`439`	`styled.div.withConfig({`
`440`	`440`	`displayName: "test",`
`441`		`- componentId: "sc-ziiqn7-0"`
	`441`	`+ componentId: "sc-3q0sbi-0"`
`442`	`442`	`})(["color:red;"]);`
`443`	`443`	`const v = /* @__PURE__ */ css(["color: red;"]);`
`444`	`444`	`"`