chore: cleanup usage of clsx

src/components/DefaulBadge/index.jsx

@@ -1,10 +1,9 @@
-import clsx from 'clsx';
 import React from 'react';
 import styles from './index.module.css';
 
 export default function DefaultBadge() {
   return (
-    <span className={clsx(styles.badge)} title="This plugin is enabled by default.">
+    <span className={styles.badge} title="This plugin is enabled by default.">
       Default
     </span>
   );

src/components/HomepageFeatures/index.jsx

@@ -40,15 +40,15 @@ const FeatureList = [
 
 function Feature({ Svg, title, description }) {
   return (
-    <div className={clsx(styles.featureWrapper)}>
-      <div className={clsx(styles.featureBackground)}></div>
-      <div className={clsx(styles.feature)}>
+    <div className={styles.featureWrapper}>
+      <div className={styles.featureBackground}></div>
+      <div className={styles.feature}>
         <div className="text--center">
-          <Svg className={clsx(styles.featureSvg)} role="img"/>
+          <Svg className={styles.featureSvg} role="img"/>
         </div>
         <div className={clsx(styles.featureText, "padding-horiz--md")}>
-          <h2 className={clsx(styles.featureTitle)}>{title}</h2>
-          <p className={clsx(styles.featureDescription)}>{description}</p>
+          <h2 className={styles.featureTitle}>{title}</h2>
+          <p className={styles.featureDescription}>{description}</p>
         </div>
       </div>
     </div>
@@ -66,7 +66,7 @@ export default function HomepageFeatures() {
           <path d="M 0 .25 Q .2 -.1 .4 .1 T .8 .2 1 0 V 1 H 0" />
         </clipPath>
       </svg>
-      <section className={clsx(styles.features)}>
+      <section className={styles.features}>
         {FeatureList.map((props, idx) => (
           <Feature key={idx} {...props} />
         ))}

src/components/PluginParams/index.jsx

@@ -1,5 +1,4 @@
 import React, { Fragment } from 'react';
-import clsx from 'clsx';
 import { useDoc } from '@docusaurus/theme-common/internal';
 import styles from './index.module.css';
 
@@ -21,7 +20,7 @@ export default function PluginParams() {
           <dt>
             <code>{param.name}</code>
           </dt>
-          <dd className={clsx(styles.leftMargin)} dangerouslySetInnerHTML={{__html: param.description}}>
+          <dd className={styles.leftMargin} dangerouslySetInnerHTML={{__html: param.description}}>
           </dd>
         </Fragment>
       ))}

src/components/SvgDemo/index.jsx

@@ -2,7 +2,6 @@ import React, { useState } from "react";
 import CodeBlock from "@theme/CodeBlock";
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
-import clsx from "clsx";
 import styles from "./index.module.css";
 
 export default function SvgPreview(props) {
@@ -16,22 +15,22 @@ export default function SvgPreview(props) {
   return (
     <Tabs groupId="preview-mode">
       <TabItem value="svg" label="Markup">
-        <div className={clsx(styles.fixedHeight)}>
+        <div className={styles.fixedHeight}>
           <CodeBlock language="svg">
             {svg}
           </CodeBlock>
         </div>
       </TabItem>
       <TabItem value="preview" label="Render">
-        <div className={clsx(styles.renderPreview)}>
+        <div className={styles.renderPreview}>
           {!error ? (
             <img
               src={`data:image/svg+xml;utf8,${encodeURIComponent(svg)}`}
               alt="Render of the optimized SVG."
               onError={onError}
             />
           ) : (
-            <span className={clsx(styles.malformedWarning)}>
+            <span className={styles.malformedWarning}>
               SVG can only be rendered inline, not standalone or in an <code>&lt;img&gt;</code> element.
             </span>
           )}

src/components/SvgoPreview/index.jsx

@@ -1,5 +1,4 @@
 import React from "react";
-import clsx from "clsx";
 import { optimize } from "svgo/dist/svgo.browser.js";
 import SvgPreview from '../SvgDemo';
 import styles from "./index.module.css";
@@ -21,8 +20,8 @@ export default function SvgoPreview(props) {
   return (
     <>
       <SvgPreview svg={optimized}/>
-      <span className={clsx(styles.profit)}>
-        {initialUi} {directionUi} <span className={clsx(styles.highlight)}>{profitUi}</span> = {optimizedUi}
+      <span className={styles.profit}>
+        {initialUi} {directionUi} <span className={styles.highlight}>{profitUi}</span> = {optimizedUi}
       </span>
     </>
   );

src/pages/index.js

@@ -17,13 +17,13 @@ const onClick = async () => {
 
 function HomepageHeader() {
   return (
-    <header className={clsx(styles.hero)}>
-      <div className={clsx("container", styles.heroSplit)}>
-        <div className={clsx(styles.infoSection)}>
-          <p className={clsx(styles.tagline)}>
+    <header className={styles.hero}>
+      <div className={clsx(styles.heroSplit, "container")}>
+        <div className={styles.infoSection}>
+          <p className={styles.tagline}>
             SVG Optimizer for Node.js and CLI
           </p>
-          <p className={clsx(styles.subtitle)}>
+          <p className={styles.subtitle}>
             SVGO and its various integrations will enable you to optimize
             SVGs and serve your web applications faster.
           </p>
@@ -34,9 +34,9 @@ function HomepageHeader() {
               Read the docs
             </Link>
           </div>
-          <div className={clsx(styles.installInstructions)} onClick={onClick}>
+          <div className={styles.installInstructions} onClick={onClick}>
             $ {INSTALL_COMMAND}
-            <span className={clsx(styles.cursor)}>█</span>
+            <span className={styles.cursor}>█</span>
             <span className={clsx(styles.icon, styles.copyIcon)}>
               <CopyIcon height="1em"/>
             </span>
@@ -45,8 +45,8 @@ function HomepageHeader() {
             </span>
           </div>
         </div>
-        <div className={clsx(styles.mascotSection)}>
-          <SvgoTrixie className={clsx(styles.mascot)}/>
+        <div className={styles.mascotSection}>
+          <SvgoTrixie className={styles.mascot}/>
         </div>
       </div>
     </header>

src/theme/DocItem/Content/index.js

@@ -28,10 +28,10 @@ export default function DocItemContent({ children }) {
   return (
     <div className={clsx(ThemeClassNames.docs.docMarkdown, 'markdown')}>
       {syntheticTitle && (
-        <header className={clsx(styles.header)}>
-          <Heading as="h1" className={clsx(styles.pageTitle)}>{syntheticTitle}</Heading>
+        <header className={styles.header}>
+          <Heading as="h1" className={styles.pageTitle}>{syntheticTitle}</Heading>
           {frontMatter.svgo?.defaultPlugin && (
-            <div className={clsx(styles.badge)}>
+            <div className={styles.badge}>
               <DefaultBadge />
             </div>
           )}

src/theme/DocItem/Layout/index.js

@@ -9,7 +9,7 @@ import styles from './styles.module.css';
 
 export default function DocItemLayout({children}) {
   return (
-    <div className={clsx(styles.wrapper)}>
+    <div className={styles.wrapper}>
       <div className={clsx('col', styles.docItemCol)}>
         <div className={styles.docItemContainer}>
           <article>
@@ -20,7 +20,7 @@ export default function DocItemLayout({children}) {
           <DocItemPaginator />
         </div>
       </div>
-      <div className={clsx(styles.toc)}>
+      <div className={styles.toc}>
         <DocItemTOCDesktop/>
       </div>
     </div>

src/theme/DocRoot/Layout/Main/index.js

@@ -14,8 +14,8 @@ export default function DocRootLayoutMain({ hiddenSidebarContainer, children })
       )}>
       <div
         className={clsx(
-          'container padding-top--md padding-bottom--lg',
           styles.docItemWrapper,
+          'container padding-top--md padding-bottom--lg',
           hiddenSidebarContainer && styles.docItemWrapperEnhanced,
         )}>
         {children}

src/theme/Footer/Layout/index.js

@@ -13,8 +13,8 @@ export default function FooterLayout({ links, copyright }) {
           <path d="M 0 0 Q .2 .3 .4 .1 T .8 .1 1 .3 V 1 H 0" />
         </clipPath>
       </svg>
-      <footer className={clsx('footer', styles.wrapper)}>
-        <div className={clsx('container', styles.footer)}>
+      <footer className={clsx(styles.wrapper, "footer")}>
+        <div className={clsx(styles.footer, "container")}>
           {links}
           {copyright && (
             <div className="text--center">

src/theme/Footer/LinkItem/index.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import clsx from 'clsx';
 import Link from '@docusaurus/Link';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import isInternalUrl from '@docusaurus/isInternalUrl';
@@ -22,7 +21,7 @@ export default function FooterLinkItem({ item }) {
           to: toUrl,
         })}
       {...props}>
-      <div className={clsx(styles.footerLink)}>
+      <div className={styles.footerLink}>
         {label}
         {href && !isInternalUrl(href) && <IconExternalLink />}
       </div>

src/theme/Footer/Links/MultiColumn/index.js

@@ -18,7 +18,7 @@ function ColumnLinkItem({item}) {
 
 function Column({column}) {
   return (
-    <div className={clsx('col footer__col', styles.footerList)}>
+    <div className={clsx(styles.footerList, "col footer__col")}>
       <div className="footer__title">{column.title}</div>
       <ul className="footer__items clean-list">
         {column.items.map((item, i) => (

src/theme/Navbar/Logo/index.js

@@ -1,13 +1,12 @@
 import React from 'react';
-import clsx from 'clsx';
 import Link from '@docusaurus/Link';
 import styles from './index.module.css';
 import Logo from '../../../vectors/logo.svg';
 
 export default function NavbarLogo() {
   return (
-    <Link to="/" className={clsx(styles.logoWrapper)} aria-label="SVGO home">
-      <Logo className={clsx(styles.logo)}/>
+    <Link to="/" className={styles.logoWrapper} aria-label="SVGO home">
+      <Logo className={styles.logo}/>
     </Link>
   );
 }

src/theme/TOCItems/Tree.js

@@ -48,11 +48,11 @@ function TOCItemTree({ toc, className, linkClassName, isChild }) {
   return (
     <>
       {!isChild && (
-        <div className={clsx(styles.onThisPage)}>
+        <div className={styles.onThisPage}>
           On this page
         </div>
       )}
-      <ul className={clsx(isChild ? undefined : className, isChild ? undefined : styles.rootToc, styles.noSeperator)}>
+      <ul className={clsx(styles.noSeperator, isChild ? undefined : className, isChild ? undefined : styles.rootToc)}>
         {toc.map((heading) => (
           <li key={heading.id}>
             <a
@@ -70,9 +70,9 @@ function TOCItemTree({ toc, className, linkClassName, isChild }) {
         ))}
       </ul>
       {!isChild && (
-        <div className={clsx(styles.topBorder)}>
+        <div className={styles.topBorder}>
           {frontMatter.svgo?.pluginId && (
-            <div className={clsx(styles.extraTocEntries)}>
+            <div className={styles.extraTocEntries}>
               <a
                 href={`https://github.com/svg/svgo/blob/main/plugins/${frontMatter.svgo.pluginId}.js`}
                 target="_blank"
@@ -82,7 +82,7 @@ function TOCItemTree({ toc, className, linkClassName, isChild }) {
               </a>
             </div>
           )}
-          <div className={clsx(styles.extraTocEntries)}>
+          <div className={styles.extraTocEntries}>
             <a
               href={editUrl}
               target="_blank"