create-bcp-app 0.1.3 → 0.1.4

package/README.md

@@ -27,9 +27,22 @@ Select a database:
 When Tailwind is enabled, the project includes:
 
 - `tailwindcss`
-- `@tailwindcss/postcss`
-- `postcss.config.mjs`
+- `@tailwindcss/cli`
+- `concurrently`
 - `app/globals.css`
+- `app/api/bcp-styles/route.ts`
+- a stylesheet link in `app/layout.tsx`
+- starter Tailwind utility classes in `app/page.tsx`
+
+The generated npm scripts compile Tailwind before starting BCP and keep Tailwind running in watch mode during development:
+
+```text
+npm run css:build
+npm run css:watch
+npm run css:build:prod
+```
+
+`npm run dev` performs an initial CSS build, then runs the Tailwind watcher and `bcp dev` together. `npm run build` creates a minified stylesheet before the BCP production build.
 
 ### Database
 
@@ -66,5 +79,5 @@ npx create-bcp-app my-app --yes
 The `--bcp` option is primarily useful for prerelease and local package testing, for example:
 
 ```bash
-npx create-bcp-app my-app --bcp file:../bcp-0.1.2.tgz
+npx create-bcp-app my-app --bcp file:../bcp-0.1.4.tgz
 ```

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "create-bcp-app",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "Create a new BCP Framework application.",
   "type": "module",
   "license": "MIT",
+  "bcpFrameworkPackage": "@chidchanun/bcp",
   "bin": {
     "create-bcp-app": "bin/create-bcp-app.mjs"
   },
@@ -24,6 +25,5 @@
   },
   "publishConfig": {
     "access": "public"
-  },
-  "bcpFrameworkPackage": "@chidchanun/bcp"
+  }
 }

package/src/project-options.mjs

