fix(tailwind): Persist existing head elements when responsive styles …

…are present (resend#645)
rfoel · Apr 18, 2023 · c388ef2 · c388ef2
1 parent 20344e6
commit c388ef2
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 10 deletions.
diff --git a/packages/tailwind/src/tailwind.spec.tsx b/packages/tailwind/src/tailwind.spec.tsx
@@ -93,6 +93,26 @@ describe("Tailwind component", () => {
         );
       }
     });
+
+    it("should persist exsisting <head/> elements", () => {
+      const actualOutput = render(
+        <Tailwind>
+          <html>
+            <head>
+              <style />
+              <link />
+            </head>
+            <body>
+              <div className="bg-red-200 sm:bg-red-500" />
+            </body>
+          </html>
+        </Tailwind>
+      );
+
+      expect(actualOutput).toMatchInlineSnapshot(
+        `"<html><head><style></style><link/><style>.bg_red_200{background-color:rgb(254,202,202)}@media(min-width:640px){.sm_bg_red_500{background-color: rgb(239,68,68) !important}}</style></head><body><div class="bg_red_200 sm_bg_red_500"></div></body></html>"`
+      );
+    });
   });
 
   describe("Custom theme config", () => {

diff --git a/packages/tailwind/src/tailwind.tsx b/packages/tailwind/src/tailwind.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import { renderToStaticMarkup } from "react-dom/server";
-import htmlParser, { attributesToProps, Element } from "html-react-parser";
+import htmlParser, { attributesToProps, domToReact, Element } from "html-react-parser";
 import { tailwindToCSS, TailwindConfig } from "tw-to-css";
 
 export interface TailwindProps {
@@ -48,19 +48,12 @@ export const Tailwind: React.FC<TailwindProps> = ({ children, config }) => {
             let newDomNode: JSX.Element | null = null;
 
             if (domNode.children) {
-              const style = domNode.children.find(
-                (child) => child instanceof Element && child.name === "style"
-              );
-
               const props = attributesToProps(domNode.attribs);
 
               newDomNode = (
                 <head {...props}>
-                  {style && style instanceof Element ? (
-                    <style>{`${style.children} ${headStyle}`}</style>
-                  ) : (
-                    <style>{headStyle}</style>
-                  )}
+                  {domToReact(domNode.children)}
+                  <style>{headStyle}</style>
                 </head>
               );
             }