chore(v2): replace classnames with clsx (#2895)

2025-06-03 03:12:35 +02:00 · 2020-06-07 08:40:06 +03:00 · 2020-06-07 08:40:06 +03:00 · afe9ff91a4
commit afe9ff91a4
parent 600ef7ae28
26 changed files with 76 additions and 80 deletions
--- a/packages/docusaurus-init/templates/classic/package.json
+++ b/packages/docusaurus-init/templates/classic/package.json
@ -11,7 +11,7 @@
  "dependencies": {
    "@docusaurus/core": "^2.0.0-alpha.56",
    "@docusaurus/preset-classic": "^2.0.0-alpha.56",
-    "classnames": "^2.2.6",
+    "clsx": "^1.1.1",
    "react": "^16.8.4",
    "react-dom": "^16.8.4"
  },
--- a/packages/docusaurus-init/templates/classic/src/pages/index.js
+++ b/packages/docusaurus-init/templates/classic/src/pages/index.js
@ -1,5 +1,5 @@
 import React from 'react';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import Layout from '@theme/Layout';
 import Link from '@docusaurus/Link';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
@ -42,7 +42,7 @@ const features = [
 function Feature({imageUrl, title, description}) {
  const imgUrl = useBaseUrl(imageUrl);
  return (
-    <div className={classnames('col col--4', styles.feature)}>
+    <div className={clsx('col col--4', styles.feature)}>
      {imgUrl && (
        <div className="text--center">
          <img className={styles.featureImage} src={imgUrl} alt={title} />
@ -61,13 +61,13 @@ function Home() {
    <Layout
      title={`Hello from ${siteConfig.title}`}
      description="Description will go into a meta tag in <head />">
-      <header className={classnames('hero hero--primary', styles.heroBanner)}>
+      <header className={clsx('hero hero--primary', styles.heroBanner)}>
        <div className="container">
          <h1 className="hero__title">{siteConfig.title}</h1>
          <p className="hero__subtitle">{siteConfig.tagline}</p>
          <div className={styles.buttons}>
            <Link
-              className={classnames(
+              className={clsx(
                'button button--outline button--secondary button--lg',
                styles.getStarted,
              )}
--- a/packages/docusaurus-init/templates/facebook/package.json
+++ b/packages/docusaurus-init/templates/facebook/package.json
@ -15,7 +15,7 @@
  "dependencies": {
    "@docusaurus/core": "^2.0.0-alpha.56",
    "@docusaurus/preset-classic": "^2.0.0-alpha.56",
-    "classnames": "^2.2.6",
+    "clsx": "^1.1.1",
    "react": "^16.8.4",
    "react-dom": "^16.8.4"
  },
--- a/packages/docusaurus-init/templates/facebook/src/pages/index.js
+++ b/packages/docusaurus-init/templates/facebook/src/pages/index.js
@ -8,7 +8,7 @@
 */

 import React from 'react';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import Layout from '@theme/Layout';
 import Link from '@docusaurus/Link';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
@ -51,7 +51,7 @@ const features = [
 function Feature({imageUrl, title, description}) {
  const imgUrl = useBaseUrl(imageUrl);
  return (
-    <div className={classnames('col col--4', styles.feature)}>
+    <div className={clsx('col col--4', styles.feature)}>
      {imgUrl && (
        <div className="text--center">
          <img className={styles.featureImage} src={imgUrl} alt={title} />
@ -70,13 +70,13 @@ function Home() {
    <Layout
      title={`Hello from ${siteConfig.title}`}
      description="Description will go into a meta tag in <head />">
-      <header className={classnames('hero hero--primary', styles.heroBanner)}>
+      <header className={clsx('hero hero--primary', styles.heroBanner)}>
        <div className="container">
          <h1 className="hero__title">{siteConfig.title}</h1>
          <p className="hero__subtitle">{siteConfig.tagline}</p>
          <div className={styles.buttons}>
            <Link
-              className={classnames(
+              className={clsx(
                'button button--outline button--secondary button--lg',
                styles.getStarted,
              )}
--- a/packages/docusaurus-theme-classic/package.json
+++ b/packages/docusaurus-theme-classic/package.json
@ -10,8 +10,8 @@
  "dependencies": {
    "@mdx-js/mdx": "^1.5.8",
    "@mdx-js/react": "^1.5.8",
-    "classnames": "^2.2.6",
    "clipboard": "^2.0.6",
+    "clsx": "^1.1.1",
    "infima": "0.2.0-alpha.12",
    "parse-numeric-range": "^0.0.2",
    "prism-react-renderer": "^1.1.0",
--- a/packages/docusaurus-theme-classic/src/theme/BlogPostItem/index.js
+++ b/packages/docusaurus-theme-classic/src/theme/BlogPostItem/index.js
@ -6,7 +6,7 @@
 */

 import React from 'react';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import {MDXProvider} from '@mdx-js/react';

 import Head from '@docusaurus/Head';
@ -58,7 +58,7 @@ function BlogPostItem(props) {
    return (
      <header>
        <TitleHeading
-          className={classnames('margin-bottom--sm', styles.blogPostTitle)}>
+          className={clsx('margin-bottom--sm', styles.blogPostTitle)}>
          {isBlogPostPage ? title : <Link to={permalink}>{title}</Link>}
        </TitleHeading>
        <div className="margin-vert--md">
--- a/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js
+++ b/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js
@ -8,7 +8,7 @@
 /* eslint-disable jsx-a11y/no-noninteractive-tabindex */

 import React, {useEffect, useState, useRef} from 'react';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import Highlight, {defaultProps} from 'prism-react-renderer';
 import Clipboard from 'clipboard';
 import rangeParser from 'parse-numeric-range';
@ -221,7 +221,7 @@ export default ({children, className: languageClassName, metastring}) => {
              ref={button}
              type="button"
              aria-label="Copy code to clipboard"
-              className={classnames(styles.copyButton, {
+              className={clsx(styles.copyButton, {
                [styles.copyButtonWithTitle]: codeBlockTitle,
              })}
              onClick={handleCopyCode}>
@ -229,7 +229,7 @@ export default ({children, className: languageClassName, metastring}) => {
            </button>
            <div
              tabIndex="0"
-              className={classnames(className, styles.codeBlock, {
+              className={clsx(className, styles.codeBlock, {
                [styles.codeBlockWithTitle]: codeBlockTitle,
              })}>
              <div ref={target} className={styles.codeBlockLines} style={style}>
--- a/packages/docusaurus-theme-classic/src/theme/DocItem/index.js
+++ b/packages/docusaurus-theme-classic/src/theme/DocItem/index.js
@ -13,7 +13,7 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
 import DocPaginator from '@theme/DocPaginator';
 import useTOCHighlight from '@theme/hooks/useTOCHighlight';

-import classnames from 'classnames';
+import clsx from 'clsx';
 import styles from './styles.module.css';

 const LINK_CLASS_NAME = 'table-of-contents__link';
@ -102,13 +102,10 @@ function DocItem(props) {
        {permalink && <link rel="canonical" href={siteUrl + permalink} />}
      </Head>
      <div
-        className={classnames(
-          'container padding-vert--lg',
-          styles.docItemWrapper,
-        )}>
+        className={clsx('container padding-vert--lg', styles.docItemWrapper)}>
        <div className="row">
          <div
-            className={classnames('col', {
+            className={clsx('col', {
              [styles.docItemCol]: !hideTableOfContents,
            })}>
            <div className={styles.docItemContainer}>
--- a/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.js
+++ b/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.js
@ -6,7 +6,7 @@
 */

 import React, {useState, useCallback, useEffect, useRef} from 'react';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import useUserPreferencesContext from '@theme/hooks/useUserPreferencesContext';
 import useLockBodyScroll from '@theme/hooks/useLockBodyScroll';
@ -82,12 +82,12 @@ function DocSidebarItemCategory({

  return (
    <li
-      className={classnames('menu__list-item', {
+      className={clsx('menu__list-item', {
        'menu__list-item--collapsed': collapsed,
      })}
      key={label}>
      <a
-        className={classnames('menu__link', {
+        className={clsx('menu__link', {
          'menu__link--sublist': collapsible,
          'menu__link--active': collapsible && isActive,
          [styles.menuLinkText]: !collapsible,
@ -125,7 +125,7 @@ function DocSidebarItemLink({
  return (
    <li className="menu__list-item" key={label}>
      <Link
-        className={classnames('menu__link', {
+        className={clsx('menu__link', {
          'menu__link--active': isActive,
        })}
        to={href}
@ -191,7 +191,7 @@ function DocSidebar(props) {

  return (
    <div
-      className={classnames(styles.sidebar, {
+      className={clsx(styles.sidebar, {
        [styles.sidebarWithHideableNavbar]: hideOnScroll,
      })}>
      {hideOnScroll && (
@ -207,7 +207,7 @@ function DocSidebar(props) {
        </Link>
      )}
      <div
-        className={classnames('menu', 'menu--responsive', styles.menu, {
+        className={clsx('menu', 'menu--responsive', styles.menu, {
          'menu--show': showResponsiveSidebar,
          [styles.menuWithAnnouncementBar]:
            !isAnnouncementBarClosed && scrollY === 0,
@ -222,7 +222,7 @@ function DocSidebar(props) {
          }}>
          {showResponsiveSidebar ? (
            <span
-              className={classnames(
+              className={clsx(
                styles.sidebarMenuIcon,
                styles.sidebarMenuCloseIcon,
              )}>
--- a/packages/docusaurus-theme-classic/src/theme/Footer/index.js
+++ b/packages/docusaurus-theme-classic/src/theme/Footer/index.js
@ -6,7 +6,7 @@
 */

 import React from 'react';
-import classnames from 'classnames';
+import clsx from 'clsx';

 import Link from '@docusaurus/Link';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
@ -54,7 +54,7 @@ function Footer() {

  return (
    <footer
-      className={classnames('footer', {
+      className={clsx('footer', {
        'footer--dark': footer.style === 'dark',
      })}>
      <div className="container">
--- a/packages/docusaurus-theme-classic/src/theme/Heading/index.js
+++ b/packages/docusaurus-theme-classic/src/theme/Heading/index.js
@ -8,7 +8,7 @@
 /* eslint-disable jsx-a11y/anchor-has-content, jsx-a11y/anchor-is-valid */

 import React from 'react';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';

 import './styles.css';
@ -31,7 +31,7 @@ const Heading = (Tag) =>
        <a
          aria-hidden="true"
          tabIndex="-1"
-          className={classnames('anchor', {
+          className={clsx('anchor', {
            [styles.enhancedAnchor]: !hideOnScroll,
          })}
          id={id}
--- a/packages/docusaurus-theme-classic/src/theme/Navbar/index.js
+++ b/packages/docusaurus-theme-classic/src/theme/Navbar/index.js
@ -6,7 +6,7 @@
 */

 import React, {useCallback, useState} from 'react';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import Link from '@docusaurus/Link';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import useBaseUrl from '@docusaurus/useBaseUrl';
@ -71,7 +71,7 @@ function NavItem({
  ...props
 }) {
  const navLinkClassNames = (extraClassName, isDropdownItem = false) =>
-    classnames(
+    clsx(
      {
        'navbar__item navbar__link': !isDropdownItem,
        dropdown__link: isDropdownItem,
@ -85,7 +85,7 @@ function NavItem({

  return (
    <div
-      className={classnames('navbar__item', 'dropdown', 'dropdown--hoverable', {
+      className={clsx('navbar__item', 'dropdown', 'dropdown--hoverable', {
        'dropdown--left': position === 'left',
        'dropdown--right': position === 'right',
      })}>
@ -118,7 +118,7 @@ function NavItem({
 function MobileNavItem({items, position, className, ...props}) {
  // Need to destructure position from props so that it doesn't get passed on.
  const navLinkClassNames = (extraClassName, isSubList = false) =>
-    classnames(
+    clsx(
      'menu__link',
      {
        'menu__link--sublist': isSubList,
@ -206,7 +206,7 @@ function Navbar() {
  return (
    <nav
      ref={navbarRef}
-      className={classnames('navbar', 'navbar--light', 'navbar--fixed-top', {
+      className={clsx('navbar', 'navbar--light', 'navbar--fixed-top', {
        'navbar-sidebar--show': sidebarShown,
        [styles.navbarHideable]: hideOnScroll,
        [styles.navbarHidden]: !isNavbarVisible,
@ -250,7 +250,7 @@ function Navbar() {
            )}
            {title != null && (
              <strong
-                className={classnames('navbar__title', {
+                className={clsx('navbar__title', {
                  [styles.hideLogoText]: isSearchBarExpanded,
                })}>
                {title}
--- a/packages/docusaurus-theme-classic/src/theme/Tabs/index.js
+++ b/packages/docusaurus-theme-classic/src/theme/Tabs/index.js
@ -8,7 +8,7 @@
 import React, {useState, Children} from 'react';
 import useUserPreferencesContext from '@theme/hooks/useUserPreferencesContext';

-import classnames from 'classnames';
+import clsx from 'clsx';

 import styles from './styles.module.css';

@ -80,7 +80,7 @@ function Tabs(props) {
      <ul
        role="tablist"
        aria-orientation="horizontal"
-        className={classnames('tabs', {
+        className={clsx('tabs', {
          'tabs--block': block,
        })}>
        {values.map(({value, label}) => (
@ -88,7 +88,7 @@ function Tabs(props) {
            role="tab"
            tabIndex="0"
            aria-selected={selectedValue === value}
-            className={classnames('tabs__item', styles.tabItem, {
+            className={clsx('tabs__item', styles.tabItem, {
              'tabs__item--active': selectedValue === value,
            })}
            key={value}
--- a/packages/docusaurus-theme-classic/src/theme/Toggle/index.js
+++ b/packages/docusaurus-theme-classic/src/theme/Toggle/index.js
@ -10,11 +10,11 @@ import Toggle from 'react-toggle';

 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';

-import classnames from 'classnames';
+import clsx from 'clsx';
 import styles from './styles.module.css';

-const Moon = () => <span className={classnames(styles.toggle, styles.moon)} />;
-const Sun = () => <span className={classnames(styles.toggle, styles.sun)} />;
+const Moon = () => <span className={clsx(styles.toggle, styles.moon)} />;
+const Sun = () => <span className={clsx(styles.toggle, styles.sun)} />;

 export default function (props) {
  const {isClient} = useDocusaurusContext();
--- a/packages/docusaurus-theme-live-codeblock/package.json
+++ b/packages/docusaurus-theme-live-codeblock/package.json
@ -9,8 +9,8 @@
  "license": "MIT",
  "dependencies": {
    "@philpl/buble": "^0.19.7",
-    "classnames": "^2.2.6",
    "clipboard": "^2.0.6",
+    "clsx": "^1.1.1",
    "parse-numeric-range": "^0.0.2",
    "prism-react-renderer": "^1.1.0",
    "react-live": "^2.2.1"
--- a/packages/docusaurus-theme-live-codeblock/src/theme/Playground/index.js
+++ b/packages/docusaurus-theme-live-codeblock/src/theme/Playground/index.js
@ -7,7 +7,7 @@

 import * as React from 'react';
 import {LiveProvider, LiveEditor, LiveError, LivePreview} from 'react-live';
-import classnames from 'classnames';
+import clsx from 'clsx';

 import styles from './styles.module.css';

@ -19,7 +19,7 @@ function Playground({children, theme, transformCode, ...props}) {
      theme={theme}
      {...props}>
      <div
-        className={classnames(
+        className={clsx(
          styles.playgroundHeader,
          styles.playgroundEditorHeader,
        )}>
@ -27,7 +27,7 @@ function Playground({children, theme, transformCode, ...props}) {
      </div>
      <LiveEditor className={styles.playgroundEditor} />
      <div
-        className={classnames(
+        className={clsx(
          styles.playgroundHeader,
          styles.playgroundPreviewHeader,
        )}>
--- a/packages/docusaurus-theme-search-algolia/package.json
+++ b/packages/docusaurus-theme-search-algolia/package.json
@ -10,7 +10,7 @@
  "dependencies": {
    "algoliasearch": "^3.24.5",
    "algoliasearch-helper": "^3.1.1",
-    "classnames": "^2.2.6",
+    "clsx": "^1.1.1",
    "docsearch.js": "^2.6.3",
    "eta": "^1.1.1"
  },
--- a/packages/docusaurus-theme-search-algolia/src/pages/search/index.js
+++ b/packages/docusaurus-theme-search-algolia/src/pages/search/index.js
@ -11,7 +11,7 @@ import React, {useEffect, useState, useReducer, useRef} from 'react';

 import algoliaSearch from 'algoliasearch/lite';
 import algoliaSearchHelper from 'algoliasearch-helper';
-import classnames from 'classnames';
+import clsx from 'clsx';

 import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
@ -230,7 +230,7 @@ function Search() {

        <form className="row" onSubmit={(e) => e.preventDefault()}>
          <div
-            className={classnames('col', styles.searchQueryColumn, {
+            className={clsx('col', styles.searchQueryColumn, {
              'col--9': versioningEnabled,
              'col--12': !versioningEnabled,
            })}>
@ -249,7 +249,7 @@ function Search() {

          {versioningEnabled && (
            <div
-              className={classnames(
+              className={clsx(
                'col',
                'col--3',
                'padding-left--none',
@ -269,9 +269,8 @@ function Search() {
          )}
        </form>

-        <div className={classnames('row', 'margin-vert--sm')}>
-          <div
-            className={classnames('col', 'col--8', styles.searchResultsColumn)}>
+        <div className={clsx('row', 'margin-vert--sm')}>
+          <div className={clsx('col', 'col--8', styles.searchResultsColumn)}>
            {!!searchResultState.totalResults && (
              <strong>
                {searchResultState.totalResults}{' '}
@ -280,7 +279,7 @@ function Search() {
            )}
          </div>

-          <div className={classnames('col', 'col--4', styles.searchLogoColumn)}>
+          <div className={clsx('col', 'col--4', styles.searchLogoColumn)}>
            <a
              target="_blank"
              rel="noopener noreferrer"
--- a/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/index.js
+++ b/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/index.js
@ -6,7 +6,7 @@
 */

 import React, {useState, useRef, useCallback} from 'react';
-import classnames from 'classnames';
+import clsx from 'clsx';

 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import {useHistory} from '@docusaurus/router';
@ -109,7 +109,7 @@ const Search = ({handleSearchBarToggle, isSearchBarExpanded}) => {
        <span
          aria-label="expand searchbar"
          role="button"
-          className={classnames(styles.searchIconButton, {
+          className={clsx(styles.searchIconButton, {
            [styles.searchIconButtonHidden]: isSearchBarExpanded,
          })}
          onClick={toggleSearchInput}
@ -122,7 +122,7 @@ const Search = ({handleSearchBarToggle, isSearchBarExpanded}) => {
          type="search"
          placeholder="Search"
          aria-label="Search"
-          className={classnames('navbar__search-input', styles.searchInput, {
+          className={clsx('navbar__search-input', styles.searchInput, {
            [styles.searchInputExpanded]: isSearchBarExpanded,
          })}
          onMouseOver={handleSearchInput}
--- a/packages/docusaurus/package.json
+++ b/packages/docusaurus/package.json
@ -48,7 +48,6 @@
    "cache-loader": "^4.1.0",
    "chalk": "^3.0.0",
    "chokidar": "^3.3.0",
-    "classnames": "^2.2.6",
    "commander": "^4.0.1",
    "copy-webpack-plugin": "^5.0.5",
    "core-js": "^2.6.5",
--- a/website/docs/migrating-from-v1-to-v2.md
+++ b/website/docs/migrating-from-v1-to-v2.md
@ -105,7 +105,7 @@ A typical Docusaurus 2 `package.json` may look like this:
  "dependencies": {
    "@docusaurus/core": "^2.0.0-alpha.40",
    "@docusaurus/preset-classic": "^2.0.0-alpha.40",
-    "classnames": "^2.2.6",
+    "clsx": "^1.1.1",
    "react": "^16.10.2",
    "react-dom": "^16.10.2"
  },
--- a/website/package.json
+++ b/website/package.json
@ -13,7 +13,7 @@
    "@docusaurus/plugin-ideal-image": "^2.0.0-alpha.56",
    "@docusaurus/preset-classic": "^2.0.0-alpha.56",
    "@docusaurus/theme-live-codeblock": "^2.0.0-alpha.56",
-    "classnames": "^2.2.6",
+    "clsx": "^1.1.1",
    "color": "^3.1.2",
    "npm-to-yarn": "^1.0.0-2",
    "react": "^16.8.4",
--- a/website/src/pages/feedback/index.js
+++ b/website/src/pages/feedback/index.js
@ -9,7 +9,7 @@ import React, {useEffect} from 'react';
 import Layout from '@theme/Layout';

 import canny from '../../scripts/canny';
-import classnames from 'classnames';
+import clsx from 'clsx';
 import styles from './styles.module.css';

 const BOARD_TOKEN = '054e0e53-d951-b14c-7e74-9eb8f9ed2f91';
@ -30,7 +30,7 @@ function Feedback() {
      title="Feedback"
      description="Docusaurus 2 Feedback page">
      <main
-        className={classnames(
+        className={clsx(
          'container',
          'margin-vert--xl',
          styles.feedbackBackground,
--- a/website/src/pages/index.js
+++ b/website/src/pages/index.js
@ -13,7 +13,7 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
 import Image from '@theme/IdealImage';
 import Layout from '@theme/Layout';

-import classnames from 'classnames';
+import clsx from 'clsx';

 import styles from './styles.module.css';

@ -69,8 +69,7 @@ function Home() {
      title={tagline}
      description={customFields.description}>
      <main>
-        <div
-          className={classnames(styles.announcement, styles.announcementDark)}>
+        <div className={clsx(styles.announcement, styles.announcementDark)}>
          <div className={styles.announcementInner}>
            Black Lives Matter.{' '}
            <Link to="https://support.eji.org/give/153413/#!/donation/checkout">
@ -112,8 +111,7 @@ function Home() {
            </div>
          </div>
        </div>
-        <div
-          className={classnames(styles.announcement, styles.announcementDark)}>
+        <div className={clsx(styles.announcement, styles.announcementDark)}>
          <div className={styles.announcementInner}>
            Coming from v1? Check out our{' '}
            <Link to={useBaseUrl('/docs/migrating-from-v1-to-v2')}>
@ -131,7 +129,7 @@ function Home() {
                  alt="Powered by MDX"
                  src={useBaseUrl('img/undraw_typewriter.svg')}
                />
-                <h2 className={classnames(styles.featureHeading)}>
+                <h2 className={clsx(styles.featureHeading)}>
                  Powered by Markdown
                </h2>
                <p className="padding-horiz--md">
@ -148,7 +146,7 @@ function Home() {
                  className={styles.featureImage}
                  src={useBaseUrl('img/undraw_react.svg')}
                />
-                <h2 className={classnames(styles.featureHeading)}>
+                <h2 className={clsx(styles.featureHeading)}>
                  Built Using React
                </h2>
                <p className="padding-horiz--md">
@ -163,7 +161,7 @@ function Home() {
                  className={styles.featureImage}
                  src={useBaseUrl('img/undraw_around_the_world.svg')}
                />
-                <h2 className={classnames(styles.featureHeading)}>
+                <h2 className={clsx(styles.featureHeading)}>
                  Ready for Translations
                </h2>
                <p className="padding-horiz--md">
@ -181,7 +179,7 @@ function Home() {
                  className={styles.featureImage}
                  src={useBaseUrl('img/undraw_version_control.svg')}
                />
-                <h2 className={classnames(styles.featureHeading)}>
+                <h2 className={clsx(styles.featureHeading)}>
                  Document Versioning
                </h2>
                <p className="padding-horiz--md">
@ -196,9 +194,7 @@ function Home() {
                  className={styles.featureImage}
                  src={useBaseUrl('img/undraw_algolia.svg')}
                />
-                <h2 className={classnames(styles.featureHeading)}>
-                  Content Search
-                </h2>
+                <h2 className={clsx(styles.featureHeading)}>Content Search</h2>
                <p className="padding-horiz--md">
                  Make it easy for your community to find what they need in your
                  documentation. We proudly support Algolia documentation
@ -208,7 +204,7 @@ function Home() {
            </div>
          </div>
        </div>
-        <div className={classnames(styles.section, styles.sectionAlt)}>
+        <div className={clsx(styles.section, styles.sectionAlt)}>
          <div className="container">
            <div className="row">
              {QUOTES.map((quote) => (
--- a/website/src/pages/showcase/index.js
+++ b/website/src/pages/showcase/index.js
@ -10,7 +10,7 @@ import React, {useEffect} from 'react';
 import Image from '@theme/IdealImage';
 import Layout from '@theme/Layout';

-import classnames from 'classnames';
+import clsx from 'clsx';
 import styles from './styles.module.css';
 import users from '../../data/users';

@ -29,7 +29,7 @@ function Showcase() {
        <div className="row">
          {users.map((user) => (
            <div key={user.title} className="col col--4 margin-bottom--lg">
-              <div className={classnames('card', styles.showcaseUser)}>
+              <div className={clsx('card', styles.showcaseUser)}>
                <div className="card__image">
                  <Image img={user.preview} alt={user.title} />
                </div>
--- a/yarn.lock
+++ b/yarn.lock
@ -5088,6 +5088,11 @@ clone@^1.0.2:
  resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
  integrity sha1-2jCcwmPfFZlMaIypAheco8fNfH4=

+clsx@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188"
+  integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==
+
 co@^4.6.0:
  version "4.6.0"
  resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"