shopify-accelerate-app 1.2.12 → 1.2.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shopify-accelerate-app",
-  "version": "1.2.12",
+  "version": "1.2.13",
   "description": "Shopify App development with full Typescript Support",
   "author": "Felix Tellmann",
   "license": "MIT",
@@ -92,7 +92,12 @@
       "react/no-unescaped-entities": 0,
       "react/jsx-sort-props": 0,
       "node/no-unpublished-require": 0,
-      "max-len": ["error", { "code": 140 }]
+      "max-len": [
+        "error",
+        {
+          "code": 140
+        }
+      ]
     }
   },
   "prettier": {

package/src/tailwind/tailwind-watch.ts

@@ -1,4 +1,5 @@
 // import { require } from "../../require";
+import chalk from "chalk";
 import child_process from "child_process";
 import fs from "fs";
 import path from "path";
@@ -7,48 +8,113 @@ import { writeCompareFile } from "../utils/fs";
 
 const watch = require("node-watch");
 
+const log = (message: string) => {
+  console.log(`[${chalk.gray(new Date().toLocaleTimeString())}] ${chalk.magenta("[tailwind]")} ${message}`);
+};
+
+/** Find a config file, checking .cjs first (safe in ESM projects), then .js */
+const findLocalConfig = (dir: string, basename: string): string | null => {
+  for (const ext of [".cjs", ".js"]) {
+    const file_path = path.join(dir, `${basename}${ext}`);
+    if (fs.existsSync(file_path)) return file_path;
+  }
+  return null;
+};
+
 export const runTailwindCSSWatcher = () => {
   const { package_root } = config;
 
-  const hasConfig = fs.existsSync(path.join(root_dir, "tailwind.config.js"));
-  const hasPostCss = fs.existsSync(path.join(root_dir, "postcss.config.js"));
-  const inputFile = fs.existsSync(path.join(root_dir, `assets`, `_tailwind.css`));
-  const resetInputFile = fs.existsSync(path.join(root_dir, `assets`, `_reset.css`));
-
-  if (!inputFile) {
-    console.log("Tailwind Input file not found");
+  const inputPath = path.join(root_dir, "assets", "_tailwind.css");
+  if (!fs.existsSync(inputPath)) {
+    log(chalk.red("Input file not found: ") + chalk.yellow(inputPath));
     return;
   }
 
-  const filePath = path.join(config.extension_path, `assets`, `tailwind_pre_sort.css`);
+  const localTailwindConfig = findLocalConfig(root_dir, "tailwind.config");
+  const localPostcssConfig = findLocalConfig(root_dir, "postcss.config");
+
+  const tailwindConfig = localTailwindConfig ?? path.join(package_root, "src", "tailwind", "tailwind.config.js");
+  const postcssConfig = localPostcssConfig ?? path.join(package_root, "src", "tailwind", "postcss.config.js");
+  const filePath = path.join(config.extension_path, "assets", "tailwind_pre_sort.css");
+  const outputPath = path.join(config.extension_path, "assets", "tailwind.css");
+  const assetsDir = path.join(config.extension_path, "assets");
+
+  log(chalk.cyan("Starting Tailwind CSS watcher"));
+  log(`  Input:    ${chalk.yellow(inputPath)}`);
+  log(`  Output:   ${chalk.yellow(outputPath)}`);
+  log(`  Config:   ${chalk.yellow(tailwindConfig)}${localTailwindConfig ? chalk.green(" (local)") : chalk.gray(" (package)")}`);
+  log(`  PostCSS:  ${chalk.yellow(postcssConfig)}${localPostcssConfig ? chalk.green(" (local)") : chalk.gray(" (package)")}`);
+
+  // Ensure the assets output directory exists before Tailwind writes to it
+  if (!fs.existsSync(assetsDir)) {
+    log(chalk.yellow(`Creating assets directory: ${assetsDir}`));
+    fs.mkdirSync(assetsDir, { recursive: true });
+  }
 
   /*= =============== Tailwind Watcher ================ */
-  console.log(path.join(root_dir, `assets`, `_tailwind.css`));
-  console.log(path.join(package_root, `src/tailwind/tailwind.config.js`));
-  child_process.spawn(
-    "npx",
-    [
-      "tailwindcss",
-      "--config",
-      /*hasConfig ? "tailwind.config.js" :*/ path.join(package_root, `src/tailwind/tailwind.config.js`),
-      "--postcss",
-      /*hasPostCss ? "postcss.config.js" : */ path.join(package_root, `src/tailwind/postcss.config.js`),
-      "-i",
-      path.join(root_dir, `assets`, `_tailwind.css`),
-      "-o",
-      filePath,
-      "--watch",
-    ],
-    {
-      shell: true,
-      stdio: "inherit",
+  const args = [
+    "tailwindcss",
+    "--config",
+    tailwindConfig,
+    "--postcss",
+    postcssConfig,
+    "-i",
+    inputPath,
+    "-o",
+    filePath,
+    "--watch",
+  ];
+
+  const proc = child_process.spawn("npx", args, {
+    shell: true,
+    stdio: ["pipe", "pipe", "pipe"],
+  });
+
+  proc.stdout?.on("data", (data: Buffer) => {
+    const output = data.toString().trim();
+    if (!output) return;
+    if (output.includes("Done in")) {
+      log(chalk.green(output));
+    } else if (output.includes("Rebuilding")) {
+      log(chalk.gray(output));
+    } else {
+      log(output);
     }
-  );
+  });
+
+  proc.stderr?.on("data", (data: Buffer) => {
+    const output = data.toString().trim();
+    if (!output) return;
+    // Browserslist warnings are noise — suppress them
+    if (output.includes("Browserslist") || output.includes("npx update-browserslist")) return;
+    // Tailwind CLI sends build status to stderr
+    if (output.includes("Done in")) {
+      log(chalk.green(output));
+    } else if (output.includes("Rebuilding")) {
+      log(chalk.gray(output));
+    } else if (output.includes("warn")) {
+      log(chalk.yellow(`[warn] ${output}`));
+    } else {
+      log(chalk.red(`[error] ${output}`));
+    }
+  });
+
+  proc.on("error", (err) => {
+    log(chalk.red(`Failed to start Tailwind process: ${err.message}`));
+  });
+
+  proc.on("exit", (code, signal) => {
+    if (code !== null && code !== 0) {
+      log(chalk.red(`Tailwind process exited with code ${code}`));
+    } else if (signal) {
+      log(chalk.yellow(`Tailwind process killed by signal ${signal}`));
+    }
+  });
 
   /*= =============== Tailwind Plugin Order ================ */
-  watch(path.join(config.extension_path, "assets"), { recursive: false }, async (evt, name) => {
+  watch(assetsDir, { recursive: false }, async (_evt: string, name: string) => {
     try {
-      if (!name.match(/tailwind_pre_sort.css$/) || !fs.existsSync(filePath)) return;
+      if (!name.match(/tailwind_pre_sort\.css$/) || !fs.existsSync(filePath)) return;
       const file = fs.readFileSync(filePath, { encoding: "utf-8" });
 
       const top = file
@@ -61,7 +127,7 @@ export const runTailwindCSSWatcher = () => {
         .join("\n}")}\n`;
       const content = top + bottom;
 
-      const classesInOrder = [];
+      const classesInOrder: string[] = [];
       const omitCompoundClasses = [":not", ":where", ">", "*", ","];
 
       content.split("\n").forEach((line) => {
@@ -86,10 +152,10 @@ export const runTailwindCSSWatcher = () => {
         }
       });
 
-      writeCompareFile(path.join(config.extension_path, `assets/tailwind.css`), content);
+      writeCompareFile(path.join(config.extension_path, "assets", "tailwind.css"), content);
 
       if (process.env.SHOPIFY_ACCELERATE_THEME_OUTPUT_PATH) {
-        writeCompareFile(path.join(config.theme_output_path, `assets/listify-dev-tailwind.css`), content);
+        writeCompareFile(path.join(config.theme_output_path, "assets", "listify-dev-tailwind.css"), content);
       }
 
       writeCompareFile(
@@ -105,7 +171,7 @@ export const runTailwindCSSWatcher = () => {
           )
       );
     } catch (err) {
-      console.log(err);
+      log(chalk.red(`Post-processing error: ${err}`));
     }
   });
 };