@@ -176,34 +176,9 @@ export function applyProjectOptions({
         );
 
     if (tailwind) {
-        packageJson.devDependencies = {
-            ...packageJson.devDependencies,
-            tailwindcss:
-                "^4.3.3",
-            "@tailwindcss/postcss":
-                "^4.3.3",
-        };
-
-        writeFile(
+        configureTailwind(
             targetDirectory,
-            "postcss.config.mjs",
-            `export default {
-    plugins: {
-        "@tailwindcss/postcss": {},
-    },
-};
-`
-        );
-
-        writeFile(
-            targetDirectory,
-            "app/globals.css",
-            `@import "tailwindcss";
-
-@theme {
-    --font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
-}
-`
+            packageJson
         );
     }
 
@@ -245,6 +220,241 @@ export function applyProjectOptions({
     };
 }
 
+function configureTailwind(
+    targetDirectory,
+    packageJson
+) {
+    packageJson.devDependencies = {
+        ...packageJson.devDependencies,
+        tailwindcss:
+            "^4.3.3",
+        "@tailwindcss/cli":
+            "^4.3.3",
+        concurrently:
+            "^10.0.5",
+    };
+
+    packageJson.scripts = {
+        ...packageJson.scripts,
+        dev:
+            "npm run css:build && concurrently -k -n tailwind,bcp \"npm run css:watch\" \"bcp dev\"",
+        build:
+            "npm run css:build:prod && bcp build",
+        "css:build":
+            "tailwindcss -i ./app/globals.css -o ./public/bcp.css",
+        "css:watch":
+            "tailwindcss -i ./app/globals.css -o ./public/bcp.css --watch",
+        "css:build:prod":
+            "tailwindcss -i ./app/globals.css -o ./public/bcp.css --minify",
+    };
+
+    writeFile(
+        targetDirectory,
+        "app/globals.css",
+        `@import "tailwindcss" source("../");
+
+@theme {
+    --font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
+}
+`
+    );
+
+    writeFile(
+        targetDirectory,
+        "app/api/bcp-styles/route.ts",
+        `import fs from "node:fs/promises";
+import path from "node:path";
+
+export async function GET() {
+    const stylesheet =
+        path.join(
+            process.cwd(),
+            "public",
+            "bcp.css"
+        );
+
+    try {
+        const css =
+            await fs.readFile(
+                stylesheet,
+                "utf8"
+            );
+
+        return new Response(
+            css,
+            {
+                headers: {
+                    "Content-Type":
+                        "text/css; charset=utf-8",
+                    "Cache-Control":
+                        "no-store, max-age=0",
+                },
+            }
+        );
+    } catch {
+        return new Response(
+            "/* BCP Tailwind stylesheet has not been built yet. */",
+            {
+                status: 503,
+                headers: {
+                    "Content-Type":
+                        "text/css; charset=utf-8",
+                    "Cache-Control":
+                        "no-store, max-age=0",
+                },
+            }
+        );
+    }
+}
+`
+    );
+
+    fs.mkdirSync(
+        path.join(
+            targetDirectory,
+            "public"
+        ),
+        {
+            recursive: true,
+        }
+    );
+
+    injectTailwindStylesheet(
+        targetDirectory
+    );
+    applyTailwindStarterStyles(
+        targetDirectory
+    );
+    appendGitIgnore(
+        targetDirectory,
+        "public/bcp.css"
+    );
+}
+
+function injectTailwindStylesheet(
+    targetDirectory
+) {
+    const layoutFile =
+        path.join(
+            targetDirectory,
+            "app",
+            "layout.tsx"
+        );
+    const source =
+        fs.readFileSync(
+            layoutFile,
+            "utf8"
+        );
+    const rootPattern =
+        /^([ \t]*)<div>[ \t]*(\r?\n)/m;
+    const match =
+        rootPattern.exec(
+            source
+        );
+
+    if (!match) {
+        throw new Error(
+            "BCP create-app could not attach the Tailwind stylesheet to app/layout.tsx."
+        );
+    }
+
+    const indent =
+        match[1];
+    const newline =
+        match[2];
+    const childIndent =
+        `${indent}    `;
+    const propertyIndent =
+        `${childIndent}    `;
+    const replacement =
+        `${indent}<div>${newline}` +
+        `${childIndent}<link${newline}` +
+        `${propertyIndent}rel="stylesheet"${newline}` +
+        `${propertyIndent}href="/api/bcp-styles"${newline}` +
+        `${childIndent}/>${newline}`;
+
+    fs.writeFileSync(
+        layoutFile,
+        source.replace(
+            rootPattern,
+            replacement
+        ),
+        "utf8"
+    );
+}
+
+function applyTailwindStarterStyles(
+    targetDirectory
+) {
+    const pageFile =
+        path.join(
+            targetDirectory,
+            "app",
+            "page.tsx"
+        );
+    let source =
+        fs.readFileSync(
+            pageFile,
+            "utf8"
+        );
+
+    source =
+        source.replace(
+            "        <section>",
+            "        <section className=\"mx-auto max-w-3xl space-y-6 px-6 py-16\">"
+        );
+    source =
+        source.replace(
+            "            <h1>",
+            "            <h1 className=\"text-4xl font-bold tracking-tight text-slate-900\">"
+        );
+    source =
+        source.replace(
+            "            <p>",
+            "            <p className=\"text-lg text-slate-600\">"
+        );
+
+    fs.writeFileSync(
+        pageFile,
+        source,
+        "utf8"
+    );
+}
+
+function appendGitIgnore(
+    targetDirectory,
+    entry
+) {
+    const filePath =
+        path.join(
+            targetDirectory,
+            ".gitignore"
+        );
+    const current =
+        fs.existsSync(
+            filePath
+        )
+            ? fs.readFileSync(
+                filePath,
+                "utf8"
+            ).trimEnd()
+            : "";
+    const lines =
+        new Set(
+            current
+                .split(/\r?\n/)
+                .filter(Boolean)
+        );
+
+    lines.add(entry);
+
+    fs.writeFileSync(
+        filePath,
+        `${Array.from(lines).join("\n")}\n`,
+        "utf8"
+    );
+}
+
 function appendEnvExample(
     targetDirectory,
     lines