fix: allow plugins to use gatsby-browser.js to load global styles, et…

…c. (#10845)

e2e-tests/production-runtime/cypress/integration/global-styles.js

@@ -0,0 +1,19 @@
+const zIndex = `9001`
+
+describe(`Global style from gatsby-browser.js`, () => {
+  beforeEach(() => {
+    cy.visit(`/global-style`).waitForAPI(`onRouteUpdate`)
+  })
+
+  it(`should apply any styles in root gatsby-browser.js`, () => {
+    cy.getTestElement(`global-style`).should(`have.css`, `zIndex`, zIndex)
+  })
+
+  it(`should apply any styles in plugin(s) gatsby-browser.js`, () => {
+    cy.getTestElement(`global-plugin-style`).should(
+      `have.css`,
+      `zIndex`,
+      zIndex
+    )
+  })
+})

e2e-tests/production-runtime/gatsby-browser.js

@@ -1,3 +1,5 @@
+require(`./src/index.css`)
+
 if (typeof window !== `undefined`) {
   window.___PageComponentLifecycleCallsLog = []
 }

e2e-tests/production-runtime/gatsby-config.js

@@ -4,6 +4,7 @@ module.exports = {
   },
   plugins: [
     `gatsby-plugin-react-helmet`,
+    `gatsby-plugin-global-style`,
     {
       resolve: `gatsby-plugin-manifest`,
       options: {

e2e-tests/production-runtime/plugins/gatsby-plugin-global-style/gatsby-browser.js

@@ -0,0 +1 @@
+import './index.css'

e2e-tests/production-runtime/plugins/gatsby-plugin-global-style/index.css

@@ -0,0 +1,4 @@
+[data-testid='global-plugin-style'] {
+  position: relative;
+  z-index: 9001; /* it's over 9000 */
+}

e2e-tests/production-runtime/plugins/gatsby-plugin-global-style/index.js

@@ -0,0 +1 @@
+// noop

e2e-tests/production-runtime/plugins/gatsby-plugin-global-style/package.json

@@ -0,0 +1,3 @@
+{
+  "name": "gatsby-plugin-global-style"
+}

e2e-tests/production-runtime/src/index.css

@@ -0,0 +1,4 @@
+[data-testid='global-style'] {
+  position: relative;
+  z-index: 9001; /* it's over 9000 */
+}

e2e-tests/production-runtime/src/pages/global-style.js

@@ -0,0 +1,16 @@
+import React from 'react'
+
+import Layout from '../components/layout'
+
+const GlobalStyle = () => (
+  <Layout>
+    <h1 data-testid="global-plugin-style">
+      This text should have a large z-index (via `gatsby-plugin-global-style`)
+    </h1>
+    <h2 data-testid="global-style">
+      This text should have a large z-index (via root-level `gatsby-browser.js`)
+    </h2>
+  </Layout>
+)
+
+export default GlobalStyle

e2e-tests/production-runtime/src/pages/index.js

@@ -34,6 +34,11 @@ const IndexPage = ({ pageContext }) => (
           Client only paths
         </Link>
       </li>
+      <li>
+        <Link to="/global-style/" data-testid="global-style">
+          gatsby-browser.js (global styles)
+        </Link>
+      </li>
     </ul>
   </Layout>
 )

packages/gatsby/src/bootstrap/index.js

@@ -283,10 +283,10 @@ module.exports = async (args: BootstrapArgs) => {
 
     const envAPIs = plugin[`${env}APIs`]
 
-    // Always include the site's gatsby-browser.js if it exists as it's
+    // Always include gatsby-browser.js files if they exists as they're
     // a handy place to include global styles and other global imports.
     try {
-      if (env === `browser` && plugin.name === `default-site-plugin`) {
+      if (env === `browser`) {
         return slash(
           require.resolve(path.join(plugin.resolve, `gatsby-${env}`))
         )