resend · gabrielmfern · Jun 23, 2025 · Jun 23, 2025 · Jun 23, 2025 · Jun 23, 2025
@@ -0,0 +1,6 @@
+---
+"@react-email/tailwind": minor
+"@react-email/components": minor
+---
+
+fix `max-*` breakpoints generating invalid CSS
@@ -58,6 +58,7 @@
     "@vitejs/plugin-react": "4.4.1",
     "postcss": "8.5.3",
     "postcss-selector-parser": "7.1.0",
+    "postcss-value-parser": "4.2.0",
     "react-dom": "^19",
     "shelljs": "0.9.2",
     "tailwindcss": "3.4.10",

@@ -380,6 +380,18 @@ describe('Responsive styles', () => {
     ).toMatchSnapshot();
   });
 
+  // https://github.com/resend/react-email/issues/2297
+  it('should work with max-* breakpoints', async () => {
+    const actualOutput = await render(
+      <Tailwind config={{}}>
+        <head />
+        <div className="bg-red-100 max-sm:bg-green-500">Test</div>
+      </Tailwind>,
+    );
+
+    expect(actualOutput).toMatchSnapshot();
+  });
+
   it('should not have duplicate media queries', async () => {
     const Body = (props: { className: string; children: React.ReactNode }) => {
       return <body className={props.className}>{props.children}</body>;

@@ -79,9 +79,7 @@ export const Tailwind: React.FC<TailwindProps> = ({ children, config }) => {
 
           /*                   only minify here since it is the only place that is going to be in the DOM */
           const styleElement = (
-            <style>
-              {minifyCss(nonInlineStylesRootToApply.toString().trim())}
-            </style>
+            <style>{minifyCss(nonInlineStylesRootToApply)}</style>
           );
 
           return React.cloneElement(

@@ -0,0 +1,47 @@
+import { parse } from 'postcss';
+import { minifyCss } from './minify-css';
+
+describe('minifyCss', () => {
+  it('should remove comments', () => {
+    const input = parse('body { color: red; /* This is a comment */ }');
+    const expected = 'body{color:red}';
+    expect(minifyCss(input)).toBe(expected);
+  });
+
+  it('should remove extra spaces after semicolons and colons', () => {
+    const input = parse('body { color: red;   font-size: 16px; }');
+    const expected = 'body{color:red;font-size:16px}';
+    expect(minifyCss(input)).toBe(expected);
+  });
+
+  it('should remove extra spaces before and after brackets', () => {
+    const input = parse('body { color: red; } .class { margin: 10px; }');
+    const expected = 'body{color:red}.class{margin:10px}';
+    expect(minifyCss(input)).toBe(expected);
+  });
+
+  it('should handle multiple rules in a single string', () => {
+    const input = parse('body { color: red; } .class { margin: 10px; }');
+    const expected = 'body{color:red}.class{margin:10px}';
+    expect(minifyCss(input)).toBe(expected);
+  });
+
+  // https://github.com/resend/react-email/issues/2297
+  it('should handle at rules with multiple parameters', () => {
+    const input = parse(`@media not all and (min-width:600px) {
+  .max-desktop_px-40 {
+    padding-left: 40px !important;
+    padding-right: 40px !important
+  }
+}`);
+    const expected =
+      '@media not all and (min-width:600px){.max-desktop_px-40{padding-left:40px!important;padding-right:40px!important}}';
+    expect(minifyCss(input)).toBe(expected);
+  });
+
+  it('should handle empty strings', () => {
+    const input = parse('');
+    const expected = '';
+    expect(minifyCss(input)).toBe(expected);
+  });
+});
@@ -1,21 +1,57 @@
-export const minifyCss = (css: string): string => {
-  // Thanks tw-to-css!
-  // from https://github.com/vinicoder/tw-to-css/blob/main/src/util/format-css.ts
-  return (
-    css
-      // Remove comments
-      .replace(/\/\*[\s\S]*?\*\//gm, '')
+import type { Root } from 'postcss';
+import selectorParser from 'postcss-selector-parser';
+import valueParser from 'postcss-value-parser';
 
-      // Remove extra spaces after semicolons and colons
-      .replace(/;\s+/gm, ';')
-      .replace(/:\s+/gm, ':')
+function minifyValue(value: string) {
+  const parsed = valueParser(value.trim());
+  parsed.walk((node) => {
+    if ('before' in node) node.before = '';
+    if ('after' in node) node.after = '';
+    if (node.type === 'space') node.value = ' ';
+  });
+  return parsed.toString();
+}
 
-      // Remove extra spaces before and after brackets
-      .replace(/\)\s*{/gm, '){') // Remove spaces before opening curly brace after closing parenthesis
-      .replace(/\s+\(/gm, '(') // Remove spaces before opening parenthesis
-      .replace(/{\s+/gm, '{') // Remove spaces after opening curly brace
-      .replace(/}\s+/gm, '}') // Remove spaces before closing curly brace
-      .replace(/\s*{/gm, '{') // Remove spaces after opening curly brace
-      .replace(/;?\s*}/gm, '}')
-  ); // Remove extra spaces and semicolons before closing curly braces
+export const minifyCss = (root: Root): string => {
+  const toMinify = root.clone();
+  toMinify.walk((node) => {
+    if (node.type === 'comment') {
+      if (node.text[0] === '!') {
+        node.raws.before = '';
+        node.raws.after = '';
+      } else {
+        node.remove();
+      }
+    } else if (node.type === 'atrule') {
+      node.raws = {
+        before: '',
+        after: '',
+        afterName: ' ',
+      };
+      node.params = minifyValue(node.params);
+    } else if (node.type === 'decl') {
+      node.raws = {
+        before: '',
+        between: ':',
+        important: node.important
+          ? (node.raws.important?.replaceAll(' ', '') ?? '!important')
+          : undefined,
+      };
+      node.value = minifyValue(node.value);
+    } else if (node.type === 'rule') {
+      node.raws = { before: '', between: '', after: '', semicolon: false };
+      node.selector = selectorParser((selectorRoot) => {
+        selectorRoot.walk((selector) => {
+          selector.spaces = { before: '', after: '' };
+
+          if ('raws' in selector && selector.raws?.spaces) {
+            selector.raws.spaces = {};
+          }
+        });
+      })
+        .processSync(node.selector)
+        .toString();
+    }
+  });
+  return toMinify.toString();
 };
@@ -21,6 +21,7 @@ export default defineConfig({
       // - tailwindcss
       // - postcss
       // - postcss-selector-parser
+      // - postcss-value-parser
       external: ['react', /^react\/.*/, 'react-dom', /react-dom\/.*/],
     },
     lib: {