Style ul>li using MDX Components?

[deadcoder0904]

I am making a blog using Next.js + MDX + Tailwind combo which is a clone of https://github.com/tailwindlabs/blog.tailwindcss.com

However, my blog doesn't contain https://github.com/tailwindlabs/tailwindcss-typography/ which comes with default styles

So I want to apply default styles for ul > li element

https://github.com/tailwindlabs/tailwindcss-typography/blob/caa70b6bfe1e8e9682099db27a87b79e92e2b09f/src/styles.js#L41-L49

I'm not sure how to do that while using MDXComponents?

I can do basic stuff like:

export const MDXComponents = {
	h1: H1,
	h2: H2,
	h3: H3,
	h4: H4,
	h5: H5,
	h6: H6,
	p: P,
	hr: HR,
	a: A,
	strong: Strong,
	img: Img,
	pre: Pre,
	'pre.code': PreCode,
}

Here's the code for PreCode:

import { HTMLAttributes } from 'react'

type Props = {
	className: string
	props: HTMLAttributes<HTMLPreElement>
}

export const PreCode = ({ className = '', ...props }: Props) => (
	<code className={`${className} text-gray-200`} {...props} />
)

However, when I want to do something for ul>li or anything with 2 elements, I can't wrap my head around it.

Basically, I want to style the following CSS (including ::before) coming from a blog post:

{
	'ul > li': {
		position: 'relative',
	},
	'ul > li::before': {
		content: '""',
		position: 'absolute',
		backgroundColor: defaultTheme.colors.gray[300],
		borderRadius: '50%',
	},
}

And the only way I know to do it without polluting global CSS is to use MDXComponents.

So how do I do that?

[ChristianMurphy]

without polluting global CSS

A few options.
The simplest would be CSS.
wrap the MDX components/page in a class, like <section className="mdx-content">{mdx}</section> and scope all the selectors to that section.

If you want to add a css class only to an li inside of a ul use a rehype plugin https://mdxjs.com/advanced/plugins
You can find more information on writing plugins at https://mdxjs.com/guides/writing-a-plugin and https://unifiedjs.com/learn
https://github.com/syntax-tree/hast-util-select would provide an easy way of visiting nodes in the processing pipeline, using a css-like selector.

[deadcoder0904]

wrap the MDX components/page in a class, like

{mdx}

and scope all the selectors to that section.

I tried doing this but it breaks my whole layout.

If you want to add a css class only to an li inside of a ul use a rehype plugin mdxjs.com/advanced/plugins
You can find more information on writing plugins at mdxjs.com/guides/writing-a-plugin and unifiedjs.com/learn
syntax-tree/hast-util-select would provide an easy way of visiting nodes in the processing pipeline, using a css-like selector.

Is there any example of this that I can take a look at? Anything like ul>li or table > th would do :)

Edit: nvm, just saw the links & also found an example 👍

[wooorm]

Btw, if this is about components instead of just css, you can have components based on parent.child in react and preact:

mdx/packages/react/src/create-element.js

Line 24 in ed19998

components[`${parentName}.${type}`] ||

[deadcoder0904]

I managed to style table & it looks pretty good:

const visit = require('unist-util-visit')
const toHast = require('mdast-util-to-hast')
const toHtml = require('hast-util-to-html')

module.exports.table = () => {
	return (tree) => {
		visit(tree, 'table', (node) => {
			const str = []
			str.push(`<table class="table-fixed full-bleed px-12 divide-y divide-gray-200">`)
			str.push(`<thead>`)
			let isTBodySet = false
			for (let i = 0; i < node.children.length; i++) {
				if (i === 1 && !isTBodySet) {
					isTBodySet = true
					str.push(`<tbody class="bg-white divide-y divide-gray-200">`)
				}
				str.push(`<tr>`)
				for (let j = 0; j < node.children[i].children.length; j++) {
					const k = node.children[i].children[j].children
						.map((l) => {
							if (l.type === 'text') return l.value
							else return toHtml(toHast(l))
						})
						.join('')
					if (i === 0)
						str.push(
							`<th class="px-6 py-3 bg-gray-50 text-left text-xl sm:text-2xl font-semibold text-blue-gray-900 tracking-wider">${k}</th>`
						)
					else
						str.push(
							`<td class="px-6 py-4 whitespace-wrap text-xl leading-9 text-blue-gray-600">${k}</td>`
						)
				}
				str.push(`</tr>`)
				if (i === 0) str.push(`</thead>`)
			}

			str.push(`</tbody>`)
			str.push(`</table>`)

			if (node.lang !== null) {
				node.type = 'html'
				node.value = str.filter(Boolean).join('')
			}
		})
	}
}

