fix(transformer/styled-components): named styled import doesn't work (#16573)

close: rolldown/rolldown#7292

Author: Dunqing

crates/oxc_transformer/src/plugins/styled_components.rs

@@ -234,7 +234,9 @@ impl Default for StyledComponentsOptions {
 struct StyledComponentsBinding {
     /// `import * as styled from 'styled-components'`
     namespace: Option<SymbolId>,
-    /// `import styled from 'styled-components'` or `import { default as styled } from 'styled-components'`
+    /// `import styled from 'styled-components';`
+    /// `import { default as styled } from 'styled-components';`
+    /// `import { styled } from 'styled-components';`
     styled: Option<SymbolId>,
     /// Named imports like `import { createGlobalStyle, css, keyframes } from 'styled-components'`
     helpers: [Option<SymbolId>; 6],
@@ -478,7 +480,8 @@ impl<'a> StyledComponents<'a, '_> {
                         let symbol_id = specifier.local.symbol_id();
                         let imported_name = specifier.imported.name();
                         match imported_name.as_str() {
-                            "default" => {
+                            // Handle `import { default as styled }` and `import { styled }`
+                            "default" | "styled" => {
                                 self.styled_bindings.styled = Some(symbol_id);
                             }
                             name => {

tasks/transform_conformance/snapshots/oxc.snap.md

@@ -1,6 +1,6 @@
 commit: 79586034
 
-Passed: 200/331
+Passed: 201/332
 
 # All Passed:
 * babel-plugin-transform-class-static-block
@@ -1770,7 +1770,7 @@ after transform: ["Function", "babelHelpers"]
 rebuilt        : ["babelHelpers", "dec"]
 
 
-# plugin-styled-components (24/39)
+# plugin-styled-components (25/40)
 * minify-comments/input.js
 Unresolved references mismatch:
 after transform: ["x", "y", "z"]

tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/named-styled-import/input.js

@@ -0,0 +1,8 @@
+import { styled } from "styled-components";
+
+const Test = styled.div`width: 100%;`;
+const Test2 = true ? styled.div`` : styled.div``;
+const styles = { One: styled.div`` }
+let Component;
+Component = styled.div``;
+const WrappedComponent = styled(Inner)``;

tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/named-styled-import/options.json

@@ -0,0 +1,9 @@
+{
+  "plugins": [
+    ["styled-components", {
+      "fileName": false,
+      "transpileTemplateLiterals": false,
+      "ssr": true
+    }]
+  ]
+}

tasks/transform_conformance/tests/plugin-styled-components/test/fixtures/styled-components/named-styled-import/output.js

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