feat: tailwind

__tests__/browser/markdown.test.js

@@ -28,6 +28,7 @@ describe('visual regression tests', () => {
       'tables',
       'codeBlockTests',
       'tableOfContentsTests',
+      'tailwindRootTests',
       'varsTest',
     ];
 

__tests__/compilers/compatability.test.tsx

@@ -3,7 +3,7 @@ import fs from 'node:fs';
 import { vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
 
-import { mdx, migrate, compile, run } from '../../index';
+import { mdx, compile, run } from '../../index';
 import { migrate } from '../helpers';
 
 describe('compatability with RDMD', () => {
@@ -226,7 +226,7 @@ This is an image: <img src="http://example.com/#\\>" >
 
     it('should wrap raw <style> tags in an <HTMLBlock>', async () => {
       const converted = migrate(rawStyle);
-      const compiled = compile(converted);
+      const compiled = await compile(converted);
       const Component = (await run(compiled)).default;
       render(
         <div className="markdown-body">
@@ -238,7 +238,7 @@ This is an image: <img src="http://example.com/#\\>" >
 
     it('should wrap raw <script> tags in an <HTMLBlock>', async () => {
       const converted = migrate(rawScript);
-      const compiled = compile(converted);
+      const compiled = await compile(converted);
       const Component = (await run(compiled)).default;
       render(
         <div className="markdown-body">
@@ -254,7 +254,7 @@ This is an image: <img src="http://example.com/#\\>" >
        */
       const spy = vi.spyOn(console, 'log');
       const converted = migrate(magicScript);
-      const compiled = compile(converted);
+      const compiled = await compile(converted);
       const Component = await run(compiled);
       render(
         <div className="markdown-body">

__tests__/helpers.ts

@@ -17,7 +17,7 @@ export const silenceConsole =
   };
 
 export const execute = async (doc: string, compileOpts = {}, runOpts = {}, { getDefault = true } = {}) => {
-  const code = compile(doc, compileOpts);
+  const code = await compile(doc, compileOpts);
   const mod = await run(code, runOpts);
 
   return getDefault ? mod.default : mod;

__tests__/plugins/toc.test.tsx

@@ -13,7 +13,7 @@ describe('toc transformer', () => {
 
 ## Second Subheading
 `;
-    const { Toc } = await run(compile(md));
+    const { Toc } = await run(await compile(md));
 
     render(<Toc />);
 
@@ -35,10 +35,10 @@ describe('toc transformer', () => {
       CommonInfo: '## Common Heading',
     };
     const executed = {
-      CommonInfo: await run(compile('## Common Heading')),
+      CommonInfo: await run(await compile('## Common Heading')),
     };
 
-    const { Toc } = await run(compile(md, { components }), { components: executed });
+    const { Toc } = await run(await compile(md, { components }), { components: executed });
 
     render(<Toc />);
 
@@ -51,11 +51,53 @@ describe('toc transformer', () => {
     const md = `
 # [Title](http://example.com)
 `;
-    const { Toc } = await run(compile(md));
+    const { Toc } = await run(await compile(md));
 
     render(<Toc />);
 
     expect(screen.findByText('Title')).toBeDefined();
     expect(screen.queryByText('[', { exact: false })).toBeNull();
   });
+
+  it('does not inject a toc if one already exists', async () => {
+    const md = `
+## Test Heading
+
+export const toc = [
+  {
+    "type": "element",
+    "tagName": "h2",
+          "properties": {
+        "id": "test-heading"
+      },
+    "children": [
+      {
+        "type": "text",
+        "value": "Modified Table",
+      }
+    ],
+  }
+]
+    `;
+
+    const { toc } = await run(await compile(md));
+
+    expect(toc).toMatchInlineSnapshot(`
+      [
+        {
+          "children": [
+            {
+              "type": "text",
+              "value": "Modified Table",
+            },
+          ],
+          "properties": {
+            "id": "test-heading",
+          },
+          "tagName": "h2",
+          "type": "element",
+        },
+      ]
+    `);
+  });
 });

__tests__/transformers/tailwind.test.tsx

@@ -0,0 +1,49 @@
+import { compile, run } from '../../index';
+
+describe('tailwind transformer', () => {
+  it('should parse a stylesheet', async () => {
+    const testComponent = `
+export const Styled = () => <div className="bg-blue-500 text-white p-4">Hello, World!</div>;
+    `;
+    const md = `<Styled />`;
+
+    const TestComponent = await run(await compile(testComponent));
+    const { stylesheet } = await run(
+      await compile(md, { components: { TestComponent: testComponent, Styled: testComponent }, useTailwind: true }),
+      {
+        components: { TestComponent },
+      },
+    );
+
+    // @fixme: I can't get vitest to bundle css as a string, so this at least
+    // asserts that the stylesheet is building?
+    expect(stylesheet).toMatchInlineSnapshot(`
+      "/*! tailwindcss v4.0.3 | MIT License | https://tailwindcss.com */
+      @layer theme, base, components, utilities;
+      @layer theme;
+      @layer utilities;
+      "
+    `);
+  });
+
+  it('should not throw an exception if a stylesheet is already defined', async () => {
+    const testComponent = `
+export const Styled = () => <div className="bg-blue-500 text-white p-4">Hello, World!</div>;
+    `;
+    const md = `
+<Styled />
+
+export const stylesheet = ".test { color: red; }";
+`;
+
+    const TestComponent = await run(await compile(testComponent));
+    const { stylesheet } = await run(
+      await compile(md, { components: { TestComponent: testComponent, Styled: testComponent }, useTailwind: true }),
+      {
+        components: { TestComponent },
+      },
+    );
+
+    expect(stylesheet).toMatchInlineSnapshot(`".test { color: red; }"`);
+  });
+});

components/CodeTabs/style.scss

@@ -2,8 +2,8 @@
 @import '~codemirror/theme/neo.css';
 
 @mixin CodeTabs {
-  $bgc-pre: #F6F8FA;
-  $bgc-pre-dark: #242E34;
+  $bgc-pre: #f6f8fa;
+  $bgc-pre-dark: #242e34;
   $bgc-bar: darken(desaturate($bgc-pre, 17.46), 4.31);
   $bgc-bar-dark: lighten(desaturate($bgc-pre-dark, 17.46), 4.31);
   $radius: var(--md-code-radius, var(--markdown-radius, 3px));
@@ -36,18 +36,18 @@
     }
     button {
       white-space: nowrap;
-      transition: .123s ease;
+      transition: 0.123s ease;
       -webkit-appearance: none;
       appearance: none;
       display: inline-block;
       line-height: 2;
-      padding: .5em 1em;
+      padding: 0.5em 1em;
       border: none;
       background: transparent;
       outline: none;
       color: inherit;
       font: inherit;
-      font-size: .75em;
+      font-size: 0.75em;
       cursor: pointer;
     }
   }
@@ -70,15 +70,17 @@
   }
 
   &-toolbar button:not(.CodeTabs_active):hover {
-    background: rgba(0, 0, 0, .075);
+    background: rgba(0, 0, 0, 0.075);
   }
 
   pre {
     border-radius: 0 0 $radius $radius !important;
     background: $bgc-pre;
     background: var(--md-code-background, $bgc-pre);
     margin-bottom: 0;
-    &:not(.CodeTabs_active) { display: none }
+    &:not(.CodeTabs_active) {
+      display: none;
+    }
   }
 
   &.theme-dark pre {

components/Style/index.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { createPortal } from 'react-dom';
+
+interface Props {
+  stylesheet?: string;
+}
+
+const Style = ({ stylesheet }: Props) => {
+  const isServer = typeof window === 'undefined';
+
+  if (!stylesheet) {
+    return null;
+  }
+
+  return isServer ? createPortal(<style>{stylesheet}</style>, document.head) : <style>{stylesheet}</style>;
+};
+
+export default Style;

components/TailwindRoot/index.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const TailwindRoot = ({ children, flow }) => {
+  const Tag = flow ? 'div' : 'span';
+
+  return <Tag className="readme-tailwind">{children}</Tag>;
+};
+
+export default TailwindRoot;

components/index.ts

@@ -10,6 +10,8 @@ export { default as Glossary } from './Glossary';
 export { default as HTMLBlock } from './HTMLBlock';
 export { default as Heading } from './Heading';
 export { default as Image } from './Image';
+export { default as Style } from './Style';
 export { default as Table } from './Table';
 export { default as Tabs, Tab } from './Tabs';
 export { default as TableOfContents } from './TableOfContents';
+export { default as TailwindRoot } from './TailwindRoot';

docs/tailwind-root-tests.mdx

@@ -0,0 +1,7 @@
+## Styling Custom Components with Tailwind
+
+```
+<StyledComponent />
+```
+
+<StyledComponent />

example/Doc.tsx

@@ -4,32 +4,19 @@ import * as mdx from '../index';
 import docs from './docs';
 import RenderError from './RenderError';
 import { MDXContent } from 'mdx/types';
-
-const components = {
-  Demo: `
-## This is a Demo Component!
-
-> 📘 It can render JSX components!
-`,
-  Test: `
-export const Test = ({ color = 'thistle' } = {}) => {
-  return <div style={{ backgroundColor: color }}>
-    Hello, World!
-  </div>;
-};
-
-export default Test;
-  `,
-  MultipleExports: `
-export const One = () => "One";
-
-export const Two = () => "Two";
-  `,
-};
+import components from './components';
 
 const executedComponents = {};
+let componentsByExport = { ...components };
 Object.entries(components).forEach(async ([tag, body]) => {
-  executedComponents[tag] = await mdx.run(mdx.compile(body));
+  const mod = await mdx.run(await mdx.compile(body));
+
+  executedComponents[tag] = mod;
+  Object.keys(mod).forEach(subTag => {
+    if (['toc', 'Toc', 'default', 'stylesheet'].includes(subTag)) return;
+
+    componentsByExport[subTag] = body;
+  });
 });
 
 const terms = [
@@ -86,7 +73,8 @@ const Doc = () => {
       };
 
       try {
-        const code = mdx.compile(doc, { ...opts, components });
+        // @ts-ignore
+        const code = await mdx.compile(doc, { ...opts, components: componentsByExport, useTailwind: true });
         const content = await mdx.run(code, { components: executedComponents, terms, variables });
 
         setError(() => null);

example/components.ts

@@ -0,0 +1,30 @@
+const components = {
+  Demo: `
+## This is a Demo Component!
+
+> 📘 It can render JSX components!
+`,
+  Test: `
+export const Test = ({ color = 'thistle' } = {}) => {
+  return <div style={{ backgroundColor: color }}>
+    Hello, World!
+  </div>;
+};
+
+export default Test;
+  `,
+  MultipleExports: `
+export const One = () => "One";
+
+export const Two = () => "Two";
+  `,
+  TailwindRootTest: `
+export const StyledComponent = () => {
+  return <div className="bg-blue-500 text-white p-4">
+    Hello, World!
+  </div>;
+}
+  `,
+};
+
+export default components;

example/docs.ts

@@ -35,6 +35,8 @@ import tableOfContentsTests from '../docs/table-of-contents-tests.md';
 // @ts-ignore
 import tables from '../docs/tables.md';
 // @ts-ignore
+import tailwindRootTests from '../docs/tailwind-root-tests.mdx';
+// @ts-ignore
 import varsTest from '../docs/variable-tests.md';
 
 const lowerCase = (str: string) =>
@@ -59,6 +61,7 @@ const fixtures = Object.entries({
   sanitizingTests,
   tableOfContentsTests,
   tables,
+  tailwindRootTests,
   varsTest,
 }).reduce((memo, [sym, doc]) => {
   const name = lowerCase(sym);