@useprint/preview 0.1.1 → 0.1.3

package/src/utils/canidocument/get-compatibility-stats-for-entry.ts

@@ -3,7 +3,7 @@ import type {
   DocumentClient,
   Platform,
   SupportEntry,
-} from '../../actions/document-validation/check-compatibility';
+} from './types';
 
 export type SupportStatus = DetailedSupportStatus['status'];
 

package/src/utils/canidocument/tailwind/get-tailwind-config.ts

@@ -3,7 +3,7 @@ import type { Node } from '@babel/traverse';
 import traverse from '@babel/traverse';
 import * as esbuild from 'esbuild';
 import type { Config as TailwindOriginalConfig } from 'tailwindcss';
-import type { AST } from '../../../actions/document-validation/check-compatibility';
+import type { AST } from '../types';
 import { isErr } from '../../result';
 import { runBundledCode } from '../../run-bundled-code';
 

package/src/utils/canidocument/tailwind/get-tailwind-metadata.spec.ts

@@ -4,10 +4,10 @@ import { parse } from '@babel/parser';
 import { getTailwindMetadata } from './get-tailwind-metadata';
 
 describe('getTailwindMetadata()', () => {
-  test('with the netlify-welcome demo document', async () => {
+  test('with the project-proposal seed document', async () => {
     const documentPath = path.resolve(
       __dirname,
-      '../../../../../../apps/demo/documents/welcome/netlify-welcome.tsx',
+      '../../../../../../packages/preview-server/scripts/utils/default-seed/contracts/project-proposal.tsx',
     );
     const reactCode = await fs.readFile(documentPath, 'utf8');
     const ast = parse(reactCode, {

package/src/utils/canidocument/tailwind/get-tailwind-metadata.ts

@@ -1,6 +1,6 @@
 import traverse from '@babel/traverse';
 import type { JitContext } from 'tailwindcss/lib/lib/setupContextUtils';
-import type { AST } from '../../../actions/document-validation/check-compatibility';
+import type { AST } from '../types';
 import { getTailwindConfig, type TailwindConfig } from './get-tailwind-config';
 import { setupTailwindContext } from './setup-tailwind-context';
 

package/src/utils/canidocument/types.ts

@@ -0,0 +1,12 @@
+import type { Node } from '@babel/traverse';
+
+export type AST = Node;
+
+export type DocumentClient = string;
+
+export type Platform = string;
+
+export type SupportEntry = {
+  notes_by_num?: Record<number, string>;
+  stats: Record<string, Record<string, Record<string, string>[]>>;
+};

package/src/utils/contains-document-template.spec.ts

@@ -76,7 +76,7 @@ describe('containsDocumentTemplate()', () => {
         documentFilenames: [
           'github-access-token',
           'papermark-year-in-review',
-          'vercel-invite-user',
+          'project-brief',
           'yelp-recent-login',
         ],
         subDirectories: [],

package/src/utils/esbuild/renderring-utilities-exporter.ts

@@ -3,6 +3,227 @@ import path from 'node:path';
 import type { Loader, PluginBuild, ResolveOptions } from 'esbuild';
 import { escapeStringForRegex } from './escape-string-for-regex';
 
+const WORKSPACE_DIR_NAMES = ['apps', 'packages', 'examples'];
+
+const fileExists = async (filePath: string) => {
+  try {
+    await fs.access(filePath);
+    return true;
+  } catch {
+    return false;
+  }
+};
+
+const getAncestorDirectories = (startingPath: string) => {
+  const directories: string[] = [];
+  let currentDirectory = path.dirname(startingPath);
+
+  while (true) {
+    directories.push(currentDirectory);
+    const parentDirectory = path.dirname(currentDirectory);
+    if (parentDirectory === currentDirectory) {
+      break;
+    }
+    currentDirectory = parentDirectory;
+  }
+
+  return directories;
+};
+
+const toCssImportPath = (fromFilePath: string, targetFilePath: string) => {
+  const relativePath = path
+    .relative(path.dirname(fromFilePath), targetFilePath)
+    .replaceAll('\\', '/');
+
+  if (relativePath.startsWith('.')) {
+    return relativePath;
+  }
+
+  return `./${relativePath}`;
+};
+
+const readJsonIfExists = async (filePath: string) => {
+  try {
+    return JSON.parse(await fs.readFile(filePath, 'utf8')) as { version?: string };
+  } catch {
+    return undefined;
+  }
+};
+
+const getTailwindV4CssEntry = async (startingPath: string) => {
+  for (const baseDirectory of getAncestorDirectories(startingPath)) {
+    const rootCandidate = path.join(baseDirectory, 'node_modules/tailwindcss/package.json');
+    const rootCss = path.join(baseDirectory, 'node_modules/tailwindcss/index.css');
+    const rootPackageJson = await readJsonIfExists(rootCandidate);
+    if (rootPackageJson?.version?.startsWith('4.') && (await fileExists(rootCss))) {
+      return rootCss;
+    }
+
+    for (const directoryName of WORKSPACE_DIR_NAMES) {
+      const workspaceDir = path.join(baseDirectory, directoryName);
+      let entries: string[] = [];
+      try {
+        entries = await fs.readdir(workspaceDir);
+      } catch {
+        continue;
+      }
+
+      for (const entry of entries) {
+        const packageJsonPath = path.join(
+          workspaceDir,
+          entry,
+          'node_modules/tailwindcss/package.json',
+        );
+        const cssEntryPath = path.join(
+          workspaceDir,
+          entry,
+          'node_modules/tailwindcss/index.css',
+        );
+        const packageJson = await readJsonIfExists(packageJsonPath);
+        if (packageJson?.version?.startsWith('4.') && (await fileExists(cssEntryPath))) {
+          return cssEntryPath;
+        }
+      }
+    }
+  }
+
+  throw new Error(
+    'Could not find a Tailwind CSS v4 installation to compile imported globals.css files.',
+  );
+};
+
+const getTwAnimateCssEntry = async (startingPath: string) => {
+  for (const baseDirectory of getAncestorDirectories(startingPath)) {
+    const candidate = path.join(baseDirectory, 'node_modules/tw-animate-css/dist/tw-animate.css');
+    if (await fileExists(candidate)) {
+      return candidate;
+    }
+  }
+
+  throw new Error(
+    'Could not find tw-animate-css to compile imported globals.css files.',
+  );
+};
+
+type PostcssProcessor = {
+  process: (css: string, options: { from: string }) => Promise<{ css: string }>;
+};
+
+type CssCompiler = {
+  postcss: (plugins: unknown[]) => PostcssProcessor;
+  tailwindPostcss: (options: { base: string }) => unknown;
+};
+
+let cssCompilerPromise: Promise<CssCompiler> | undefined;
+
+const getCssCompiler = async () => {
+  cssCompilerPromise ??= (async () => {
+    const dynamicImport = new Function(
+      'specifier',
+      'return import(specifier)',
+    ) as <T>(specifier: string) => Promise<T>;
+
+    const [postcssModule, tailwindPostcssModule] = await Promise.all([
+      dynamicImport<typeof import('postcss')>('postcss'),
+      dynamicImport('@tailwindcss/postcss'),
+    ]);
+
+    const postcss =
+      (postcssModule as unknown as {
+        default?: (plugins: unknown[]) => PostcssProcessor;
+      }).default ??
+      (postcssModule as unknown as (plugins: unknown[]) => PostcssProcessor);
+    const tailwindPostcss =
+      (tailwindPostcssModule as {
+        default?: (options: { base: string }) => unknown;
+      }).default ??
+      (tailwindPostcssModule as (options: { base: string }) => unknown);
+
+    return { postcss, tailwindPostcss };
+  })();
+
+  return cssCompilerPromise;
+};
+
+const decodeHtmlEntities = (value: string) =>
+  value
+    .replaceAll('&quot;', '"')
+    .replaceAll('&#34;', '"')
+    .replaceAll('&#39;', "'")
+    .replaceAll('&apos;', "'")
+    .replaceAll('&lt;', '<')
+    .replaceAll('&gt;', '>')
+    .replaceAll('&amp;', '&');
+
+const extractHtmlClassNames = (html: string) => {
+  const classNames = new Set<string>();
+  const classAttributePattern = /\sclass=(["'])(.*?)\1/gs;
+
+  for (const match of html.matchAll(classAttributePattern)) {
+    const rawValue = match[2];
+    if (!rawValue) {
+      continue;
+    }
+
+    const decodedValue = decodeHtmlEntities(rawValue);
+
+    for (const className of decodedValue.split(/\s+/)) {
+      if (className) {
+        classNames.add(className);
+      }
+    }
+  }
+
+  return Array.from(classNames);
+};
+
+const compileCssImport = async (filePath: string, classNames: string[]) => {
+  const { postcss, tailwindPostcss } = await getCssCompiler();
+  let css = await fs.readFile(filePath, 'utf8');
+
+  if (/@import\s+["']tailwindcss["'];/g.test(css)) {
+    const tailwindCssEntry = await getTailwindV4CssEntry(filePath);
+    css = css.replace(
+      /@import\s+["']tailwindcss["'];/g,
+      `@import "${toCssImportPath(filePath, tailwindCssEntry)}";`,
+    );
+  }
+
+  if (/@import\s+["']tw-animate-css["'];/g.test(css)) {
+    const twAnimateCssEntry = await getTwAnimateCssEntry(filePath);
+    css = css.replace(
+      /@import\s+["']tw-animate-css["'];/g,
+      `@import "${toCssImportPath(filePath, twAnimateCssEntry)}";`,
+    );
+  }
+
+  if (classNames.length > 0) {
+    css = `${css}\n${classNames
+      .map((className) => `@source inline(${JSON.stringify(className)});`)
+      .join('\n')}\n`;
+  }
+
+  const result = await postcss([
+    tailwindPostcss({
+      base: path.dirname(filePath),
+    }),
+  ]).process(css, { from: filePath });
+
+  return result.css;
+};
+
+export const compileDocumentCssImports = async (
+  filePaths: string[],
+  html: string,
+) => {
+  const uniquePaths = Array.from(new Set(filePaths));
+  const classNames = extractHtmlClassNames(html);
+
+  return Promise.all(
+    uniquePaths.map((filePath) => compileCssImport(filePath, classNames)),
+  );
+};
+
 /**
  * Made to export the `render` function out of the user's document template
  * so that issues like https://github.com/maxscn/useprint/issues/649 don't
@@ -17,6 +238,13 @@ import { escapeStringForRegex } from './escape-string-for-regex';
 export const renderingUtilitiesExporter = (documentTemplates: string[]) => ({
   name: 'rendering-utilities-exporter',
   setup: (b: PluginBuild) => {
+    b.onResolve({ filter: /\.css$/ }, (args) => ({
+      path: path.isAbsolute(args.path)
+        ? args.path
+        : path.resolve(args.resolveDir, args.path),
+      namespace: 'useprint-css',
+    }));
+
     b.onLoad(
       {
         filter: new RegExp(
@@ -30,12 +258,32 @@ export const renderingUtilitiesExporter = (documentTemplates: string[]) => ({
           contents: `${await fs.readFile(pathToFile, 'utf8')};
           export { render } from 'useprint-module-that-will-export-render'
           export { createElement as reactDocumentCreateReactElement } from 'react';
+          export const useprintDocumentStylePaths = Array.from(
+            new Set(globalThis.__useprint_document_css_files ?? [])
+          );
         `,
           loader: path.extname(pathToFile).slice(1) as Loader,
         };
       },
     );
 
+    b.onLoad(
+      { filter: /\.css$/, namespace: 'useprint-css' },
+      async ({ path: pathToCssFile }) => {
+        return {
+          contents: `
+const cssFilePath = ${JSON.stringify(pathToCssFile)};
+globalThis.__useprint_document_css_files ??= [];
+if (!globalThis.__useprint_document_css_files.includes(cssFilePath)) {
+  globalThis.__useprint_document_css_files.push(cssFilePath);
+}
+export default cssFilePath;
+        `,
+        loader: 'js',
+      };
+      },
+    );
+
     b.onResolve(
       { filter: /^useprint-module-that-will-export-render$/ },
       async (args) => {

package/src/utils/get-document-component.spec.ts

@@ -7,9 +7,11 @@ describe('getDocumentComponent()', () => {
       const result = await getDocumentComponent(
         path.resolve(__dirname, './testing/request-response-document.tsx'),
       );
-      if ('error' in result) {
-        console.log(result.error);
-        expect('error' in result, 'there should be no errors').toBe(false);
+      expect('error' in result, 'there should be no errors').toBe(false);
+
+      if (!('error' in result)) {
+        expect(result.documentComponent).toBeTruthy();
+        expect(result.sourceMapToOriginalFile).toBeTruthy();
       }
     });
   });
@@ -18,7 +20,7 @@ describe('getDocumentComponent()', () => {
     const result = await getDocumentComponent(
       path.resolve(
         __dirname,
-        '../../../../apps/demo/documents/notifications/vercel-invite-user.tsx',
+        '../../scripts/utils/default-seed/contracts/project-proposal.tsx',
       ),
     );
 

package/src/utils/get-document-component.ts

@@ -4,7 +4,10 @@ import { type BuildFailure, build, type OutputFile } from 'esbuild';
 import type React from 'react';
 import type { RawSourceMap } from 'source-map-js';
 import { z } from 'zod';
-import { renderingUtilitiesExporter } from './esbuild/renderring-utilities-exporter';
+import {
+  compileDocumentCssImports,
+  renderingUtilitiesExporter,
+} from './esbuild/renderring-utilities-exporter';
 import { improveErrorWithSourceMap } from './improve-error-with-sourcemap';
 import { isErr } from './result';
 import { runBundledCode } from './run-bundled-code';
@@ -15,8 +18,29 @@ const DocumentComponentModule = z.object({
   default: z.any(),
   render: z.function(),
   reactDocumentCreateReactElement: z.function(),
+  useprintDocumentStylePaths: z.array(z.string()).optional(),
 });
 
+const injectStylesIntoHtml = (html: string, styles: string[]) => {
+  if (styles.length === 0) {
+    return html;
+  }
+
+  const styleMarkup = styles
+    .map((css) => `<style data-useprint-document>${css.replaceAll('</style', '<\\/style')}</style>`)
+    .join('');
+
+  if (html.includes('</head>')) {
+    return html.replace('</head>', `${styleMarkup}</head>`);
+  }
+
+  if (html.includes('<html')) {
+    return html.replace(/<html([^>]*)>/, `<html$1><head>${styleMarkup}</head>`);
+  }
+
+  return `${styleMarkup}${html}`;
+};
+
 export const getDocumentComponent = async (
   documentPath: string,
 ): Promise<
@@ -32,9 +56,7 @@ export const getDocumentComponent = async (
   | { error: ErrorObject }
 > => {
   let outputFiles: OutputFile[];
-  console.log("constructing data")
   try {
-    console.log("starting esbuild")
     const buildData = await build({
       bundle: true,
       entryPoints: [documentPath],
@@ -52,7 +74,6 @@ export const getDocumentComponent = async (
       outdir: 'stdout', // just a stub for esbuild, it won't actually write to this folder
       sourcemap: 'external',
     });
-    console.log("built file")
     outputFiles = buildData.outputFiles;
   } catch (exception) {
     const buildFailure = exception as BuildFailure;
@@ -65,18 +86,36 @@ export const getDocumentComponent = async (
       },
     };
   }
-  console.log("got data")
-  const sourceMapFile = outputFiles[0]!;
-  const bundledDocumentFile = outputFiles[1]!;
+  const sourceMapFile = outputFiles.find((file) => file.path.endsWith('.map'));
+  const bundledDocumentFile = outputFiles.find(
+    (file) => !file.path.endsWith('.map'),
+  );
+
+  if (!sourceMapFile || !bundledDocumentFile) {
+    return {
+      error: {
+        message: `Could not build the document component at ${documentPath}: esbuild did not return both bundled code and a sourcemap.`,
+        name: 'BuildFailure',
+        stack: undefined,
+      },
+    };
+  }
+
   const builtDocumentCode = bundledDocumentFile.text;
 
   const sourceMapToDocument = JSON.parse(sourceMapFile.text) as RawSourceMap;
   // because it will have a path like <tsconfigLocation>/stdout/document.js.map
   sourceMapToDocument.sourceRoot = path.resolve(sourceMapFile.path, '../..');
-  sourceMapToDocument.sources = sourceMapToDocument.sources.map((source) =>
-    path.resolve(sourceMapFile.path, '..', source),
+  sourceMapToDocument.sources = (sourceMapToDocument.sources ?? []).map(
+    (source) => path.resolve(sourceMapFile.path, '..', source),
   );
 
+  (
+    globalThis as typeof globalThis & {
+      __useprint_document_css_files?: string[];
+    }
+  ).__useprint_document_css_files = [];
+
   const runningResult = runBundledCode(builtDocumentCode, documentPath);
 
   if (isErr(runningResult)) {
@@ -128,7 +167,19 @@ export const getDocumentComponent = async (
 
   return {
     documentComponent: componentModule.default as DocumentComponent,
-    render: componentModule.render as typeof render,
+    render: (async (...args: Parameters<typeof render>) => {
+      const html = await (
+        componentModule.render as typeof render
+      )(...args);
+      const documentStyles = await compileDocumentCssImports(
+        componentModule.useprintDocumentStylePaths ?? [],
+        html,
+      );
+      return injectStylesIntoHtml(
+        html,
+        documentStyles,
+      );
+    }) as typeof render,
     createElement:
       componentModule.reactDocumentCreateReactElement as typeof React.createElement,
 

package/src/utils/get-documents-directory-metadata.spec.ts

@@ -4,77 +4,40 @@ import { getDocumentsDirectoryMetadata } from './get-documents-directory-metadat
 test('getDocumentsDirectoryMetadata on demo documents', async () => {
   const documentsDirectoryPath = path.resolve(
     __dirname,
-    '../../../../apps/demo/documents',
+    '../../scripts/utils/default-seed',
   );
   expect(await getDocumentsDirectoryMetadata(documentsDirectoryPath)).toEqual({
     absolutePath: documentsDirectoryPath,
-    directoryName: 'documents',
+    directoryName: 'default-seed',
     relativePath: '',
     documentFilenames: [],
     subDirectories: [
       {
-        absolutePath: `${documentsDirectoryPath}/magic-links`,
-        directoryName: 'magic-links',
-        relativePath: 'magic-links',
-        documentFilenames: [
-          'aws-verify-document',
-          'linear-login-code',
-          'notion-magic-link',
-          'plaid-verify-identity',
-          'raycast-magic-link',
-          'slack-confirm',
-        ],
+        absolutePath: `${documentsDirectoryPath}/contracts`,
+        directoryName: 'contracts',
+        relativePath: 'contracts',
+        documentFilenames: ['project-proposal'],
         subDirectories: [],
       },
       {
-        absolutePath: `${documentsDirectoryPath}/newsletters`,
-        directoryName: 'newsletters',
-        relativePath: 'newsletters',
-        documentFilenames: [
-          'codepen-challengers',
-          'google-play-policy-update',
-          'stack-overflow-tips',
-        ],
+        absolutePath: `${documentsDirectoryPath}/finance`,
+        directoryName: 'finance',
+        relativePath: 'finance',
+        documentFilenames: ['payment-summary'],
         subDirectories: [],
       },
       {
-        absolutePath: `${documentsDirectoryPath}/notifications`,
-        directoryName: 'notifications',
-        relativePath: 'notifications',
-        documentFilenames: [
-          'github-access-token',
-          'papermark-year-in-review',
-          'vercel-invite-user',
-          'yelp-recent-login',
-        ],
+        absolutePath: `${documentsDirectoryPath}/reports`,
+        directoryName: 'reports',
+        relativePath: 'reports',
+        documentFilenames: ['incident-report'],
         subDirectories: [],
       },
       {
-        absolutePath: `${documentsDirectoryPath}/receipts`,
-        directoryName: 'receipts',
-        relativePath: 'receipts',
-        documentFilenames: ['apple-receipt', 'nike-receipt'],
-        subDirectories: [],
-      },
-      {
-        absolutePath: `${documentsDirectoryPath}/reset-password`,
-        directoryName: 'reset-password',
-        relativePath: 'reset-password',
-        documentFilenames: ['dropbox-reset-password', 'twitch-reset-password'],
-        subDirectories: [],
-      },
-      {
-        absolutePath: `${documentsDirectoryPath}/reviews`,
-        directoryName: 'reviews',
-        relativePath: 'reviews',
-        documentFilenames: ['airbnb-review', 'amazon-review'],
-        subDirectories: [],
-      },
-      {
-        absolutePath: `${documentsDirectoryPath}/welcome`,
-        directoryName: 'welcome',
-        relativePath: 'welcome',
-        documentFilenames: ['koala-welcome', 'netlify-welcome', 'stripe-welcome'],
+        absolutePath: `${documentsDirectoryPath}/updates`,
+        directoryName: 'updates',
+        relativePath: 'updates',
+        documentFilenames: ['release-notes'],
         subDirectories: [],
       },
     ],

package/src/utils/iframe-processing.spec.ts

@@ -15,7 +15,7 @@ describe('iframe-processing', () => {
   });
 
   describe('applyMarginToIframeSrcDoc', () => {
-    it('applies margin to first unbreakable element', () => {
+    it('injects a style rule for the first unbreakable element', () => {
       const srcDoc = `
         <html>
           <body>
@@ -26,24 +26,24 @@ describe('iframe-processing', () => {
 
       const result = applyMarginToIframeSrcDoc(srcDoc, 50);
 
+      expect(result).toContain('.useprint-unbreakable:first-of-type');
       expect(result).toContain('margin-top: 50px !important');
       expect(result).toContain('useprint-unbreakable');
     });
 
-    it('replaces existing margin-top', () => {
+    it('inserts the style rule into an existing head', () => {
       const srcDoc = `
         <html>
-          <body>
-            <div class="useprint-unbreakable" style="margin-top: 10px; color: red;">Content</div>
-          </body>
+          <head><meta charset="utf-8" /></head>
+          <body><div class="useprint-unbreakable">Content</div></body>
         </html>
       `;
 
       const result = applyMarginToIframeSrcDoc(srcDoc, 50);
 
+      expect(result).toContain('<meta charset="utf-8" />');
+      expect(result).toContain('</style></head>');
       expect(result).toContain('margin-top: 50px !important');
-      expect(result).toContain('color: red');
-      expect(result).not.toContain('margin-top: 10px');
     });
 
     it('preserves existing styles', () => {
@@ -62,7 +62,7 @@ describe('iframe-processing', () => {
       expect(result).toContain('margin-top: 30px !important');
     });
 
-    it('handles srcDoc without unbreakable elements', () => {
+    it('creates a head element when the document only has a body', () => {
       const srcDoc = `
         <html>
           <body>
@@ -73,28 +73,16 @@ describe('iframe-processing', () => {
 
       const result = applyMarginToIframeSrcDoc(srcDoc, 50);
 
-      expect(result).toBe(srcDoc);
+      expect(result).toContain('<head><style>');
+      expect(result).toContain('Regular content');
     });
 
-    it('handles empty srcDoc', () => {
+    it('handles empty srcDoc by prepending a head', () => {
       const srcDoc = '';
       const result = applyMarginToIframeSrcDoc(srcDoc, 50);
 
-      expect(result).toBe(srcDoc);
-    });
-
-    it('handles element without existing style attribute', () => {
-      const srcDoc = `
-        <html>
-          <body>
-            <div class="useprint-unbreakable">Content</div>
-          </body>
-        </html>
-      `;
-
-      const result = applyMarginToIframeSrcDoc(srcDoc, 25);
-
-      expect(result).toContain('margin-top: 25px !important');
+      expect(result).toContain('<head><style>');
+      expect(result).toContain('margin-top: 50px !important');
     });
   });