Revert "wip"

This reverts commit 007f66b.

Author: gabrielmfern

AGENTS.md

@@ -0,0 +1,29 @@
+# React Email - Agent Guidelines
+
+## Build/Test Commands
+- `pnpm build` - Build all packages using Turbo
+- `pnpm test` - Run all tests using Vitest
+- `pnpm test:watch` - Run tests in watch mode
+- `pnpm lint` - Check code with Biome linter
+- `pnpm lint:fix` - Fix linting issues automatically
+- Run single test: `cd packages/[package-name] && pnpm test [test-file]`
+
+## Code Style (Biome Config)
+- **Formatting**: 2 spaces, 80 char line width, single quotes, use `pnpm lint` for checking formatting and linting, and use `pnpm lint:fix` to lint and format all files
+- **Imports**: Use `import type` for types, organize imports automatically
+- **Components**: Use `React.forwardRef` for all package components in `packages` if they support React 18 with proper displayName
+- **Functions**: Always prefer `const ... = () => {...}` rather than `function`
+- **Exports**: Use named exports, avoid default exports because they are hard to refactor
+- **Error Handling**: Use proper TypeScript types, avoid `any`, and only if necessary, use `unknown`
+
+## Project Structure
+- Monorepo with packages in `packages/*`, `apps/*`
+- Each package has `src/index.ts`, component file, and `.spec.tsx` test
+- Tests use Vitest with `@react-email/render` for HTML output testing
+- Use `turbo run` commands for cross-package operations
+- Documentation is written using Mintlify
+- There are apps in `apps` that we publish
+    - `apps/demo`: https://demo.react.email
+    - `apps/docs`: https://react.email/docs
+    - `apps/web`: https://react.email
+

apps/web/components/ensure-matching-variants.spec.tsx

@@ -1,10 +1,57 @@
 import { existsSync } from 'node:fs';
 import path from 'node:path';
 import { pretty, render } from '@react-email/components';
+import { parse, stringify } from 'html-to-ast';
+import type { Attr, IDoc as Doc } from 'html-to-ast/dist/types';
+import postcss from 'postcss';
 import { getComponentElement } from '../src/app/components/get-imported-components-for';
 import { Layout } from './_components/layout';
 import { componentsStructure, getComponentPathFromSlug } from './structure';
 
