Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(tailwind): Head component minification issue #1352

Merged
merged 6 commits into from
Mar 13, 2024
Merged

fix(tailwind): Head component minification issue #1352

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
986142b
chore(tailwind): Add unit test to make sure that the styles are appli…
gabrielmfern Mar 12, 2024
19952ad
feat(tailwind): Head elements no longer being forced to be directly b…
gabrielmfern Mar 12, 2024
1eaac77
feat(tailwind): Improved error message for missing <head> element to …
gabrielmfern Mar 12, 2024
625bbf1
chore(tailwind): Upgrade unit test to expect the error to be thrown o…
gabrielmfern Mar 12, 2024
bee5124
chore(tailwind): Remove unused import
gabrielmfern Mar 12, 2024
f05f86e
chore(tailwind): Format
gabrielmfern Mar 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions packages/tailwind/src/__snapshots__/tailwind.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

exports[`Responsive styles > should throw an error when used without a <head/> 1`] = `
"You are trying to use the following Tailwind classes that have media queries: sm:bg-red-500.
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."
`;
59 changes: 52 additions & 7 deletions packages/tailwind/src/tailwind.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,6 +138,53 @@ describe("Tailwind component", () => {
});

describe("Responsive styles", () => {
/*
This test is because of https://github.com/resend/react-email/issues/1112
which was being caused because we required to, either have our <Head> component,
or a <head> element directly inside the <Tailwind> component for media queries to be applied
onto. The problem with this approach was that the check to see if an element was an instance of
the <Head> component fails after minification as we did it by the function name.

The best solution is to check for the Head element on arbitrarily deep levels of the React tree
and apply the styles there. This also fixes the issue where it would not be allowed to use
Tailwind classes on the <html> element as the <head> would be required directly bellow Tailwind.
*/
it("should work with arbitrarily deep (in the React tree) <head> elements", () => {
expect(
render(
<Tailwind>
<html lang="en">
<head />
<body>
<div className="bg-red-200 sm:bg-red-300 md:bg-red-400 lg:bg-red-500" />
</body>
</html>
</Tailwind>,
),
).toMatchInlineSnapshot(
'"<html lang=\\"en\\"><head><style>@media(min-width:640px){.sm_bg-red-300{background-color:rgb(252,165,165)!important}}@media(min-width:768px){.md_bg-red-400{background-color:rgb(248,113,113)!important}}@media(min-width:1024px){.lg_bg-red-500{background-color:rgb(239,68,68)!important}}</style></head><body><div class=\\"sm_bg-red-300 md_bg-red-400 lg_bg-red-500\\" style=\\"background-color:rgb(254,202,202)\\"></div></body></html>"',
);

const MyHead = (props: Record<string, any>) => {
return <head {...props} />;
};

expect(
render(
<Tailwind>
<html lang="en">
<MyHead />
<body>
<div className="bg-red-200 sm:bg-red-300 md:bg-red-400 lg:bg-red-500" />
</body>
</html>
</Tailwind>,
),
).toMatchInlineSnapshot(
'"<html lang=\\"en\\"><head><style>@media(min-width:640px){.sm_bg-red-300{background-color:rgb(252,165,165)!important}}@media(min-width:768px){.md_bg-red-400{background-color:rgb(248,113,113)!important}}@media(min-width:1024px){.lg_bg-red-500{background-color:rgb(239,68,68)!important}}</style></head><body><div class=\\"sm_bg-red-300 md_bg-red-400 lg_bg-red-500\\" style=\\"background-color:rgb(254,202,202)\\"></div></body></html>"',
);
});

it("should add css to <head/> and keep responsive class names", () => {
const actualOutput = render(
<html lang="en">
Expand All @@ -158,17 +205,15 @@ describe("Responsive styles", () => {
it("should throw an error when used without a <head/>", () => {
function noHead() {
render(
<html lang="en">
<Tailwind>
<Tailwind>
<html lang="en">
{/* <Head></Head> */}
<div className="bg-red-200 sm:bg-red-500" />
</Tailwind>
</html>,
</html>
</Tailwind>,
);
}
expect(noHead).toThrowErrorMatchingInlineSnapshot(
`"Tailwind: To use responsive styles you must have a <head> element as a direct child of the Tailwind component."`,
);
expect(noHead).toThrowErrorMatchingSnapshot();
});

it("should persist existing <head/> elements", () => {
Expand Down
57 changes: 30 additions & 27 deletions packages/tailwind/src/tailwind.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,11 +28,32 @@ export const Tailwind: React.FC<TailwindProps> = ({ children, config }) => {
(style) => style.trim().length > 0,
);

const hasNonInlineStylesToApply = nonInlineStylesToApply.length > 0;
let hasAppliedNonInlineStyles = 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,
Expand Down Expand Up @@ -94,44 +115,26 @@ export const Tailwind: React.FC<TailwindProps> = ({ children, config }) => {
return React.cloneElement(element, newProps, newChildren);
}

const hasNonInlineStylesToApply = nonInlineStylesToApply.length > 0;
let hasAppliedNonInlineStyles = false as boolean;

const childrenArray =
React.Children.map(children, (child) => {
if (React.isValidElement<EmailElementProps>(child)) {
const element = child;

if (!hasAppliedNonInlineStyles && hasNonInlineStylesToApply) {
if (
element.type === "head" ||
(typeof element.type === "function" &&
"name" in element.type &&
element.type.name === "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,
);
}
}

return processElement(element);
}
}) ?? [];

if (hasNonInlineStylesToApply && !hasAppliedNonInlineStyles) {
throw new Error(
"Tailwind: To use responsive styles you must have a <head> element as a direct child of the Tailwind component.",
`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.

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.`,
);
}

Expand Down
Loading