apply prism CSS variables locally and consistently across SSR/Client

facebook · Apr 14, 2022 · 5099e42 · 5099e42
1 parent 5dfb338
commit 5099e42
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 20 deletions.
diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.tsx b/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.tsx
@@ -16,6 +16,7 @@ import {
   containsLineNumbers,
   ThemeClassNames,
   usePrismTheme,
+  getPrismCssVariables,
 } from '@docusaurus/theme-common';
 import CopyButton from '@theme/CodeBlock/CopyButton';
 import type {Props} from '@theme/CodeBlock';
@@ -50,6 +51,8 @@ export default function CodeBlock({
   const codeBlockTitle = parseCodeBlockTitle(metastring) || title;
   const prismTheme = usePrismTheme();
 
+  const prismCssVariables = getPrismCssVariables(prismTheme);
+
   // <pre> tags in markdown map to CodeBlocks and they may contain JSX children.
   // When the children is not a simple string, we just return a styled block
   // without actually highlighting.
@@ -72,7 +75,8 @@ export default function CodeBlock({
               styles.codeBlockContainer,
               blockClassName,
               ThemeClassNames.common.codeBlock,
-            )}>
+            )}
+            style={prismCssVariables}>
             <code className={styles.codeBlockLines}>{children}</code>
           </pre>
         )}
@@ -108,7 +112,8 @@ export default function CodeBlock({
                 language && !blockClassName.includes(`language-${language}`),
             },
             ThemeClassNames.common.codeBlock,
-          )}>
+          )}
+          style={prismCssVariables}>
           {codeBlockTitle && (
             <div className={styles.codeBlockTitle}>{codeBlockTitle}</div>
           )}

diff --git a/packages/docusaurus-theme-common/src/contexts/colorMode.tsx b/packages/docusaurus-theme-common/src/contexts/colorMode.tsx
@@ -59,7 +59,6 @@ const storeColorMode = (newColorMode: ColorMode) => {
 
 function useContextValue(): ContextValue {
   const {
-    prism,
     colorMode: {defaultMode, disableSwitch, respectPrefersColorScheme},
   } = useThemeConfig();
   const [colorMode, setColorModeState] = useState(
@@ -76,23 +75,7 @@ function useContextValue(): ContextValue {
       'data-theme',
       coerceToColorMode(colorMode),
     );
-
-    // Add Prism's CSS variables
-    const root = window.document.documentElement;
-    const currentPrismTheme =
-      (colorMode === 'dark' ? prism.darkTheme : prism.theme) || prism.theme;
-
-    Object.entries(currentPrismTheme.plain).forEach(
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      ([name, color]: [string, any]) => {
-        const cssVarName = `--prism-${name.replace(
-          /[a-z][A-Z\d]/g,
-          (m) => `${m[0]}-${m[1]!.toLowerCase()}`,
-        )}`;
-        root.style.setProperty(cssVarName, color);
-      },
-    );
-  }, [colorMode, prism.theme, prism.darkTheme]);
+  }, [colorMode]);
 
   useEffect(() => {
     if (disableSwitch) {

diff --git a/packages/docusaurus-theme-common/src/index.ts b/packages/docusaurus-theme-common/src/index.ts
@@ -35,6 +35,7 @@ export {
   parseLanguage,
   parseLines,
   containsLineNumbers,
+  getPrismCssVariables,
 } from './utils/codeBlockUtils';
 
 export {

diff --git a/packages/docusaurus-theme-common/src/utils/codeBlockUtils.ts b/packages/docusaurus-theme-common/src/utils/codeBlockUtils.ts
@@ -6,6 +6,8 @@
  */
 
 import rangeParser from 'parse-numeric-range';
+import type {PrismTheme} from 'prism-react-renderer';
+import type {CSSProperties} from 'react';
 
 const codeBlockTitleRegex = /title=(?<quote>["'])(?<title>.*?)\1/;
 const highlightLinesRangeRegex = /\{(?<range>[\d,-]+)\}/;
@@ -173,3 +175,20 @@ export function parseLines(
   code = lines.join('\n');
   return {highlightLines, code};
 }
+
+export function getPrismCssVariables(prismTheme: PrismTheme): CSSProperties {
+  const mapping: {[name: keyof PrismTheme['plain']]: string} = {
+    color: '--prism-color',
+    backgroundColor: '--prism-background-color',
+  };
+
+  const properties: CSSProperties = {};
+  Object.entries(prismTheme.plain).forEach(([key, value]) => {
+    const varName = mapping[key];
+    if (varName && typeof value === 'string') {
+      // @ts-expect-error: why css variables not in inline style type?
+      properties[varName] = value;
+    }
+  });
+  return properties;
+}