Repository: styled-components/babel-plugin-styled-components (js)

Issue:
Support different import names
Currently, this breaks the babel plugin:

```JS
import s from 'styled-components'
```

Instead of hard-coding and checking for the `styled` keyword, we should be looking for the import declaration and getting the variable name. (what I do [here](https://github.com/styled-components/stylelint-processor-styled-components/blob/9d904c963466e397de2d08f84314249d9c0e7ce9/src/index.js#L60-L63) and [here](https://github.com/styled-components/stylelint-processor-styled-components/blob/9d904c963466e397de2d08f84314249d9c0e7ce9/src/utils/parse.js#L5-L23) in the stylelint processor)

Pull request:
Support different import names
Closes #1 

Please review @vdanchenkov!

Patch:
diff --git a/src/index.js b/src/index.js
index 564bc44..64c18f3 100644
--- a/src/index.js
+++ b/src/index.js
@@ -3,19 +3,35 @@ import template from 'babel-template'
 import hash from './utils/hash'
 import getTarget from './utils/get-target'
 
-const buildStyledCall = template(`styled({
+const buildStyledCall = template(`STYLED({
   target: TARGET,
   displayName: DISPLAYNAME,
   identifier: IDENTIFIER
 })`)
 
-const isStyled = (tag) => (tag.object && tag.object.name == 'styled') || (tag.callee && tag.callee.name == 'styled')
+// Default imported variable name to "styled", adjust based on import below
+let importedVariableName = 'styled'
+
+const isStyled = (tag) => (tag.object && tag.object.name === importedVariableName) || (tag.callee && tag.callee.name === importedVariableName)
 
 let id = 0
 
 export default function({ types: t }) {
   return {
     visitor: {
+			ImportDeclaration: {
+				enter(path) {
+					// Is the styled-components import!
+					if (path.node.source.value === 'styled-components') {
+						// If the default is imported it's at defaultImport[0], otherwise defaultImport is empty
+						const defaultImport = path.node.specifiers.filter((specifier) => t.isImportDefaultSpecifier(specifier))
+						if (defaultImport.length > 0) {
+							// Save the imported name
+							importedVariableName = defaultImport[0].local.name
+						}
+					}
+				}
+			},
       TaggedTemplateExpression: {
         enter(path, { opts }) {
           const addDisplayName = (opts.displayName === undefined || opts.displayName === null) ? true : opts.displayName
@@ -64,8 +80,8 @@ export default function({ types: t }) {
           // Prefix the identifier with a character if no displayName exists because CSS classes cannot start with a number
           const identifier = `${displayName || 's'}-${hash(`${id}${displayName}`)}`
           // Put together the final code again
-          // Create the styled({ }) call
           const call = buildStyledCall({
+            STYLED: t.identifier(importedVariableName),
             TARGET: target,
             DISPLAYNAME: (addDisplayName && t.stringLiteral(displayName)) || t.identifier('undefined'),
             IDENTIFIER: (addIdentifier && t.stringLiteral(identifier)) || t.identifier('undefined')


Test patch:
diff --git a/test/fixtures/track-the-imported-variable/.babelrc b/test/fixtures/track-the-imported-variable/.babelrc
new file mode 100644
index 0000000..09030d2
--- /dev/null
+++ b/test/fixtures/track-the-imported-variable/.babelrc
@@ -0,0 +1,3 @@
+{
+  "plugins": ["../../../src"]
+}
diff --git a/test/fixtures/track-the-imported-variable/after.js b/test/fixtures/track-the-imported-variable/after.js
new file mode 100644
index 0000000..7f623a0
--- /dev/null
+++ b/test/fixtures/track-the-imported-variable/after.js
@@ -0,0 +1,32 @@
+import s from "styled-components";
+
+const Test = s({
+  target: "div",
+  displayName: "Test",
+  identifier: "Test-62sgar"
+})` width: 100%;`;
+const Test2 = true ? s({
+  target: "div",
+  displayName: "Test2",
+  identifier: "Test2-1rmo90j"
+})`` : s({
+  target: "div",
+  displayName: "Test2",
+  identifier: "Test2-1e44ey5"
+})``;
+const styles = { One: s({
+    target: "div",
+    displayName: "One",
+    identifier: "One-amesrd"
+  })`` };
+let Component;
+Component = s({
+  target: "div",
+  displayName: "Component",
+  identifier: "Component-ohabty"
+})``;
+const WrappedComponent = s({
+  target: Inner,
+  displayName: "WrappedComponent",
+  identifier: "WrappedComponent-1f8r9pi"
+})``;
diff --git a/test/fixtures/track-the-imported-variable/before.js b/test/fixtures/track-the-imported-variable/before.js
new file mode 100644
index 0000000..3ac31ab
--- /dev/null
+++ b/test/fixtures/track-the-imported-variable/before.js
@@ -0,0 +1,8 @@
+import s from "styled-components";
+
+const Test = s.div` width: 100%;`;
+const Test2 = true ? s.div`` : s.div``;
+const styles = { One: s.div`` }
+let Component;
+Component = s.div``;
+const WrappedComponent = s(Inner)``;