fix(themes): package names don't have to match filesystem (#14149)

* fix(themes): package names don't have to match filesystem

fixes #14134

As a result of this PR, the package names of themes no longer have to match
their location on the filesystem. This means a theme with a `package.json` name
of `@something/my-theme` in a yarn workspace (or similar setup) folder named
`some-theme` will now work. This does not change the behavior of shadowing in
child themes, which still requires that you use the package name to align with
how npm packages work when installed.

Previously, the location on the filesystem would have needed to be in two
directories `@something/my-theme`.

There are no breaking changes in this PR.

* one more

* fix windows tests

* really fix windows

Author: ChristopherBiscardi

packages/gatsby/src/internal-plugins/webpack-theme-component-shadowing/__tests__/index.js

@@ -24,7 +24,12 @@ describe(`Component Shadowing`, () => {
           `a-component`
         )
       )
-    ).toEqual([`a-theme`])
+    ).toEqual([
+      {
+        themeDir: path.join(path.sep, `some`, `place`, `a-theme`),
+        themeName: `a-theme`,
+      },
+    ])
 
     expect(
       // request to a shadowed component in theme b
@@ -41,7 +46,12 @@ describe(`Component Shadowing`, () => {
           `a-component`
         )
       )
-    ).toEqual([`theme-b`])
+    ).toEqual([
+      {
+        themeDir: path.join(path.sep, `some`, `place`, `theme-b`),
+        themeName: `theme-b`,
+      },
+    ])
   })
 
   it(`can determine if the request path is in the shadow chain for the issuer`, () => {

packages/gatsby/src/internal-plugins/webpack-theme-component-shadowing/index.js

@@ -26,9 +26,9 @@ module.exports = class GatsbyThemeComponentShadowingResolverPlugin {
       //   `gatsby-theme-blog/src/components/gatsby-theme-something/src/components`
       if (matchingThemes.length > 1) {
         throw new Error(
-          `Gatsby can't differentiate between themes ${matchingThemes.join(
-            ` and `
-          )} for path ${request.path}`
+          `Gatsby can't differentiate between themes ${matchingThemes
+            .map(theme => theme.themeName)
+            .join(` and `)} for path ${request.path}`
         )
       }
 
@@ -39,7 +39,7 @@ module.exports = class GatsbyThemeComponentShadowingResolverPlugin {
       // theme is the theme package from which we're requiring the relative component
       const [theme] = matchingThemes
       // get the location of the component relative to src/
-      const [, component] = request.path.split(path.join(theme, `src`))
+      const [, component] = request.path.split(path.join(theme.themeDir, `src`))
 
       if (
         /**
@@ -77,7 +77,7 @@ module.exports = class GatsbyThemeComponentShadowingResolverPlugin {
 
       // This is the shadowing algorithm.
       const builtComponentPath = this.resolveComponentPath({
-        matchingTheme: theme,
+        matchingTheme: theme.themeName,
         themes: this.themes,
         component,
       })
@@ -137,13 +137,13 @@ module.exports = class GatsbyThemeComponentShadowingResolverPlugin {
 
   getMatchingThemesForPath(filepath) {
     // find out which theme's src/components dir we're requiring from
-    const allMatchingThemes = this.themes.filter(({ themeName }) =>
-      filepath.includes(path.join(themeName, `src`))
+    const allMatchingThemes = this.themes.filter(({ themeDir }) =>
+      filepath.includes(path.join(themeDir, `src`))
     )
 
     // The same theme can be included twice in the themes list causing multiple
     // matches. This case should only be counted as a single match for that theme.
-    return _.uniq(allMatchingThemes.map(({ themeName }) => themeName))
+    return _.uniqBy(allMatchingThemes, `themeName`)
   }
 
   // given a theme name, return all of the possible shadow locations
@@ -168,11 +168,11 @@ module.exports = class GatsbyThemeComponentShadowingResolverPlugin {
     const [theme] = matchingThemes
 
     // get the location of the component relative to src/
-    const [, component] = requestPath.split(path.join(theme, `src`))
+    const [, component] = requestPath.split(path.join(theme.themeDir, `src`))
 
     // get list of potential shadow locations
-    const shadowFiles = this.getBaseShadowDirsForThemes(theme)
-      .concat(path.join(userSiteDir, `src`, theme))
+    const shadowFiles = this.getBaseShadowDirsForThemes(theme.themeName)
+      .concat(path.join(userSiteDir, `src`, theme.themeName))
       .map(dir => path.join(dir, component))
 
     // if the issuer is requesting a path that is a potential shadow path of itself