Add @csstools/postcss-global-data dependency.

The recent update to PostCSS and postcss-custom-media appears to have
broken the latter, causing custom CSS media queries to not be processed.
It's not clear exactly what changed that caused it, but it may have been
one of nested packages.

Regardless, it looks like the postcss-custom-media project's README was
updated sometime earlier this year to explicitly mention that it may not
work out of the box with CSS Modules, which we are using in this
project. They recommend using the postcss-global-data package to ensure
that the custom media definitions are available in all CSS modules.

Adding that package appears to fix the issue, allowing the pages to look
the same as before the package upgrades.

gatsby-config.js

@@ -1,3 +1,4 @@
+const postcssGlobalData = require("@csstools/postcss-global-data");
 const postcssCustomMedia = require("postcss-custom-media");
 
 const linkResolver = require("./src/utils/linkResolver");
@@ -25,7 +26,15 @@ module.exports = {
     {
       resolve: "gatsby-plugin-postcss",
       options: {
-        postCssPlugins: [postcssCustomMedia],
+        postCssPlugins: [
+          // This is needed to allow the custom media definitions to be
+          // accessible in all CSS modules. See
+          // https://github.com/csstools/postcss-plugins/blob/768449ddc7e226e735b9e507fd4fbd4c89c8de6c/plugins/postcss-custom-media/README.md#modular-css-processing
+          postcssGlobalData({
+            files: ["src/stylesheets/global.css"],
+          }),
+          postcssCustomMedia,
+        ],
       },
     },
     {

package.json

@@ -45,6 +45,7 @@
     "@babel/preset-env": "^7.22.15",
     "@babel/preset-react": "^7.22.15",
     "@babel/preset-typescript": "^7.22.15",
+    "@csstools/postcss-global-data": "^2.1.0",
     "@storybook/addon-actions": "^7.4.6",
     "@storybook/addon-essentials": "^7.4.6",
     "@storybook/addon-links": "^7.4.6",