Repository: styled-components/babel-plugin-styled-components
Pull request #8 (2016-11-28 00:18:52)

use filename for displayName
@mxstbr something like this?

mxstbr: We might need to uppercase it? `before` => `Before`?
vdanchenkov: I think, I'd prefer to keep original case of file name to not surprise user. But in my projects I uppercase component files, so it doesn't really matter for me. If you think it's better to uppercase I'll add it.
mxstbr: No you're actually right, good point! Should we maybe add the extension as well to make it clear that this is the filename? `before.js__Component-asdf123` is clearer to me where the `before` comes from than just `before__Component-asdf123`?
mxstbr: Also, should we make the options consistent? These two different capitalizations are kind of weird:

```JS
["styled-components", {
  filename: false,
  displayName: false,
}]
```

We should choose one convention and go with that?
vdanchenkov: It seems reasonable when component does have it's own name. But let's get back to use case I started from.

```jsx
// in FancyButton.js 
import styled from 'styled-components'
export default styled.button` `
```

I feel that it would be weird to name this component FancyButton.js instead of FancyButton. What do you think? Moreover, in case component name was given I would remove duplication.

```jsx
// in FancyButton.js 
import styled from 'styled-components'
const FancyButton = styled.button` `
export default FancyButton
// will have displayName == 'FancyButton', not FancyButton.js__FancyButton  
```

`displayname` is not a word (filename - is), so I will rename filename to fileName for consistency.
mxstbr: Yeah I guess you're right, this is fine.

Alright let's rename the option and then we can ship this 🔥 Good job!

Patch:
diff --git a/src/index.js b/src/index.js
index 05704e8..93902b7 100644
--- a/src/index.js
+++ b/src/index.js
@@ -33,47 +33,57 @@ export default function({ types: t }) {
 				}
 			},
       TaggedTemplateExpression: {
-        enter(path, { opts }) {
+        enter(path, { opts, file }) {
           const addDisplayName = (opts.displayName === undefined || opts.displayName === null) ? true : opts.displayName
           const addIdentifier = (opts.ssr === undefined || opts.ssr === null) ? true : opts.ssr
+          const useFileName = (opts.fileName === undefined || opts.fileName === null) ? true : opts.fileName
+
           const tag = path.node.tag
 
           if (!isStyled(tag)) return
 
-          let displayName
+          let namedNode
 
           path.find((path) => {
             // const X = styled
             if (path.isAssignmentExpression()) {
-              displayName = path.node.left
+              namedNode = path.node.left
             // const X = { Y: styled }
             } else if (path.isObjectProperty()) {
-              displayName = path.node.key
+              namedNode = path.node.key
             // let X; X = styled
             } else if (path.isVariableDeclarator()) {
-              displayName = path.node.id
+              namedNode = path.node.id
             } else if (path.isStatement()) {
               // we've hit a statement, we should stop crawling up
               return true
             }
 
             // we've got an displayName (if we need it) no need to continue
-            if (displayName) return true
+            if (namedNode) return true
           })
 
           // foo.bar -> bar
-          if (t.isMemberExpression(displayName)) {
-            displayName = displayName.property
+          if (t.isMemberExpression(namedNode)) {
+            namedNode = namedNode.property
           }
 
           // Get target
           const target = getTarget(path.node.tag)
 
           // identifiers are the only thing we can reliably get a name from
-          if (!t.isIdentifier(displayName)) {
-            displayName = undefined
+          const componentName = t.isIdentifier(namedNode) ? namedNode.name : undefined
+
+          let displayName
+
+          if (!useFileName) {
+            displayName = componentName
           } else {
-            displayName = displayName.name
+            let blockName = file.opts.basename
+            if (blockName === 'index') {
+              blockName = path.basename(path.dirname(file.opts.filename))
+            }
+            displayName = componentName ? `${blockName}__${namedNode.name}` : blockName
           }
 
           id++


Test patch:
diff --git a/test/fixtures/add-display-names/.babelrc b/test/fixtures/add-display-names/.babelrc
index 72eaf87..6651216 100644
--- a/test/fixtures/add-display-names/.babelrc
+++ b/test/fixtures/add-display-names/.babelrc
@@ -1,7 +1,8 @@
 {
   "plugins": [
     ["../../../src", {
-      "ssr": false
+      "ssr": false,
+      "fileName": false
     }]
   ]
 }
diff --git a/test/fixtures/add-identifier-and-display-name/.babelrc b/test/fixtures/add-identifier-and-display-name/.babelrc
index 09030d2..ce47411 100644
--- a/test/fixtures/add-identifier-and-display-name/.babelrc
+++ b/test/fixtures/add-identifier-and-display-name/.babelrc
@@ -1,3 +1,7 @@
 {
-  "plugins": ["../../../src"]
+  "plugins": [
+    ["../../../src", {
+      "fileName": false
+    }]
+  ]
 }
diff --git a/test/fixtures/add-identifier/.babelrc b/test/fixtures/add-identifier/.babelrc
index 794742f..acd4be9 100644
--- a/test/fixtures/add-identifier/.babelrc
+++ b/test/fixtures/add-identifier/.babelrc
@@ -1,7 +1,8 @@
 {
   "plugins": [
     ["../../../src", {
-      "displayName": false
+      "displayName": false,
+      "fileName": false
     }]
   ]
 }
diff --git a/test/fixtures/track-the-imported-variable/.babelrc b/test/fixtures/track-the-imported-variable/.babelrc
index 09030d2..ce47411 100644
--- a/test/fixtures/track-the-imported-variable/.babelrc
+++ b/test/fixtures/track-the-imported-variable/.babelrc
@@ -1,3 +1,7 @@
 {
-  "plugins": ["../../../src"]
+  "plugins": [
+    ["../../../src", {
+      "fileName": false
+    }]
+  ]
 }
diff --git a/test/fixtures/use-file-name/.babelrc b/test/fixtures/use-file-name/.babelrc
new file mode 100644
index 0000000..fb02be5
--- /dev/null
+++ b/test/fixtures/use-file-name/.babelrc
@@ -0,0 +1,5 @@
+{
+  "plugins": [
+    "../../../src"
+  ]
+}
diff --git a/test/fixtures/use-file-name/after.js b/test/fixtures/use-file-name/after.js
new file mode 100644
index 0000000..bc1db03
--- /dev/null
+++ b/test/fixtures/use-file-name/after.js
@@ -0,0 +1,17 @@
+import styled from "styled-components";
+
+const Test = styled({
+  target: "div",
+  displayName: "before__Test",
+  identifier: "before__Test-102oti6"
+})` color: red;`;
+styled({
+  target: "div",
+  displayName: "before",
+  identifier: "before-hxqpa7"
+})``;
+export default styled({
+  target: "button",
+  displayName: "before",
+  identifier: "before-17r4qjq"
+})``;
diff --git a/test/fixtures/use-file-name/before.js b/test/fixtures/use-file-name/before.js
new file mode 100644
index 0000000..3e3a215
--- /dev/null
+++ b/test/fixtures/use-file-name/before.js
@@ -0,0 +1,5 @@
+import styled from "styled-components";
+
+const Test = styled.div` color: red;`;
+styled.div``;
+export default styled.button``;