chore(docusaurus-theme-classic/common): copy over applicable code from lex111/prism-styles-fouc

Author: nluangrath-godaddy

packages/docusaurus-theme-classic/src/theme/CodeBlock/Container/index.tsx

@@ -7,21 +7,17 @@
 
 import React, {type ComponentProps} from 'react';
 import clsx from 'clsx';
-import {ThemeClassNames, usePrismTheme} from '@docusaurus/theme-common';
-import {getPrismCssVariables} from '@docusaurus/theme-common/internal';
+import {ThemeClassNames} from '@docusaurus/theme-common';
 import styles from './styles.module.css';
 
 export default function CodeBlockContainer<T extends 'div' | 'pre'>({
   as: As,
   ...props
 }: {as: T} & ComponentProps<T>): JSX.Element {
-  const prismTheme = usePrismTheme();
-  const prismCssVariables = getPrismCssVariables(prismTheme);
   return (
     <As
       // Polymorphic components are hard to type, without `oneOf` generics
       {...(props as any)}
-      style={prismCssVariables}
       className={clsx(
         props.className,
         styles.codeBlockContainer,

packages/docusaurus-theme-classic/src/theme/CodeBlock/index.tsx

@@ -6,7 +6,6 @@
  */
 
 import React, {isValidElement, type ReactNode} from 'react';
-import useIsBrowser from '@docusaurus/useIsBrowser';
 import ElementContent from '@theme/CodeBlock/Content/Element';
 import StringContent from '@theme/CodeBlock/Content/String';
 import type {Props} from '@theme/CodeBlock';
@@ -29,17 +28,8 @@ export default function CodeBlock({
   children: rawChildren,
   ...props
 }: Props): JSX.Element {
-  // The Prism theme on SSR is always the default theme but the site theme can
-  // be in a different mode. React hydration doesn't update DOM styles that come
-  // from SSR. Hence force a re-render after mounting to apply the current
-  // relevant styles.
-  const isBrowser = useIsBrowser();
   const children = maybeStringifyChildren(rawChildren);
   const CodeBlockComp =
     typeof children === 'string' ? StringContent : ElementContent;
-  return (
-    <CodeBlockComp key={String(isBrowser)} {...props}>
-      {children as string}
-    </CodeBlockComp>
-  );
+  return <CodeBlockComp {...props}>{children as string}</CodeBlockComp>;
 }

packages/docusaurus-theme-common/src/internal.ts

@@ -118,5 +118,4 @@ export {useLockBodyScroll} from './hooks/useLockBodyScroll';
 export {useSearchPage} from './hooks/useSearchPage';
 export {useCodeWordWrap} from './hooks/useCodeWordWrap';
 export {useSkipToContent} from './hooks/useSkipToContent';
-export {getPrismCssVariables} from './utils/codeBlockUtils';
 export {useBackToTopButton} from './hooks/useBackToTopButton';

packages/docusaurus-theme-common/src/utils/codeBlockUtils.ts

@@ -5,9 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import type {CSSProperties} from 'react';
 import rangeParser from 'parse-numeric-range';
-import type {PrismTheme} from 'prism-react-renderer';
 
 const codeBlockTitleRegex = /title=(?<quote>["'])(?<title>.*?)\1/;
 const metastringLinesRangeRegex = /\{(?<range>[\d,-]+)\}/;
@@ -233,19 +231,3 @@ export function parseLines(
   });
   return {lineClassNames, code};
 }
-
-export function getPrismCssVariables(prismTheme: PrismTheme): CSSProperties {
-  const mapping: {[name: keyof PrismTheme['plain']]: string} = {
-    color: '--prism-color',
-    backgroundColor: '--prism-background-color',
-  };
-
-  const properties: {[key: string]: string} = {};
-  Object.entries(prismTheme.plain).forEach(([key, value]) => {
-    const varName = mapping[key];
-    if (varName && typeof value === 'string') {
-      properties[varName] = value;
-    }
-  });
-  return properties;
-}

packages/docusaurus-theme-common/src/utils/useThemeConfig.ts

@@ -59,7 +59,7 @@ export type AnnouncementBarConfig = {
 
 export type PrismConfig = {
   theme: PrismTheme;
-  darkTheme?: PrismTheme;
+  darkTheme: PrismTheme;
   defaultLanguage?: string;
   additionalLanguages: string[];
   magicComments: MagicCommentConfig[];