[docs] Use common strategy for lazily loading css

Author: eps1lon

docs/next.config.js

@@ -91,7 +91,7 @@ module.exports = {
         ...config.module,
         rules: config.module.rules.concat([
           {
-            test: /\.(css|md)$/,
+            test: /\.md$/,
             loader: 'raw-loader',
           },
           // transpile 3rd party packages with dependencies in this repository

docs/src/modules/components/prism-okaidia.css docs/public/static/styles/prism-okaidia.css

@@ -10,7 +10,7 @@ import useMediaQuery from '@material-ui/core/useMediaQuery';
 import { enUS, zhCN, faIR, ruRU, ptBR, esES, frFR, deDE, jaJP } from '@material-ui/core/locale';
 import { blue, pink } from '@material-ui/core/colors';
 import { getCookie } from 'docs/src/modules/utils/helpers';
-import { darkTheme, setPrismTheme } from 'docs/src/modules/components/prism';
+import { loadCSS } from 'fg-loadcss/src/loadCSS';
 
 const languageMap = {
   en: enUS,
@@ -153,7 +153,7 @@ export function ThemeProvider(props) {
   const { dense, direction, paletteColors, paletteType = preferredType, spacing } = themeOptions;
 
   React.useEffect(() => {
-    setPrismTheme(darkTheme);
+    loadCSS('/static/styles/prism-okaidia.css', document.querySelector('#prismjs'));
   }, []);
 
   React.useEffect(() => {

docs/src/modules/components/ThemeContext.js

@@ -1,4 +1,3 @@
-/* eslint-disable import/no-mutable-exports, global-require */
 import prism from 'prismjs';
 import 'prismjs/components/prism-css';
 import 'prismjs/components/prism-diff';
@@ -8,18 +7,4 @@ import 'prismjs/components/prism-jsx';
 import 'prismjs/components/prism-markup';
 import 'prismjs/components/prism-tsx';
 
-let styleNode;
-let darkTheme;
-
-if (process.browser) {
-  darkTheme = require('./prism-okaidia.css');
-  styleNode = document.querySelector('#prismjs');
-}
-
-export { darkTheme };
-
-export function setPrismTheme(theme) {
-  styleNode.textContent = theme;
-}
-
 export default prism;