refactor(theme-classic): avoid using clsx class dict with CSS modules (#6891)

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

@@ -132,9 +132,7 @@ export default function BackToTopButton(): JSX.Element {
         'clean-btn',
         ThemeClassNames.common.backToTopButton,
         styles.backToTopButton,
-        {
-          [styles.backToTopButtonShow!]: show,
-        },
+        show && styles.backToTopButtonShow,
       )}
       type="button"
       onClick={() => smoothScrollTop()}

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

@@ -112,9 +112,10 @@ export default function BlogPostItem(props: Props): JSX.Element {
 
       {(tagsExists || truncated) && (
         <footer
-          className={clsx('row docusaurus-mt-lg', {
-            [styles.blogPostDetailsFull!]: isBlogPostPage,
-          })}>
+          className={clsx(
+            'row docusaurus-mt-lg',
+            isBlogPostPage && styles.blogPostDetailsFull,
+          )}>
           {tagsExists && (
             <div className={clsx('col', {'col--9': truncatedPost})}>
               <TagsListInline tags={tags} />

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

@@ -31,11 +31,13 @@ function ColorModeToggle({
 
   return (
     <div
-      className={clsx(styles.toggle, className, {
-        [styles.toggleChecked!]: checked,
-        [styles.toggleFocused!]: focused,
-        [styles.toggleDisabled!]: !isBrowser,
-      })}>
+      className={clsx(
+        styles.toggle,
+        className,
+        checked && styles.toggleChecked,
+        focused && styles.toggleFocused,
+        !isBrowser && styles.toggleDisabled,
+      )}>
       {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
       <div
         className={styles.toggleButton}

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

@@ -53,10 +53,7 @@ export default function DocItem(props: Props): JSX.Element {
       <Seo {...{title, description, keywords, image}} />
 
       <div className="row">
-        <div
-          className={clsx('col', {
-            [styles.docItemCol!]: !hideTableOfContents,
-          })}>
+        <div className={clsx('col', !hideTableOfContents && styles.docItemCol)}>
           <DocVersionBanner />
           <div className={styles.docItemContainer}>
             <article>

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

@@ -70,9 +70,7 @@ function DocPageContent({
             className={clsx(
               ThemeClassNames.docs.docSidebarContainer,
               styles.docSidebarContainer,
-              {
-                [styles.docSidebarContainerHidden!]: hiddenSidebarContainer,
-              },
+              hiddenSidebarContainer && styles.docSidebarContainerHidden,
             )}
             onTransitionEnd={(e) => {
               if (
@@ -122,17 +120,16 @@ function DocPageContent({
           </aside>
         )}
         <main
-          className={clsx(styles.docMainContainer, {
-            [styles.docMainContainerEnhanced!]:
-              hiddenSidebarContainer || !sidebar,
-          })}>
+          className={clsx(
+            styles.docMainContainer,
+            (hiddenSidebarContainer || !sidebar) &&
+              styles.docMainContainerEnhanced,
+          )}>
           <div
             className={clsx(
               'container padding-top--md padding-bottom--lg',
               styles.docItemWrapper,
-              {
-                [styles.docItemWrapperEnhanced!]: hiddenSidebarContainer,
-              },
+              hiddenSidebarContainer && styles.docItemWrapperEnhanced,
             )}>
             {children}
           </div>

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

@@ -25,10 +25,12 @@ function AnchorHeading({as: As, id, ...props}: Props) {
   return (
     <As
       {...props}
-      className={clsx('anchor', {
-        [styles.anchorWithHideOnScrollNavbar!]: hideOnScroll,
-        [styles.anchorWithStickyNavbar!]: !hideOnScroll,
-      })}
+      className={clsx(
+        'anchor',
+        hideOnScroll
+          ? styles.anchorWithHideOnScrollNavbar
+          : styles.anchorWithStickyNavbar,
+      )}
       id={id}>
       {props.children}
       <a

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

@@ -237,13 +237,19 @@ export default function Navbar(): JSX.Element {
   return (
     <nav
       ref={navbarRef}
-      className={clsx('navbar', 'navbar--fixed-top', {
+      className={clsx(
+        'navbar',
+        'navbar--fixed-top',
+        hideOnScroll && [
+          styles.navbarHideable,
+          !isNavbarVisible && styles.navbarHidden,
+        ],
+        {
           'navbar--dark': style === 'dark',
           'navbar--primary': style === 'primary',
           'navbar-sidebar--show': mobileSidebar.shown,
-        [styles.navbarHideable!]: hideOnScroll,
-        [styles.navbarHidden!]: hideOnScroll && !isNavbarVisible,
-      })}>
+        },
+      )}>
       <div className="navbar__inner">
         <div className="navbar__items">
           {(items?.length > 0 || activeDocPlugin) && (

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

@@ -27,9 +27,7 @@ export default function TOCCollapsible({
     <div
       className={clsx(
         styles.tocCollapsible,
-        {
-          [styles.tocCollapsibleExpanded!]: !collapsed,
-        },
+        !collapsed && styles.tocCollapsibleExpanded,
         className,
       )}>
       <button

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

@@ -18,10 +18,10 @@ export default function Tag(props: Props): JSX.Element {
   return (
     <Link
       href={permalink}
-      className={clsx(styles.tag, {
-        [styles.tagRegular!]: !count,
-        [styles.tagWithCount!]: count,
-      })}>
+      className={clsx(
+        styles.tag,
+        count ? styles.tagWithCount : styles.tagRegular,
+      )}>
       {name}
       {count && <span>{count}</span>}
     </Link>

packages/docusaurus-theme-common/src/components/Details/index.tsx

@@ -58,7 +58,7 @@ export default function Details({
       data-collapsed={collapsed}
       className={clsx(
         styles.details,
-        {[styles.isBrowser!]: isBrowser},
+        isBrowser && styles.isBrowser,
         props.className,
       )}
       onMouseDown={(e) => {