Update tailwind style tag generation (#2734)

* Update tailwind style tag generation * remove test folder * prettier
Shopify · Jan 29, 2025 · bf39d28 · bf39d28
1 parent 3b0fb6e
commit bf39d28
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 33 deletions.
diff --git a/.changeset/hungry-kangaroos-shout.md b/.changeset/hungry-kangaroos-shout.md
@@ -0,0 +1,5 @@
+---
+'@shopify/cli-hydrogen': patch
+---
+
+Make sure tailwind stylesheet is generated in a style tag
diff --git a/packages/cli/src/lib/onboarding/local.test.ts b/packages/cli/src/lib/onboarding/local.test.ts
@@ -199,7 +199,7 @@ describe('local templates', () => {
         const rootFile = await readFile(`${tmpDir}/app/root.tsx`);
         await expect(rootFile).toMatch(/import tailwindCss from/);
         await expect(rootFile).toMatch(
-          /export function links\(\) \{.*?return \[.*\{rel: 'stylesheet', href: tailwindCss\}/ims,
+          /<link rel="stylesheet" href={tailwindCss}><\/link>/ims,
         );
 
         // Adds the Vite plugin

diff --git a/packages/cli/src/lib/setups/css/replacers.ts b/packages/cli/src/lib/setups/css/replacers.ts
@@ -46,55 +46,37 @@ export async function replaceRootLinks(
       importNodes.find((node) => node.text().includes('.css')) ||
       importNodes.shift();
 
-    const linksReturnNode = root.find({
-      utils: {
-        'has-links-id': {
+    const layoutStyleNode = root.find({
+      rule: {
+        kind: 'jsx_element',
+        regex: 'resetStyles',
+        has: {
+          kind: 'jsx_opening_element',
           has: {
             kind: 'identifier',
-            pattern: 'links',
-          },
-        },
-      },
-      rule: {
-        kind: 'return_statement',
-        pattern: 'return [$$$]',
-        inside: {
-          any: [
-            {
-              kind: 'function_declaration',
-              matches: 'has-links-id',
-            },
-            {
-              kind: 'variable_declarator',
-              matches: 'has-links-id',
-            },
-          ],
-          stopBy: 'end',
-          inside: {
-            stopBy: 'end',
-            kind: 'export_statement',
+            pattern: 'link',
           },
         },
       },
     });
 
-    if (!lastImportNode || !linksReturnNode) {
+    if (!lastImportNode || !layoutStyleNode) {
       throw new AbortError(
         'Could not find a "links" export in root file. Please add one and try again.',
       );
     }
 
     const lastImportContent = lastImportNode.text();
-    const linksExportReturnContent = linksReturnNode.text();
-    const newLinkReturnItem = importer.isConditional
-      ? `...(${importer.name} ? [{ rel: 'stylesheet', href: ${importer.name} }] : [])`
-      : `{rel: 'stylesheet', href: ${importer.name}}`;
+    const layoutStyleNodeContent = layoutStyleNode.text();
+    const newLinkNode = importer.isConditional
+      ? `{${importer.name} && <link rel="stylesheet" href={${importer.name}}></link>}`
+      : `<link rel="stylesheet" href={${importer.name}}></link>`;
 
     return content
       .replace(lastImportContent, lastImportContent + '\n' + importStatement)
       .replace(
-        linksExportReturnContent,
-        linksExportReturnContent.replace('[', `[${newLinkReturnItem},`),
+        layoutStyleNodeContent,
+        newLinkNode + '\n' + layoutStyleNodeContent,
       );
   });
 }