facebook · yangshun · Jun 7, 2020 · Jun 6, 2020 · Jun 6, 2020
diff --git 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"
   },

diff --git 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,
               )}

diff --git 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"
   },

diff --git 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,
               )}

diff --git 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",

diff --git 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">

diff --git 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,15 +221,15 @@ 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}>
               {showCopied ? 'Copied' : 'Copy'}
             </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}>

diff --git 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}>

diff --git 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,
               )}>

diff --git 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">

diff --git 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}

diff --git 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}

diff --git 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,15 +80,15 @@ function Tabs(props) {
       <ul
         role="tablist"
         aria-orientation="horizontal"
-        className={classnames('tabs', {
+        className={clsx('tabs', {
           'tabs--block': block,
         })}>
         {values.map(({value, label}) => (
           <li
             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}

diff --git 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();

diff --git 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"

diff --git 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,15 +19,15 @@ function Playground({children, theme, transformCode, ...props}) {
       theme={theme}
       {...props}>
       <div
-        className={classnames(
+        className={clsx(
           styles.playgroundHeader,
           styles.playgroundEditorHeader,
         )}>
         Live Editor
       </div>
       <LiveEditor className={styles.playgroundEditor} />
       <div
-        className={classnames(
+        className={clsx(
           styles.playgroundHeader,
           styles.playgroundPreviewHeader,
         )}>