feat(v2): only create one css file to avoid code-split css loading problem (#2007)

* feat(v2): only create one css file to avoid code-split css loading problem

* nits

packages/docusaurus/src/webpack/base.ts

@@ -102,7 +102,9 @@ export function createBaseConfig(
             }),
           ]
         : undefined,
-      splitChunks: {
+      splitChunks: isServer
+        ? false
+        : {
             // Since the chunk name includes all origin chunk names it’s recommended for production builds with long term caching to NOT include [name] in the filenames
             name: false,
             cacheGroups: {
@@ -113,6 +115,17 @@ export function createBaseConfig(
                 minChunks: totalPages > 2 ? totalPages * 0.5 : 2,
                 priority: 40,
               },
+              // Only create one CSS file to avoid
+              // problems with code-split CSS loading in different orders
+              // causing inconsistent/non-deterministic styling
+              // See https://github.com/facebook/docusaurus/issues/2006
+              styles: {
+                name: 'styles',
+                test: /\.css$/,
+                chunks: `all`,
+                enforce: true,
+                priority: 50,
+              },
             },
           },
     },
@@ -163,7 +176,6 @@ export function createBaseConfig(
     plugins: [
       new MiniCssExtractPlugin({
         filename: isProd ? '[name].[contenthash:8].css' : '[name].css',
-        chunkFilename: isProd ? '[name].[contenthash:8].css' : '[name].css',
       }),
     ],
   };