chore: bump docusaurus (#479)

apps/website/docs/react/api/merge-classes.md

@@ -64,7 +64,7 @@ Compared to native CSS, the order of arguments in `mergeClasses()` affects the r
 
 In CSS the order of the class names doesn't affect the application of styles. If you have issues with style specificity or ordering, look at the generated CSS rather than the class names.
 
-Griffel performs CSS rule ordering, check [the order of pseudo classes](react/guides/atomic-css#lvfha-order-of-pseudo-classes).
+Griffel performs CSS rule ordering, check [the order of pseudo classes](/react/guides/atomic-css#lvfha-order-of-pseudo-classes).
 
 ### Merging plain CSS classes
 

apps/website/docusaurus.config.js

@@ -1,10 +1,10 @@
 // @ts-check
 
-const vsDarkTheme = require('prism-react-renderer/themes/vsDark');
+const { themes } = require('prism-react-renderer');
 const prismTheme = {
-  ...vsDarkTheme,
+  ...themes.vsDark,
   plain: {
-    ...vsDarkTheme.plain,
+    ...themes.vsDark.plain,
     backgroundColor: '#000',
   },
 };

change/@griffel-devtools-c9f614af-2d45-4ca7-994b-55373dda363e.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: use newer version of react-prism",
+  "packageName": "@griffel/devtools",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

package.json

@@ -31,10 +31,10 @@
     "@babel/preset-typescript": "7.23.2",
     "@codesandbox/sandpack-react": "1.18.4",
     "@codesandbox/sandpack-themes": "1.17.0",
-    "@docusaurus/core": "2.3.1",
-    "@docusaurus/module-type-aliases": "2.3.1",
-    "@docusaurus/preset-classic": "2.3.1",
-    "@docusaurus/theme-mermaid": "2.3.1",
+    "@docusaurus/core": "3.1.0",
+    "@docusaurus/module-type-aliases": "3.1.0",
+    "@docusaurus/preset-classic": "3.1.0",
+    "@docusaurus/theme-mermaid": "3.1.0",
     "@emotion/css": "^11.9.0",
     "@nrwl/cli": "15.3.3",
     "@nrwl/eslint-plugin-nx": "15.3.3",
@@ -56,7 +56,6 @@
     "@swc/core": "^1.3.19",
     "@testing-library/jest-dom": "5.16.1",
     "@testing-library/react": "13.4.0",
-    "@tsconfig/docusaurus": "^1.0.4",
     "@types/babel__helper-module-imports": "7.18.0",
     "@types/babel__helper-plugin-utils": "7.10.0",
     "@types/chrome": "0.0.180",
@@ -121,7 +120,7 @@
     "nx": "15.3.3",
     "postcss": "^8.4.31",
     "prettier": "2.8.2",
-    "prism-react-renderer": "1.2.1",
+    "prism-react-renderer": "2.3.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-fela": "12.2.0",

packages/devtools/src/HighlightedCSS.tsx

@@ -1,6 +1,6 @@
 import { makeStyles, shorthands } from '@griffel/react';
+import { Highlight } from 'prism-react-renderer';
 import type { PrismTheme } from 'prism-react-renderer';
-import Highlight, { defaultProps } from 'prism-react-renderer';
 import * as React from 'react';
 
 import { tokens } from './themes';
@@ -66,7 +66,7 @@ export const HighlightedCSS: React.FC<{ code: string }> = ({ code }) => {
   const { colorIndicator } = useColorIndicatorStyles();
 
   return (
-    <Highlight {...defaultProps} code={code} language="css" theme={customTheme}>
+    <Highlight code={code} language="css" theme={customTheme}>
       {({ className, style, tokens, getLineProps, getTokenProps }) => (
         <pre className={className} style={{ ...style, display: 'inline-block', textDecorationLine: 'inherit' }}>
           {tokens.map((line, i) => (