@plasmicapp/cli 0.1.336 → 0.1.338

package/dist/lib.js

@@ -494564,6 +494564,9 @@ function makeImportPath(context, fromPath, toPath, stripExt, forceRelative = fal
   if (stripExt) {
     result = stripExtension(result);
   }
+  if (result.endsWith(".css") && context.config.platform === "tanstack" && context.config.style.scheme === "css") {
+    result = `${result}?url`;
+  }
   return result;
 }
 function isLocalModulePath(modulePath) {
@@ -494878,7 +494881,6 @@ async function fixRscModulesImports(context, baseDir, fixImportContext, compConf
     if (!modulePath) {
       continue;
     }
-    logger.info(`Fixing rsc import statements... ${modulePath}`);
     try {
       await fixFileImportStatements(
         context,
@@ -494969,7 +494971,7 @@ function defaultPublicResourcePath(context, project, ...subpaths) {
 var INDEX_EXT_REGEXP = /\/index\.(jsx|tsx)$/;
 var EXT_REGEXP = /\.(jsx|tsx)$/;
 function defaultPagePath(context, fileName) {
-  var _a, _b, _c, _d;
+  var _a, _b, _c, _d, _e;
   if (context.config.platform === "nextjs") {
     if ((_b = (_a = context.config.nextjsConfig) == null ? void 0 : _a.pagesDir) == null ? void 0 : _b.endsWith("app")) {
       const matchesIndex = fileName.match(INDEX_EXT_REGEXP);
@@ -494989,6 +494991,16 @@ function defaultPagePath(context, fileName) {
     }
   } else if (context.config.platform === "gatsby") {
     return import_upath3.default.join(((_d = context.config.gatsbyConfig) == null ? void 0 : _d.pagesDir) || "", fileName);
+  } else if (context.config.platform === "tanstack") {
+    let renamedFileName = fileName.replace(/\[(\w+)\]/g, "$$$1");
+    const matchesIndex = fileName.match(INDEX_EXT_REGEXP);
+    if (!matchesIndex) {
+      renamedFileName = renamedFileName.replace(EXT_REGEXP, "/index.$1");
+    }
+    return import_upath3.default.join(
+      ((_e = context.config.tanstackConfig) == null ? void 0 : _e.pagesDir) || "",
+      renamedFileName
+    );
   } else {
     return fileName;
   }
@@ -495135,6 +495147,9 @@ function getAllPaths(context) {
   if (config.nextjsConfig) {
     pushPath(config.nextjsConfig, "pagesDir");
   }
+  if (config.tanstackConfig) {
+    pushPath(config.tanstackConfig, "pagesDir");
+  }
   return pairs;
 }
 function assertAllPathsInRootDir(context) {
@@ -495203,11 +495218,15 @@ function readFileText(path15) {
         case "create":
           return ensureString(action.content);
         case "rename":
-          return readFileText(action.newPath);
+          return import_fs.default.readFileSync(path15, "utf8");
         case "delete":
           throw new HandledError("File does not exists");
       }
     }
+    const renamedFilePath = renamedFiles.get(path15);
+    if (renamedFilePath) {
+      return readFileText(renamedFilePath);
+    }
   }
   return import_fs.default.readFileSync(path15, "utf8");
 }
@@ -495629,7 +495648,7 @@ function getOrAddProjectLock(context, projectId, branchName, base) {
   return project;
 }
 function isPageAwarePlatform(platform) {
-  return platform === "nextjs" || platform === "gatsby";
+  return platform === "nextjs" || platform === "gatsby" || platform === "tanstack";
 }
 
 // src/api.ts
@@ -496165,6 +496184,14 @@ function detectCreateReactApp() {
     return false;
   }
 }
+function detectTanStackApp() {
+  try {
+    const packageJsonContent = getParsedPackageJson();
+    return "@tanstack/react-router" in packageJsonContent.dependencies;
+  } catch {
+    return false;
+  }
+}
 
 // src/actions/init.ts
 async function initPlasmic(opts) {
@@ -496207,13 +496234,22 @@ function createInitConfig(opts) {
         pagesDir: opts.pagesDir
       }
     },
+    ...opts.platform === "tanstack" && {
+      tanstackConfig: {
+        pagesDir: opts.pagesDir
+      }
+    },
     code: {
       ...opts.codeLang && { lang: opts.codeLang },
       ...opts.codeScheme && { scheme: opts.codeScheme },
       ...opts.reactRuntime && { reactRuntime: opts.reactRuntime }
     },
     style: {
-      ...opts.styleScheme && { scheme: opts.styleScheme }
+      ...opts.styleScheme && {
+        // Css Modules is not supported yet in SSR for TanStack
+        // https://github.com/TanStack/router/issues/3023
+        scheme: opts.platform === "tanstack" ? "css" : opts.styleScheme
+      }
     },
     images: {
       ...opts.imagesScheme && { scheme: opts.imagesScheme },
@@ -496236,12 +496272,13 @@ function simulatePrompt(question, defaultAnswer, bold = false) {
 }
 async function deriveInitAnswers(opts) {
   const plasmicRootDir = opts.config ? import_upath5.default.dirname(opts.config) : opts.baseDir;
-  const platform = !!opts.platform ? opts.platform : detectNextJs() ? "nextjs" : detectGatsby() ? "gatsby" : detectCreateReactApp() ? "react" : "";
+  const platform = !!opts.platform ? opts.platform : detectNextJs() ? "nextjs" : detectGatsby() ? "gatsby" : detectTanStackApp() ? "tanstack" : detectCreateReactApp() ? "react" : "";
   const isCra = platform === "react";
   const isNext = platform === "nextjs";
   const isNextAppDir = isNext && detectNextJsAppDir();
   const isGatsby = platform === "gatsby";
-  const isGeneric = !isCra && !isNext && !isGatsby;
+  const isTanStack = platform === "tanstack";
+  const isGeneric = !isCra && !isNext && !isGatsby && !isTanStack;
   const isTypescript = detectTypescript();
   if (isNext) {
     if (isNextAppDir) {
@@ -496251,10 +496288,12 @@ async function deriveInitAnswers(opts) {
     }
   } else if (isGatsby) {
     logger.info("Detected Gatsby...");
+  } else if (isTanStack) {
+    logger.info("Detected TanStack router app...");
   } else if (isCra) {
     logger.info("Detected create-react-app...");
   }
-  const deriver = isNext ? getNextDefaults(plasmicRootDir, isNextAppDir) : isGatsby ? getGatsbyDefaults(plasmicRootDir) : isCra ? getCraDefaults(plasmicRootDir) : getGenericDefaults(plasmicRootDir);
+  const deriver = isNext ? getNextDefaults(plasmicRootDir, isNextAppDir) : isGatsby ? getGatsbyDefaults(plasmicRootDir) : isTanStack ? getTanStackDefaults(plasmicRootDir) : isCra ? getCraDefaults(plasmicRootDir) : getGenericDefaults(plasmicRootDir);
   const srcDir = ensureString(deriver.srcDir);
   const getDefaultAnswer = (name, defaultAnswer) => {
     if (opts[name]) {
@@ -496491,6 +496530,35 @@ function getGatsbyDefaults(plasmicRootDir) {
     alwaysDerived: ["imagesScheme", "pagesDir"]
   };
 }
+function getTanStackDefaults(plasmicRootDir) {
+  var _a;
+  const projectRootDir = (_a = findPackageJsonDir(plasmicRootDir)) != null ? _a : plasmicRootDir;
+  return {
+    srcDir: import_upath5.default.relative(
+      plasmicRootDir,
+      import_upath5.default.join(projectRootDir, "src", "components")
+    ),
+    pagesDir: (srcDir) => {
+      const absSrcDir = import_upath5.default.join(plasmicRootDir, srcDir);
+      const absPagesDir = import_upath5.default.join(projectRootDir, "src", "routes");
+      const relDir = import_upath5.default.relative(absSrcDir, absPagesDir);
+      return relDir;
+    },
+    styleScheme: "css",
+    imagesScheme: "public-files",
+    imagesPublicDir: (srcDir) => import_upath5.default.relative(
+      import_upath5.default.join(plasmicRootDir, srcDir),
+      import_upath5.default.join(projectRootDir, "public")
+    ),
+    imagesPublicUrlPrefix: "/",
+    alwaysDerived: [
+      "styleScheme",
+      "imagesScheme",
+      "imagesPublicDir",
+      "pagesDir"
+    ]
+  };
+}
 function getCraDefaults(plasmicRootDir) {
   var _a;
   const projectRootDir = (_a = findPackageJsonDir(plasmicRootDir)) != null ? _a : plasmicRootDir;
@@ -496524,7 +496592,7 @@ var INIT_ARGS_DESCRIPTION = {
   platform: {
     shortDescription: "Target platform",
     longDescription: "Target platform to generate code for",
-    choices: ["react", "nextjs", "gatsby"]
+    choices: ["react", "nextjs", "gatsby", "tanstack"]
   },
   codeLang: {
     shortDescription: "Target language",
@@ -497566,7 +497634,7 @@ var import_lodash15 = __toESM(require_lodash());
 var import_upath9 = __toESM(require_upath());
 
 // src/utils/rsc-config.ts
-async function syncRscFiles(context, project, bundle, compConfig) {
+async function syncRscFiles(context, project, bundle, compConfig, opts) {
   const rscMetadata = bundle.rscMetadata;
   if (rscMetadata) {
     if (!compConfig.rsc) {
@@ -497594,19 +497662,22 @@ async function syncRscFiles(context, project, bundle, compConfig) {
       "-client.tsx"
     );
     compConfig.rsc.clientModulePath = clientModuleFilePath;
-    await writeFileContent(
-      context,
-      clientModuleFilePath,
-      rscMetadata.pageWrappers.client.module,
-      {
-        force: false
-      }
-    );
+    if (opts.shouldRegenerate) {
+      await writeFileContent(
+        context,
+        clientModuleFilePath,
+        rscMetadata.pageWrappers.client.module,
+        {
+          force: false
+        }
+      );
+    }
   }
 }
 
 // src/actions/sync-components.ts
 async function syncProjectComponents(context, project, version, componentBundles, forceOverwrite, summary, projectLock, checksums, baseDir) {
+  var _a;
   const componentsFromChecksums = /* @__PURE__ */ new Set([
     ...checksums.cssRulesChecksums.map(([id, _]) => id),
     checksums.renderModuleChecksums.map(([id, _]) => id)
@@ -497765,6 +497836,23 @@ async function syncProjectComponents(context, project, version, componentBundles
         }
         renameFile(context, compConfig.importSpec.modulePath, skeletonPath);
         compConfig.importSpec.modulePath = skeletonPath;
+        if (((_a = compConfig.rsc) == null ? void 0 : _a.clientModulePath) && fileExists(context, compConfig.rsc.clientModulePath)) {
+          const clientModulePath = skeletonPath.replace(
+            /\.tsx$/,
+            "-client.tsx"
+          );
+          if (context.cliArgs.quiet !== true) {
+            logger.info(
+              `Renaming page file: ${compConfig.rsc.clientModulePath} -> ${clientModulePath}	['${project.projectName}' ${project.projectId}/${id} ${project.version}]`
+            );
+          }
+          renameFile(
+            context,
+            compConfig.rsc.clientModulePath,
+            clientModulePath
+          );
+          compConfig.rsc.clientModulePath = clientModulePath;
+        }
       }
       compConfig.plumeType = plumeType;
       if (scheme === "direct") {
@@ -497832,7 +497920,9 @@ async function syncProjectComponents(context, project, version, componentBundles
       );
     }
     summary.set(id, { skeletonModuleModified });
-    await syncRscFiles(context, project, bundle, compConfig);
+    await syncRscFiles(context, project, bundle, compConfig, {
+      shouldRegenerate
+    });
   }
 }
 

package/dist/plasmic.schema.json

@@ -113,11 +113,14 @@
                     "type": "string"
                 },
                 "rsc": {
+                    "description": "RSC metadata for this component. The structure of the config changes when this is set:\nrenderModuleFilePath points to the client blackbox render module.\nimportSpec points to the server skeleton file.",
                     "properties": {
                         "clientModulePath": {
+                            "description": "The client skeleton file",
                             "type": "string"
                         },
                         "serverModulePath": {
+                            "description": "The server blackbox render module",
                             "type": "string"
                         }
                     },
@@ -565,7 +568,8 @@
             "enum": [
                 "gatsby",
                 "nextjs",
-                "react"
+                "react",
+                "tanstack"
             ],
             "type": "string"
         },
@@ -591,6 +595,16 @@
             "$ref": "#/definitions/StyleConfig",
             "description": "Config for style generation"
         },
+        "tanstackConfig": {
+            "description": "Tanstack-specific config",
+            "properties": {
+                "pagesDir": {
+                    "description": "The folder containing page components source files.",
+                    "type": "string"
+                }
+            },
+            "type": "object"
+        },
         "tokens": {
             "$ref": "#/definitions/TokensConfig",
             "description": "Config for style tokens"

package/dist/utils/config-utils.d.ts

@@ -10,7 +10,7 @@ export declare const ENV_AUTH_USER = "PLASMIC_AUTH_USER";
 export declare const ENV_AUTH_TOKEN = "PLASMIC_AUTH_TOKEN";
 export interface PlasmicConfig {
     /** Target platform to generate code for */
-    platform: "react" | "nextjs" | "gatsby";
+    platform: "react" | "nextjs" | "gatsby" | "tanstack";
     /**
      * The folder containing the component source files; this is the default place where
      * all files are generated and stored.
@@ -34,6 +34,11 @@ export interface PlasmicConfig {
         /** The folder containing page components source files. */
         pagesDir?: string;
     };
+    /** Tanstack-specific config */
+    tanstackConfig?: {
+        /** The folder containing page components source files. */
+        pagesDir?: string;
+    };
     /** Config for code generation */
     code: CodeConfig;
     /** Config for pictures */
@@ -206,8 +211,15 @@ export interface ComponentConfig {
     path?: string;
     /** Plume type if component is a Plume component */
     plumeType?: string;
+    /**
+     * RSC metadata for this component. The structure of the config changes when this is set:
+     * renderModuleFilePath points to the client blackbox render module.
+     * importSpec points to the server skeleton file.
+     */
     rsc?: {
+        /** The server blackbox render module  */
         serverModulePath: string;
+        /** The client skeleton file */
         clientModulePath: string;
     };
 }

package/dist/utils/envdetect.d.ts

@@ -3,3 +3,4 @@ export declare function detectNextJs(): boolean;
 export declare function detectNextJsAppDir(): any;
 export declare function detectGatsby(): string | null;
 export declare function detectCreateReactApp(): boolean;
+export declare function detectTanStackApp(): boolean;

package/dist/utils/file-utils.d.ts

@@ -9,7 +9,7 @@ export declare function writeFileContentRaw(filePath: string, content: string |
 export declare function defaultResourcePath(context: PlasmicContext, project: ProjectConfig | ProjectMetaBundle | string, ...subpaths: string[]): string;
 export declare function defaultPublicResourcePath(context: PlasmicContext, project: ProjectConfig, ...subpaths: string[]): string;
 export declare function defaultPagePath(context: {
-    config: Pick<PlasmicConfig, "platform" | "gatsbyConfig" | "nextjsConfig">;
+    config: Pick<PlasmicConfig, "platform" | "gatsbyConfig" | "nextjsConfig" | "tanstackConfig">;
 }, fileName: string): string;
 /**
  * Returns true iff paths `a` and `b` resolve to the same page URI. For

package/dist/utils/rsc-config.d.ts

@@ -1,3 +1,5 @@
 import { ComponentBundle } from "../api";
 import { ComponentConfig, PlasmicContext, ProjectConfig } from "./config-utils";
-export declare function syncRscFiles(context: PlasmicContext, project: ProjectConfig, bundle: ComponentBundle, compConfig: ComponentConfig): Promise<void>;
+export declare function syncRscFiles(context: PlasmicContext, project: ProjectConfig, bundle: ComponentBundle, compConfig: ComponentConfig, opts: {
+    shouldRegenerate: boolean;
+}): Promise<void>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plasmicapp/cli",
-  "version": "0.1.336",
+  "version": "0.1.338",
   "description": "plasmic cli for syncing local code with Plasmic designs",
   "engines": {
     "node": ">=12"
@@ -83,5 +83,5 @@
     "wrap-ansi": "^7.0.0",
     "yargs": "^15.4.1"
   },
-  "gitHead": "e390ac2d296d887f8ed34f29fd85f21a315c35da"
+  "gitHead": "7199e5b0c2c94b6e95c81c8120d9861faf98d7ee"
 }

package/src/__tests__/file-utils.spec.ts

@@ -102,4 +102,51 @@ describe("defaultPagePath", () => {
       )
     ).toBe("../app/not-index/page.tsx");
   });
+  it("handles tanstack pagesDir", () => {
+    expect(
+      defaultPagePath(
+        {
+          config: {
+            platform: "tanstack",
+            tanstackConfig: { pagesDir: "../routes" },
+          },
+        },
+        "/index.tsx"
+      )
+    ).toBe("../routes/index.tsx");
+    expect(
+      defaultPagePath(
+        {
+          config: {
+            platform: "tanstack",
+            tanstackConfig: { pagesDir: "../routes" },
+          },
+        },
+        "/nested/index.tsx"
+      )
+    ).toBe("../routes/nested/index.tsx");
+
+    expect(
+      defaultPagePath(
+        {
+          config: {
+            platform: "tanstack",
+            tanstackConfig: { pagesDir: "../routes" },
+          },
+        },
+        "/post.tsx"
+      )
+    ).toBe("../routes/post/index.tsx");
+    expect(
+      defaultPagePath(
+        {
+          config: {
+            platform: "tanstack",
+            tanstackConfig: { pagesDir: "../routes" },
+          },
+        },
+        "/post/[postId].tsx"
+      )
+    ).toBe("../routes/post/$postId/index.tsx");
+  });
 });

package/src/actions/export.ts

@@ -24,7 +24,7 @@ import { DEFAULT_SPLITS_PROVIDER_NAME } from "./sync-splits-provider";
 
 export interface ExportArgs extends CommonArgs {
   projects: readonly string[];
-  platform: "" | "react" | "nextjs" | "gatsby";
+  platform: "" | "react" | "nextjs" | "gatsby" | "tanstack";
   codeLang: "" | "ts" | "js";
   styleScheme: "" | "css" | "css-modules";
   imagesScheme: "" | "inlined" | "files";

package/src/actions/init.ts

@@ -20,6 +20,7 @@ import {
   detectGatsby,
   detectNextJs,
   detectNextJsAppDir,
+  detectTanStackApp,
   detectTypescript,
 } from "../utils/envdetect";
 import { existsBuffered } from "../utils/file-utils";
@@ -33,7 +34,7 @@ import { confirmWithUser } from "../utils/user-utils";
 
 export interface InitArgs extends CommonArgs {
   host: string;
-  platform: "" | "react" | "nextjs" | "gatsby";
+  platform: "" | "react" | "nextjs" | "gatsby" | "tanstack";
   codeLang: "" | "ts" | "js";
   codeScheme: "" | "blackbox";
   styleScheme: "" | "css" | "css-modules";
@@ -97,13 +98,22 @@ function createInitConfig(opts: Omit<InitArgs, "baseDir">): PlasmicConfig {
         pagesDir: opts.pagesDir,
       },
     }),
+    ...(opts.platform === "tanstack" && {
+      tanstackConfig: {
+        pagesDir: opts.pagesDir,
+      },
+    }),
     code: {
       ...(opts.codeLang && { lang: opts.codeLang }),
       ...(opts.codeScheme && { scheme: opts.codeScheme }),
       ...(opts.reactRuntime && { reactRuntime: opts.reactRuntime }),
     },
     style: {
-      ...(opts.styleScheme && { scheme: opts.styleScheme }),
+      ...(opts.styleScheme && {
+        // Css Modules is not supported yet in SSR for TanStack
+        // https://github.com/TanStack/router/issues/3023
+        scheme: opts.platform === "tanstack" ? "css" : opts.styleScheme,
+      }),
     },
     images: {
       ...(opts.imagesScheme && { scheme: opts.imagesScheme }),
@@ -165,6 +175,8 @@ async function deriveInitAnswers(
     ? "nextjs"
     : detectGatsby()
     ? "gatsby"
+    : detectTanStackApp()
+    ? "tanstack"
     : detectCreateReactApp()
     ? "react"
     : "";
@@ -172,7 +184,8 @@ async function deriveInitAnswers(
   const isNext = platform === "nextjs";
   const isNextAppDir = isNext && detectNextJsAppDir();
   const isGatsby = platform === "gatsby";
-  const isGeneric = !isCra && !isNext && !isGatsby;
+  const isTanStack = platform === "tanstack";
+  const isGeneric = !isCra && !isNext && !isGatsby && !isTanStack;
   const isTypescript = detectTypescript();
 
   if (isNext) {
@@ -183,6 +196,8 @@ async function deriveInitAnswers(
     }
   } else if (isGatsby) {
     logger.info("Detected Gatsby...");
+  } else if (isTanStack) {
+    logger.info("Detected TanStack router app...");
   } else if (isCra) {
     logger.info("Detected create-react-app...");
   }
@@ -192,6 +207,8 @@ async function deriveInitAnswers(
     ? getNextDefaults(plasmicRootDir, isNextAppDir)
     : isGatsby
     ? getGatsbyDefaults(plasmicRootDir)
+    : isTanStack
+    ? getTanStackDefaults(plasmicRootDir)
     : isCra
     ? getCraDefaults(plasmicRootDir)
     : getGenericDefaults(plasmicRootDir);
@@ -473,6 +490,36 @@ function getGatsbyDefaults(plasmicRootDir: string): DefaultDeriver {
   };
 }
 
+function getTanStackDefaults(plasmicRootDir: string): DefaultDeriver {
+  const projectRootDir = findPackageJsonDir(plasmicRootDir) ?? plasmicRootDir;
+  return {
+    srcDir: path.relative(
+      plasmicRootDir,
+      path.join(projectRootDir, "src", "components")
+    ),
+    pagesDir: (srcDir: string) => {
+      const absSrcDir = path.join(plasmicRootDir, srcDir);
+      const absPagesDir = path.join(projectRootDir, "src", "routes");
+      const relDir = path.relative(absSrcDir, absPagesDir);
+      return relDir;
+    },
+    styleScheme: "css",
+    imagesScheme: "public-files",
+    imagesPublicDir: (srcDir: string) =>
+      path.relative(
+        path.join(plasmicRootDir, srcDir),
+        path.join(projectRootDir, "public")
+      ),
+    imagesPublicUrlPrefix: "/",
+    alwaysDerived: [
+      "styleScheme",
+      "imagesScheme",
+      "imagesPublicDir",
+      "pagesDir",
+    ],
+  };
+}
+
 function getCraDefaults(plasmicRootDir: string): DefaultDeriver {
   const projectRootDir = findPackageJsonDir(plasmicRootDir) ?? plasmicRootDir;
   return {
@@ -519,7 +566,7 @@ const INIT_ARGS_DESCRIPTION: {
   platform: {
     shortDescription: "Target platform",
     longDescription: "Target platform to generate code for",
-    choices: ["react", "nextjs", "gatsby"],
+    choices: ["react", "nextjs", "gatsby", "tanstack"],
   },
   codeLang: {
     shortDescription: "Target language",

package/src/actions/sync-components.ts

@@ -232,6 +232,26 @@ export async function syncProjectComponents(
         }
         renameFile(context, compConfig.importSpec.modulePath, skeletonPath);
         compConfig.importSpec.modulePath = skeletonPath;
+        if (
+          compConfig.rsc?.clientModulePath &&
+          fileExists(context, compConfig.rsc.clientModulePath)
+        ) {
+          const clientModulePath = skeletonPath.replace(
+            /\.tsx$/,
+            "-client.tsx"
+          );
+          if (context.cliArgs.quiet !== true) {
+            logger.info(
+              `Renaming page file: ${compConfig.rsc.clientModulePath} -> ${clientModulePath}\t['${project.projectName}' ${project.projectId}/${id} ${project.version}]`
+            );
+          }
+          renameFile(
+            context,
+            compConfig.rsc.clientModulePath,
+            clientModulePath
+          );
+          compConfig.rsc.clientModulePath = clientModulePath;
+        }
       }
 
       compConfig.plumeType = plumeType;
@@ -306,6 +326,8 @@ export async function syncProjectComponents(
     }
     summary.set(id, { skeletonModuleModified });
 
-    await syncRscFiles(context, project, bundle, compConfig);
+    await syncRscFiles(context, project, bundle, compConfig, {
+      shouldRegenerate,
+    });
   }
 }

package/src/utils/code-utils.ts

@@ -528,6 +528,16 @@ function makeImportPath(
   if (stripExt) {
     result = stripExtension(result);
   }
+
+  if (
+    result.endsWith(".css") &&
+    context.config.platform === "tanstack" &&
+    context.config.style.scheme === "css"
+  ) {
+    // In Tanstack we import css as url such as ".css?url" at the moment
+    result = `${result}?url`;
+  }
+
   return result;
 }
 
@@ -946,8 +956,6 @@ export async function fixRscModulesImports(
       continue;
     }
 
-    logger.info(`Fixing rsc import statements... ${modulePath}`);
-
     try {
       await fixFileImportStatements(
         context,

package/src/utils/config-utils.ts

@@ -27,7 +27,7 @@ export const ENV_AUTH_TOKEN = "PLASMIC_AUTH_TOKEN";
 
 export interface PlasmicConfig {
   /** Target platform to generate code for */
-  platform: "react" | "nextjs" | "gatsby";
+  platform: "react" | "nextjs" | "gatsby" | "tanstack";
 
   /**
    * The folder containing the component source files; this is the default place where
@@ -56,6 +56,12 @@ export interface PlasmicConfig {
     pagesDir?: string;
   };
 
+  /** Tanstack-specific config */
+  tanstackConfig?: {
+    /** The folder containing page components source files. */
+    pagesDir?: string;
+  };
+
   /** Config for code generation */
   code: CodeConfig;
 
@@ -289,8 +295,15 @@ export interface ComponentConfig {
   /** Plume type if component is a Plume component */
   plumeType?: string;
 
+  /**
+   * RSC metadata for this component. The structure of the config changes when this is set:
+   * renderModuleFilePath points to the client blackbox render module.
+   * importSpec points to the server skeleton file.
+   */
   rsc?: {
+    /** The server blackbox render module  */
     serverModulePath: string;
+    /** The client skeleton file */
     clientModulePath: string;
   };
 }
@@ -629,5 +642,7 @@ export function getOrAddProjectLock(
 }
 
 export function isPageAwarePlatform(platform: string): boolean {
-  return platform === "nextjs" || platform === "gatsby";
+  return (
+    platform === "nextjs" || platform === "gatsby" || platform === "tanstack"
+  );
 }