@react-email/preview-server 5.0.0-canary.0 → 5.0.0-canary.2

package/src/actions/email-validation/check-compatibility.ts

@@ -23,6 +23,7 @@ import { getCssPropertyWithValue } from '../../utils/caniemail/get-css-property-
 import { getCssUnit } from '../../utils/caniemail/get-css-unit';
 import { getElementAttributes } from '../../utils/caniemail/get-element-attributes';
 import { getElementNames } from '../../utils/caniemail/get-element-names';
+import { snakeToCamel } from '../../utils/snake-to-camel';
 import { supportEntries } from './caniemail-data';
 
 export interface CompatibilityCheckingResult {
@@ -279,8 +280,7 @@ export const checkCompatibility = async (
 
             if (cssEntryType === 'full property') {
               if (
-                snakeToCamel(property.name) ===
-                  snakeToCamel(entryFullProperty!.name) &&
+                property.name === snakeToCamel(entryFullProperty!.name) &&
                 property.value === entryFullProperty!.value
               ) {
                 addToInsights(property);
@@ -306,14 +306,16 @@ export const checkCompatibility = async (
                   break;
                 }
               }
-            } else if (
-              entryProperties.some(
-                (propertyName) =>
-                  snakeToCamel(property.name) === snakeToCamel(propertyName),
-              )
-            ) {
-              addToInsights(property);
-              break;
+            } else if (cssEntryType === 'property name') {
+              if (
+                entryProperties.some(
+                  (propertyName) =>
+                    snakeToCamel(propertyName) === property.name,
+                )
+              ) {
+                addToInsights(property);
+                break;
+              }
             }
           }
         }
@@ -325,10 +327,4 @@ export const checkCompatibility = async (
   return readableStream;
 };
 
-const snakeToCamel = (snakeStr: string) => {
-  return snakeStr
-    .toLowerCase()
-    .replace(/-+([a-z])/g, (_match, letter) => letter.toUpperCase());
-};
-
 export type AST = ReturnType<typeof parse>;

package/src/actions/render-email-by-path.tsx

@@ -2,7 +2,6 @@
 
 import fs from 'node:fs';
 import path from 'node:path';
