create-plasmic-app 0.0.151 → 0.0.153

package/src/nextjs/nextjs.ts

@@ -1,4 +1,5 @@
-import { promises as fs } from "fs";
+import { PlasmicConfig } from "@plasmicapp/cli/dist/utils/config-utils";
+import { existsSync, promises as fs } from "fs";
 import L from "lodash";
 import path from "path";
 import { spawnOrFail } from "../utils/cmd-utils";
@@ -11,6 +12,7 @@ import {
 import { ensure } from "../utils/lang-utils";
 import { installUpgrade } from "../utils/npm-utils";
 import { CPAStrategy, GenerateFilesArgs } from "../utils/strategy";
+import { PlasmicCssImport } from "../utils/types";
 import { makeLayout_app_codegen } from "./templates/app-codegen/layout";
 import { makePlasmicHostPage_app_codegen } from "./templates/app-codegen/plasmic-host";
 import { makePlasmicInitClient_app_codegen } from "./templates/app-codegen/plasmic-init-client";
@@ -52,6 +54,21 @@ export const nextjsStrategy: CPAStrategy = {
   },
   overwriteConfig: async (args) => {
     const { projectPath, scheme, jsOrTs } = args;
+
+    // create-next-app's globals.css forces a dark background with `prefers-color-scheme: dark`.
+    // It's imported by the /plasmic-host layout/_app and paints the Studio canvas black.
+    const globalsCssCandidates = [
+      path.join(projectPath, "app", "globals.css"),
+      path.join(projectPath, "src", "app", "globals.css"),
+      path.join(projectPath, "styles", "globals.css"),
+      path.join(projectPath, "src", "styles", "globals.css"),
+    ];
+    for (const globalsCssPath of globalsCssCandidates) {
+      if (existsSync(globalsCssPath)) {
+        await fs.writeFile(globalsCssPath, makeNeutralGlobalsCss());
+      }
+    }
+
     if (scheme === "codegen") {
       const isTs = jsOrTs === "ts";
       const typePragma = isTs
@@ -83,6 +100,24 @@ export default nextConfig;`
   },
 };
 
+/**
+ * Canvas-safe globals.css: no body background/color or dark `color-scheme`,
+ * since it's loaded by /plasmic-host (for Studio canvas).
+ */
+function makeNeutralGlobalsCss(): string {
+  return `* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+`;
+}
+
 async function generateFilesAppDir(args: GenerateFilesArgs) {
   const { projectPath, scheme, jsOrTs, projectId, projectApiToken } = args;
 
@@ -119,15 +154,6 @@ async function generateFilesAppDir(args: GenerateFilesArgs) {
       makeCatchallPage_app_loader(jsOrTs)
     );
   } else {
-    // Replace starter layout. Removes app/layout.js in JS projects before writing layout.jsx.
-    deleteGlob(path.join(projectPath, "app", "layout.*"));
-
-    // ./app/layout.tsx
-    await fs.writeFile(
-      path.join(projectPath, "app", `layout.${jsOrTs}x`),
-      makeLayout_app_codegen(jsOrTs)
-    );
-
     // ./plasmic-init-client.tsx
     await fs.writeFile(
       path.join(projectPath, `plasmic-init-client.${jsOrTs}x`),
@@ -151,8 +177,26 @@ async function generateFilesAppDir(args: GenerateFilesArgs) {
       projectPath,
     });
 
-    // Make an index (/) page if the project didn't have one.
+    // Read plasmic.json so we can wire each top-level project's plasmic.css
+    // import directly into the root layout template.
     const config = await getPlasmicConfig(projectPath, "nextjs", scheme);
+    const layoutAbsPath = path.join(projectPath, "app", `layout.${jsOrTs}x`);
+    const cssImports = getPlasmicCssImports({
+      projectPath,
+      rootFileAbsPath: layoutAbsPath,
+      config,
+    });
+
+    // Replace starter layout. Removes app/layout.js in JS projects before writing layout.jsx.
+    deleteGlob(path.join(projectPath, "app", "layout.*"));
+
+    // ./app/layout.tsx
+    await fs.writeFile(
+      path.join(projectPath, "app", `layout.${jsOrTs}x`),
+      makeLayout_app_codegen(jsOrTs, cssImports)
+    );
+
+    // Make an index (/) page if the project didn't have one.
     const plasmicFiles = L.map(
       L.flatMap(config.projects, (p) => p.components),
       (c) => c.importSpec.modulePath
@@ -194,12 +238,6 @@ async function generateFilesPagesDir(args: GenerateFilesArgs) {
       makeCatchallPage_pages_loader(jsOrTs)
     );
   } else {
-    // ./pages/_app.tsx
-    await fs.writeFile(
-      path.join(projectPath, "pages", `_app.${jsOrTs}x`),
-      makeCustomApp_pages_codegen(jsOrTs)
-    );
-
     // ./pages/plasmic-host.tsx
     await fs.writeFile(
       path.join(projectPath, "pages", `plasmic-host.${jsOrTs}x`),
@@ -216,8 +254,23 @@ async function generateFilesPagesDir(args: GenerateFilesArgs) {
       projectPath,
     });
 
-    // Make an index page if the project didn't have one.
+    // Read plasmic.json so we can wire each top-level project's plasmic.css
+    // import directly into the _app template.
     const config = await getPlasmicConfig(projectPath, "nextjs", scheme);
+    const appAbsPath = path.join(projectPath, "pages", `_app.${jsOrTs}x`);
+    const cssImports = getPlasmicCssImports({
+      projectPath,
+      rootFileAbsPath: appAbsPath,
+      config,
+    });
+
+    // ./pages/_app.tsx
+    await fs.writeFile(
+      appAbsPath,
+      makeCustomApp_pages_codegen(jsOrTs, cssImports)
+    );
+
+    // Make an index page if the project didn't have one.
     const plasmicFiles = L.map(
       L.flatMap(config.projects, (p) => p.components),
       (c) => c.importSpec.modulePath
@@ -230,3 +283,42 @@ async function generateFilesPagesDir(args: GenerateFilesArgs) {
     }
   }
 }
+
+/**
+ * Builds the list of `plasmic.css` imports the Next.js root file (Pages Router
+ * `_app.{ext}`, App Router `app/layout.{ext}`) needs for every top-level
+ * project in `plasmic.json`. Next.js disallows global non-module CSS imports
+ * outside of those files.
+ *
+ * The marker comment in the emitted import (plasmic-import: <id>/projectcss)
+ * matches the convention used by @plasmicapp/cli sync, so subsequent syncs
+ * can update paths in-place without producing duplicates.
+ *
+ * @param rootFileAbsPath Absolute path to the Next.js root file (`_app.{ext}`
+ *   for Pages Router, `app/layout.{ext}` for App Router).
+ */
+function getPlasmicCssImports(args: {
+  projectPath: string;
+  rootFileAbsPath: string;
+  config: PlasmicConfig;
+}): PlasmicCssImport[] {
+  const { projectPath, rootFileAbsPath, config } = args;
+  return (config.projects || [])
+    .filter((p) => !p.indirect && !!p.cssFilePath)
+    .map((p) => {
+      const absoluteCssPath = path.join(
+        projectPath,
+        config.srcDir,
+        p.cssFilePath
+      );
+      let relPath = path.relative(
+        path.dirname(rootFileAbsPath),
+        absoluteCssPath
+      );
+      if (!relPath.startsWith(".")) {
+        relPath = `./${relPath}`;
+      }
+
+      return { projectId: p.projectId, importPath: relPath };
+    });
+}

package/src/nextjs/templates/app-codegen/layout.ts

@@ -1,8 +1,21 @@
 import { ifTs } from "../../../utils/file-utils";
-import { JsOrTs } from "../../../utils/types";
+import { JsOrTs, PlasmicCssImport } from "../../../utils/types";
 
-export function makeLayout_app_codegen(jsOrTs: JsOrTs): string {
-  return `import '@/app/globals.css'
+export function makeLayout_app_codegen(
+  jsOrTs: JsOrTs,
+  cssImports: PlasmicCssImport[] = []
+): string {
+  const plasmicCssImportLines = cssImports
+    .map(
+      (i) =>
+        `import "${i.importPath}"; // plasmic-import: ${i.projectId}/projectcss`
+    )
+    .join("\n");
+  const plasmicCssImportsBlock = plasmicCssImportLines
+    ? `${plasmicCssImportLines}\n`
+    : "";
+
+  return `${plasmicCssImportsBlock}import '@/app/globals.css'
 import { ClientPlasmicRootProvider } from "@/plasmic-init-client";
 
 export default function RootLayout({

package/src/nextjs/templates/pages-codegen/app.ts

@@ -1,8 +1,21 @@
 import { ifTs } from "../../../utils/file-utils";
-import { JsOrTs } from "../../../utils/types";
+import { JsOrTs, PlasmicCssImport } from "../../../utils/types";
 
-export function makeCustomApp_pages_codegen(jsOrTs: JsOrTs): string {
-  return `import '@/styles/globals.css'
+export function makeCustomApp_pages_codegen(
+  jsOrTs: JsOrTs,
+  cssImports: PlasmicCssImport[] = []
+): string {
+  const plasmicCssImportLines = cssImports
+    .map(
+      (i) =>
+        `import "${i.importPath}"; // plasmic-import: ${i.projectId}/projectcss`
+    )
+    .join("\n");
+  const plasmicCssImportsBlock = plasmicCssImportLines
+    ? `${plasmicCssImportLines}\n`
+    : "";
+
+  return `${plasmicCssImportsBlock}import '@/styles/globals.css'
 import { PlasmicRootProvider } from "@plasmicapp/react-web";${ifTs(
     jsOrTs,
     `

package/src/utils/types.ts

@@ -7,6 +7,11 @@ export type PlatformOptions = {
 };
 export type SchemeType = "codegen" | "loader";
 
+export type PlasmicCssImport = {
+  projectId: string;
+  importPath: string;
+};
+
 export function platformTypeToString(s: PlatformType): string {
   return s === "nextjs"
     ? "Next.js"