However, I am having an issue with styling a list as I can't get InlineCode to work inside an li, for example:

• console.log('this does not work because my inline code contains <Image> which gets replaced by MDXComponent's <img>')

My MDXComponents looks like:

const Img = ({ className = 'full-bleed', ...props }) => (
	<img className={`${className} my-16`} {...props} />
)

export const MDXComponents = {
  img: Img
}

And my .mdx file contains a li with <Image> like follows:

• Automatic Image Optimization -> Image component allows optimizing & resizing images before serving them to the user

The entire without the backticks gets replaced by the MDXComponents's Img which just shows empty margin because of my-16. The above thing displays:

My list.js looks:

const visit = require('unist-util-visit')

module.exports.list = () => {
	return (tree) => {
		visit(tree, 'list', (node) => {
			const str = []
			str.push(`<ul class="">`)
			for (let i = 0; i < node.children.length; i++) {
				for (let j = 0; j < node.children[i].children.length; j++) {
					const k = node.children[i].children[j].children
						.map((l) => {
							switch (l.type) {
								case 'inlineCode': {
									return '`' + l.value + '`'
								}
								case 'text':
								default:
									return l.value
							}
						})
						.join('')
					str.push(`<li class="">${k}</li>`)
				}
			}

			str.push(`</ul>`)

			if (node.lang !== null) {
				node.type = 'html'
				node.value = str.filter(Boolean).join('')
			}
		})
	}
}

How do I solve this?

[deadcoder0904]

I changed the above code a little bit. I replaced:

case 'inlineCode': {
    return '`' + l.value + '`'
}

with

case 'inlineCode': {
	return `<code>${l.value}</code>`
}

I think the issue is <Image> in MDX gets converted to <img class="full-bleed my-16"> in the DOM. My complete li looks like:

<li class="">Automatic Image Optimization -&gt; <code><img class="full-bleed my-16"></code> component allows optimizing &amp; resizing images before serving them to the user</li>

And if I do <Image1> in MDX then it gets converted to <image1></image1> in the DOM. My complete li looks like:

<li class="">Automatic Image Optimization -&gt; <code><image1></image1></code> component allows optimizing &amp; resizing images before serving them to the user</li>

So I think it treats anything in square brackets <> as an HTML element & converts them which I don't want to do at all.

[deadcoder0904]

Yay, I found the solution. Had to use toHtml(toHast(l)). I wished there was mdast-util-to-html directly.

list.js

const visit = require('unist-util-visit')
const toHast = require('mdast-util-to-hast')
const toHtml = require('hast-util-to-html')

module.exports.list = () => {
	return (tree) => {
		visit(tree, 'list', (node) => {
			const str = []
			str.push(`<ul class="">`)
			for (let i = 0; i < node.children.length; i++) {
				for (let j = 0; j < node.children[i].children.length; j++) {
					const k = node.children[i].children[j].children.map((l) => toHtml(toHast(l))).join('')
					str.push(`<li class="">${k}</li>`)
				}
			}

			str.push(`</ul>`)

			if (node.lang !== null) {
				node.type = 'html'
				node.value = str.filter(Boolean).join('')
			}
		})
	}
}

I have one last question. Here, I have code tag but I am unable to use inlineCode from MDXComponents. How can I use the inlineCode so that I don't have to repeat the Tailwind Classes?

They're in TS & use JSX.

src/components/mdx/index.ts

import { Code } from '@/components/mdx/Code'

export const MDXComponents = {
	inlineCode: Code,
}

src/components/mdx/Code.tsx

import { HTMLAttributes } from 'react'

export const Code = ({ className = '', ...props }: HTMLAttributes<HTMLElement>) => (
	<code
		className={`${className} p-1 overflow-x-auto bg-gray-900 text-blue-gray-200 rounded-md text-base`}
		{...props}
	/>
)

Can I use them in remark build cycle? Like somehow wrapping MDXProvider before it spits out the output?

Other solution I think is I have to write a bunch of if-else to see if an li contains code then use the above classes, if it contains a then use other classes, etc....

[wooorm]

It sounds like you’re asking about an XY problem. Could you take a step back, maybe open a new discussion for new questions?

[deadcoder0904]

I opened the above question here → #1352