diff --git a/.changeset/good-apes-confess.md b/.changeset/good-apes-confess.md
new file mode 100644
index 0000000..78855cd
--- /dev/null
+++ 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
index a905fc1..b4d99c9 100644
--- 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();
+ const actualOutput = render(
+
+ );
+
expect(actualOutput).toMatchInlineSnapshot(
- `"Hello, World!
"`
+ `"Hello, World!
Hi, World
"`
);
});
});
diff --git a/__tests__/parseCssInJsToInlineCss.test.ts b/__tests__/parseCssInJsToInlineCss.test.ts
index ce8447e..8817a50 100644
--- 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
index 8bb5383..c832be5 100644
--- 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(";");