From b789624d2e6c38a924a3f0d4355f5a77b1a981fa Mon Sep 17 00:00:00 2001
From: Endi <endiliey@gmail.com>
Date: Wed, 5 Jun 2019 00:03:11 +0700
Subject: [PATCH] feat(v2): allow easy css override with custom css (#1559)

* feat(v2): allow easy css override with custom css

* lint

* fix(v2): use back require for client modules
---
 packages/docusaurus-preset-classic/src/index.js |  1 +
 packages/docusaurus-theme-classic/src/index.js  |  5 +++--
 packages/docusaurus-theme-classic/src/infima.js |  8 --------
 packages/docusaurus/src/server/index.ts         |  2 ++
 .../infima-variables.css => css/custom.css}     |  0
 website/docusaurus.config.js                    | 11 +++--------
 .../plugins/plugin-infima-overrides/index.js    | 17 -----------------
 .../plugin-infima-overrides/infima-overrides.js |  8 --------
 8 files changed, 9 insertions(+), 43 deletions(-)
 delete mode 100644 packages/docusaurus-theme-classic/src/infima.js
 rename website/{plugins/plugin-infima-overrides/infima-variables.css => css/custom.css} (100%)
 delete mode 100644 website/plugins/plugin-infima-overrides/index.js
 delete mode 100644 website/plugins/plugin-infima-overrides/infima-overrides.js

diff --git a/packages/docusaurus-preset-classic/src/index.js b/packages/docusaurus-preset-classic/src/index.js
index ec161e2aab..46d9f5249e 100644
--- a/packages/docusaurus-preset-classic/src/index.js
+++ b/packages/docusaurus-preset-classic/src/index.js
@@ -10,6 +10,7 @@ module.exports = function preset(context, opts = {}) {
     themes: [
       {
         module: '@docusaurus/theme-classic',
+        options: opts.theme,
       },
       {
         module: '@docusaurus/theme-search-algolia',
diff --git a/packages/docusaurus-theme-classic/src/index.js b/packages/docusaurus-theme-classic/src/index.js
index 811d9def12..d5257b8ccd 100644
--- a/packages/docusaurus-theme-classic/src/index.js
+++ b/packages/docusaurus-theme-classic/src/index.js
@@ -7,7 +7,8 @@
 
 const path = require('path');
 
-module.exports = function() {
+module.exports = function(context, options) {
+  const {customCss} = options || {};
   return {
     name: 'docusaurus-theme-classic',
 
@@ -16,7 +17,7 @@ module.exports = function() {
     },
 
     getClientModules() {
-      return [path.resolve(__dirname, './infima')];
+      return ['infima/dist/css/default/default.css', customCss];
     },
   };
 };
diff --git a/packages/docusaurus-theme-classic/src/infima.js b/packages/docusaurus-theme-classic/src/infima.js
deleted file mode 100644
index 2c68f7dac7..0000000000
--- a/packages/docusaurus-theme-classic/src/infima.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * Copyright (c) 2017-present, Facebook, Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import 'infima/dist/css/default/default.css';
diff --git a/packages/docusaurus/src/server/index.ts b/packages/docusaurus/src/server/index.ts
index 44ff45fb04..2a0e02fb2c 100644
--- a/packages/docusaurus/src/server/index.ts
+++ b/packages/docusaurus/src/server/index.ts
@@ -105,6 +105,8 @@ export async function load(
     generatedFilesDir,
     'client-modules.js',
     `export default [\n${clientModules
+      // import() is async so we use require() because client modules can have
+      // CSS and the order matters for loading CSS.
       .map(module => `  require(${JSON.stringify(module)}),`)
       .join('\n')}\n];\n`,
   );
diff --git a/website/plugins/plugin-infima-overrides/infima-variables.css b/website/css/custom.css
similarity index 100%
rename from website/plugins/plugin-infima-overrides/infima-variables.css
rename to website/css/custom.css
diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
index f425908bfa..5370405ca3 100644
--- a/website/docusaurus.config.js
+++ b/website/docusaurus.config.js
@@ -106,15 +106,10 @@ module.exports = {
           path: '../website-1.x/blog',
           postsPerPage: 3,
         },
+        theme: {
+          customCss: require.resolve('./css/custom.css'),
+        },
       },
     ],
   ],
-  plugins: [
-    {
-      module: require('path').resolve(
-        __dirname,
-        './plugins/plugin-infima-overrides',
-      ),
-    },
-  ],
 };
diff --git a/website/plugins/plugin-infima-overrides/index.js b/website/plugins/plugin-infima-overrides/index.js
deleted file mode 100644
index 96f13e6e4d..0000000000
--- a/website/plugins/plugin-infima-overrides/index.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright (c) 2017-present, Facebook, Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-const path = require('path');
-
-module.exports = function() {
-  return {
-    name: 'docusaurus-plugin-website-infima',
-    getClientModules() {
-      return [path.resolve(__dirname, './infima-overrides')];
-    },
-  };
-};
diff --git a/website/plugins/plugin-infima-overrides/infima-overrides.js b/website/plugins/plugin-infima-overrides/infima-overrides.js
deleted file mode 100644
index 92be00101b..0000000000
--- a/website/plugins/plugin-infima-overrides/infima-overrides.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * Copyright (c) 2017-present, Facebook, Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import './infima-variables.css';