fix: cli global css has tailwind import twice and cut in the middle (#1146)

* fix: cli global css has tailwind import twice and cut in the middle

* chore: changeset

Author: maiieul

.changeset/public-peaches-think.md

@@ -0,0 +1,5 @@
+---
+'qwik-ui': patch
+---
+
+fix: the cli now properly injects the theme into your global css file.

packages/cli/src/generators/setup-tailwind/setup-tailwind-generator.spec.ts

@@ -8,7 +8,17 @@ describe('Setup Tailwind generator', () => {
     const options: SetupTailwindGeneratorSchema = {};
     const tree = createTreeWithEmptyWorkspace();
 
-    tree.write('src/global.css', '');
+    // add class before tailwind base import to make sure we append the extracted theme css in the right place
+    tree.write(
+      'src/global.css',
+      `
+        test {
+          color: red;
+        }
+
+        @import "tailwindcss";
+      `,
+    );
 
     return {
       tree,
@@ -28,7 +38,11 @@ describe('Setup Tailwind generator', () => {
     const updatedGlobalCssContent = tree.read('src/global.css', 'utf-8');
 
     expect(updatedGlobalCssContent).toMatchInlineSnapshot(`
-      "@layer base, qwik-ui, popover-polyfill, theme, components, utilities;
+      "test {
+        color: red;
+      }
+
+      @layer base, qwik-ui, popover-polyfill, theme, components, utilities;
       @import 'tailwindcss';
       @import 'tw-animate-css';
 
@@ -219,7 +233,11 @@ describe('Setup Tailwind generator', () => {
     const updatedGlobalCssContent = tree.read('src/global.css', 'utf-8');
 
     expect(updatedGlobalCssContent).toMatchInlineSnapshot(`
-      "@layer base, qwik-ui, popover-polyfill, theme, components, utilities;
+      "test {
+        color: red;
+      }
+
+      @layer base, qwik-ui, popover-polyfill, theme, components, utilities;
       @import 'tailwindcss';
       @import 'tw-animate-css';
 

packages/cli/src/generators/setup-tailwind/setup-tailwind-generator.ts

@@ -45,21 +45,27 @@ function updateRootCss(
 
   const rootCssContent = tree.read(globalCssPath, 'utf-8');
 
-  const tailwindUtilsDirective = '@tailwind utilities;';
-  const utilsDirectiveIndex = rootCssContent?.indexOf(tailwindUtilsDirective);
+  console.log('rootCssContent', rootCssContent);
 
-  if (!utilsDirectiveIndex) {
-    console.error('Could not find the tailwind directives in your global css file');
-    return;
-  }
+  const tailwindBaseImport = '@import "tailwindcss";';
 
-  const afterTailwindDirectives = utilsDirectiveIndex + tailwindUtilsDirective.length;
+  const rootCssContentWithoutTailwindBaseImport = rootCssContent.replace(
+    tailwindBaseImport,
+    '',
+  );
+
+  const utilsDirectiveIndex = rootCssContent?.indexOf(tailwindBaseImport);
+
+  const afterTailwindDirectives = utilsDirectiveIndex + tailwindBaseImport.length;
 
-  const firstPart = rootCssContent?.slice(0, afterTailwindDirectives);
+  const firstPart = rootCssContentWithoutTailwindBaseImport?.slice(
+    0,
+    afterTailwindDirectives,
+  );
 
-  const secondPart = rootCssContent?.slice(
+  const secondPart = rootCssContentWithoutTailwindBaseImport?.slice(
     afterTailwindDirectives,
-    rootCssContent.length,
+    rootCssContentWithoutTailwindBaseImport.length,
   );
 
   const themeStr = `${themeConfig.style} ${themeConfig.baseColor} ${themeConfig.primaryColor} ${themeConfig.borderRadius}`;