Add "meaninglessFileNames" option (#304)

src/utils/options.js

@@ -9,6 +9,7 @@ export const useTopLevelImportPathMatchers = state =>
   getOption(state, 'topLevelImportPaths', []).map(pattern => new RegExp(pattern))
 export const useSSR = state => getOption(state, 'ssr', true)
 export const useFileName = state => getOption(state, 'fileName')
+export const useMeaninglessFileNames = state => getOption(state, 'meaninglessFileNames', ['index'])
 export const useMinify = state => getOption(state, 'minify')
 export const useTranspileTemplateLiterals = state =>
   getOption(state, 'transpileTemplateLiterals')

src/visitors/displayNameAndId.js

@@ -4,6 +4,7 @@ import {
   useFileName,
   useDisplayName,
   useSSR,
+  useMeaninglessFileNames,
   useNamespace,
 } from '../utils/options'
 import getName from '../utils/getName'
@@ -111,21 +112,22 @@ const getExistingConfig = t => path => {
   }
 }
 
-const getBlockName = file => {
+const getBlockName = (file, meaninglessFileNames) => {
   const name = path.basename(
     file.opts.filename,
     path.extname(file.opts.filename)
   )
-  return name !== 'index'
-    ? name
-    : path.basename(path.dirname(file.opts.filename))
+
+  return meaninglessFileNames.includes(name)
+    ? path.basename(path.dirname(file.opts.filename))
+    : name
 }
 
 const getDisplayName = t => (path, state) => {
   const { file } = state
   const componentName = getName(t)(path)
   if (file) {
-    const blockName = getBlockName(file)
+    const blockName = getBlockName(file, useMeaninglessFileNames(state))
     if (blockName === componentName) {
       return componentName
     }

test/fixtures/use-directory-name/.babelrc

@@ -0,0 +1,12 @@
+{
+  "plugins": [
+    [
+      "../../../src",
+      {
+        "meaninglessFileNames": ["code"],
+        "transpileTemplateLiterals": false,
+        "ssr": true
+      }
+    ]
+  ]
+}

test/fixtures/use-directory-name/code.js

@@ -0,0 +1,6 @@
+import styled from "styled-components";
+
+const Test = styled.div`color: red;`;
+const before = styled.div`color: blue;`;
+styled.div``;
+export default styled.button``;

test/fixtures/use-directory-name/output.js

@@ -0,0 +1,17 @@
+import styled from "styled-components";
+const Test = styled.div.withConfig({
+  displayName: "use-directory-name__Test",
+  componentId: "sc-193y009-0"
+})`color:red;`;
+const before = styled.div.withConfig({
+  displayName: "use-directory-name__before",
+  componentId: "sc-193y009-1"
+})`color:blue;`;
+styled.div.withConfig({
+  displayName: "use-directory-name",
+  componentId: "sc-193y009-2"
+})``;
+export default styled.button.withConfig({
+  displayName: "use-directory-name",
+  componentId: "sc-193y009-3"
+})``;