feat(tailwind): Rewrite with the new utilities

resend · gabrielmfern · Oct 7, 2024 · Mar 28, 2024 · Mar 29, 2024 · Mar 14, 2024
commit 96fde73087dbfd078864725dc49cce1e03a9622d
diff --git a/packages/tailwind/src/tailwind.tsx b/packages/tailwind/src/tailwind.tsx
@@ -1,9 +1,12 @@
 import * as React from "react";
 import type { Config as TailwindOriginalConfig } from "tailwindcss";
-import { useTailwindStyles } from "./hooks/use-tailwind-styles";
-import { useStyleInlining } from "./hooks/use-style-inlining";
+import { Root } from "postcss";
+import { inlineStyles } from "./utils/css/inline-styles";
 import { sanitizeClassName } from "./utils/compatibility/sanitize-class-name";
 import { minifyCss } from "./utils/css/minify-css";
+import { useTailwind } from "./hooks/use-tailwind";
+import { sanitizeMediaQueries } from "./utils/css/media-queries/sanitize-media-queries";
+import { sanitizeDeclarations } from "./utils/css/sanitize-declarations";
 
 export type TailwindConfig = Omit<TailwindOriginalConfig, "content">;
 
@@ -19,41 +22,17 @@ interface EmailElementProps {
 }
 
 export const Tailwind: React.FC<TailwindProps> = ({ children, config }) => {
-  const { stylePerClassMap, nonInlinableClasses, sanitizedMediaQueries } =
-    useTailwindStyles(children, config ?? {});
+  const tailwind = useTailwind(config ?? {});
 
-  const inline = useStyleInlining(stylePerClassMap);
-
-  const nonInlineStylesToApply = sanitizedMediaQueries.filter(
-    (style) => style.trim().length > 0,
-  );
-
-  const hasNonInlineStylesToApply = nonInlineStylesToApply.length > 0;
-  let hasAppliedNonInlineStyles = false as boolean;
+  const nonInlineStylesRootToApply = new Root();
+  const mediaQueryClassesForAllElement: string[] = [];
+  let hasNonInlineStylesToApply = false as boolean;
 
   function processElement(
     element: React.ReactElement<EmailElementProps>,
   ): React.ReactElement<EmailElementProps> {
     const propsToOverwrite = {} as Partial<EmailElementProps>;
 
-    if (!hasAppliedNonInlineStyles && hasNonInlineStylesToApply) {
-      if (element.type === "head") {
-        hasAppliedNonInlineStyles = true;
-
-        /*                   only minify here since it is the only place that is going to be in the DOM */
-        const styleElement = (
-          <style>{minifyCss(nonInlineStylesToApply.join(""))}</style>
-        );
-
-        return React.cloneElement(
-          element,
-          element.props,
-          element.props.children,
-          styleElement,
-        );
-      }
-    }
-
     if (element.props.children) {
       propsToOverwrite.children = React.Children.map(
         element.props.children,
@@ -68,20 +47,39 @@ export const Tailwind: React.FC<TailwindProps> = ({ children, config }) => {
     }
 
     if (element.props.className) {
-      const { styles, residualClassName } = inline(element.props.className);
+      const rootForClasses = tailwind.generateRootForClasses(
+        element.props.className.split(" "),
+      );
+      sanitizeDeclarations(rootForClasses);
+
+      const { sanitizedAtRules, mediaQueryClasses } =
+        sanitizeMediaQueries(rootForClasses);
+      mediaQueryClassesForAllElement.push(...mediaQueryClasses);
+      nonInlineStylesRootToApply.append(...sanitizedAtRules);
+
+      if (mediaQueryClasses.length > 0 && !hasNonInlineStylesToApply) {
+        hasNonInlineStylesToApply = true;
+      }
+
+      const { styles, residualClassName } = inlineStyles(
+        element.props.className,
+        rootForClasses,
+      );
       propsToOverwrite.style = {
         ...element.props.style,
         ...styles,
       };
+
       if (residualClassName.trim().length > 0) {
         propsToOverwrite.className = residualClassName;
+
         /*
           We sanitize only the class names of Tailwind classes that we are not going to inline
-          to avoid unpredictable behavior on the user's code. If we did sanitize all class names
+          to avoid unpredictable behavior on the user's code. If we did sanitize all classes
           a user-defined class could end up also being sanitized which would lead to unexpected 
           behavior and bugs that are hard to track.
         */
-        for (const singleClass of nonInlinableClasses) {
+        for (const singleClass of mediaQueryClasses) {
           propsToOverwrite.className = propsToOverwrite.className.replace(
             singleClass,
             sanitizeClassName(singleClass),
@@ -119,7 +117,7 @@ export const Tailwind: React.FC<TailwindProps> = ({ children, config }) => {
     return React.cloneElement(element, newProps, newChildren);
   }
 
-  const childrenArray =
+  let childrenArray =
     React.Children.map(children, (child) => {
       if (React.isValidElement<EmailElementProps>(child)) {
         const element = child;
@@ -130,18 +128,88 @@ export const Tailwind: React.FC<TailwindProps> = ({ children, config }) => {
       return child;
     }) ?? [];
 
-  if (hasNonInlineStylesToApply && !hasAppliedNonInlineStyles) {
-    throw new Error(
-      `You are trying to use the following Tailwind classes that have media queries: ${nonInlinableClasses.join(
-        " ",
-      )}.
-For the media queries to work properly on rendering, they need to be added into a <style> tag inside of a <head> tag,
-the Tailwind component tried finding a <head> element but just wasn't able to find it.
+  let hasAppliedNonInlineStyles = false as boolean;
+
+  if (hasNonInlineStylesToApply) {
+    const processElementToApplyNonInlineStyles = (
+      element: React.ReactElement<EmailElementProps>,
+    ): React.ReactElement<EmailElementProps> => {
+      if (!hasAppliedNonInlineStyles && hasNonInlineStylesToApply) {
+        let newChildren = element.props.children;
+        // if it has children and is not the head element,
+        // then it goes through all the children trying to process them
+        // to find the <head> element
+        if (element.props.children && element.type !== 'head') {
+          newChildren = React.Children.map(element.props.children, (child) => {
+            if (React.isValidElement<EmailElementProps>(child)) {
+              return processElementToApplyNonInlineStyles(child);
+            }
+
+            return child;
+          });
+        }
+
+        if (typeof element.type === "function") {
+          const OriginalComponent = element.type as React.FC;
 
-Make sure that you have either a <head> element at some point inside of the <Tailwind> component at any depth.
+          return React.createElement(
+            (props: EmailElementProps) => {
+              const renderedComponent = OriginalComponent(props);
+              if (React.isValidElement<EmailElementProps>(renderedComponent)) {
+                return processElementToApplyNonInlineStyles(renderedComponent);
+              }
 
-If you do already have a <head> element at some depth, please file a bug https://github.com/resend/react-email/issues/new?assignees=&labels=Type%3A+Bug&projects=&template=1.bug_report.yml.`,
-    );
+              return renderedComponent;
+            },
+            element.props,
+            newChildren,
+          );
+        }
+
+        if (element.type === "head") {
+          hasAppliedNonInlineStyles = true;
+
+          /*                   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>
+          );
+
+          return React.cloneElement(
+            element,
+            element.props,
+            newChildren,
+            styleElement,
+          );
+        }
+
+        return React.cloneElement(element, element.props, newChildren);
+      }
+
+      return element;
+    };
+    childrenArray = childrenArray.map((child) => {
+      if (React.isValidElement<EmailElementProps>(child)) {
+        return processElementToApplyNonInlineStyles(child);
+      }
+
+      return child;
+    });
+
+    if (!hasAppliedNonInlineStyles) {
+      throw new Error(
+        `You are trying to use the following Tailwind classes that have media queries: ${mediaQueryClassesForAllElement.join(
+          " ",
+        )}.
+  For the media queries to work properly on rendering, they need to be added into a <style> tag inside of a <head> tag,
+  the Tailwind component tried finding a <head> element but just wasn't able to find it.
+
+  Make sure that you have either a <head> element at some point inside of the <Tailwind> component at any depth.
+
+  If you do already have a <head> element at some depth, please file a bug https://github.com/resend/react-email/issues/new?assignees=&labels=Type%3A+Bug&projects=&template=1.bug_report.yml.`,
+      );
+    }
   }
 
   return <>{childrenArray}</>;