From 6de49b9f1a7e97d74568fd4f272f36b13e4bb571 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Mon, 14 Nov 2022 01:18:47 +0100
Subject: [PATCH] Fix broken CSS classes

---
 website/src/components/code.js       | 46 +++++++++++-----------
 website/src/components/embed.js      |  4 +-
 website/src/components/github.js     |  6 ++-
 website/src/components/landing.js    | 49 ++++++++++++-----------
 website/src/components/link.js       |  4 +-
 website/src/components/list.js       |  2 +-
 website/src/components/main.js       |  4 +-
 website/src/components/navigation.js |  4 +-
 website/src/components/quickstart.js | 58 +++++++++++++++-------------
 website/src/components/sidebar.js    | 23 +++++------
 website/src/components/table.js      |  2 +-
 website/src/components/title.js      |  2 +-
 website/src/components/typography.js |  4 +-
 13 files changed, 111 insertions(+), 97 deletions(-)

diff --git a/website/src/components/code.js b/website/src/components/code.js
index 28e3cb5d4..199de6bbd 100644
--- a/website/src/components/code.js
+++ b/website/src/components/code.js
@@ -26,12 +26,12 @@ const CodeBlock = (props) => (
 export default CodeBlock
 
 export const Pre = (props) => {
-    return <pre className={classes.pre}>{props.children}</pre>
+    return <pre className={classes['pre']}>{props.children}</pre>
 }
 
 export const InlineCode = ({ wrap = false, className, children, ...props }) => {
-    const codeClassNames = classNames(classes.inlineCode, className, {
-        [classes.wrap]: wrap || (isString(children) && children.length >= WRAP_THRESHOLD),
+    const codeClassNames = classNames(classes['inline-code'], className, {
+        [classes['wrap']]: wrap || (isString(children) && children.length >= WRAP_THRESHOLD),
     })
     return (
         <code className={codeClassNames} {...props}>
@@ -78,10 +78,10 @@ export const TypeAnnotation = ({ lang = 'python', link = true, children }) => {
     const annotClassNames = classNames(
         'type-annotation',
         `language-${lang}`,
-        classes.inlineCode,
-        classes.typeAnnotation,
+        classes['inline-code'],
+        classes['type-annotation'],
         {
-            [classes.wrap]: code.length >= WRAP_THRESHOLD,
+            [classes['wrap']]: code.length >= WRAP_THRESHOLD,
         }
     )
     return (
@@ -89,7 +89,7 @@ export const TypeAnnotation = ({ lang = 'python', link = true, children }) => {
             {elements.map((el, i) => (
                 <Fragment key={i}>{linkType(el, !!link)}</Fragment>
             ))}
-            {meta && <span className={classes.typeAnnotationMeta}>{meta}</span>}
+            {meta && <span className={classes['type-annotation-meta']}>{meta}</span>}
         </code>
     )
 }
@@ -134,7 +134,7 @@ function convertLine(line, i) {
         })
         return (
             <Fragment key={line}>
-                <span data-prompt={i === 0 ? '$' : null} className={classes.cliArgSubtle}>
+                <span data-prompt={i === 0 ? '$' : null} className={classes['cli-arg-subtle']}>
                     python -m
                 </span>{' '}
                 <span>spacy</span>{' '}
@@ -142,9 +142,9 @@ function convertLine(line, i) {
                     const isCmd = j === 0
                     const url = isCmd ? `/api/cli#${item.replace(' ', '-')}` : null
                     const isAbstract = isString(item) && /^\[(.+)\]$/.test(item)
-                    const itemClassNames = classNames(classes.cliArg, {
-                        [classes.cliArgHighlight]: isCmd,
-                        [classes.cliArgEmphasis]: isAbstract,
+                    const itemClassNames = classNames(classes['cli-arg'], {
+                        [classes['cli-arg-highlight']]: isCmd,
+                        [classes['cli-arg-emphasis']]: isAbstract,
                     })
                     const text = isAbstract ? item.slice(1, -1) : item
                     return (
@@ -238,11 +238,11 @@ export class Code extends React.Component {
     render() {
         const { lang, title, executable, github, prompt, wrap, highlight, className, children } =
             this.props
-        const codeClassNames = classNames(classes.code, className, `language-${lang}`, {
-            [classes.wrap]: !!highlight || !!wrap || lang === 'cli',
-            [classes.cli]: lang === 'cli',
+        const codeClassNames = classNames(classes['code'], className, `language-${lang}`, {
+            [classes['wrap']]: !!highlight || !!wrap || lang === 'cli',
+            [classes['cli']]: lang === 'cli',
         })
-        const ghClassNames = classNames(codeClassNames, classes.maxHeight)
+        const ghClassNames = classNames(codeClassNames, classes['max-height'])
         const { Juniper } = this.state
 
         if (github) {
@@ -264,7 +264,7 @@ export class Code extends React.Component {
         const html = formatCode(rawHtml, lang, prompt)
         return (
             <>
-                {title && <h4 className={classes.title}>{title}</h4>}
+                {title && <h4 className={classes['title']}>{title}</h4>}
                 <code className={codeClassNames}>{html}</code>
             </>
         )
@@ -275,10 +275,10 @@ const JuniperWrapper = ({ Juniper, title, lang, children }) => {
     const { binderUrl, binderVersion } = siteMetadata
     const juniperTitle = title || 'Editable Code'
     return (
-        <div className={classes.juniperWrapper}>
-            <h4 className={classes.juniperTitle}>
+        <div className={classes['juniper-wrapper']}>
+            <h4 className={classes['juniper-title']}>
                 {juniperTitle}
-                <span className={classes.juniperMeta}>
+                <span className={classes['juniper-meta']}>
                     spaCy v{binderVersion} &middot; Python 3 &middot; via{' '}
                     <Link to="https://mybinder.org/" hidden>
                         Binder
@@ -291,10 +291,10 @@ const JuniperWrapper = ({ Juniper, title, lang, children }) => {
                 branch={binderBranch}
                 lang={lang}
                 classNames={{
-                    cell: classes.juniperCell,
-                    input: classes.juniperInput,
-                    button: classes.juniperButton,
-                    output: classes.juniperOutput,
+                    cell: classes['juniper-cell'],
+                    input: classes['juniper-input'],
+                    button: classes['juniper-button'],
+                    output: classes['juniper-output'],
                 }}
             >
                 {children}
diff --git a/website/src/components/embed.js b/website/src/components/embed.js
index 9f959bc99..14d333e97 100644
--- a/website/src/components/embed.js
+++ b/website/src/components/embed.js
@@ -89,7 +89,7 @@ const Image = ({ src, alt, title, ...props }) => {
     // This is only needed for image types that are NOT handled by
     // gatsby-remark-images, i.e. mostly SVGs. The plugin adds formatting
     // and support for captions, so this normalises that behaviour.
-    const linkClassNames = classNames('gatsby-resp-image-link', classes.imageLink)
+    const linkClassNames = classNames('gatsby-resp-image-link', classes['image-link'])
     const markdownComponents = { code: InlineCode, p: Fragment, a: Link }
     return (
         <figure className="gatsby-resp-image-figure">
@@ -111,7 +111,7 @@ const GoogleSheet = ({ id, link, height, button = 'View full table' }) => {
             <iframe
                 title={id}
                 scrolling="no"
-                className={classes.googleSheet}
+                className={classes['google-sheet']}
                 height={height}
                 src={`https://docs.google.com/spreadsheets/d/e/${id}/pubhtml?widget=true&amp;headers=false`}
             />
diff --git a/website/src/components/github.js b/website/src/components/github.js
index dff14eacd..a950dbef8 100644
--- a/website/src/components/github.js
+++ b/website/src/components/github.js
@@ -16,7 +16,7 @@ or a report on the issue tracker. Thanks!`
 const GitHubCode = ({ url, lang, errorMsg = defaultErrorMsg, className }) => {
     const [initialized, setInitialized] = useState(false)
     const [code, setCode] = useState(errorMsg)
-    const codeClassNames = classNames(classes.code, classes.maxHeight, className)
+    const codeClassNames = classNames(classes.code, classes['max-height'], className)
 
     const rawUrl = url
         .replace('github.com', 'raw.githubusercontent.com')
@@ -46,7 +46,9 @@ const GitHubCode = ({ url, lang, errorMsg = defaultErrorMsg, className }) => {
             <header className={classes.header}>
                 <Link to={url} hidden>
                     <Icon name="github" width={16} inline />
-                    <code className={classNames(classes.inlineCode, classes.inlineCodeDark)}>
+                    <code
+                        className={classNames(classes['inline-code'], classes['inline-code-dark'])}
+                    >
                         {rawUrl.split('.com/')[1]}
                     </code>
                 </Link>
diff --git a/website/src/components/landing.js b/website/src/components/landing.js
index ec8cf88d6..7a58c0fd7 100644
--- a/website/src/components/landing.js
+++ b/website/src/components/landing.js
@@ -27,9 +27,9 @@ export const LandingHeader = ({ nightly, legacy, style = {}, children }) => {
     const wrapperStyle = { backgroundImage: `url(${pattern})` }
     const contentStyle = { backgroundImage: `url(${overlay})`, ...style }
     return (
-        <header className={classes.header}>
-            <div className={classes.headerWrapper} style={wrapperStyle}>
-                <div className={classes.headerContent} style={contentStyle}>
+        <header className={classes['header']}>
+            <div className={classes['header-wrapper']} style={wrapperStyle}>
+                <div className={classes['header-content']} style={contentStyle}>
                     {children}
                 </div>
             </div>
@@ -37,17 +37,17 @@ export const LandingHeader = ({ nightly, legacy, style = {}, children }) => {
     )
 }
 
-export const LandingTitle = ({ children }) => <h1 className={classes.title}>{children}</h1>
+export const LandingTitle = ({ children }) => <h1 className={classes['title']}>{children}</h1>
 
 export const LandingSubtitle = ({ children }) => (
     <h2>
-        <span className={classNames(classes.label, classes.subtitle)}>{children}</span>
+        <span className={classNames(classes['label'], classes['subtitle'])}>{children}</span>
     </h2>
 )
 
 export const LandingGrid = ({ cols = 3, blocks = false, style, children }) => (
-    <Content className={classNames({ [classes.blocks]: blocks })}>
-        <Grid cols={cols} narrow={blocks} className={classes.grid} style={style}>
+    <Content className={classNames({ [classes['blocks']]: blocks })}>
+        <Grid cols={cols} narrow={blocks} className={classes['grid']} style={style}>
             {children}
         </Grid>
     </Content>
@@ -56,8 +56,8 @@ export const LandingGrid = ({ cols = 3, blocks = false, style, children }) => (
 export const LandingCol = ({ children }) => <div>{children}</div>
 
 export const LandingCard = ({ title, button, url, children }) => (
-    <div className={classes.card}>
-        <section className={classes.cardText}>
+    <div className={classes['card']}>
+        <section className={classes['card-text']}>
             {title && <H3>{title}</H3>}
             <p>{children}</p>
         </section>
@@ -70,14 +70,14 @@ export const LandingCard = ({ title, button, url, children }) => (
 )
 
 export const LandingButton = ({ to, children }) => (
-    <Button to={to} variant="primary" large className={classes.button}>
+    <Button to={to} variant="primary" large className={classes['button']}>
         {children}
     </Button>
 )
 
 export const LandingDemo = ({ title, children }) => {
     return (
-        <div className={classes.demo}>
+        <div className={classes['demo']}>
             <CodeBlock executable lang="python" title={title}>
                 {children}
             </CodeBlock>
@@ -86,7 +86,7 @@ export const LandingDemo = ({ title, children }) => {
 }
 
 export const LandingBannerGrid = ({ children }) => (
-    <Grid cols={2} className={classes.bannerGrid}>
+    <Grid cols={2} className={classes['banner-grid']}>
         {children}
     </Grid>
 )
@@ -102,11 +102,11 @@ export const LandingBanner = ({
     color,
     children,
 }) => {
-    const contentClassNames = classNames(classes.bannerContent, {
-        [classes.bannerContentSmall]: small,
+    const contentClassNames = classNames(classes['banner-content'], {
+        [classes['banner-content-small']]: small,
     })
-    const textClassNames = classNames(classes.bannerText, {
-        [classes.bannerTextSmall]: small,
+    const textClassNames = classNames(classes['banner-text'], {
+        [classes['banner-text-small']]: small,
     })
     const style = {
         '--color-theme': background,
@@ -115,13 +115,13 @@ export const LandingBanner = ({
     }
     const Heading = small ? H2 : H1
     return (
-        <div className={classes.banner} style={style}>
+        <div className={classes['banner']} style={style}>
             <Grid cols={small ? null : 3} narrow className={contentClassNames}>
                 {(title || label) && (
-                    <Heading Component="h3" className={classes.bannerTitle}>
+                    <Heading Component="h3" className={classes['banner-title']}>
                         {label && (
-                            <div className={classes.bannerLabel}>
-                                <span className={classes.label}>{label}</span>
+                            <div className={classes['banner-label']}>
+                                <span className={classes['label']}>{label}</span>
                             </div>
                         )}
                         <Link to={to} hidden>
@@ -144,8 +144,13 @@ export const LandingBanner = ({
 }
 
 export const LandingBannerButton = ({ to, small, children }) => (
-    <div className={classes.bannerButton}>
-        <Button to={to} variant="tertiary" large={!small} className={classes.bannerButtonElement}>
+    <div className={classes['banner-button']}>
+        <Button
+            to={to}
+            variant="tertiary"
+            large={!small}
+            className={classes['banner-button-element']}
+        >
             {children}
         </Button>
     </div>
diff --git a/website/src/components/link.js b/website/src/components/link.js
index 917b009b7..0f209329b 100644
--- a/website/src/components/link.js
+++ b/website/src/components/link.js
@@ -44,12 +44,12 @@ export default function Link({
     const linkClassNames = classNames(classes.root, className, {
         [classes.hidden]: hidden,
         [classes.nowrap]: (withIcon && !sourceWithText) || icon === 'network',
-        [classes.withIcon]: withIcon,
+        [classes['with-icon']]: withIcon,
     })
     const Wrapper = ws ? Whitespace : Fragment
     const content = (
         <>
-            {sourceWithText ? <span className={classes.sourceText}>{children}</span> : children}
+            {sourceWithText ? <span className={classes['source-text']}>{children}</span> : children}
             {withIcon && <Icon name={icon} width={16} inline className={classes.icon} />}
         </>
     )
diff --git a/website/src/components/list.js b/website/src/components/list.js
index 64c3274a7..20a36c326 100644
--- a/website/src/components/list.js
+++ b/website/src/components/list.js
@@ -9,7 +9,7 @@ export const Ul = (props) => <ul className={classes.ul} {...props} />
 export const Li = ({ children, emoji, ...props }) => {
     const { hasIcon, content } = replaceEmoji(children)
     const liClassNames = classNames(classes.li, {
-        [classes.liIcon]: hasIcon,
+        [classes['li-icon']]: hasIcon,
         [classes.emoji]: emoji,
     })
     return (
diff --git a/website/src/components/main.js b/website/src/components/main.js
index a11a04305..ff9aab6be 100644
--- a/website/src/components/main.js
+++ b/website/src/components/main.js
@@ -31,8 +31,8 @@ export default function Main({
 }) {
     const pattern = patterns[theme]
     const mainClassNames = classNames(classes.root, {
-        [classes.withSidebar]: sidebar,
-        [classes.withAsides]: asides,
+        [classes['with-sidebar']]: sidebar,
+        [classes['with-asides']]: asides,
     })
 
     return (
diff --git a/website/src/components/navigation.js b/website/src/components/navigation.js
index b498df451..16fb07b7c 100644
--- a/website/src/components/navigation.js
+++ b/website/src/components/navigation.js
@@ -40,7 +40,7 @@ export default function Navigation({ title, items = [], section, search, alert,
             {!alert ? (
                 logo
             ) : (
-                <span className={classes.hasAlert}>
+                <span className={classes['has-alert']}>
                     {logo} <span className={classes.alert}>{alert}</span>
                 </span>
             )}
@@ -52,7 +52,7 @@ export default function Navigation({ title, items = [], section, search, alert,
                     {items.map(({ text, url }, i) => {
                         const isActive = section && text.toLowerCase() === section
                         const itemClassNames = classNames(classes.item, {
-                            [classes.isActive]: isActive,
+                            [classes['is-active']]: isActive,
                         })
                         return (
                             <li key={i} className={itemClassNames}>
diff --git a/website/src/components/quickstart.js b/website/src/components/quickstart.js
index e5d4e00be..c54fb38cb 100644
--- a/website/src/components/quickstart.js
+++ b/website/src/components/quickstart.js
@@ -86,14 +86,18 @@ const Quickstart = ({
 
     return !data.length ? null : (
         <Container id={id}>
-            <div className={classNames(classes.root, { [classes.hidePrompts]: !!hidePrompts })}>
+            <div
+                className={classNames(classes['root'], {
+                    [classes['hide-prompts']]: !!hidePrompts,
+                })}
+            >
                 {title && (
-                    <H2 className={classes.title} name={id}>
+                    <H2 className={classes['title']} name={id}>
                         <a href={`#${id}`}>{title}</a>
                     </H2>
                 )}
 
-                {description && <p className={classes.description}>{description}</p>}
+                {description && <p className={classes['description']}>{description}</p>}
 
                 {data.map(
                     ({
@@ -112,21 +116,21 @@ const Quickstart = ({
                         // Check if dropdown should be shown
                         const dropdownGetter = showDropdown[id] || (() => true)
                         return hidden ? null : (
-                            <div key={id} data-quickstart-group={id} className={classes.group}>
+                            <div key={id} data-quickstart-group={id} className={classes['group']}>
                                 <style data-quickstart-style={id} scoped>
                                     {styles[id] ||
                                         `[data-quickstart-results]>[data-quickstart-${id}] { display: none }`}
                                 </style>
-                                <div className={classes.legend}>
+                                <div className={classes['legend']}>
                                     {title}
                                     {help && (
-                                        <span data-tooltip={help} className={classes.help}>
+                                        <span data-tooltip={help} className={classes['help']}>
                                             {' '}
                                             <Icon name="help" width={16} />
                                         </span>
                                     )}
                                 </div>
-                                <div className={classes.fields}>
+                                <div className={classes['fields']}>
                                     {options.map((option) => {
                                         const optionType = multiple ? 'checkbox' : 'radio'
                                         const checkedForId = checked[id] || []
@@ -151,7 +155,7 @@ const Quickstart = ({
                                                     }}
                                                     type={optionType}
                                                     className={classNames(
-                                                        classes.input,
+                                                        classes['input'],
                                                         classes[optionType]
                                                     )}
                                                     name={id}
@@ -160,7 +164,7 @@ const Quickstart = ({
                                                     checked={checkedForId.includes(option.id)}
                                                 />
                                                 <label
-                                                    className={classes.label}
+                                                    className={classes['label']}
                                                     htmlFor={`quickstart-${option.id}`}
                                                 >
                                                     {option.title}
@@ -168,7 +172,7 @@ const Quickstart = ({
                                                     {option.help && (
                                                         <span
                                                             data-tooltip={option.help}
-                                                            className={classes.help}
+                                                            className={classes['help']}
                                                         >
                                                             {' '}
                                                             <Icon name="help" width={16} />
@@ -178,12 +182,12 @@ const Quickstart = ({
                                             </Fragment>
                                         )
                                     })}
-                                    <span className={classes.fieldExtra}>
+                                    <span className={classes['field-extra']}>
                                         {!!dropdown.length && (
                                             <select
                                                 defaultValue={defaultValue}
-                                                className={classNames(classes.select, {
-                                                    [classes.selectHidden]: !dropdownGetter(),
+                                                className={classNames(classes['select'], {
+                                                    [classes['select-hidden']]: !dropdownGetter(),
                                                 })}
                                                 onChange={({ target }) => {
                                                     const value = target.value
@@ -207,7 +211,7 @@ const Quickstart = ({
                                         {other && otherState[id] && (
                                             <input
                                                 type="text"
-                                                className={classes.textInput}
+                                                className={classes['text-input']}
                                                 placeholder="Type here..."
                                                 onChange={({ target }) => setterFunc(target.value)}
                                             />
@@ -218,10 +222,10 @@ const Quickstart = ({
                         )
                     }
                 )}
-                <pre className={classes.code}>
+                <pre className={classes['code']}>
                     <code
-                        className={classNames(classes.results, {
-                            [classes.small]: !!small,
+                        className={classNames(classes['results'], {
+                            [classes['small']]: !!small,
                             [`language-${codeLang}`]: !!codeLang,
                         })}
                         data-quickstart-results=""
@@ -230,12 +234,12 @@ const Quickstart = ({
                         {children}
                     </code>
 
-                    <menu className={classes.menu}>
+                    <menu className={classes['menu']}>
                         {showCopy && (
                             <button
                                 title="Copy to clipboard"
                                 onClick={onClickCopy}
-                                className={classes.iconButton}
+                                className={classes['icon-button']}
                             >
                                 <Icon width={18} name={copySuccess ? 'accept' : 'clipboard'} />
                             </button>
@@ -247,14 +251,16 @@ const Quickstart = ({
                                 )}`}
                                 title="Download file"
                                 download={download}
-                                className={classes.iconButton}
+                                className={classes['icon-button']}
                             >
                                 <Icon width={18} name="download" />
                             </a>
                         )}
                     </menu>
                 </pre>
-                {showCopy && <textarea ref={copyAreaRef} className={classes.copyArea} rows={1} />}
+                {showCopy && (
+                    <textarea ref={copyAreaRef} className={classes['copy-area']} rows={1} />
+                )}
             </div>
         </Container>
     )
@@ -283,11 +289,11 @@ Quickstart.propTypes = {
 
 const QS = ({ children, prompt = 'bash', divider = false, comment = false, ...props }) => {
     const qsClassNames = classNames({
-        [classes.prompt]: !!prompt && !divider,
-        [classes.bash]: prompt === 'bash' && !divider,
-        [classes.python]: prompt === 'python' && !divider,
-        [classes.divider]: !!divider,
-        [classes.comment]: !!comment,
+        [classes['prompt']]: !!prompt && !divider,
+        [classes['bash']]: prompt === 'bash' && !divider,
+        [classes['python']]: prompt === 'python' && !divider,
+        [classes['divider']]: !!divider,
+        [classes['comment']]: !!comment,
     })
     const attrs = Object.assign(
         {},
diff --git a/website/src/components/sidebar.js b/website/src/components/sidebar.js
index c62a5ab0c..f29c66951 100644
--- a/website/src/components/sidebar.js
+++ b/website/src/components/sidebar.js
@@ -22,8 +22,8 @@ function getActiveHeading(items, slug) {
 
 const DropdownNavigation = ({ items, defaultValue }) => {
     return (
-        <div className={classes.dropdown}>
-            <Dropdown className={classes.dropdownSelect} defaultValue={defaultValue}>
+        <div className={classes['dropdown']}>
+            <Dropdown className={classes['dropdown-select']} defaultValue={defaultValue}>
                 <option disabled>Select page...</option>
                 {items.map((section, i) =>
                     section.items.map(({ text, url }, j) => (
@@ -58,19 +58,19 @@ export default function Sidebar({ items = [], pageMenu = [], slug }) {
     }, [initialized])
 
     return (
-        <menu className={classNames('sidebar', classes.root)}>
-            <h1 hidden aria-hidden="true" className={classNames('h0', classes.activeHeading)}>
+        <menu className={classNames('sidebar', classes['root'])}>
+            <h1 hidden aria-hidden="true" className={classNames('h0', classes['active-heading'])}>
                 {activeHeading}
             </h1>
             <DropdownNavigation items={items} defaultValue={slug} />
             {items.map((section, i) => (
-                <ul className={classes.section} key={i}>
-                    <li className={classes.label}>{section.label}</li>
+                <ul className={classes['section']} key={i}>
+                    <li className={classes['label']}>{section.label}</li>
                     {section.items.map(({ text, url, tag, onClick, menu, isActive }, j) => {
                         const currentMenu = menu || pageMenu || []
                         const active = isActive || slug === url
-                        const itemClassNames = classNames(classes.link, {
-                            [classes.isActive]: active,
+                        const itemClassNames = classNames(classes['link'], {
+                            [classes['is-active']]: active,
                             'is-active': active,
                         })
 
@@ -86,11 +86,12 @@ export default function Sidebar({ items = [], pageMenu = [], slug }) {
                                     {tag && <Tag spaced>{tag}</Tag>}
                                 </Link>
                                 {active && !!currentMenu.length && (
-                                    <ul className={classes.crumbs}>
+                                    <ul className={classes['crumbs']}>
                                         {currentMenu.map((crumb) => {
                                             const currentActive = activeSection || currentMenu[0].id
-                                            const crumbClassNames = classNames(classes.crumb, {
-                                                [classes.crumbActive]: currentActive === crumb.id,
+                                            const crumbClassNames = classNames(classes['crumb'], {
+                                                [classes['crumb-active']]:
+                                                    currentActive === crumb.id,
                                             })
                                             return (
                                                 <li className={crumbClassNames} key={crumb.id}>
diff --git a/website/src/components/table.js b/website/src/components/table.js
index 88ca86888..f9755189d 100644
--- a/website/src/components/table.js
+++ b/website/src/components/table.js
@@ -45,7 +45,7 @@ export const Table = ({ fixed, className, ...props }) => {
 
 export const Th = ({ children, ...props }) => {
     const isRotated = children && !isString(children) && children.type && children.type.name == 'Tx'
-    const thClassNames = classNames(classes.th, { [classes.thRotated]: isRotated })
+    const thClassNames = classNames(classes.th, { [classes['th-rotated']]: isRotated })
     return (
         <th className={thClassNames} {...props}>
             {children}
diff --git a/website/src/components/title.js b/website/src/components/title.js
index 37f591b9d..3200bea90 100644
--- a/website/src/components/title.js
+++ b/website/src/components/title.js
@@ -37,7 +37,7 @@ export default function Title({
     ...props
 }) {
     const hasApiDetails = Object.values(apiDetails || {}).some((v) => v)
-    const metaIconProps = { className: classes.metaIcon, width: 18 }
+    const metaIconProps = { className: classes['meta-icon'], width: 18 }
     return (
         <header className={classes.root}>
             {(image || source) && (
diff --git a/website/src/components/typography.js b/website/src/components/typography.js
index e05948ff5..dfbe6ccae 100644
--- a/website/src/components/typography.js
+++ b/website/src/components/typography.js
@@ -58,8 +58,8 @@ export const Label = ({ className, ...props }) => (
 )
 
 export const InlineList = ({ Component = 'p', gutterBottom = true, className, children }) => {
-    const listClassNames = classNames(classes.inlineList, className, {
-        [classes.noGutter]: !gutterBottom,
+    const listClassNames = classNames(classes['inline-list'], className, {
+        [classes['no-gutter']]: !gutterBottom,
     })
     return <Component className={listClassNames}>{children}</Component>
 }