Repository: styled-components/babel-plugin-styled-components
Pull request #295 (2020-07-31 16:05:02)

Support styled as a named export
To support the upcoming `topLevelImportPaths` option, this allows this babel plugin to pick-up `styled` as a named export:

```js
import { styled } from '@wrapping/package'`
```

config:

```
[
  'styled-components',
  {
    topLevelImportPaths: ['@wrapping/package'],
  },
]
```


Patch:
diff --git a/src/utils/detectors.js b/src/utils/detectors.js
index 30c8df4..df23e0e 100644
--- a/src/utils/detectors.js
+++ b/src/utils/detectors.js
@@ -34,6 +34,10 @@ export const importLocalName = (name, state, bypassCache = false) => {
 
         if (isValidTopLevelImport(node.source.value, state)) {
           for (const specifier of path.get('specifiers')) {
+            if (specifier.isImportSpecifier() && specifier.node.imported.name === 'styled') {
+              localName = 'styled'
+            }
+            
             if (specifier.isImportDefaultSpecifier()) {
               localName = specifier.node.local.name
             }


Test patch:
diff --git a/test/fixtures/add-identifier-with-top-level-import-paths-and-named-import/.babelrc b/test/fixtures/add-identifier-with-top-level-import-paths-and-named-import/.babelrc
new file mode 100644
index 0000000..63576b5
--- /dev/null
+++ b/test/fixtures/add-identifier-with-top-level-import-paths-and-named-import/.babelrc
@@ -0,0 +1,14 @@
+{
+  "plugins": [
+    [
+      "../../../src",
+      {
+        "displayName": true,
+        "fileName": false,
+        "ssr": true,
+        "topLevelImportPaths": ["@example/example"],
+        "transpileTemplateLiterals": false
+      }
+    ]
+  ]
+}
diff --git a/test/fixtures/add-identifier-with-top-level-import-paths-and-named-import/code.js b/test/fixtures/add-identifier-with-top-level-import-paths-and-named-import/code.js
new file mode 100644
index 0000000..e26d3c7
--- /dev/null
+++ b/test/fixtures/add-identifier-with-top-level-import-paths-and-named-import/code.js
@@ -0,0 +1,10 @@
+import { styled } from '@example/example'
+
+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)``
diff --git a/test/fixtures/add-identifier-with-top-level-import-paths-and-named-import/output.js b/test/fixtures/add-identifier-with-top-level-import-paths-and-named-import/output.js
new file mode 100644
index 0000000..71c6904
--- /dev/null
+++ b/test/fixtures/add-identifier-with-top-level-import-paths-and-named-import/output.js
@@ -0,0 +1,27 @@
+import { styled } from '@example/example';
+const Test = styled.div.withConfig({
+  displayName: "Test",
+  componentId: "elhbfv-0"
+})`width:100%;`;
+const Test2 = true ? styled.div.withConfig({
+  displayName: "Test2",
+  componentId: "elhbfv-1"
+})`` : styled.div.withConfig({
+  displayName: "Test2",
+  componentId: "elhbfv-2"
+})``;
+const styles = {
+  One: styled.div.withConfig({
+    displayName: "One",
+    componentId: "elhbfv-3"
+  })``
+};
+let Component;
+Component = styled.div.withConfig({
+  displayName: "Component",
+  componentId: "elhbfv-4"
+})``;
+const WrappedComponent = styled(Inner).withConfig({
+  displayName: "WrappedComponent",
+  componentId: "elhbfv-5"
+})``;