react-email - npm Package Compare versions

Comparing version

+42

src/components/mar...s/parse-css-in-js-to-inline-css.spec.ts

		import { parseCssInJsToInlineCss } from './parse-css-in-js-to-inline-css.js';

		describe('parseCssInJsToInlineCss', () => {
		it('returns an empty string for undefined styles', () => {
		expect(parseCssInJsToInlineCss(undefined)).toBe('');
		});

		it('converts camelCase properties to kebab-case', () => {
		expect(parseCssInJsToInlineCss({ fontFamily: 'serif' })).toBe(
		'font-family:serif',
		);
		});

		it('appends px to numeric values of numerical properties', () => {
		expect(parseCssInJsToInlineCss({ fontSize: 16 })).toBe('font-size:16px');
		});

		it('joins multiple declarations with a semicolon', () => {
		expect(parseCssInJsToInlineCss({ color: 'red', fontSize: 16 })).toBe(
		'color:red;font-size:16px',
		);
		});

		it('escapes double quotes so they do not break the style attribute', () => {
		const result = parseCssInJsToInlineCss({
		fontFamily: '"Times New Roman", serif',
		});

		expect(result).toBe('font-family:"Times New Roman", serif');
		expect(result).not.toContain('"');
		});

		it('does not corrupt double-quoted values into apostrophes', () => {
		const result = parseCssInJsToInlineCss({
		fontFamily: '"Times New Roman", serif',
		});

		// `'` is the apostrophe entity and would silently change the
		// quoted font name; a double quote must be escaped as `"`.
		expect(result).not.toContain(''');
		});
		});

+8

-0

CHANGELOG.md

		# react-email

		## 6.6.1

		### Patch Changes

		- 21bac49: Fix `Markdown` corrupting double quotes in `markdownCustomStyles`. Inline style values containing a `"` (e.g. `fontFamily: '"Times New Roman", serif'`) were escaped to the apostrophe entity `'` instead of `"`, silently rewriting the quoted value. Double quotes are now escaped as `"`.
		- Updated dependencies [60a5b09]
		- @react-email/render@2.0.9

		## 6.6.0
		@@ -4,0 +12,0 @@

+3

-3

package.json

		{
		"name": "react-email",
		"version": "6.6.0",
		"version": "6.6.1",
		"description": "A live preview of your emails right in your browser.",
		@@ -40,3 +40,3 @@ "bin": {
		"@babel/traverse": "7.27.0",
		"@react-email/render": ">=2.0.8",
		"@react-email/render": ">=2.0.9",
		"chokidar": "^4.0.3",
		@@ -78,3 +78,3 @@ "commander": "^13.0.0",
		"yalc": "1.0.0-pre.53",
		"@react-email/render": "2.0.8"
		"@react-email/render": "2.0.9"
		},
		@@ -81,0 +81,0 @@ "scripts": {

+1

-1

src/components/markdown/markdown.spec.tsx

		@@ -119,3 +119,3 @@ import { render } from '@react-email/render';
		expect(actualOutput).toMatchInlineSnapshot(`
		"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><div data-id="react-email-markdown"><p><strong style="font:700 23px / 32px 'Roobert PRO', system-ui, sans-serif;background:url('path/to/image')">This is sample bold text in markdown</strong> and <em style="font-style:italic">this is italic text</em></p>
		"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><div data-id="react-email-markdown"><p><strong style="font:700 23px / 32px "Roobert PRO", system-ui, sans-serif;background:url("path/to/image")">This is sample bold text in markdown</strong> and <em style="font-style:italic">this is italic text</em></p>
		</div><!--/$-->"
		@@ -122,0 +122,0 @@ `);

+1

-1

src/components/mar.../utils/parse-css-in-js-to-inline-css.ts

		@@ -7,3 +7,3 @@ function camelToKebabCase(str: string): string {
		if (typeof value === 'string' && value.includes('"')) {
		return value.replace(/"/g, ''');
		return value.replace(/"/g, '"');
		}
		@@ -10,0 +10,0 @@ return value;

dist/cli/index.mjs

Sorry, the diff of this file is too big to display

dist/index.cjs

Sorry, the diff of this file is too big to display

dist/index.mjs

Sorry, the diff of this file is too big to display

New alerts