Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: add base conditions on clsx wrapper for MDX components #9109

Closed
wants to merge 1 commit into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@ import type {Props} from '@theme/MDXComponents/Img';

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

function transformImgClassName(className?: string): string {
return clsx(className, styles.img);
function transformImgClassName(className?: string): string | undefined {
return !className ? undefined : clsx(className, styles.img);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is not the same as before: we want the styles.img to always be applied, even if the className prop is undefined

Img is not the same case as Ul which is kind of an exception

}

export default function MDXImg(props: Props): JSX.Element {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,17 @@ import type {Props} from '@theme/MDXComponents/Ul';

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

function transformUlClassName(className?: string): string {
return clsx(
className,
// This class is set globally by GitHub/MDX. We keep the global class, and
// add another class to get a task list without the default ul styling
// See https://github.com/syntax-tree/mdast-util-to-hast/issues/28
className?.includes('contains-task-list') && styles.containsTaskList,
);
function transformUlClassName(className?: string): string | undefined {
return !className
? undefined
: clsx(
className,
// This class is set globally by GitHub/MDX. We keep the global class,
// and add another class to get a task list without the default ul
// styling
// See https://github.com/syntax-tree/mdast-util-to-hast/issues/28
className?.includes('contains-task-list') && styles.containsTaskList,
);
}

export default function MDXUl(props: Props): JSX.Element {
Expand Down
Loading