Fix gatsby-plugin-nprogress default options param (#3533)

* Fix default `pluginOptions` parameter

This PR fixes #3484

Correctly merge `defaultOptions` with `pluginOptions`

* Indent `styles` template string correctly

* Change default

Author: Pedro Duarte

packages/gatsby-plugin-nprogress/src/gatsby-browser.js

@@ -1,81 +1,87 @@
 import NProgress from "nprogress"
 
-exports.onClientEntry = (a, pluginOptions = { color: `#29d` }) => {
+const defaultOptions = { color: `#29d` }
+
+exports.onClientEntry = (a, pluginOptions = {}) => {
+  // Merge default options with user defined options in `gatsby-config.js`
+  const options = { ...defaultOptions, ...pluginOptions }
+
   window.___emitter.on(`onDelayedLoadPageResources`, () => {
-    NProgress.configure(pluginOptions)
+    NProgress.configure(options)
     NProgress.start()
   })
   window.___emitter.on(`onPostLoadPageResources`, () => {
     NProgress.done()
   })
 
   // Inject styles.
-  const styles = `#nprogress {
-    pointer-events: none;
-}
-#nprogress .bar {
-    background: ${pluginOptions.color};
-    position: fixed;
-    z-index: 1031;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 2px;
-}
-#nprogress .peg {
-    display: block;
-    position: absolute;
-    right: 0px;
-    width: 100px;
-    height: 100%;
-    box-shadow: 0 0 10px ${pluginOptions.color}, 0 0 5px ${pluginOptions.color};
-    opacity: 1.0;
-    -webkit-transform: rotate(3deg) translate(0px, -4px);
-    -ms-transform: rotate(3deg) translate(0px, -4px);
-    transform: rotate(3deg) translate(0px, -4px);
-}
-#nprogress .spinner {
-    display: block;
-    position: fixed;
-    z-index: 1031;
-    top: 15px;
-    right: 15px;
-}
-#nprogress .spinner-icon {
-    width: 18px;
-    height: 18px;
-    box-sizing: border-box;
-    border: solid 2px transparent;
-    border-top-color: ${pluginOptions.color};
-    border-left-color: ${pluginOptions.color};
-    border-radius: 50%;
-    -webkit-animation: nprogress-spinner 400ms linear infinite;
-    animation: nprogress-spinner 400ms linear infinite;
-}
-.nprogress-custom-parent {
-    overflow: hidden;
-    position: relative;
-}
-.nprogress-custom-parent #nprogress .spinner,
-.nprogress-custom-parent #nprogress .bar {
-    position: absolute;
-}
-@-webkit-keyframes nprogress-spinner {
-    0% {
-        -webkit-transform: rotate(0deg);
+  const styles = `
+    #nprogress {
+     pointer-events: none;
     }
-    100% {
+    #nprogress .bar {
+      background: ${options.color};
+      position: fixed;
+      z-index: 1031;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 2px;
+    }
+    #nprogress .peg {
+      display: block;
+      position: absolute;
+      right: 0px;
+      width: 100px;
+      height: 100%;
+      box-shadow: 0 0 10px ${options.color}, 0 0 5px ${options.color};
+      opacity: 1.0;
+      -webkit-transform: rotate(3deg) translate(0px, -4px);
+      -ms-transform: rotate(3deg) translate(0px, -4px);
+      transform: rotate(3deg) translate(0px, -4px);
+    }
+    #nprogress .spinner {
+      display: block;
+      position: fixed;
+      z-index: 1031;
+      top: 15px;
+      right: 15px;
+    }
+    #nprogress .spinner-icon {
+      width: 18px;
+      height: 18px;
+      box-sizing: border-box;
+      border: solid 2px transparent;
+      border-top-color: ${options.color};
+      border-left-color: ${options.color};
+      border-radius: 50%;
+      -webkit-animation: nprogress-spinner 400ms linear infinite;
+      animation: nprogress-spinner 400ms linear infinite;
+    }
+    .nprogress-custom-parent {
+      overflow: hidden;
+      position: relative;
+    }
+    .nprogress-custom-parent #nprogress .spinner,
+    .nprogress-custom-parent #nprogress .bar {
+      position: absolute;
+    }
+    @-webkit-keyframes nprogress-spinner {
+      0% {
+        -webkit-transform: rotate(0deg);
+      }
+      100% {
         -webkit-transform: rotate(360deg);
+      }
     }
-}
-@keyframes nprogress-spinner {
-    0% {
+    @keyframes nprogress-spinner {
+      0% {
         transform: rotate(0deg);
-    }
-    100% {
+      }
+      100% {
         transform: rotate(360deg);
+      }
     }
-}
 `
 
   const node = document.createElement(`style`)