fix: Only create one CSS file during builds to avoid problems caused …

…by split CSS files loading in different orders (#11800)

Fixes #11072

packages/gatsby/src/utils/webpack.config.js

@@ -391,6 +391,18 @@ module.exports = async (
       },
       splitChunks: {
         name: false,
+        cacheGroups: {
+          // Only create one CSS file to avoid
+          // problems with code-split CSS loading in different orders
+          // causing inconsistent/non-determanistic styling
+          // See https://github.com/gatsbyjs/gatsby/issues/11072
+          styles: {
+            name: `styles`,
+            test: /\.css$/,
+            chunks: `all`,
+            enforce: true,
+          },
+        },
       },
       minimizer: [
         // TODO: maybe this option should be noMinimize?