Merge branch 'next'

__tests__/transformers/tailwind.test.tsx

@@ -15,8 +15,6 @@ export const Styled = () => <div className="bg-blue-500 text-white p-4">Hello, W
       },
     );
 
-    // @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;

components/TailwindRoot/index.tsx

@@ -1,11 +1,13 @@
 import React from 'react';
 
+import { tailwindPrefix } from '../../utils/consts';
+
 interface Props extends React.PropsWithChildren<{ flow: boolean }> {}
 
 const TailwindRoot = ({ children, flow }: Props) => {
   const Tag = flow ? 'div' : 'span';
 
-  return <Tag className="readme-tailwind">{children}</Tag>;
+  return <Tag className={tailwindPrefix}>{children}</Tag>;
 };
 
 export default TailwindRoot;

example/Doc.tsx

@@ -4,7 +4,6 @@ import type { RMDXModule } from 'types';
 import React, { useEffect, useState } from 'react';
 import { useParams, useSearchParams } from 'react-router-dom';
 
-
 import * as mdx from '../index';
 
 import components from './components';

lib/compile.ts

@@ -15,11 +15,15 @@ export type CompileOpts = CompileOptions & {
   components?: Record<string, string>;
   copyButtons?: boolean;
   useTailwind?: boolean;
+  useTailwindRoot?: boolean;
 };
 
 const { codeTabsTransformer, ...transforms } = defaultTransforms;
 
-const compile = async (text: string, { components = {}, copyButtons, useTailwind, ...opts }: CompileOpts = {}) => {
+const compile = async (
+  text: string,
+  { components = {}, copyButtons, useTailwind, useTailwindRoot, ...opts }: CompileOpts = {},
+) => {
   const remarkPlugins: PluggableList = [
     remarkFrontmatter,
     remarkGfm,
@@ -28,7 +32,7 @@ const compile = async (text: string, { components = {}, copyButtons, useTailwind
   ];
 
   if (useTailwind) {
-    remarkPlugins.push([tailwindTransformer, { components }]);
+    remarkPlugins.push([tailwindTransformer, { components, parseRoot: useTailwindRoot }]);
   }
 
   try {

processor/transform/tailwind.tsx

@@ -6,21 +6,28 @@ import type { VFile } from 'vfile';
 import { valueToEstree } from 'estree-util-value-to-estree';
 import { visit, SKIP } from 'unist-util-visit';
 
+import { tailwindPrefix } from '../../utils/consts';
 import tailwindBundle from '../../utils/tailwind-bundle';
 import { hasNamedExport, isMDXElement, toAttributes, getExports } from '../utils';
 
 interface TailwindRootOptions {
   components: Record<string, string>;
+  parseRoot?: boolean;
 }
 
 type Visitor =
   | ((node: MdxJsxFlowElement, index: number, parent: BlockContent) => undefined | void)
   | ((node: MdxJsxTextElement, index: number, parent: PhrasingContent) => undefined | void);
 
-const exportTailwindStylesheet = async (tree: Root, components: TailwindRootOptions['components']): Promise<void> => {
+const exportTailwindStylesheet = async (
+  tree: Root,
+  vfile: VFile,
+  { components, parseRoot }: TailwindRootOptions,
+): Promise<void> => {
   if (hasNamedExport(tree, 'stylesheet')) return;
 
-  const stylesheet = (await tailwindBundle(Object.values(components).join('\n\n'), { prefix: '.readme-tailwind' })).css;
+  const stringToParse = [...Object.values(components), parseRoot ? String(vfile) : ''].join('\n\n');
+  const stylesheet = (await tailwindBundle(stringToParse, { prefix: `.${tailwindPrefix}` })).css;
 
   const exportNode: MdxjsEsm = {
     type: 'mdxjsEsm',
@@ -79,7 +86,7 @@ const injectTailwindRoot =
   };
 
 const tailwind: Plugin<[TailwindRootOptions]> =
-  ({ components }) =>
+  ({ components, parseRoot }) =>
   async (tree: Root, vfile: VFile) => {
     const localComponents = getExports(tree).reduce((acc, name) => {
       acc[name] = String(vfile);
@@ -88,7 +95,7 @@ const tailwind: Plugin<[TailwindRootOptions]> =
 
     visit(tree, isMDXElement, injectTailwindRoot({ components: { ...components, ...localComponents } }));
 
-    await exportTailwindStylesheet(tree, { ...components, ...localComponents });
+    await exportTailwindStylesheet(tree, vfile, { components: { ...components, ...localComponents }, parseRoot });
 
     return tree;
   };

utils/consts.ts

@@ -0,0 +1 @@
+export const tailwindPrefix = 'readme-tailwind';