From b5cbaee9c1ca6d43a4f0dedce62faea7ccd255c6 Mon Sep 17 00:00:00 2001
From: Endi <endiliey@gmail.com>
Date: Sun, 17 Nov 2019 19:48:27 +0700
Subject: [PATCH] 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 | 38 ++++++++++++++++---------
 1 file changed, 25 insertions(+), 13 deletions(-)

diff --git a/packages/docusaurus/src/webpack/base.ts b/packages/docusaurus/src/webpack/base.ts
index 2b20a055453f..3a67ad1e8acc 100644
--- a/packages/docusaurus/src/webpack/base.ts
+++ b/packages/docusaurus/src/webpack/base.ts
@@ -102,19 +102,32 @@ export function createBaseConfig(
             }),
           ]
         : undefined,
-      splitChunks: {
-        // 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: {
-          // disable the built-in cacheGroups
-          default: false,
-          common: {
-            name: 'common',
-            minChunks: totalPages > 2 ? totalPages * 0.5 : 2,
-            priority: 40,
+      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: {
+              // disable the built-in cacheGroups
+              default: false,
+              common: {
+                name: 'common',
+                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,
+              },
+            },
           },
-        },
-      },
     },
     module: {
       rules: [
@@ -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',
       }),
     ],
   };