From b99804ce9d80403b6304fde7007ebf7bbb688296 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pablo=20Rodr=C3=ADguez=20Caballero?=
 <pablo@rodriguezcaballero.me>
Date: Wed, 23 Sep 2020 11:05:42 +0200
Subject: [PATCH 1/2] Add "meaninglessFileNames" option

The "meaninglessFileNames" option provides the user with more precise
control over the component display name.

This option is to be used in conjunction with "displayName" and
"fileName". If either is set to false, this option will have no effect.

Prior to this commit, when both "displayName" and "fileName" were set,
the behaviour was to prepend the file name to the component display name
if it was named anything other than "index", and to prepend the
directory name otherwise.

The "meaninglessFileNames" option enables developers to control when
exactly the directory name should be used instead of the file name. If
the file name is considered to be "meaningless", that is, it doesn't
provide the developer with any useful information, then the directory
name will be used instead.

By default, the only "meaningless file name" is "index", which means
that the default behaviour is unmodified.
---
 src/utils/options.js             |  1 +
 src/visitors/displayNameAndId.js | 12 +++++++-----
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/utils/options.js b/src/utils/options.js
index e653545..509fd9d 100644
--- a/src/utils/options.js
+++ b/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')
diff --git a/src/visitors/displayNameAndId.js b/src/visitors/displayNameAndId.js
index af20ae4..7663ce3 100644
--- a/src/visitors/displayNameAndId.js
+++ b/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
     }

From da023c4fcaa2e7a498d79426517075cfaf8d820f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pablo=20Rodr=C3=ADguez=20Caballero?=
 <pablo@rodriguezcaballero.me>
Date: Thu, 25 Nov 2021 14:23:24 +0100
Subject: [PATCH 2/2] Add use-directory-name test

This test case checks whether the "meaninglessFileNames" option is
applied properly to the "code.js" file and its parent directory name is
being used instead of its file name.
---
 test/fixtures/use-directory-name/.babelrc  | 12 ++++++++++++
 test/fixtures/use-directory-name/code.js   |  6 ++++++
 test/fixtures/use-directory-name/output.js | 17 +++++++++++++++++
 3 files changed, 35 insertions(+)
 create mode 100644 test/fixtures/use-directory-name/.babelrc
 create mode 100644 test/fixtures/use-directory-name/code.js
 create mode 100644 test/fixtures/use-directory-name/output.js

diff --git a/test/fixtures/use-directory-name/.babelrc b/test/fixtures/use-directory-name/.babelrc
new file mode 100644
index 0000000..3921aea
--- /dev/null
+++ b/test/fixtures/use-directory-name/.babelrc
@@ -0,0 +1,12 @@
+{
+  "plugins": [
+    [
+      "../../../src",
+      {
+        "meaninglessFileNames": ["code"],
+        "transpileTemplateLiterals": false,
+        "ssr": true
+      }
+    ]
+  ]
+}
diff --git a/test/fixtures/use-directory-name/code.js b/test/fixtures/use-directory-name/code.js
new file mode 100644
index 0000000..e656c5d
--- /dev/null
+++ b/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``;
diff --git a/test/fixtures/use-directory-name/output.js b/test/fixtures/use-directory-name/output.js
new file mode 100644
index 0000000..f1b7488
--- /dev/null
+++ b/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"
+})``;