Merge pull request #23 from codeskills-dev/fix/style-quotes

lordelogos · web-flow · commit c695e43ce01b · 2024-03-13T11:25:16.000+01:00
fix(parse-css-in-js-to-inline-css): fix custom style with quotes parsing errors
diff --git a/.changeset/good-apes-confess.md b/.changeset/good-apes-confess.md
@@ -0,0 +1,7 @@
+---
+"md-to-react-email": patch
+---
+
+## Fixes
+
+- Markdown custom styles can't handle quotes properly
diff --git a/__tests__/emailMarkdown.test.tsx b/__tests__/emailMarkdown.test.tsx
@@ -4,9 +4,19 @@ import { EmailMarkdown } from "../src";
 
 describe("ReactEmailMarkdown component renders correctly", () => {
   it("renders the markdown in the correct format for browsers", () => {
-    const actualOutput = render(<EmailMarkdown markdown={`# Hello, World!`} />);
+    const actualOutput = render(
+      <EmailMarkdown
+        markdown={`# Hello, World!
+## Hi, World`}
+        markdownCustomStyles={{
+          h1: { font: '700 23px / 32px "Roobert PRO", system-ui, sans-serif' },
+          h2: { background: 'url("path/to/image")' },
+        }}
+      />
+    );
+
     expect(actualOutput).toMatchInlineSnapshot(
-      `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><div><h1 style="font-weight:500;padding-top:20px;font-size:2.5rem">Hello, World!</h1></div>"`
+      `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><div><h1 style="font:700 23px / 32px 'Roobert PRO', system-ui, sans-serif">Hello, World!</h1><h2 style="background:url('path/to/image')">Hi, World</h2></div>"`
     );
   });
 });
diff --git a/__tests__/parseCssInJsToInlineCss.test.ts b/__tests__/parseCssInJsToInlineCss.test.ts
@@ -33,4 +33,15 @@ describe("parseCssInJsToInlineCss", () => {
     const cssProperties = {};
     expect(parseCssInJsToInlineCss(cssProperties)).toBe("");
   });
+
+  test("should handle CSS properties with escaped quotes", () => {
+    const cssProperties = {
+      font: '700 23px / 32px "Roobert PRO", system-ui, sans-serif',
+      background: "url('path/to/image')",
+    };
+
+    const expectedOutput =
+      "font:700 23px / 32px 'Roobert PRO', system-ui, sans-serif;background:url('path/to/image')";
+    expect(parseCssInJsToInlineCss(cssProperties)).toBe(expectedOutput);
+  });
 });
diff --git a/src/utils.ts b/src/utils.ts
@@ -3,6 +3,13 @@ import { StylesType, initRendererProps } from "./types";
 import { RendererObject } from "marked";
 import { styles } from "./styles";
 
+function escapeQuotes(value: string) {
+  if (value.includes('"')) {
+    return value.replace(/"/g, "'");
+  }
+  return value;
+}
+
 export function camelToKebabCase(str: string): string {
   return str.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
 }
@@ -64,7 +71,8 @@ export function parseCssInJsToInlineCss(
       ) {
         return `${camelToKebabCase(property)}:${value}px`;
       } else {
-        return `${camelToKebabCase(property)}:${value}`;
+        const escapedValue = escapeQuotes(value);
+        return `${camelToKebabCase(property)}:${escapedValue}`;
       }
     })
     .join(";");
