fix(tailwind): add prefix to production class names (#111)

shellscape · Dec 26, 2023 · 8ebea3c · 8ebea3c
1 parent b13a382
commit 8ebea3c
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 1 deletion.
diff --git a/packages/jsx-email/src/components/tailwind/tailwind.tsx b/packages/jsx-email/src/components/tailwind/tailwind.tsx
@@ -32,7 +32,7 @@ const getUno = (config: ConfigBase, production: boolean) => {
   if (production)
     transformers.push(
       transformerCompileClass({
-        classPrefix: '',
+        classPrefix: 'je-',
         trigger: ':jsx:'
       })
     );

diff --git a/packages/jsx-email/test/tailwind/.snapshots/tailwind.test.tsx.snap b/packages/jsx-email/test/tailwind/.snapshots/tailwind.test.tsx.snap
@@ -66,6 +66,12 @@ exports[`Custom theme config > should be able to use custom text alignment 1`] =
 .text-justify{text-align:justify;}</style></div>"
 `;
 
+exports[`Production mode > should generate class names with a prefix 1`] = `
+"<div data-id=\\"__jsx-email-twnd\\"><html data-id=\\"jsx-email/html\\" lang=\\"en\\" dir=\\"ltr\\"><div class=\\"je-5wyw0k\\"></div></html><style tailwind>/* layer: preflights */
+/* layer: shortcuts */
+.je-5wyw0k{background-color:rgb(254,226,226);font-size:0.875rem;line-height:1.25rem;}</style></div>"
+`;
+
 exports[`Responsive styles > should add css to <head/> 1`] = `
 "<!DOCTYPE html PUBLIC \\"-//W3C//DTD XHTML 1.0 Transitional//EN\\" \\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\\"><html><head><style tailwind>/* layer: preflights */
 /* layer: default */

diff --git a/packages/jsx-email/test/tailwind/tailwind.test.tsx b/packages/jsx-email/test/tailwind/tailwind.test.tsx
@@ -259,3 +259,17 @@ describe('<Tailwind> component', async () => {
     );
   });
 });
+
+describe('Production mode', async () => {
+  it('should generate class names with a prefix', async () => {
+    const actualOutput = await jsxToString(
+      <Tailwind production>
+        <Html>
+          <div className="text-sm bg-red-100" />
+        </Html>
+      </Tailwind>
+    );
+
+    expect(actualOutput).toMatchSnapshot();
+  });
+});