chore: cleanup usage of clsx

svg · Sep 6, 2024 · d729454 · d729454
1 parent 56f3fbe
commit d729454
Show file tree

Hide file tree

Showing 14 changed files with 40 additions and 46 deletions.
diff --git a/src/components/DefaulBadge/index.jsx b/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>
  );

diff --git a/src/components/HomepageFeatures/index.jsx b/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} />
  ))}

diff --git a/src/components/PluginParams/index.jsx b/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>
  ))}

diff --git a/src/components/SvgDemo/index.jsx b/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>
  )}

diff --git a/src/components/SvgoPreview/index.jsx b/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>
  </>
  );

diff --git a/src/pages/index.js b/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>

diff --git a/src/theme/DocItem/Content/index.js b/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>
  )}

diff --git a/src/theme/DocItem/Layout/index.js b/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>

diff --git a/src/theme/DocRoot/Layout/Main/index.js b/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}

diff --git a/src/theme/Footer/Layout/index.js b/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">

diff --git a/src/theme/Footer/LinkItem/index.js b/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>

diff --git a/src/theme/Footer/Links/MultiColumn/index.js b/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) => (

diff --git a/src/theme/Navbar/Logo/index.js b/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>
  );
 }
diff --git a/src/theme/TOCItems/Tree.js b/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"