fix: improve pandacss integration (#4594)

QwikDev · Jun 25, 2023 · 935919e · 935919e
1 parent ff4a154
commit 935919e
Show file tree

Hide file tree

Showing 7 changed files with 75 additions and 8 deletions.
diff --git a/packages/qwik/src/cli/add/update-files.ts b/packages/qwik/src/cli/add/update-files.ts
@@ -26,15 +26,19 @@ export async function mergeIntegrationDir(
           await mergePackageJsons(fileUpdates, srcChildPath, destChildPath);
         } else if (destName === 'README.md') {
           await mergeReadmes(fileUpdates, srcChildPath, destChildPath);
-        } else if (destName === '.gitignore') {
-          await mergeGitIgnores(fileUpdates, srcChildPath, destChildPath);
+        } else if (
+          destName === '.gitignore' ||
+          destName === '.prettierignore' ||
+          destName === '.eslintignore'
+        ) {
+          await mergeIgnoresFile(fileUpdates, srcChildPath, destChildPath);
         } else if (ext === '.css') {
           await mergeCss(fileUpdates, srcChildPath, destChildPath);
         } else {
           if (fs.existsSync(destChildPath)) {
             fileUpdates.files.push({
               path: destChildPath,
-              content: await fs.promises.readFile(srcChildPath, 'utf-8'),
+              content: await fs.promises.readFile(srcChildPath),
               type: 'overwrite',
             });
           } else {
@@ -122,7 +126,7 @@ async function mergeReadmes(fileUpdates: FsUpdates, srcPath: string, destPath: s
   });
 }
 
-async function mergeGitIgnores(fileUpdates: FsUpdates, srcPath: string, destPath: string) {
+async function mergeIgnoresFile(fileUpdates: FsUpdates, srcPath: string, destPath: string) {
   const srcContent = await fs.promises.readFile(srcPath, 'utf-8');
 
   try {

diff --git a/packages/qwik/src/cli/build/run-build-command.ts b/packages/qwik/src/cli/build/run-build-command.ts
@@ -33,6 +33,16 @@ export async function runBuildCommand(app: AppCommand) {
   const lint = getScript('lint');
   const mode = app.getArg('mode');
 
+  const prebuildScripts = Object.keys(pkgJsonScripts)
+    .filter(s => s.startsWith('prebuild.'))
+    .map(getScript)
+    .filter(isString);
+
+  const postbuildScripts = Object.keys(pkgJsonScripts)
+    .filter(s => s.startsWith('postbuild.'))
+    .map(getScript)
+    .filter(isString);
+
   const scripts = [
     buildTypes,
     buildClientScript,
@@ -41,7 +51,7 @@ export async function runBuildCommand(app: AppCommand) {
     buildServerScript,
     buildStaticScript,
     lint,
-  ].filter((s) => typeof s === 'string' && s.trim().length > 0)!;
+  ].filter(isString);
 
   if (!isLibraryBuild && !buildClientScript) {
     console.log(pkgJsonScripts);
@@ -55,13 +65,34 @@ export async function runBuildCommand(app: AppCommand) {
   }
 
   console.log(``);
+  for (const script of prebuildScripts) {
+    console.log(dim(script!));
+  }
   for (const script of scripts) {
     console.log(dim(script!));
   }
+  for (const script of postbuildScripts) {
+    console.log(dim(script!));
+  }
   console.log(``);
 
   let typecheck: Promise<Step> | null = null;
 
+  for (const script of prebuildScripts) {
+    try {
+      await execaCommand(script, {
+        cwd: app.rootDir,
+        stdout: 'inherit',
+        env: {
+          FORCE_COLOR: 'true',
+        },
+      });
+    } catch (e) {
+      console.error(script, 'failed');
+      process.exit(1);
+    }
+  }
+
   if (buildTypes) {
     let copyScript = buildTypes;
     if (!copyScript.includes('--pretty')) {
@@ -264,6 +295,21 @@ export async function runBuildCommand(app: AppCommand) {
     });
   }
 
+  for (const script of postbuildScripts) {
+    try {
+      await execaCommand(script, {
+        cwd: app.rootDir,
+        stdout: 'inherit',
+        env: {
+          FORCE_COLOR: 'true',
+        },
+      });
+    } catch (e) {
+      console.error(script, 'failed');
+      process.exit(1);
+    }
+  }
+
   console.log(``);
 }
 
@@ -274,3 +320,6 @@ function attachArg(command: string, key: string, value?: string): string {
   return command
 }
 
+function isString(s: string | null | undefined): s is string {
+  return typeof s === 'string' && s.trim().length > 0;
+}
diff --git a/starters/features/pandacss/.eslintignore b/starters/features/pandacss/.eslintignore
@@ -0,0 +1,2 @@
+# Panda CSS
+src/styled-system
diff --git a/starters/features/pandacss/.gitignore b/starters/features/pandacss/.gitignore
@@ -0,0 +1,2 @@
+# Panda CSS
+src/styled-system
diff --git a/starters/features/pandacss/.prettierignore b/starters/features/pandacss/.prettierignore
@@ -0,0 +1,2 @@
+# Panda CSS
+src/styled-system
diff --git a/starters/features/pandacss/package.json b/starters/features/pandacss/package.json
@@ -1,7 +1,7 @@
 {
   "description": "Zero-runtime CSS-in-JS",
   "scripts": {
-    "pandacss.generate": "panda codegen"
+    "prebuild.pandacss": "panda codegen"
   },
   "devDependencies": {
     "@builder.io/vite-plugin-macro": "~0.0.6",

diff --git a/starters/features/pandacss/src/routes/pandacss/index.tsx b/starters/features/pandacss/src/routes/pandacss/index.tsx
@@ -3,8 +3,16 @@ import { css } from '~/styled-system/css';
 
 export default component$(() => {
   return (
-    <div class={css({ p: '10', bg: 'gray.900', h: 'dvh' })}>
-      <Slot />
+    <div
+      class={css({
+        padding: 10,
+        bg: 'red.400',
+        height: 'dvh',
+        margin: 100,
+        fontSize: 30,
+      })}
+    >
+      This box is styled with PandaCSS.
     </div>
   );
 });