-import { styleText } from 'node:util';
 import logSymbols from 'log-symbols';
 import ora, { type Ora } from 'ora';
 import {
@@ -15,6 +14,7 @@ import { convertStackWithSourceMap } from '../utils/convert-stack-with-sourcemap
 import { createJsxRuntime } from '../utils/create-jsx-runtime';
 import { getEmailComponent } from '../utils/get-email-component';
 import { registerSpinnerAutostopping } from '../utils/register-spinner-autostopping';
+import { styleText } from '../utils/style-text';
 import type { ErrorObject } from '../utils/types/error-object';
 
 export interface RenderedEmailMetadata {

package/src/utils/caniemail/ast/get-used-style-properties.spec.ts

@@ -2,22 +2,118 @@ import { parse } from '@babel/parser';
 import { getObjectVariables } from './get-object-variables';
 import { getUsedStyleProperties } from './get-used-style-properties';
 
-test('getUsedStyleProperties()', async () => {
-  const reactCode = `
+describe('getUsedStyleProperties()', async () => {
+  it('handles styles defined as an object in another variable', async () => {
+    const reactCode = `
 <Button style={buttonStyle}>Click me</Button>
 
 const buttonStyle = {
   borderRadius: '5px',
 };
 `;
-  const ast = parse(reactCode, {
-    strictMode: false,
-    errorRecovery: true,
-    sourceType: 'unambiguous',
-    plugins: ['jsx', 'typescript', 'decorators'],
+    const ast = parse(reactCode, {
+      strictMode: false,
+      errorRecovery: true,
+      sourceType: 'unambiguous',
+      plugins: ['jsx', 'typescript', 'decorators'],
+    });
+    const objectVariables = getObjectVariables(ast);
+    expect(
+      await getUsedStyleProperties(ast, reactCode, '', objectVariables),
+    ).toMatchInlineSnapshot(`
+      [
+        {
+          "location": SourceLocation {
+            "end": Position {
+              "column": 21,
+              "index": 91,
+              "line": 5,
+            },
+            "filename": undefined,
+            "identifierName": undefined,
+            "start": Position {
+              "column": 2,
+              "index": 72,
+              "line": 5,
+            },
+          },
+          "name": "borderRadius",
+          "value": "5px",
+        },
+      ]
+    `);
+  });
+
+  it('handles styles defined inline in the attribute', async () => {
+    const reactCode = `
+<Button style={{ borderRadius: '5px', "color": "#fff", padding: 10 }}>Click me</Button>
+`;
+    const ast = parse(reactCode, {
+      strictMode: false,
+      errorRecovery: true,
+      sourceType: 'unambiguous',
+      plugins: ['jsx', 'typescript', 'decorators'],
+    });
+    const objectVariables = getObjectVariables(ast);
+    expect(
+      await getUsedStyleProperties(ast, reactCode, '', objectVariables),
+    ).toMatchInlineSnapshot(`
+      [
+        {
+          "location": SourceLocation {
+            "end": Position {
+              "column": 36,
+              "index": 37,
+              "line": 2,
+            },
+            "filename": undefined,
+            "identifierName": undefined,
+            "start": Position {
+              "column": 17,
+              "index": 18,
+              "line": 2,
+            },
+          },
+          "name": "borderRadius",
+          "value": "5px",
+        },
+        {
+          "location": SourceLocation {
+            "end": Position {
+              "column": 53,
+              "index": 54,
+              "line": 2,
+            },
+            "filename": undefined,
+            "identifierName": undefined,
+            "start": Position {
+              "column": 38,
+              "index": 39,
+              "line": 2,
+            },
+          },
+          "name": "color",
+          "value": "#fff",
+        },
+        {
+          "location": SourceLocation {
+            "end": Position {
+              "column": 66,
+              "index": 67,
+              "line": 2,
+            },
+            "filename": undefined,
+            "identifierName": undefined,
+            "start": Position {
+              "column": 55,
+              "index": 56,
+              "line": 2,
+            },
+          },
+          "name": "padding",
+          "value": "10",
+        },
+      ]
+    `);
   });
-  const objectVariables = getObjectVariables(ast);
-  expect(
-    await getUsedStyleProperties(ast, reactCode, '', objectVariables),
-  ).toMatchSnapshot();
 });

package/src/utils/caniemail/ast/get-used-style-properties.ts

@@ -55,13 +55,9 @@ export const getUsedStyleProperties = async (
     for (const [className, nodePath] of pathClassNameMap.entries()) {
       const styles = inlineStyles(styleSheet, className.split(/\s+/));
       for (const [name, value] of Object.entries(styles)) {
-        const snakeCasedName = name.replaceAll(
-          /[A-Z]/g,
-          (capitalLetter) => `-${capitalLetter}`,
-        );
         styleProperties.push({
           location: nodePath.node.loc,
-          name: snakeCasedName,
+          name,
           value,
         });
       }
@@ -72,24 +68,65 @@ export const getUsedStyleProperties = async (
     JSXAttribute(path) {
       if (
         path.node.value?.type === 'JSXExpressionContainer' &&
-        path.node.value.expression.type === 'Identifier' &&
         path.node.name.name === 'style'
       ) {
-        const styleVariable = objectVariables[path.node.value.expression.name];
-        if (styleVariable) {
-          for (const property of styleVariable) {
-            if (
-              (property.key.type === 'StringLiteral' ||
-                property.key.type === 'Identifier') &&
-              property.value.type === 'StringLiteral'
-            ) {
-              const propertyName =
-                property.key.type === 'StringLiteral'
-                  ? property.key.value
-                  : property.key.name;
+        if (path.node.value.expression.type === 'Identifier') {
+          const styleVariable =
+            objectVariables[path.node.value.expression.name];
+          if (styleVariable) {
+            for (const property of styleVariable) {
+              if (
+                (property.key.type === 'StringLiteral' ||
+                  property.key.type === 'Identifier') &&
+                property.value.type === 'StringLiteral'
+              ) {
+                const propertyName =
+                  property.key.type === 'StringLiteral'
+                    ? property.key.value
+                    : property.key.name;
+                styleProperties.push({
+                  name: propertyName,
+                  value: property.value.value,
+                  location: property.loc,
+                });
+              }
+            }
+          }
+        } else if (path.node.value.expression.type === 'ObjectExpression') {
+          for (const property of path.node.value.expression.properties) {
+            if (property.type === 'ObjectProperty') {
+              if (property.computed) {
+                continue;
+              }
+
+              const name = (() => {
+                if (property.key.type === 'StringLiteral') {
+                  return property.key.value;
+                }
+                if (property.key.type === 'Identifier') {
+                  return property.key.name;
+                }
+              })();
+
+              if (name === undefined) {
+                continue;
+              }
+
+              const value = (() => {
+                if (property.value.type === 'StringLiteral') {
+                  return property.value.value;
+                }
+                if (property.value.type === 'NumericLiteral') {
+                  return property.value.value.toString();
+                }
+              })();
+              if (value === undefined) {
+                continue;
+              }
+
               styleProperties.push({
-                name: propertyName,
-                value: property.value.value,
+                name,
+                value,
                 location: property.loc,
               });
             }

package/src/utils/snake-to-camel.ts

@@ -0,0 +1,5 @@
+export function snakeToCamel(snakeStr: string) {
+  return snakeStr
+    .toLowerCase()
+    .replace(/-+([a-z])/g, (_match, letter) => letter.toUpperCase());
+}

package/src/utils/style-text.ts

@@ -0,0 +1,11 @@
+/**
+ * Centralized fallback for Node versions (<20.12.0) without util.styleText.
+ * Returns the original text when styleText is unavailable.
+ */
+import * as nodeUtil from 'node:util';
+
+type StyleTextFunction = (style: string, text: string) => string;
+
+export const styleText: StyleTextFunction = (nodeUtil as any).styleText
+  ? (nodeUtil as any).styleText
+  : (_: string, text: string) => text;

package/.next/server/chunks/142.js

@@ -1 +0,0 @@
-exports.id=142,exports.ids=[142],exports.modules={8332:(a,b,c)=>{"use strict";c.r(b),c.d(b,{getEmailsDirectoryMetadata:()=>i});var d=c(73024),e=c.n(d),f=c(76760),g=c.n(f);let h=async a=>{let b;try{b=await e().promises.open(a,"r")}catch(a){return console.warn(a),!1}if((await b.stat()).isDirectory())return await b.close(),!1;let{ext:c}=g().parse(a);if(![".js",".tsx",".jsx"].includes(c))return await b.close(),!1;let d=await b.readFile("utf8");await b.close();let f=/\bexport\s+default\b/gm.test(d),h=/\bmodule\.exports\s*=/gm.test(d),i=/\bexport\s+\{[^}]*\bdefault\b[^}]*\}/gm.test(d);return f||h||i},i=async(a,b=!1,c=!1,d=a)=>{if(!e().existsSync(a))return;let f=await e().promises.readdir(a,{withFileTypes:!0}),j=await Promise.all(f.map(b=>h(g().join(a,b.name)))),k=f.filter((a,b)=>j[b]).map(a=>b?a.name:a.name.replace(g().extname(a.name),"")),l=await Promise.all(f.filter(a=>a.isDirectory()&&!a.name.startsWith("_")&&"static"!==a.name).map(c=>i(g().join(a,c.name),b,!0,d))),m={absolutePath:a,relativePath:g().relative(d,a),directoryName:a.split(g().sep).pop(),emailFilenames:k,subDirectories:l};return c?(a=>{let b=a;for(;0===b.emailFilenames.length&&1===b.subDirectories.length;){let a=b.subDirectories[0];b={...a,directoryName:g().join(b.directoryName,a.directoryName)}}return b})(m):m}},25880:(a,b,c)=>{Promise.resolve().then(c.t.bind(c,36100,23)),Promise.resolve().then(c.t.bind(c,99455,23)),Promise.resolve().then(c.t.bind(c,26835,23)),Promise.resolve().then(c.t.bind(c,36726,23)),Promise.resolve().then(c.t.bind(c,33666,23)),Promise.resolve().then(c.t.bind(c,23670,23)),Promise.resolve().then(c.t.bind(c,30006,23)),Promise.resolve().then(c.t.bind(c,41971,23)),Promise.resolve().then(c.t.bind(c,40614,23))},27378:(a,b,c)=>{Promise.resolve().then(c.bind(c,90948))},31810:(a,b,c)=>{"use strict";c.d(b,{EmailsProvider:()=>l,J:()=>k});var d=c(6362),e=c(2179),f=c(14298);let g=(0,f.createServerReference)("7f315bd3dd8795417fdf925fe79dda65942de93ca0",f.callServer,void 0,f.findSourceMapURL,"getEmailsDirectoryMetadataAction");var h=c(70985),i=c(39520);let j=(0,e.createContext)(void 0),k=()=>{let a=(0,e.useContext)(j);if(void 0===a)throw Error("Cannot call `useEmails` outside of an `EmailsContext` provider.");return a},l=a=>{let[b,c]=(0,e.useState)(a.initialEmailsDirectoryMetadata);return h.Hf||h.m4||(0,i.a)(async()=>{let b=await g(a.initialEmailsDirectoryMetadata.absolutePath);if(b)c(b);else throw Error("Hot reloading: unable to find the emails directory to update the sidebar")}),(0,d.jsx)(j.Provider,{value:{emailsDirectoryMetadata:b},children:a.children})}},35191:()=>{},35608:(a,b,c)=>{Promise.resolve().then(c.t.bind(c,5058,23)),Promise.resolve().then(c.t.bind(c,35621,23)),Promise.resolve().then(c.t.bind(c,44325,23)),Promise.resolve().then(c.t.bind(c,20908,23)),Promise.resolve().then(c.t.bind(c,83572,23)),Promise.resolve().then(c.t.bind(c,25928,23)),Promise.resolve().then(c.t.bind(c,57920,23)),Promise.resolve().then(c.t.bind(c,2761,23)),Promise.resolve().then(c.bind(c,98400))},39520:(a,b,c)=>{"use strict";c.d(b,{a:()=>f});var d=c(2179),e=c(80095);let f=a=>{let b=(0,d.useRef)(null);(0,d.useEffect)(()=>{b.current||(b.current=(0,e.io)());let c=b.current;return c.on("reload",b=>{console.debug("Reloading..."),a(b)}),()=>{c.off()}},[a])}},50938:(a,b,c)=>{Promise.resolve().then(c.bind(c,31810))},54208:(a,b,c)=>{"use strict";c.r(b),c.d(b,{default:()=>n,dynamic:()=>m,metadata:()=>l});var d=c(51064);c(35191);var e=c(90948),f=c(8332),g=c(88155),h=c(84858),i=c.n(h),j=c(54629),k=c.n(j);let l={title:"React Email"},m="force-dynamic";async function n({children:a}){let b=await (0,f.getEmailsDirectoryMetadata)(g.Z8);if(void 0===b)throw Error(`Could not find the emails directory specified under ${g.Z8}!`);return(0,d.jsx)("html",{className:`${i().variable} ${k().variable} font-sans`,lang:"en",children:(0,d.jsx)("body",{className:"relative h-screen bg-black text-slate-11 leading-loose selection:bg-cyan-5 selection:text-cyan-12",children:(0,d.jsx)("div",{className:"bg-gradient-to-t from-slate-3 flex flex-col",children:(0,d.jsx)(e.EmailsProvider,{initialEmailsDirectoryMetadata:b,children:a})})})})}},70985:(a,b,c)=>{"use strict";c.d(b,{Hf:()=>d,m4:()=>e}),process.env.USER_PROJECT_LOCATION,process.env.PREVIEW_SERVER_LOCATION,process.env.EMAILS_DIR_ABSOLUTE_PATH;let d="true"===process.env.NEXT_PUBLIC_IS_BUILDING,e="true"===process.env.NEXT_PUBLIC_IS_PREVIEW_DEVELOPMENT},71941:(a,b,c)=>{"use strict";c.r(b),c.d(b,{"7f315bd3dd8795417fdf925fe79dda65942de93ca0":()=>l});var d=c(90466);c(69300);var e=c(73024),f=c.n(e),g=c(76760),h=c.n(g);let i=async a=>{let b;try{b=await f().promises.open(a,"r")}catch(a){return console.warn(a),!1}if((await b.stat()).isDirectory())return await b.close(),!1;let{ext:c}=h().parse(a);if(![".js",".tsx",".jsx"].includes(c))return await b.close(),!1;let d=await b.readFile("utf8");await b.close();let e=/\bexport\s+default\b/gm.test(d),g=/\bmodule\.exports\s*=/gm.test(d),i=/\bexport\s+\{[^}]*\bdefault\b[^}]*\}/gm.test(d);return e||g||i},j=async(a,b=!1,c=!1,d=a)=>{if(!f().existsSync(a))return;let e=await f().promises.readdir(a,{withFileTypes:!0}),g=await Promise.all(e.map(b=>i(h().join(a,b.name)))),k=e.filter((a,b)=>g[b]).map(a=>b?a.name:a.name.replace(h().extname(a.name),"")),l=await Promise.all(e.filter(a=>a.isDirectory()&&!a.name.startsWith("_")&&"static"!==a.name).map(c=>j(h().join(a,c.name),b,!0,d))),m={absolutePath:a,relativePath:h().relative(d,a),directoryName:a.split(h().sep).pop(),emailFilenames:k,subDirectories:l};return c?(a=>{let b=a;for(;0===b.emailFilenames.length&&1===b.subDirectories.length;){let a=b.subDirectories[0];b={...a,directoryName:h().join(b.directoryName,a.directoryName)}}return b})(m):m};var k=c(18012);let l=async(a,b=!1,c=!1,d=a)=>j(a,b,c,d);(0,k.D)([l]),(0,d.A)(l,"7f315bd3dd8795417fdf925fe79dda65942de93ca0",null)},72112:()=>{},86944:(a,b,c)=>{"use strict";c.r(b),c.d(b,{default:()=>e});var d=c(89993);let e=async a=>[{type:"image/x-icon",sizes:"16x16",url:(0,d.fillMetadataSegment)(".",await a.params,"favicon.ico")+""}]},88155:(a,b,c)=>{"use strict";c.d(b,{Hf:()=>g,Z8:()=>f,m4:()=>h,n_:()=>e,w5:()=>d});let d=process.env.USER_PROJECT_LOCATION,e=process.env.PREVIEW_SERVER_LOCATION,f=process.env.EMAILS_DIR_ABSOLUTE_PATH,g="true"===process.env.NEXT_PUBLIC_IS_BUILDING,h="true"===process.env.NEXT_PUBLIC_IS_PREVIEW_DEVELOPMENT},90948:(a,b,c)=>{"use strict";c.d(b,{EmailsProvider:()=>e});var d=c(9756);(0,d.registerClientReference)(function(){throw Error("Attempted to call useEmails() from the server but useEmails is on the client. It's not possible to invoke a client function from the server, it can only be rendered as a Component or passed to props of a Client Component.")},"/home/runner/actions-runner/_work/react-email/react-email/packages/preview-server/src/contexts/emails.tsx","useEmails");let e=(0,d.registerClientReference)(function(){throw Error("Attempted to call EmailsProvider() from the server but EmailsProvider is on the client. It's not possible to invoke a client function from the server, it can only be rendered as a Component or passed to props of a Client Component.")},"/home/runner/actions-runner/_work/react-email/react-email/packages/preview-server/src/contexts/emails.tsx","EmailsProvider")},92665:()=>{}};

package/.next/static/chunks/app/layout-8aa1adb06911a092.js

@@ -1 +0,0 @@
-(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[177],{6:e=>{e.exports={style:{fontFamily:"'Inter', 'Inter Fallback'",fontStyle:"normal"},className:"__className_f367f3",variable:"__variable_f367f3"}},1154:e=>{e.exports={style:{fontFamily:"'sfMono', 'sfMono Fallback'"},className:"__className_a0e4c0",variable:"__variable_a0e4c0"}},3526:(e,t,a)=>{Promise.resolve().then(a.t.bind(a,7979,23)),Promise.resolve().then(a.t.bind(a,6,23)),Promise.resolve().then(a.t.bind(a,1154,23)),Promise.resolve().then(a.bind(a,6779))},5224:(e,t,a)=>{"use strict";a.d(t,{a:()=>i});var r=a(3611),l=a(4512);let i=e=>{let t=(0,r.useRef)(null);(0,r.useEffect)(()=>{t.current||(t.current=(0,l.io)());let a=t.current;return a.on("reload",t=>{console.debug("Reloading..."),e(t)}),()=>{a.off()}},[e])}},6779:(e,t,a)=>{"use strict";a.d(t,{EmailsProvider:()=>_,J:()=>c});var r=a(1275),l=a(3611),i=a(4366);let o=(0,i.createServerReference)("7f315bd3dd8795417fdf925fe79dda65942de93ca0",i.callServer,void 0,i.findSourceMapURL,"getEmailsDirectoryMetadataAction");var s=a(9195),n=a(5224);let d=(0,l.createContext)(void 0),c=()=>{let e=(0,l.useContext)(d);if(void 0===e)throw Error("Cannot call `useEmails` outside of an `EmailsContext` provider.");return e},_=e=>{let[t,a]=(0,l.useState)(e.initialEmailsDirectoryMetadata);return s.Hf||s.m4||(0,n.a)(async()=>{let t=await o(e.initialEmailsDirectoryMetadata.absolutePath);if(t)a(t);else throw Error("Hot reloading: unable to find the emails directory to update the sidebar")}),(0,r.jsx)(d.Provider,{value:{emailsDirectoryMetadata:t},children:e.children})}},7979:()=>{},9195:(e,t,a)=>{"use strict";a.d(t,{Hf:()=>l,m4:()=>i});var r=a(2248);r.env.USER_PROJECT_LOCATION,r.env.PREVIEW_SERVER_LOCATION,r.env.EMAILS_DIR_ABSOLUTE_PATH;let l="true"===r.env.NEXT_PUBLIC_IS_BUILDING,i="true"===r.env.NEXT_PUBLIC_IS_PREVIEW_DEVELOPMENT}},e=>{e.O(0,[807,983,105,713,358],()=>e(e.s=3526)),_N_E=e.O()}]);

package/src/utils/caniemail/ast/__snapshots__/get-used-style-properties.spec.ts.snap

@@ -1,24 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`getUsedStyleProperties() 1`] = `
-[
-  {
-    "location": SourceLocation {
-      "end": Position {
-        "column": 21,
-        "index": 91,
-        "line": 5,
-      },
-      "filename": undefined,
-      "identifierName": undefined,
-      "start": Position {
-        "column": 2,
-        "index": 72,
-        "line": 5,
-      },
-    },
-    "name": "borderRadius",
-    "value": "5px",
-  },
-]
-`;