[Beta] Remove styled-jsx (#4690)

beta/src/components/Layout/Toc.tsx

@@ -28,7 +28,7 @@ export function Toc({
       <h2 className="mb-3 lg:mb-3 uppercase tracking-wide font-bold text-sm text-secondary dark:text-secondary-dark px-4 w-full">
         On this page
       </h2>
-      <div className="toc h-full overflow-y-auto pl-4">
+      <div className="h-full overflow-y-auto pl-4 max-h-[calc(100vh-7.5rem)]">
         <ul className="space-y-2 pb-16">
           {headings &&
             headings.length > 0 &&
@@ -65,17 +65,6 @@ export function Toc({
             })}
         </ul>
       </div>
-      <style jsx global>{`
-        .toc {
-          /** Screen - nav - toc offset */
-          max-height: calc(100vh - 7.5rem);
-        }
-        .toc-link > code {
-          overflow-wrap: break-word;
-          white-space: pre-wrap;
-          font-size: 90%;
-        }
-      `}</style>
     </nav>
   );
 }

beta/src/components/Layout/useTocHighlight.tsx

@@ -9,7 +9,7 @@ const TOP_OFFSET = 75;
 
 export function getHeaderAnchors(): HTMLAnchorElement[] {
   return Array.prototype.filter.call(
-    document.getElementsByClassName(siteConfig.headerIdConfig.className),
+    document.getElementsByClassName('mdx-header-anchor'),
     function (testElement) {
       return (
         testElement.parentNode.nodeName === 'H1' ||

beta/src/components/MDX/Heading.tsx

@@ -14,8 +14,6 @@ export interface HeadingProps {
   as?: any;
 }
 
-const anchorClassName = siteConfig.headerIdConfig.className;
-
 const Heading = forwardRefWithAs<HeadingProps, 'div'>(function Heading(
   {as: Comp = 'div', className, children, id, isPageAnchor = true, ...props},
   ref
@@ -26,8 +24,7 @@ const Heading = forwardRefWithAs<HeadingProps, 'div'>(function Heading(
   }
 
   return (
-    <>
+    <Comp id={id} {...props} ref={ref} className={cn('mdx-heading', className)}>
-      <Comp id={id} {...props} ref={ref} className={cn('heading', className)}>
       {children}
       {isPageAnchor && (
         <a
@@ -35,7 +32,7 @@ const Heading = forwardRefWithAs<HeadingProps, 'div'>(function Heading(
           aria-label={label}
           title={label}
           className={cn(
-              anchorClassName,
+            'mdx-header-anchor',
             Comp === 'h1' ? 'hidden' : 'inline-block'
           )}>
           <svg
@@ -52,45 +49,6 @@ const Heading = forwardRefWithAs<HeadingProps, 'div'>(function Heading(
         </a>
       )}
     </Comp>
-      <style jsx>
-        {`
-          .heading {
-            scroll-margin-top: 2.5em;
-            /* Space for the anchor */
-            padding-right: 1em;
-          }
-          .heading:before {
-            height: 6rem;
-            margin-top: -6rem;
-            visibility: hidden;
-            content: '';
-          }
-
-          .heading .${anchorClassName} {
-            /* Prevent the anchor from
-               overflowing to its own line */
-            height: 0px;
-            width: 0px;
-          }
-
-          .heading .${anchorClassName} svg {
-            display: inline;
-          }
-
-          .heading .${anchorClassName} svg {
-            visibility: hidden;
-          }
-
-          .heading:hover .${anchorClassName} svg {
-            visibility: visible;
-          }
-
-          .heading .${anchorClassName}:focus svg {
-            visibility: visible;
-          }
-        `}
-      </style>
-    </>
   );
 });
 

beta/src/components/MDX/MDXComponents.tsx

@@ -80,21 +80,11 @@ const Blockquote = ({
   ...props
 }: JSX.IntrinsicElements['blockquote']) => {
   return (
-    <>
     <blockquote
       className="mdx-blockquote py-4 px-8 my-8 shadow-inner bg-highlight dark:bg-highlight-dark bg-opacity-50 rounded-lg leading-6 flex relative"
       {...props}>
       <span className="block relative">{children}</span>
     </blockquote>
-      <style jsx global>{`
-        .mdx-blockquote > span > p:first-of-type {
-          margin-bottom: 0;
-        }
-        .mdx-blockquote > span > p:last-of-type {
-          margin-bottom: 1rem;
-        }
-      `}</style>
-    </>
   );
 };
 
@@ -274,72 +264,6 @@ function IllustrationBlock({
         <div className="mdx-illustration-block">{images}</div>
       )}
       {author ? <AuthorCredit author={author} authorLink={authorLink} /> : null}
-      <style jsx global>{`
-        .mdx-illustration-block {
-          display: flex;
-          flex-direction: row;
-          flex-wrap: nowrap;
-          justify-content: center;
-          align-content: stretch;
-          align-items: stretch;
-          gap: 42px;
-        }
-        ol.mdx-illustration-block {
-          gap: 60px;
-        }
-        .mdx-illustration-block li {
-          display: flex;
-          align-items: flex-start;
-          align-content: stretch;
-          justify-content: space-around;
-          position: relative;
-          padding: 1rem;
-        }
-        .mdx-illustration-block figure {
-          display: flex;
-          flex-direction: column;
-          align-content: center;
-          align-items: center;
-
-          justify-content: space-between;
-          position: relative;
-          height: 100%;
-        }
-        .mdx-illustration-block li:after {
-          content: ' ';
-          display: block;
-          position: absolute;
-          top: 50%;
-          right: 100%;
-          transform: translateY(-50%);
-          width: 60px;
-          height: 49px;
-          background: center / contain no-repeat url('/images/g_arrow.png');
-        }
-        .mdx-illustration-block li:first-child:after {
-          content: ' ';
-          display: none;
-        }
-        .mdx-illustration-block img {
-          max-height: 250px;
-          width: 100%;
-        }
-        @media (max-width: 680px) {
-          .mdx-illustration-block {
-            flex-direction: column;
-          }
-          .mdx-illustration-block img {
-            max-height: 200px;
-            width: auto;
-          }
-          .mdx-illustration-block li:after {
-            top: 0;
-            left: 50%;
-            right: auto;
-            transform: translateX(-50%) translateY(-100%) rotate(90deg);
-          }
-        }
-      `}</style>
     </div>
   );
 }

beta/src/siteConfig.ts

@@ -12,7 +12,4 @@ export const siteConfig = {
     apiKey: '861ccfb8707150c0e776b88357286123',
     indexName: 'beta-react',
   },
-  headerIdConfig: {
-    className: `anchor`,
-  },
 };

beta/src/styles/index.css

@@ -219,3 +219,104 @@
 html.dark .code-step * {
   color: white !important;
 }
+
+.mdx-heading {
+  scroll-margin-top: 2.5em;
+  /* Space for the anchor */
+  padding-right: 1em;
+}
+.mdx-heading:before {
+  height: 6rem;
+  margin-top: -6rem;
+  visibility: hidden;
+  content: '';
+}
+.mdx-heading .mdx-header-anchor {
+  /* Prevent the anchor from
+     overflowing to its own line */
+  height: 0px;
+  width: 0px;
+}
+.mdx-heading .mdx-header-anchor svg {
+  display: inline;
+}
+.mdx-heading .mdx-header-anchor svg {
+  visibility: hidden;
+}
+.mdx-heading:hover .mdx-header-anchor svg {
+  visibility: visible;
+}
+.mdx-heading .mdx-header-anchor:focus svg {
+  visibility: visible;
+}
+
+.mdx-blockquote > span > p:first-of-type {
+  margin-bottom: 0;
+}
+.mdx-blockquote > span > p:last-of-type {
+  margin-bottom: 1rem;
+}
+.mdx-illustration-block {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: center;
+  align-content: stretch;
+  align-items: stretch;
+  gap: 42px;
+}
+ol.mdx-illustration-block {
+  gap: 60px;
+}
+.mdx-illustration-block li {
+  display: flex;
+  align-items: flex-start;
+  align-content: stretch;
+  justify-content: space-around;
+  position: relative;
+  padding: 1rem;
+}
+.mdx-illustration-block figure {
+  display: flex;
+  flex-direction: column;
+  align-content: center;
+  align-items: center;
+
+  justify-content: space-between;
+  position: relative;
+  height: 100%;
+}
+.mdx-illustration-block li:after {
+  content: ' ';
+  display: block;
+  position: absolute;
+  top: 50%;
+  right: 100%;
+  transform: translateY(-50%);
+  width: 60px;
+  height: 49px;
+  background: center / contain no-repeat url('/images/g_arrow.png');
+}
+.mdx-illustration-block li:first-child:after {
+  content: ' ';
+  display: none;
+}
+.mdx-illustration-block img {
+  max-height: 250px;
+  width: 100%;
+}
+@media (max-width: 680px) {
+  .mdx-illustration-block {
+    flex-direction: column;
+  }
+  .mdx-illustration-block img {
+    max-height: 200px;
+    width: auto;
+  }
+  .mdx-illustration-block li:after {
+    top: 0;
+    left: 50%;
+    right: auto;
+    transform: translateX(-50%) translateY(-100%) rotate(90deg);
+  }
+}