+type MaybeDoc = ReturnType<typeof parse>[number];
+
+const walkAst = <T extends MaybeDoc>(ast: T[], callback: (doc: T) => void) => {
+  for (const doc of ast) {
+    callback(doc);
+    if (doc.children) {
+      walkAst(doc.children as T[], callback);
+    }
+  }
+};
+
+const getStyleObjectFromString = (style: string): Record<string, string> => {
+  const obj: Record<string, string> = {};
+  const root = postcss.parse(style);
+  root.walkDecls((decl) => {
+    obj[decl.prop] = decl.value;
+  });
+  return obj;
+};
+
+const sortStyle = (style: string): string => {
+  const object = getStyleObjectFromString(style);
+  const styleProperties = Object.keys(object).sort();
+  return styleProperties.map((prop) => `${prop}:${object[prop]}`).join(';');
+};
+
+const getComparableHtml = (html: string): string => {
+  const ast = parse(html);
+  walkAst(ast, (doc) => {
+    const orderedAttributes: Attr = {};
+    if (doc.attrs) {
+      for (const key of Object.keys(doc.attrs).sort()) {
+        orderedAttributes[key] = doc.attrs[key];
+      }
+      doc.attrs = orderedAttributes;
+      if ('style' in doc.attrs) {
+        const style = doc.attrs.style as string;
+        doc.attrs.style = sortStyle(style);
+      }
+    }
+  });
+  return stringify(ast as Doc[]);
+};
+
 describe('copy-paste components', () => {
   const components = componentsStructure.flatMap(
     (category) => category.components,
@@ -31,14 +78,16 @@ describe('copy-paste components', () => {
       ) {
         const tailwindElement = await getComponentElement(tailwindVariantPath);
         const inlineStylesElement = await getComponentElement(
-          inlineStylesVariantPath
+          inlineStylesVariantPath,
         );
-        const tailwindHtml = pretty(
-          await render(<Layout>{tailwindElement}</Layout>),
+        const tailwindHtml = getComparableHtml(
+          await pretty(await render(<Layout>{tailwindElement}</Layout>)),
         );
-        const inlineStylesHtml = pretty(
-          await render(
-            <Layout withTailwind={false}>{inlineStylesElement}</Layout>,
+        const inlineStylesHtml = getComparableHtml(
+          await pretty(
+            await render(
+              <Layout withTailwind={false}>{inlineStylesElement}</Layout>,
+            ),
           ),
         );
         expect(tailwindHtml).toBe(inlineStylesHtml);

apps/web/components/four-images-in-a-grid/inline-styles.tsx

@@ -7,9 +7,9 @@ export const component = (
       <Row>
         <Text
           style={{
+            margin: '0px',
             fontSize: 16,
             lineHeight: '24px',
-            margin: '0px',
             fontWeight: 600,
             color: 'rgb(79,70,229)',
           }}

apps/web/tsconfig.json

@@ -1,10 +1,9 @@
 {
   "extends": "tsconfig/nextjs.json",
   "compilerOptions": {
-    "esModuleInterop": true,
-    "paths": { "@/*": ["./src/*"] },
-    "plugins": [{ "name": "next" }],
     "target": "ES2018",
+    "plugins": [{ "name": "next" }],
+    "paths": { "@/*": ["./src/*"] },
     "types": ["vitest/globals"]
   },
   "include": [

packages/render/src/shared/utils/__snapshots__/pretty.spec.ts.snap

@@ -1135,7 +1135,7 @@ exports[`pretty > should prettify base doucment correctly 1`] = `
 "
 `;
 
-exports[`pretty > style attribute formatting > should print properties per-line once they get too wide 1`] = `
+exports[`pretty > should print style properties per-line once they get too wide 1`] = `
 "<div
   style="
     width:100%;

packages/render/src/shared/utils/pretty.spec.tsx renamed to packages/render/src/shared/utils/pretty.spec.ts

@@ -1,9 +1,6 @@
 import fs from 'node:fs';
 import path from 'node:path';
-import { render } from '../../node';
 import { pretty, wrapText } from './pretty';
-import { component } from '../../../../../apps/web/components/four-images-in-a-grid/inline-styles';
-import { Layout } from '../../../../../apps/web/components/_components/layout';
 
 const stripeHtml = fs.readFileSync(
   path.resolve(__dirname, './tests/stripe-email.html'),
@@ -21,15 +18,6 @@ describe('pretty', () => {
     expect(pretty(document, { lineBreak: '\n' })).toMatchSnapshot();
   });
 
-  test.only('testing', async () => {
-    const html = await render(<Layout>{component}</Layout>);
-    await fs.promises.writeFile(
-      'tailwind copy-paste component.html',
-      html,
-      'utf8',
-    );
-
-    console.log(pretty(html));
   it('should not wrap text inside of <style> and <script> tags', () => {
     const document = `<!DOCTYPE html><html><head><style>body { color: red; }</style></head><body><script>console.log('Hello, world!');</script></body></html>`;
     expect(pretty(document, { lineBreak: '\n' })).toMatchSnapshot();
@@ -42,7 +30,7 @@ describe('pretty', () => {
       expect(pretty(document, { lineBreak: '\n' })).toMatchSnapshot();
     });
 
-    it('should work with an img element', () => {
+    it.only('should work with an img element', () => {
       const document =
         '<img alt="Stagg Electric Kettle" style="border-radius:12px;border:none;display:block;object-fit:cover;outline:none;text-decoration:none;width:100%;" height="288" src="/static/stagg-eletric-kettle.jpg" />';
       expect(pretty(document, { lineBreak: '\n' })).toMatchSnapshot();