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

@@ -10,6 +10,7 @@ module.exports = function preset(context, opts = {}) {
     themes: [
       {
         module: '@docusaurus/theme-classic',
+        options: opts.theme,
       },
       {
         module: '@docusaurus/theme-search-algolia',

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];
     },
   };
 };

packages/docusaurus-theme-classic/src/infima.js

@@ -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';

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`,
   );

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',
-      ),
-    },
-  ],
 };

website/plugins/plugin-infima-overrides/index.js

@@ -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')];
-    },
-  };
-};

website/plugins/plugin-infima-overrides/infima-overrides.js

@@ -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';