react-email 6.6.6 → 6.6.7

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # react-email
 
+## 6.6.7
+
+### Patch Changes
+
+- 6a5ff2a: Escape double quotes in `Markdown` link `href`/`title` and image `title` attributes, matching the escaping already applied to image `src`/`alt`. A markdown title like `'The "Complete" Guide'` no longer breaks out of the attribute in the rendered HTML.
+- 4cf4c72: Fix two-value logical shorthands whose values aren't all numeric (e.g. `margin-inline: 1rem auto`, `padding-inline: 10px calc(1rem + 2px)`) producing invalid duplicated longhands. They are now split into the correct per-side declarations.
+- fa77d55: Merge declarations when the same class is defined by multiple Tailwind rules (e.g. a preset and a child config override).
+- fa52a04: Convert Tailwind's `rgba(r g b / a)` syntax to `rgb(r,g,b,a)` syntax for better email client support.
+- fc8318c: Fix Tailwind classes not being inlined into styles for `<Section>`, `<Column>` and `<Row>`.
+
 ## 6.6.6
 
 ### Patch Changes

package/dist/cli/index.mjs

@@ -6523,7 +6523,7 @@ const getEmailsDirectoryMetadata = async (absolutePathToEmailsDirectory, keepFil
 //#region package.json
 var package_default = {
 	name: "react-email",
-	version: "6.6.6",
+	version: "6.6.7",
 	description: "A live preview of your emails right in your browser.",
 	bin: { "email": "./dist/cli/index.mjs" },
 	type: "module",

package/dist/index.cjs

@@ -17821,11 +17821,11 @@ const Markdown = react.forwardRef(({ children, markdownContainerStyles, markdown
 		return `<hr${parseCssInJsToInlineCss(finalStyles.hr) !== "" ? ` style="${parseCssInJsToInlineCss(finalStyles.hr)}"` : ""} />\n`;
 	};
 	renderer.image = ({ href, text, title }) => {
-		return `<img src="${href.replaceAll("\"", "&quot;")}" alt="${text.replaceAll("\"", "&quot;")}"${title ? ` title="${title}"` : ""}${parseCssInJsToInlineCss(finalStyles.image) !== "" ? ` style="${parseCssInJsToInlineCss(finalStyles.image)}"` : ""}>`;
+		return `<img src="${href.replaceAll("\"", "&quot;")}" alt="${text.replaceAll("\"", "&quot;")}"${title ? ` title="${title.replaceAll("\"", "&quot;")}"` : ""}${parseCssInJsToInlineCss(finalStyles.image) !== "" ? ` style="${parseCssInJsToInlineCss(finalStyles.image)}"` : ""}>`;
 	};
 	renderer.link = ({ href, title, tokens }) => {
 		const text = renderer.parser.parseInline(tokens);
-		return `<a href="${href}" target="_blank"${title ? ` title="${title}"` : ""}${parseCssInJsToInlineCss(finalStyles.link) !== "" ? ` style="${parseCssInJsToInlineCss(finalStyles.link)}"` : ""}>${text}</a>`;
+		return `<a href="${href.replaceAll("\"", "&quot;")}" target="_blank"${title ? ` title="${title.replaceAll("\"", "&quot;")}"` : ""}${parseCssInJsToInlineCss(finalStyles.link) !== "" ? ` style="${parseCssInJsToInlineCss(finalStyles.link)}"` : ""}>${text}</a>`;
 	};
 	renderer.listitem = ({ tokens, loose }) => {
 		const hasNestedList = tokens.some((token) => token.type === "list");
@@ -37702,6 +37702,11 @@ function extractRulesPerClass(root, classes) {
 	const classSet = new Set(classes);
 	const inlinableRules = /* @__PURE__ */ new Map();
 	const nonInlinableRules = /* @__PURE__ */ new Map();
+	const appendRule = (map, className, rule) => {
+		const existing = map.get(className);
+		if (existing) existing.push(rule);
+		else map.set(className, [rule]);
+	};
 	walk(root, {
 		visit: "Rule",
 		enter(rule) {
@@ -37713,13 +37718,13 @@ function extractRulesPerClass(root, classes) {
 				}
 			});
 			if (isRuleInlinable(rule)) {
-				for (const className of selectorClasses) if (classSet.has(className)) inlinableRules.set(className, rule);
+				for (const className of selectorClasses) if (classSet.has(className)) appendRule(inlinableRules, className, rule);
 			} else {
 				const { inlinablePart, nonInlinablePart } = splitMixedRule(rule);
 				for (const className of selectorClasses) {
 					if (!classSet.has(className)) continue;
-					if (inlinablePart) inlinableRules.set(className, inlinablePart);
-					if (nonInlinablePart) nonInlinableRules.set(className, nonInlinablePart);
+					if (inlinablePart) appendRule(inlinableRules, className, inlinablePart);
+					if (nonInlinablePart) appendRule(nonInlinableRules, className, nonInlinablePart);
 				}
 			}
 		}
@@ -37880,7 +37885,7 @@ function makeInlineStylesFor(inlinableRules, customProperties) {
 function inlineStyles(styleSheet, classes) {
 	const { inlinable: inlinableRules } = extractRulesPerClass(styleSheet, classes);
 	const customProperties = getCustomProperties(styleSheet);
-	return makeInlineStylesFor(Array.from(inlinableRules.values()), customProperties);
+	return makeInlineStylesFor(Array.from(inlinableRules.values()).flat(), customProperties);
 }
 //#endregion
 //#region src/components/tailwind/utils/css/resolve-all-css-variables.ts
@@ -38152,7 +38157,7 @@ function oklchToRgb(oklch) {
 }
 function separteShorthandDeclaration(shorthandToReplace, [start, end]) {
 	shorthandToReplace.property = start;
-	const values = shorthandToReplace.value.type === "Value" ? shorthandToReplace.value.children.toArray().filter((child) => child.type === "Dimension" || child.type === "Number" || child.type === "Percentage") : [shorthandToReplace.value];
+	const values = shorthandToReplace.value.type === "Value" ? shorthandToReplace.value.children.toArray().filter((child) => child.type !== "Operator" && child.type !== "WhiteSpace") : [shorthandToReplace.value];
 	let endValue = shorthandToReplace.value;
 	if (values.length === 2) {
 		endValue = {
@@ -38240,7 +38245,7 @@ function sanitizeDeclarations(nodeContainingDeclarations) {
 						});
 						funcParentListItem.data = rgbNode(rgb.r, rgb.g, rgb.b, a);
 					}
-					if (func.name === "rgb") {
+					if (func.name === "rgb" || func.name === "rgba") {
 						let r;
 						let g;
 						let b;
@@ -38676,12 +38681,15 @@ const componentsToTreatAsElements = [
 	Button,
 	CodeBlock,
 	CodeInline,
+	Column,
 	Container,
 	Heading,
 	Hr,
 	Img,
 	Link,
 	Preview,
+	Row,
+	Section,
 	Text
 ];
 const isComponent = (element) => {
@@ -38723,10 +38731,10 @@ function cloneElementWithInlinedStyles(element, inlinableRules, nonInlinableRule
 		const residualClasses = [];
 		const rules = [];
 		for (const className of classes) {
-			const rule = inlinableRules.get(className);
-			if (rule) rules.push(rule);
+			const classRules = inlinableRules.get(className);
+			if (classRules) rules.push(...classRules);
 			if (nonInlinableRules.has(className)) residualClasses.push(className);
-			else if (!rule) residualClasses.push(className);
+			else if (!classRules) residualClasses.push(className);
 		}
 		propsToOverwrite.style = {
 			...makeInlineStylesFor(rules, customProperties),
@@ -40663,7 +40671,7 @@ function Tailwind({ children, config, theme, utility }) {
 	const customProperties = getCustomProperties(styleSheet);
 	const nonInlineStyles = {
 		type: "StyleSheet",
-		children: new List().fromArray(Array.from(nonInlinableRules.values()))
+		children: new List().fromArray(Array.from(nonInlinableRules.values()).flat())
 	};
 	sanitizeNonInlinableRules(nonInlineStyles);
 	downlevelForEmailClients(nonInlineStyles);

package/dist/index.mjs

@@ -17800,11 +17800,11 @@ const Markdown = React$1.forwardRef(({ children, markdownContainerStyles, markdo
 		return `<hr${parseCssInJsToInlineCss(finalStyles.hr) !== "" ? ` style="${parseCssInJsToInlineCss(finalStyles.hr)}"` : ""} />\n`;
 	};
 	renderer.image = ({ href, text, title }) => {
-		return `<img src="${href.replaceAll("\"", "&quot;")}" alt="${text.replaceAll("\"", "&quot;")}"${title ? ` title="${title}"` : ""}${parseCssInJsToInlineCss(finalStyles.image) !== "" ? ` style="${parseCssInJsToInlineCss(finalStyles.image)}"` : ""}>`;
+		return `<img src="${href.replaceAll("\"", "&quot;")}" alt="${text.replaceAll("\"", "&quot;")}"${title ? ` title="${title.replaceAll("\"", "&quot;")}"` : ""}${parseCssInJsToInlineCss(finalStyles.image) !== "" ? ` style="${parseCssInJsToInlineCss(finalStyles.image)}"` : ""}>`;
 	};
 	renderer.link = ({ href, title, tokens }) => {
 		const text = renderer.parser.parseInline(tokens);
-		return `<a href="${href}" target="_blank"${title ? ` title="${title}"` : ""}${parseCssInJsToInlineCss(finalStyles.link) !== "" ? ` style="${parseCssInJsToInlineCss(finalStyles.link)}"` : ""}>${text}</a>`;
+		return `<a href="${href.replaceAll("\"", "&quot;")}" target="_blank"${title ? ` title="${title.replaceAll("\"", "&quot;")}"` : ""}${parseCssInJsToInlineCss(finalStyles.link) !== "" ? ` style="${parseCssInJsToInlineCss(finalStyles.link)}"` : ""}>${text}</a>`;
 	};
 	renderer.listitem = ({ tokens, loose }) => {
 		const hasNestedList = tokens.some((token) => token.type === "list");
@@ -37681,6 +37681,11 @@ function extractRulesPerClass(root, classes) {
 	const classSet = new Set(classes);
 	const inlinableRules = /* @__PURE__ */ new Map();
 	const nonInlinableRules = /* @__PURE__ */ new Map();
+	const appendRule = (map, className, rule) => {
+		const existing = map.get(className);
+		if (existing) existing.push(rule);
+		else map.set(className, [rule]);
+	};
 	walk(root, {
 		visit: "Rule",
 		enter(rule) {
@@ -37692,13 +37697,13 @@ function extractRulesPerClass(root, classes) {
 				}
 			});
 			if (isRuleInlinable(rule)) {
-				for (const className of selectorClasses) if (classSet.has(className)) inlinableRules.set(className, rule);
+				for (const className of selectorClasses) if (classSet.has(className)) appendRule(inlinableRules, className, rule);
 			} else {
 				const { inlinablePart, nonInlinablePart } = splitMixedRule(rule);
 				for (const className of selectorClasses) {
 					if (!classSet.has(className)) continue;
-					if (inlinablePart) inlinableRules.set(className, inlinablePart);
-					if (nonInlinablePart) nonInlinableRules.set(className, nonInlinablePart);
+					if (inlinablePart) appendRule(inlinableRules, className, inlinablePart);
+					if (nonInlinablePart) appendRule(nonInlinableRules, className, nonInlinablePart);
 				}
 			}
 		}
@@ -37859,7 +37864,7 @@ function makeInlineStylesFor(inlinableRules, customProperties) {
 function inlineStyles(styleSheet, classes) {
 	const { inlinable: inlinableRules } = extractRulesPerClass(styleSheet, classes);
 	const customProperties = getCustomProperties(styleSheet);
-	return makeInlineStylesFor(Array.from(inlinableRules.values()), customProperties);
+	return makeInlineStylesFor(Array.from(inlinableRules.values()).flat(), customProperties);
 }
 //#endregion
 //#region src/components/tailwind/utils/css/resolve-all-css-variables.ts
@@ -38131,7 +38136,7 @@ function oklchToRgb(oklch) {
 }
 function separteShorthandDeclaration(shorthandToReplace, [start, end]) {
 	shorthandToReplace.property = start;
-	const values = shorthandToReplace.value.type === "Value" ? shorthandToReplace.value.children.toArray().filter((child) => child.type === "Dimension" || child.type === "Number" || child.type === "Percentage") : [shorthandToReplace.value];
+	const values = shorthandToReplace.value.type === "Value" ? shorthandToReplace.value.children.toArray().filter((child) => child.type !== "Operator" && child.type !== "WhiteSpace") : [shorthandToReplace.value];
 	let endValue = shorthandToReplace.value;
 	if (values.length === 2) {
 		endValue = {
@@ -38219,7 +38224,7 @@ function sanitizeDeclarations(nodeContainingDeclarations) {
 						});
 						funcParentListItem.data = rgbNode(rgb.r, rgb.g, rgb.b, a);
 					}
-					if (func.name === "rgb") {
+					if (func.name === "rgb" || func.name === "rgba") {
 						let r;
 						let g;
 						let b;
@@ -38655,12 +38660,15 @@ const componentsToTreatAsElements = [
 	Button,
 	CodeBlock,
 	CodeInline,
+	Column,
 	Container,
 	Heading,
 	Hr,
 	Img,
 	Link,
 	Preview,
+	Row,
+	Section,
 	Text
 ];
 const isComponent = (element) => {
@@ -38702,10 +38710,10 @@ function cloneElementWithInlinedStyles(element, inlinableRules, nonInlinableRule
 		const residualClasses = [];
 		const rules = [];
 		for (const className of classes) {
-			const rule = inlinableRules.get(className);
-			if (rule) rules.push(rule);
+			const classRules = inlinableRules.get(className);
+			if (classRules) rules.push(...classRules);
 			if (nonInlinableRules.has(className)) residualClasses.push(className);
-			else if (!rule) residualClasses.push(className);
+			else if (!classRules) residualClasses.push(className);
 		}
 		propsToOverwrite.style = {
 			...makeInlineStylesFor(rules, customProperties),
@@ -40642,7 +40650,7 @@ function Tailwind({ children, config, theme, utility }) {
 	const customProperties = getCustomProperties(styleSheet);
 	const nonInlineStyles = {
 		type: "StyleSheet",
-		children: new List().fromArray(Array.from(nonInlinableRules.values()))
+		children: new List().fromArray(Array.from(nonInlinableRules.values()).flat())
 	};
 	sanitizeNonInlinableRules(nonInlineStyles);
 	downlevelForEmailClients(nonInlineStyles);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-email",
-  "version": "6.6.6",
+  "version": "6.6.7",
   "description": "A live preview of your emails right in your browser.",
   "bin": {
     "email": "./dist/cli/index.mjs"

package/src/components/markdown/markdown.spec.tsx

@@ -131,6 +131,18 @@ console.log(\`Hello, $\{name}!\`);
     `);
   });
 
+  it('escapes double quotes in link/image href and title attributes', async () => {
+    const actualOutput = await render(
+      <Markdown>
+        {`[guide](https://example.com/?q="a" 'The "Complete" Guide') and ![logo](https://cdn.example.com/a.png 'Acme "logo"')`}
+      </Markdown>,
+    );
+    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><a href="https://example.com/?q=&quot;a&quot;" target="_blank" title="The &quot;Complete&quot; Guide" style="color:#007bff;text-decoration:underline;background-color:transparent">guide</a> and <img src="https://cdn.example.com/a.png" alt="logo" title="Acme &quot;logo&quot;"></p>
+      </div><!--/$-->"
+    `);
+  });
+
   it('renders lists in the correct format for browsers', async () => {
     const actualOutput = await render(
       <Markdown>

package/src/components/markdown/markdown.tsx

@@ -98,7 +98,7 @@ export const Markdown = React.forwardRef<HTMLDivElement, MarkdownProps>(
 
     renderer.image = ({ href, text, title }) => {
       return `<img src="${href.replaceAll('"', '&quot;')}" alt="${text.replaceAll('"', '&quot;')}"${
-        title ? ` title="${title}"` : ''
+        title ? ` title="${title.replaceAll('"', '&quot;')}"` : ''
       }${
         parseCssInJsToInlineCss(finalStyles.image) !== ''
           ? ` style="${parseCssInJsToInlineCss(finalStyles.image)}"`
@@ -109,8 +109,8 @@ export const Markdown = React.forwardRef<HTMLDivElement, MarkdownProps>(
     renderer.link = ({ href, title, tokens }) => {
       const text = renderer.parser.parseInline(tokens);
 
-      return `<a href="${href}" target="_blank"${
-        title ? ` title="${title}"` : ''
+      return `<a href="${href.replaceAll('"', '&quot;')}" target="_blank"${
+        title ? ` title="${title.replaceAll('"', '&quot;')}"` : ''
       }${
         parseCssInJsToInlineCss(finalStyles.link) !== ''
           ? ` style="${parseCssInJsToInlineCss(finalStyles.link)}"`

package/src/components/tailwind/inline-styles.spec.ts

@@ -0,0 +1,49 @@
+import { parse, type StyleSheet } from 'css-tree';
+import { inlineStyles } from './inline-styles.js';
+
+describe('inlineStyles()', () => {
+  it('inlines a single rule for a class', () => {
+    const styleSheet = parse(`
+      .box { border-radius: 8px; background-color: white; padding: 16px; }
+    `) as StyleSheet;
+
+    expect(inlineStyles(styleSheet, ['box'])).toMatchInlineSnapshot(`
+      {
+        "backgroundColor": "white",
+        "borderRadius": "8px",
+        "padding": "16px",
+      }
+    `);
+  });
+
+  it('merges declarations when the same class is defined across multiple rules', () => {
+    // Regression for #3628: a Tailwind preset and a child config both defining `.box`.
+    const styleSheet = parse(`
+      .box { border-radius: 8px; background-color: white; padding: 16px; }
+      .box { background-color: red; }
+    `) as StyleSheet;
+
+    expect(inlineStyles(styleSheet, ['box'])).toMatchInlineSnapshot(`
+      {
+        "backgroundColor": "red",
+        "borderRadius": "8px",
+        "padding": "16px",
+      }
+    `);
+  });
+
+  it("keeps a class's own cascade order when its rules are split by another class", () => {
+    const styleSheet = parse(`
+      .box { color: red; }
+      .other { font-weight: bold; }
+      .box { color: blue; }
+    `) as StyleSheet;
+
+    expect(inlineStyles(styleSheet, ['box', 'other'])).toMatchInlineSnapshot(`
+      {
+        "color": "blue",
+        "fontWeight": "bold",
+      }
+    `);
+  });
+});

package/src/components/tailwind/inline-styles.ts

@@ -15,7 +15,7 @@ export function inlineStyles(
   const customProperties = getCustomProperties(styleSheet);
 
   return makeInlineStylesFor(
-    Array.from(inlinableRules.values()),
+    Array.from(inlinableRules.values()).flat(),
     customProperties,
   );
 }

package/src/components/tailwind/tailwind.spec.tsx

@@ -4,11 +4,14 @@ import React from 'react';
 import plugin from 'tailwindcss/plugin';
 import { Body } from '../body/index.js';
 import { Button } from '../button/index.js';
+import { Column } from '../column/index.js';
 import { Head } from '../head/index.js';
 import { Heading } from '../heading/index.js';
 import { Hr } from '../hr/index.js';
 import { Html } from '../html/index.js';
 import { Link } from '../link/index.js';
+import { Row } from '../row/index.js';
+import { Section } from '../section/index.js';
 import type { TailwindConfig } from './tailwind.js';
 import { Tailwind } from './tailwind.js';
 
@@ -261,6 +264,45 @@ describe('Tailwind component', () => {
     );
   });
 
+  it('routes Tailwind padding on <Section> to the inner <td>', async () => {
+    const html = await render(
+      <Tailwind>
+        <Section className="bg-white p-4">x</Section>
+      </Tailwind>,
+    );
+
+    expect(html).toContain('<td style="padding:1rem">');
+    expect(html).not.toMatch(/<table[^>]*style="[^"]*padding:1rem/);
+  });
+
+  it('inlines Tailwind classes on <Column> onto its <td>', async () => {
+    const html = await render(
+      <Tailwind>
+        <Row>
+          <Column className="bg-white p-4">x</Column>
+        </Row>
+      </Tailwind>,
+    );
+
+    expect(html).toMatch(
+      /<td[^>]*data-id="__react-email-column"[^>]*style="[^"]*padding:1rem/,
+    );
+  });
+
+  it('inlines Tailwind classes on <Row> onto its <table>', async () => {
+    const html = await render(
+      <Tailwind>
+        <Row className="bg-white p-4">
+          <Column>x</Column>
+        </Row>
+      </Tailwind>,
+    );
+
+    expect(html).toMatch(
+      /<table[^>]*role="presentation"[^>]*style="[^"]*padding:1rem/,
+    );
+  });
+
   it('works with components that use React.forwardRef', async () => {
     const Wrapper = (props: { children: React.ReactNode }) => {
       return <Tailwind>{props.children}</Tailwind>;
@@ -742,6 +784,42 @@ describe('Tailwind component', () => {
     });
   });
 
+  describe('with duplicate classes across presets and plugins', () => {
+    it('merges declarations from a preset and a child override for the same class', async () => {
+      const base: TailwindConfig = {
+        plugins: [
+          plugin(({ addComponents }) => {
+            addComponents({ '.box': { '@apply rounded-lg bg-white p-4': {} } });
+          }),
+        ],
+      };
+      const config: TailwindConfig = {
+        presets: [base],
+        plugins: [
+          plugin(({ addComponents }) => {
+            addComponents({ '.box': { '@apply bg-red-500': {} } });
+          }),
+        ],
+      };
+
+      const actualOutput = await render(
+        <Tailwind config={config}>
+          <div className="box">hi</div>
+        </Tailwind>,
+      ).then(pretty);
+
+      expect(actualOutput).toMatchInlineSnapshot(`
+        "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+        <!--$-->
+        <div style="border-radius:0.5rem;background-color:rgb(251,44,54);padding:1rem">
+          hi
+        </div>
+        <!--/$-->
+        "
+      `);
+    });
+  });
+
   describe('with custom theme config', () => {
     it('supports custom colors', async () => {
       const config: TailwindConfig = {
@@ -1102,7 +1180,7 @@ describe('Tailwind component', () => {
         "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
         <!--$-->
         <div
-          style="box-shadow:0 4px 6px rgba(0,0,0,0.1);border-radius:8px;padding:16px"></div>
+          style="box-shadow:0 4px 6px rgb(0,0,0,0.1);border-radius:8px;padding:16px"></div>
         <!--/$-->
         "
       `);

package/src/components/tailwind/tailwind.tsx

@@ -124,7 +124,7 @@ export function Tailwind({ children, config, theme, utility }: TailwindProps) {
   const nonInlineStyles: StyleSheet = {
     type: 'StyleSheet',
     children: new List<CssNode>().fromArray(
-      Array.from(nonInlinableRules.values()),
+      Array.from(nonInlinableRules.values()).flat(),
     ),
   };
   sanitizeNonInlinableRules(nonInlineStyles);

package/src/components/tailwind/utils/css/extract-rules-per-class.spec.ts

@@ -3,8 +3,14 @@ import { setupTailwind } from '../tailwindcss/setup-tailwind.js';
 import { extractRulesPerClass } from './extract-rules-per-class.js';
 
 describe('extractRulesPerClass()', async () => {
-  function convertToComparable(map: Map<string, Rule>): Record<string, string> {
-    return Object.fromEntries(map.entries().map(([k, v]) => [k, generate(v)]));
+  function convertToComparable(
+    map: Map<string, Rule[]>,
+  ): Record<string, string[]> {
+    return Object.fromEntries(
+      map
+        .entries()
+        .map(([k, rules]) => [k, rules.map((rule) => generate(rule))]),
+    );
   }
 
   it('works with just inlinable utilities', async () => {
@@ -21,13 +27,50 @@ describe('extractRulesPerClass()', async () => {
 
     expect(convertToComparable(inlinable)).toMatchInlineSnapshot(`
       {
-        "bg-red-500": ".bg-red-500{background-color:var(--color-red-500)}",
-        "text-center": ".text-center{text-align:center}",
+        "bg-red-500": [
+          ".bg-red-500{background-color:var(--color-red-500)}",
+        ],
+        "text-center": [
+          ".text-center{text-align:center}",
+        ],
       }
     `);
     expect(convertToComparable(nonInlinable)).toMatchInlineSnapshot('{}');
   });
 
+  it('keeps every rule when a class is defined more than once', async () => {
+    const tailwind = await setupTailwind({
+      config: {
+        plugins: [
+          {
+            handler: (api) => {
+              api.addComponents({
+                '.box': { '@apply rounded-lg bg-white p-4': {} },
+              });
+              api.addComponents({
+                '.box': { '@apply bg-red-500': {} },
+              });
+            },
+          },
+        ],
+      },
+    });
+    const classes = ['box'];
+    tailwind.addUtilities(classes);
+
+    const stylesheet = tailwind.getStyleSheet();
+    const { inlinable } = extractRulesPerClass(stylesheet, classes);
+
+    expect(convertToComparable(inlinable)).toMatchInlineSnapshot(`
+      {
+        "box": [
+          ".box{border-radius:var(--radius-lg);background-color:var(--color-white);padding:calc(var(--spacing)*4)}",
+          ".box{background-color:var(--color-red-500)}",
+        ],
+      }
+    `);
+  });
+
   it('handles non-inlinable utilities', async () => {
     const tailwind = await setupTailwind({});
     const classes = ['lg:w-1/2'];
@@ -43,7 +86,9 @@ describe('extractRulesPerClass()', async () => {
     expect(convertToComparable(inlinable)).toMatchInlineSnapshot('{}');
     expect(convertToComparable(nonInlinable)).toMatchInlineSnapshot(`
       {
-        "lg:w-1/2": ".lg\\:w-1\\/2{@media (width>=64rem){width:calc(1/2*100%)}}",
+        "lg:w-1/2": [
+          ".lg\\:w-1\\/2{@media (width>=64rem){width:calc(1/2*100%)}}",
+        ],
       }
     `);
   });
@@ -66,14 +111,22 @@ describe('extractRulesPerClass()', async () => {
     );
     expect(convertToComparable(inlinable)).toMatchInlineSnapshot(`
       {
-        "bg-red-500": ".bg-red-500{background-color:var(--color-red-500)}",
-        "text-center": ".text-center{text-align:center}",
-        "w-full": ".w-full{width:100%}",
+        "bg-red-500": [
+          ".bg-red-500{background-color:var(--color-red-500)}",
+        ],
+        "text-center": [
+          ".text-center{text-align:center}",
+        ],
+        "w-full": [
+          ".w-full{width:100%}",
+        ],
       }
     `);
     expect(convertToComparable(nonInlinable)).toMatchInlineSnapshot(`
       {
-        "lg:w-1/2": ".lg\\:w-1\\/2{@media (width>=64rem){width:calc(1/2*100%)}}",
+        "lg:w-1/2": [
+          ".lg\\:w-1\\/2{@media (width>=64rem){width:calc(1/2*100%)}}",
+        ],
       }
     `);
   });
@@ -105,12 +158,16 @@ describe('extractRulesPerClass()', async () => {
 
     expect(convertToComparable(inlinable)).toMatchInlineSnapshot(`
       {
-        "text-body": ".text-body{color:green}",
+        "text-body": [
+          ".text-body{color:green}",
+        ],
       }
     `);
     expect(convertToComparable(nonInlinable)).toMatchInlineSnapshot(`
       {
-        "text-body": ".text-body{@media (width>=40rem){color:darkgreen}}",
+        "text-body": [
+          ".text-body{@media (width>=40rem){color:darkgreen}}",
+        ],
       }
     `);
   });
@@ -143,7 +200,9 @@ describe('extractRulesPerClass()', async () => {
     expect(convertToComparable(inlinable)).toMatchInlineSnapshot('{}');
     expect(convertToComparable(nonInlinable)).toMatchInlineSnapshot(`
       {
-        "btn": ".btn{&:hover{color:red}}",
+        "btn": [
+          ".btn{&:hover{color:red}}",
+        ],
       }
     `);
   });

package/src/components/tailwind/utils/css/extract-rules-per-class.ts

@@ -5,8 +5,24 @@ import { splitMixedRule } from './split-mixed-rule.js';
 export function extractRulesPerClass(root: CssNode, classes: string[]) {
   const classSet = new Set(classes);
 
-  const inlinableRules = new Map<string, Rule>();
-  const nonInlinableRules = new Map<string, Rule>();
+  // A class can be defined by multiple rules (e.g. a preset and a child config
+  // override), so keep them all to merge instead of the last one clobbering.
+  const inlinableRules = new Map<string, Rule[]>();
+  const nonInlinableRules = new Map<string, Rule[]>();
+
+  const appendRule = (
+    map: Map<string, Rule[]>,
+    className: string,
+    rule: Rule,
+  ) => {
+    const existing = map.get(className);
+    if (existing) {
+      existing.push(rule);
+    } else {
+      map.set(className, [rule]);
+    }
+  };
+
   walk(root, {
     visit: 'Rule',
     enter(rule) {
@@ -20,7 +36,7 @@ export function extractRulesPerClass(root: CssNode, classes: string[]) {
       if (isRuleInlinable(rule)) {
         for (const className of selectorClasses) {
           if (classSet.has(className)) {
-            inlinableRules.set(className, rule);
+            appendRule(inlinableRules, className, rule);
           }
         }
       } else {
@@ -28,10 +44,10 @@ export function extractRulesPerClass(root: CssNode, classes: string[]) {
         for (const className of selectorClasses) {
           if (!classSet.has(className)) continue;
           if (inlinablePart) {
-            inlinableRules.set(className, inlinablePart);
+            appendRule(inlinableRules, className, inlinablePart);
           }
           if (nonInlinablePart) {
-            nonInlinableRules.set(className, nonInlinablePart);
+            appendRule(nonInlinableRules, className, nonInlinablePart);
           }
         }
       }

package/src/components/tailwind/utils/css/sanitize-declarations.spec.ts

@@ -129,6 +129,26 @@ describe('sanitizeDeclarations', () => {
     );
   });
 
+  it('separates two-value logical shorthands with auto, var, or calc', () => {
+    let root = parse('.x { margin-inline: 1rem auto; }');
+    sanitizeDeclarations(root);
+    expect(generate(root)).toMatchInlineSnapshot(
+      `".x{margin-right:auto;margin-left:1rem}"`,
+    );
+
+    root = parse('.x { margin-inline: 0 auto; }');
+    sanitizeDeclarations(root);
+    expect(generate(root)).toMatchInlineSnapshot(
+      `".x{margin-right:auto;margin-left:0}"`,
+    );
+
+    root = parse('.x { padding-inline: 10px calc(1rem + 2px); }');
+    sanitizeDeclarations(root);
+    expect(generate(root)).toMatchInlineSnapshot(
+      `".x{padding-right:calc(1rem + 2px);padding-left:10px}"`,
+    );
+  });
+
   test('oklch to rgb conversion', () => {
     let stylesheet = parse('div { color: oklch(90.5% 0.2 180); }');
     sanitizeDeclarations(stylesheet);
@@ -230,6 +250,27 @@ describe('sanitizeDeclarations', () => {
       generate(stylesheet),
       'treatment for already supported rgb syntax',
     ).toMatchInlineSnapshot(`"div{color:rgb(255,0,128)}"`);
+
+    stylesheet = parse('div { color: rgba(255 0 128 / 0.5); }');
+    sanitizeDeclarations(stylesheet);
+    expect(
+      generate(stylesheet),
+      'rgba() space syntax with alpha',
+    ).toMatchInlineSnapshot(`"div{color:rgb(255,0,128,0.5)}"`);
+
+    stylesheet = parse('div { color: rgba(100% 0% 50% / 100%); }');
+    sanitizeDeclarations(stylesheet);
+    expect(
+      generate(stylesheet),
+      'rgba() percentage syntax with full alpha',
+    ).toMatchInlineSnapshot(`"div{color:rgb(255,0,128)}"`);
+
+    stylesheet = parse('div { color: rgba(255, 0, 128, 0.5); }');
+    sanitizeDeclarations(stylesheet);
+    expect(
+      generate(stylesheet),
+      'legacy comma rgba() is left untouched',
+    ).toMatchInlineSnapshot(`"div{color:rgb(255,0,128,0.5)}"`);
   });
 
   test('hex to rgb conversion', () => {

package/src/components/tailwind/utils/css/sanitize-declarations.ts

@@ -133,11 +133,11 @@ function separteShorthandDeclaration(
     shorthandToReplace.value.type === 'Value'
       ? shorthandToReplace.value.children
           .toArray()
+          // Count every real value component, not just numeric ones, so a
+          // two-value shorthand with `auto`/`var()`/`calc()` (e.g.
+          // `margin-inline: 1rem auto`) still splits into two longhands.
           .filter(
-            (child) =>
-              child.type === 'Dimension' ||
-              child.type === 'Number' ||
-              child.type === 'Percentage',
+            (child) => child.type !== 'Operator' && child.type !== 'WhiteSpace',
           )
       : [shorthandToReplace.value];
   let endValue = shorthandToReplace.value;
@@ -252,7 +252,7 @@ export function sanitizeDeclarations(nodeContainingDeclarations: CssNode) {
             funcParentListItem.data = rgbNode(rgb.r, rgb.g, rgb.b, a);
           }
 
-          if (func.name === 'rgb') {
+          if (func.name === 'rgb' || func.name === 'rgba') {
             let r: number | undefined;
             let g: number | undefined;
             let b: number | undefined;

package/src/components/tailwind/utils/react/is-component.ts

@@ -2,12 +2,15 @@ import { Body } from '../../../body/index.js';
 import { Button } from '../../../button/index.js';
 import { CodeBlock } from '../../../code-block/index.js';
 import { CodeInline } from '../../../code-inline/index.js';
+import { Column } from '../../../column/index.js';
 import { Container } from '../../../container/index.js';
 import { Heading } from '../../../heading/index.js';
 import { Hr } from '../../../hr/index.js';
 import { Img } from '../../../img/index.js';
 import { Link } from '../../../link/index.js';
 import { Preview } from '../../../preview/index.js';
+import { Row } from '../../../row/index.js';
+import { Section } from '../../../section/index.js';
 import { Text } from '../../../text/index.js';
 
 const componentsToTreatAsElements: React.ReactElement['type'][] = [
@@ -15,12 +18,15 @@ const componentsToTreatAsElements: React.ReactElement['type'][] = [
   Button,
   CodeBlock,
   CodeInline,
+  Column,
   Container,
   Heading,
   Hr,
   Img,
   Link,
   Preview,
+  Row,
+  Section,
   Text,
 ];
 

package/src/components/tailwind/utils/tailwindcss/clone-element-with-inlined-styles.ts

@@ -8,8 +8,8 @@ import { isComponent } from '../react/is-component.js';
 
 export function cloneElementWithInlinedStyles(
   element: React.ReactElement<EmailElementProps>,
-  inlinableRules: Map<string, Rule>,
-  nonInlinableRules: Map<string, Rule>,
+  inlinableRules: Map<string, Rule[]>,
+  nonInlinableRules: Map<string, Rule[]>,
   customProperties: CustomProperties,
 ) {
   const propsToOverwrite: Partial<EmailElementProps> = {};
@@ -21,13 +21,13 @@ export function cloneElementWithInlinedStyles(
 
     const rules: Rule[] = [];
     for (const className of classes) {
-      const rule = inlinableRules.get(className);
-      if (rule) {
-        rules.push(rule);
+      const classRules = inlinableRules.get(className);
+      if (classRules) {
+        rules.push(...classRules);
       }
       if (nonInlinableRules.has(className)) {
         residualClasses.push(className);
-      } else if (!rule) {
+      } else if (!classRules) {
         residualClasses.push(className);
       }
     }