fixed cli not checking relative global.css correctly (#1003)

* fixed cli not checking relative global.css correctly

* make continues-release depends on test

* fixed cli e2e test

Author: shairez

.changeset/soft-snakes-sniff.md

@@ -0,0 +1,5 @@
+---
+"qwik-ui": patch
+---
+
+FIX: cli not checking relative global.css correctly

.github/workflows/test.yml

@@ -1,8 +1,10 @@
 name: Test
 
 on:
-  - push
-  - pull_request
+  pull_request:
+  push:
+    branches:
+      - main
 
 jobs:
   test:
@@ -32,8 +34,9 @@ jobs:
           chromatic_token: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
 
   continuous-release:
-    runs-on: ubuntu-latest
     if: github.event_name == 'pull_request'
+    needs: test
+    runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
       - name: Setup

package.json

@@ -29,8 +29,9 @@
     "release": "pnpm release.prepare && pnpm release.setroot && pnpm release.publish && pnpm release.resetroot",
     "release.publish": "changeset publish",
     "release.resetroot": "cp dist/pnpm-workspace.yaml pnpm-workspace.yaml",
-    "release.e2e": "pnpm release.prepare && pnpm release.setroot && pnpm -r exec pnpm version patch && pnpm -r publish --tag e2e --no-git-checks && pnpm release.resetroot",
+    "release.e2e": "pnpm release.prepare && pnpm release.setroot && pnpm -r exec pnpm version patch && pnpm -r exec pnpm publish --tag e2e --no-git-checks && pnpm release.resetroot",
     "test.cli": "NODE_OPTIONS=--experimental-vm-modules nx test cli",
+    "test.cli.e2e": "nx e2e cli-e2e",
     "test.headless": "nx component-test headless --skip-nx-cache",
     "test.visual.headless": "nx visual-test headless",
     "test.pw.headless": "nx e2e headless",
@@ -147,7 +148,7 @@
     "includedScripts": []
   },
   "volta": {
-    "node": "20.9.0",
+    "node": "22.7.0",
     "pnpm": "9.7.0"
   }
 }

packages/cli-e2e/src/cli.smoke.spec.ts

@@ -23,7 +23,7 @@ describe('Qwik UI CLI Smoke test', () => {
 
   it('should be installed and add the button file', () => {
     execSync(
-      'npx -y qwik-ui@e2e init --e2e --projectRoot / --uiComponentsPath "src/components/ui" --rootCssPath "src/global.css" --installTailwind --style "simple" --components=button',
+      'npx -y qwik-ui@e2e init --e2e --projectRoot ./ --uiComponentsPath "src/components/ui" --rootCssPath "src/global.css" --installTailwind --style "simple" --components=button',
       {
         cwd: projectDirectory,
         env: process.env,

packages/cli/bin/index.ts

@@ -37,6 +37,7 @@ import {
   QWIK_UI_CONFIG_FILENAME,
 } from '../src/_shared/config-filenames';
 
+import path from 'path';
 import externalDeps from '../src/_shared/external-deps.json';
 
 const COMMANDS = ['init', 'add'];
@@ -144,8 +145,8 @@ async function handleInit() {
   if (!config.projectRoot) {
     config.projectRoot = cancelable(
       await text({
-        message: cyan('Specify the root of the project (leave empty for "/")'),
-        initialValue: '/',
+        message: cyan('Specify the root of the project (leave empty for "./")'),
+        initialValue: './',
       }),
     );
   }
@@ -162,9 +163,10 @@ async function handleInit() {
   if (!config.rootCssPath) {
     config.rootCssPath = await collectFileLocationFromUser({
       message: cyan(
-        'Your global css file location (where you defined your tailwind directives)',
+        'The path to the global css file the tailwind directives are defined (relative to the root you specified above)',
       ),
       errorMessageName: 'Global css file',
+      rootDir: config.projectRoot,
       initialValue: 'src/global.css',
     });
   }
@@ -181,12 +183,12 @@ async function handleInit() {
     );
   }
 
-  // TODO: Add "cwd" with the project root, and see if we can skip the interactive question from qwik cli
   if (installTailwind) {
     execSync(
-      `${getPackageManagerCommand().exec} qwik add tailwind --skipConfirmation=true`,
+      `${getPackageManagerCommand().exec} qwik add tailwind --skipConfirmation=true --projectDir=${config.projectRoot}`,
       {
         stdio: 'inherit',
+        cwd: config.projectRoot,
       },
     );
   }
@@ -430,9 +432,9 @@ Options: [${possibleComponentNames.join(', ')}]`,
           coerce: (components) => componentTypesFromString(components),
         })
         .option('projectRoot', {
-          description: 'The root of the project (default: "/")',
+          description: 'The root of the project (default: "./")',
           type: 'string',
-          default: '/',
+          default: './',
         }),
     handler: () => {},
   };
@@ -448,8 +450,8 @@ Options: [${possibleComponentNames.join(', ')}]`,
   if (!projectRoot && !args['projectRoot']) {
     projectRoot = cancelable(
       await text({
-        message: cyan('Specify the root of the project (leave empty for "/")'),
-        initialValue: '/',
+        message: cyan('Specify the root of the project (leave empty for "./")'),
+        initialValue: './',
       }),
     );
   }
@@ -507,6 +509,7 @@ function parseCommands(command: CommandModule) {
 interface FilePromptInfo {
   message: string;
   errorMessageName: string;
+  rootDir: string;
   initialValue?: string;
 }
 
@@ -517,9 +520,9 @@ async function collectFileLocationFromUser(config: FilePromptInfo) {
       initialValue: config.initialValue,
     }),
   );
-
-  if (!existsSync(filePath)) {
-    log.error(`${config.errorMessageName} not found at ${filePath}, want to try again?`);
+  const fullPath = path.join(config.rootDir, filePath);
+  if (!existsSync(fullPath)) {
+    log.error(`${config.errorMessageName} not found at ${fullPath}, want to try again?`);
     return collectFileLocationFromUser({ ...config, initialValue: filePath });
   }
   return filePath;