create-plasmic-app 0.0.148 → 0.0.149

package/dist/nextjs/nextjs.js

@@ -107,10 +107,6 @@ function generateFilesAppDir(args) {
             yield fs_1.promises.writeFile(path_1.default.join(projectPath, "app", "[[...catchall]]", `page.${jsOrTs}x`), (0, catchall_page_1.makeCatchallPage_app_loader)(jsOrTs));
         }
         else {
-            // Replace starter layout. Removes app/layout.js in JS projects before writing layout.jsx.
-            (0, file_utils_1.deleteGlob)(path_1.default.join(projectPath, "app", "layout.*"));
-            // ./app/layout.tsx
-            yield fs_1.promises.writeFile(path_1.default.join(projectPath, "app", `layout.${jsOrTs}x`), (0, layout_1.makeLayout_app_codegen)(jsOrTs));
             // ./plasmic-init-client.tsx
             yield fs_1.promises.writeFile(path_1.default.join(projectPath, `plasmic-init-client.${jsOrTs}x`), (0, plasmic_init_client_1.makePlasmicInitClient_app_codegen)(jsOrTs));
             // ./app/plasmic-host/page.tsx
@@ -125,8 +121,20 @@ function generateFilesAppDir(args) {
                 projectApiToken,
                 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 = yield (0, file_utils_1.getPlasmicConfig)(projectPath, "nextjs", scheme);
+            const layoutAbsPath = path_1.default.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.
+            (0, file_utils_1.deleteGlob)(path_1.default.join(projectPath, "app", "layout.*"));
+            // ./app/layout.tsx
+            yield fs_1.promises.writeFile(path_1.default.join(projectPath, "app", `layout.${jsOrTs}x`), (0, layout_1.makeLayout_app_codegen)(jsOrTs, cssImports));
+            // Make an index (/) page if the project didn't have one.
             const plasmicFiles = lodash_1.default.map(lodash_1.default.flatMap(config.projects, (p) => p.components), (c) => c.importSpec.modulePath);
             if (!plasmicFiles.find((f) => f.includes("app/page."))) {
                 yield fs_1.promises.writeFile(path_1.default.join(projectPath, "app", `page.${jsOrTs}x`), (0, file_utils_1.generateWelcomePage)(config, "nextjs"));
@@ -148,8 +156,6 @@ function generateFilesPagesDir(args) {
             yield fs_1.promises.writeFile(path_1.default.join(projectPath, "pages", `[[...catchall]].${jsOrTs}x`), (0, catchall_page_2.makeCatchallPage_pages_loader)(jsOrTs));
         }
         else {
-            // ./pages/_app.tsx
-            yield fs_1.promises.writeFile(path_1.default.join(projectPath, "pages", `_app.${jsOrTs}x`), (0, app_1.makeCustomApp_pages_codegen)(jsOrTs));
             // ./pages/plasmic-host.tsx
             yield fs_1.promises.writeFile(path_1.default.join(projectPath, "pages", `plasmic-host.${jsOrTs}x`), (0, plasmic_host_3.makePlasmicHostPage_pages_codegen)());
             // This should generate
@@ -161,8 +167,18 @@ function generateFilesPagesDir(args) {
                 projectApiToken,
                 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 = yield (0, file_utils_1.getPlasmicConfig)(projectPath, "nextjs", scheme);
+            const appAbsPath = path_1.default.join(projectPath, "pages", `_app.${jsOrTs}x`);
+            const cssImports = getPlasmicCssImports({
+                projectPath,
+                rootFileAbsPath: appAbsPath,
+                config,
+            });
+            // ./pages/_app.tsx
+            yield fs_1.promises.writeFile(appAbsPath, (0, app_1.makeCustomApp_pages_codegen)(jsOrTs, cssImports));
+            // Make an index page if the project didn't have one.
             const plasmicFiles = lodash_1.default.map(lodash_1.default.flatMap(config.projects, (p) => p.components), (c) => c.importSpec.modulePath);
             if (!plasmicFiles.find((f) => f.includes("/index."))) {
                 yield fs_1.promises.writeFile(path_1.default.join(projectPath, "pages", `index.${jsOrTs}x`), (0, file_utils_1.generateWelcomePage)(config, "nextjs"));
@@ -170,3 +186,29 @@ function generateFilesPagesDir(args) {
         }
     });
 }
+/**
+ * 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) {
+    const { projectPath, rootFileAbsPath, config } = args;
+    return (config.projects || [])
+        .filter((p) => !p.indirect && !!p.cssFilePath)
+        .map((p) => {
+        const absoluteCssPath = path_1.default.join(projectPath, config.srcDir, p.cssFilePath);
+        let relPath = path_1.default.relative(path_1.default.dirname(rootFileAbsPath), absoluteCssPath);
+        if (!relPath.startsWith(".")) {
+            relPath = `./${relPath}`;
+        }
+        return { projectId: p.projectId, importPath: relPath };
+    });
+}

package/dist/nextjs/templates/app-codegen/layout.d.ts

@@ -1,2 +1,2 @@
-import { JsOrTs } from "../../../utils/types";
-export declare function makeLayout_app_codegen(jsOrTs: JsOrTs): string;
+import { JsOrTs, PlasmicCssImport } from "../../../utils/types";
+export declare function makeLayout_app_codegen(jsOrTs: JsOrTs, cssImports?: PlasmicCssImport[]): string;

package/dist/nextjs/templates/app-codegen/layout.js

@@ -2,8 +2,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.makeLayout_app_codegen = void 0;
 const file_utils_1 = require("../../../utils/file-utils");
-function makeLayout_app_codegen(jsOrTs) {
-    return `import '@/app/globals.css'
+function makeLayout_app_codegen(jsOrTs, cssImports = []) {
+    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/dist/nextjs/templates/pages-codegen/app.d.ts

@@ -1,2 +1,2 @@
-import { JsOrTs } from "../../../utils/types";
-export declare function makeCustomApp_pages_codegen(jsOrTs: JsOrTs): string;
+import { JsOrTs, PlasmicCssImport } from "../../../utils/types";
+export declare function makeCustomApp_pages_codegen(jsOrTs: JsOrTs, cssImports?: PlasmicCssImport[]): string;

package/dist/nextjs/templates/pages-codegen/app.js

@@ -2,8 +2,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.makeCustomApp_pages_codegen = void 0;
 const file_utils_1 = require("../../../utils/file-utils");
-function makeCustomApp_pages_codegen(jsOrTs) {
-    return `import '@/styles/globals.css'
+function makeCustomApp_pages_codegen(jsOrTs, cssImports = []) {
+    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";${(0, file_utils_1.ifTs)(jsOrTs, `
 import type { AppProps } from "next/app";`)}
 import Head from "next/head";

package/dist/utils/types.d.ts

@@ -6,4 +6,8 @@ export type PlatformOptions = {
     };
 };
 export type SchemeType = "codegen" | "loader";
+export type PlasmicCssImport = {
+    projectId: string;
+    importPath: string;
+};
 export declare function platformTypeToString(s: PlatformType): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-plasmic-app",
-  "version": "0.0.148",
+  "version": "0.0.149",
   "description": "Create Plasmic-powered React apps",
   "main": "./dist/lib.js",
   "types": "./dist/lib.d.ts",
@@ -33,7 +33,7 @@
     "tsx": "^4.21.0"
   },
   "dependencies": {
-    "@plasmicapp/cli": "0.1.361",
+    "@plasmicapp/cli": "0.1.362",
     "@sentry/node": "^6.2.2",
     "chalk": "^4.1.0",
     "execa": "^5.0.0",
@@ -47,5 +47,5 @@
     "validate-npm-package-name": "^3.0.0",
     "yargs": "^16.2.0"
   },
-  "gitHead": "e7fba8eb70bafe6176256ccbbef135a64f53ed35"
+  "gitHead": "2dd9cf093c62331b86ac29449b8e6e33f55c863c"
 }

package/src/nextjs/nextjs.ts

@@ -1,3 +1,4 @@
+import { PlasmicConfig } from "@plasmicapp/cli/dist/utils/config-utils";
 import { promises as fs } from "fs";
 import L from "lodash";
 import path from "path";
@@ -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";
@@ -119,15 +121,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 +144,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 +205,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 +221,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 +250,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"