@docusaurus/theme-classic 2.0.0-beta.15d451942 → 2.0.0-beta.16

package/src/theme/Toggle/styles.module.css

@@ -6,23 +6,6 @@
  */
 
 .toggle {
-  align-items: center;
-  display: flex;
-  height: 10px;
-  justify-content: center;
-  width: 10px;
-}
-.toggle::before {
-  position: absolute;
-}
-
-/**
- * styles for React Toggle
- * copied over because we want to allow user to swizzle it and modify the css
- * and also to make sure its compatible with our dark mode
- * https://github.com/aaronshaf/react-toggle/blob/master/style.css
- */
-:global(.react-toggle) {
   touch-action: pan-x;
   position: relative;
   cursor: pointer;
@@ -30,7 +13,7 @@
   -webkit-tap-highlight-color: transparent;
 }
 
-:global(.react-toggle-screenreader-only) {
+.toggleScreenReader {
   border: 0;
   clip: rect(0 0 0 0);
   height: 1px;
@@ -40,11 +23,11 @@
   width: 1px;
 }
 
-:global(.react-toggle--disabled) {
+.toggleDisabled {
   cursor: not-allowed;
 }
 
-:global(.react-toggle-track) {
+.toggleTrack {
   width: 50px;
   height: 24px;
   border-radius: 30px;
@@ -52,42 +35,42 @@
   transition: all 0.2s ease;
 }
 
-:global(.react-toggle-track-check) {
+.toggleTrackCheck {
   position: absolute;
   width: 14px;
   height: 10px;
-  top: 0px;
-  bottom: 0px;
+  top: 0;
+  bottom: 0;
   margin: auto 0;
   left: 8px;
   opacity: 0;
   transition: opacity 0.25s ease;
 }
 
-:global([data-theme='dark'] .react-toggle .react-toggle-track-check),
-:global(.react-toggle--checked .react-toggle-track-check) {
+.toggleChecked .toggleTrackCheck,
+[data-theme='dark'] .toggle .toggleTrackCheck {
   opacity: 1;
   transition: opacity 0.25s ease;
 }
 
-:global(.react-toggle-track-x) {
+.toggleTrackX {
   position: absolute;
   width: 10px;
   height: 10px;
-  top: 0px;
-  bottom: 0px;
+  top: 0;
+  bottom: 0;
   margin: auto 0;
   right: 10px;
   opacity: 1;
   transition: opacity 0.25s ease;
 }
 
-:global([data-theme='dark'] .react-toggle .react-toggle-track-x),
-:global(.react-toggle--checked .react-toggle-track-x) {
+.toggleChecked .toggleTrackX,
+[data-theme='dark'] .toggle .toggleTrackX {
   opacity: 0;
 }
 
-:global(.react-toggle-thumb) {
+.toggleTrackThumb {
   position: absolute;
   top: 1px;
   left: 1px;
@@ -99,16 +82,25 @@
   transition: all 0.25s ease;
 }
 
-:global([data-theme='dark'] .react-toggle .react-toggle-thumb),
-:global(.react-toggle--checked .react-toggle-thumb) {
+.toggleFocused .toggleTrackThumb,
+.toggle:hover .toggleTrackThumb {
+  box-shadow: 0 0 2px 3px var(--ifm-color-primary);
+}
+
+/* stylelint-disable-next-line no-descending-specificity */
+.toggleChecked .toggleTrackThumb,
+[data-theme='dark'] .toggle .toggleTrackThumb {
   left: 27px;
 }
 
-:global(.react-toggle--focus .react-toggle-thumb),
-:global(.react-toggle:hover .react-toggle-thumb) {
-  box-shadow: 0px 0px 2px 3px var(--ifm-color-primary);
+.toggle:active:not(.toggleDisabled) .toggleTrackThumb {
+  box-shadow: 0 0 5px 5px var(--ifm-color-primary);
 }
 
-:global(.react-toggle:active:not(.react-toggle--disabled) .react-toggle-thumb) {
-  box-shadow: 0px 0px 5px 5px var(--ifm-color-primary);
+.toggleIcon {
+  align-items: center;
+  display: flex;
+  height: 10px;
+  justify-content: center;
+  width: 10px;
 }

package/src/theme/prism-include-languages.ts

@@ -5,24 +5,29 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
 import siteConfig from '@generated/docusaurus.config';
 import type * as PrismNamespace from 'prismjs';
 
-const prismIncludeLanguages = (PrismObject: typeof PrismNamespace): void => {
-  if (ExecutionEnvironment.canUseDOM) {
-    const {
-      themeConfig: {prism: {additionalLanguages = []} = {}},
-    } = siteConfig;
+export default function prismIncludeLanguages(
+  PrismObject: typeof PrismNamespace,
+): void {
+  const {
+    themeConfig: {prism},
+  } = siteConfig;
+  const {additionalLanguages} = prism as {additionalLanguages: string[]};
 
-    window.Prism = PrismObject;
+  // Prism components work on the Prism instance on the window, while prism-
+  // react-renderer uses its own Prism instance. We temporarily mount the
+  // instance onto window, import components to enhance it, then remove it to
+  // avoid polluting global namespace.
+  // You can mutate PrismObject: registering plugins, deleting languages... As
+  // long as you don't re-assign it
+  globalThis.Prism = PrismObject;
 
-    additionalLanguages.forEach((lang: string) => {
-      require(`prismjs/components/prism-${lang}`); // eslint-disable-line
-    });
+  additionalLanguages.forEach((lang) => {
+    // eslint-disable-next-line global-require, import/no-dynamic-require
+    require(`prismjs/components/prism-${lang}`);
+  });
 
-    delete (window as Window & {Prism?: typeof PrismNamespace}).Prism;
-  }
-};
-
-export default prismIncludeLanguages;
+  delete (globalThis as Global & {Prism?: typeof PrismNamespace}).Prism;
+}