create-plasmic-app 0.0.131 → 0.0.133

package/cpa-out/react-codegen-ts/src/components/plasmic/create_plasmic_app/PlasmicButton.tsx

@@ -206,37 +206,38 @@ function PlasmicButton__RenderFunc(props: {
         path: "showStartIcon",
         type: "private",
         variableType: "variant",
-        initFunc: ({ $props, $state, $queries, $ctx }) => $props.showStartIcon
+        initFunc: ({ $props, $state, $queries, $q, $ctx }) =>
+          $props.showStartIcon
       },
       {
         path: "showEndIcon",
         type: "private",
         variableType: "variant",
-        initFunc: ({ $props, $state, $queries, $ctx }) => $props.showEndIcon
+        initFunc: ({ $props, $state, $queries, $q, $ctx }) => $props.showEndIcon
       },
       {
         path: "isDisabled",
         type: "private",
         variableType: "variant",
-        initFunc: ({ $props, $state, $queries, $ctx }) => $props.isDisabled
+        initFunc: ({ $props, $state, $queries, $q, $ctx }) => $props.isDisabled
       },
       {
         path: "shape",
         type: "private",
         variableType: "variant",
-        initFunc: ({ $props, $state, $queries, $ctx }) => $props.shape
+        initFunc: ({ $props, $state, $queries, $q, $ctx }) => $props.shape
       },
       {
         path: "size",
         type: "private",
         variableType: "variant",
-        initFunc: ({ $props, $state, $queries, $ctx }) => $props.size
+        initFunc: ({ $props, $state, $queries, $q, $ctx }) => $props.size
       },
       {
         path: "color",
         type: "private",
         variableType: "variant",
-        initFunc: ({ $props, $state, $queries, $ctx }) => $props.color
+        initFunc: ({ $props, $state, $queries, $q, $ctx }) => $props.color
       }
     ],
     [$props, $ctx, $refs]
@@ -245,6 +246,7 @@ function PlasmicButton__RenderFunc(props: {
     $props,
     $ctx,
     $queries: {},
+    $q: {},
     $refs
   });
 

package/cpa-out/react-codegen-ts/src/components/plasmic/create_plasmic_app/PlasmicDynamicPage.tsx

@@ -64,6 +64,30 @@ import "@plasmicapp/react-web/lib/plasmic.css";
 import projectcss from "./plasmic.module.css"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/projectcss
 import sty from "./PlasmicDynamicPage.module.css"; // plasmic-import: AO44A-w7hh/css
 
+const emptyProxy: any = new Proxy(() => "", {
+  get(_, prop) {
+    return prop === Symbol.toPrimitive ? () => "" : emptyProxy;
+  }
+});
+
+function wrapQueriesWithLoadingProxy($q: any): any {
+  return new Proxy($q, {
+    get(target, queryName) {
+      const query = target[queryName];
+      return !query || query.isLoading || !query.data ? emptyProxy : query;
+    }
+  });
+}
+
+export function generateDynamicMetadata($q: any, $ctx: any) {
+  return {
+    openGraph: {},
+    twitter: {
+      card: "summary"
+    }
+  };
+}
+
 createPlasmicElementProxy;
 
 export type PlasmicDynamicPage__VariantMembers = {};
@@ -267,13 +291,11 @@ export const PlasmicDynamicPage = Object.assign(
     internalVariantProps: PlasmicDynamicPage__VariantProps,
     internalArgProps: PlasmicDynamicPage__ArgProps,
 
-    // Page metadata
-    pageMetadata: {
-      title: "",
-      description: "",
-      ogImageSrc: "",
-      canonical: ""
-    }
+    pageMetadata: generateDynamicMetadata(wrapQueriesWithLoadingProxy({}), {
+      pagePath: "/dynamic/[slug]",
+      searchParams: {},
+      params: {}
+    })
   }
 );
 

package/cpa-out/react-codegen-ts/src/components/plasmic/create_plasmic_app/PlasmicHomepage.tsx

@@ -65,6 +65,30 @@ import "@plasmicapp/react-web/lib/plasmic.css";
 import projectcss from "./plasmic.module.css"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/projectcss
 import sty from "./PlasmicHomepage.module.css"; // plasmic-import: 6uuAAE1jiCew/css
 
+const emptyProxy: any = new Proxy(() => "", {
+  get(_, prop) {
+    return prop === Symbol.toPrimitive ? () => "" : emptyProxy;
+  }
+});
+
+function wrapQueriesWithLoadingProxy($q: any): any {
+  return new Proxy($q, {
+    get(target, queryName) {
+      const query = target[queryName];
+      return !query || query.isLoading || !query.data ? emptyProxy : query;
+    }
+  });
+}
+
+export function generateDynamicMetadata($q: any, $ctx: any) {
+  return {
+    openGraph: {},
+    twitter: {
+      card: "summary"
+    }
+  };
+}
+
 createPlasmicElementProxy;
 
 export type PlasmicHomepage__VariantMembers = {};
@@ -304,13 +328,11 @@ export const PlasmicHomepage = Object.assign(
     internalVariantProps: PlasmicHomepage__VariantProps,
     internalArgProps: PlasmicHomepage__ArgProps,
 
-    // Page metadata
-    pageMetadata: {
-      title: "",
-      description: "",
-      ogImageSrc: "",
-      canonical: ""
-    }
+    pageMetadata: generateDynamicMetadata(wrapQueriesWithLoadingProxy({}), {
+      pagePath: "/",
+      searchParams: {},
+      params: {}
+    })
   }
 );
 

package/cpa-out/tanstack-codegen-ts/package.json

@@ -2,38 +2,42 @@
   "name": "tanstack-codegen-ts",
   "private": true,
   "type": "module",
+  "imports": {
+    "#/*": "./src/*"
+  },
   "scripts": {
     "dev": "vite dev --port 3000",
-    "start": "node .output/server/index.mjs",
     "build": "vite build",
-    "serve": "vite preview",
+    "preview": "vite preview",
     "test": "vitest run"
   },
   "dependencies": {
-    "@plasmicapp/cli": "^0.1.341",
-    "@plasmicapp/react-web": "^0.2.397",
-    "@tailwindcss/vite": "^4.0.6",
-    "@tanstack/react-query": "^5.84.2",
-    "@tanstack/react-router": "^1.130.2",
-    "@tanstack/react-router-devtools": "^1.130.2",
-    "@tanstack/react-router-with-query": "^1.130.2",
-    "@tanstack/react-start": "^1.130.2",
-    "@tanstack/router-plugin": "^1.121.2",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "tailwindcss": "^4.0.6",
-    "vite-tsconfig-paths": "^5.1.4"
+    "@plasmicapp/cli": "^0.1.359",
+    "@plasmicapp/react-web": "^0.2.422",
+    "@tailwindcss/vite": "^4.1.18",
+    "@tanstack/react-devtools": "^0.7.0",
+    "@tanstack/react-query": "^5.90.21",
+    "@tanstack/react-router": "^1.132.0",
+    "@tanstack/react-router-devtools": "^1.132.0",
+    "@tanstack/router-plugin": "^1.132.0",
+    "lucide-react": "^0.545.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "tailwindcss": "^4.1.18"
   },
   "devDependencies": {
+    "@tanstack/devtools-vite": "^0.3.11",
+    "@tanstack/router-plugin": "^1.132.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.2.0",
-    "@types/react": "^19.0.8",
-    "@types/react-dom": "^19.0.3",
-    "@vitejs/plugin-react": "^4.3.4",
-    "jsdom": "^26.0.0",
+    "@types/node": "^22.10.2",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "@vitejs/plugin-react": "^5.0.4",
+    "jsdom": "^27.0.0",
     "typescript": "^5.7.2",
-    "vite": "^6.3.5",
-    "vitest": "^3.0.5",
-    "web-vitals": "^4.2.4"
+    "vite": "^7.1.7",
+    "vite-tsconfig-paths": "^5.1.4",
+    "vitest": "^3.0.5"
   }
 }

package/cpa-out/tanstack-codegen-ts/plasmic.json

@@ -100,6 +100,9 @@
       "indirect": false,
       "globalContextsFilePath": "",
       "splitsProviderFilePath": "",
+      "styleTokensProviderFilePath": "plasmic/create_plasmic_app/PlasmicStyleTokensProvider.tsx",
+      "dataTokensFilePath": "",
+      "projectModuleFilePath": "plasmic/create_plasmic_app/plasmic.tsx",
       "codeComponents": [
         {
           "id": "P6aGdYWZ2R",
@@ -128,9 +131,10 @@
     ]
   },
   "wrapPagesWithGlobalContexts": true,
+  "preserveJsImportExtensions": false,
   "tanstackConfig": {
     "pagesDir": "../routes"
   },
-  "cliVersion": "0.1.341",
-  "$schema": "https://unpkg.com/@plasmicapp/cli@0.1.341/dist/plasmic.schema.json"
+  "cliVersion": "0.1.359",
+  "$schema": "https://unpkg.com/@plasmicapp/cli@0.1.359/dist/plasmic.schema.json"
 }

package/cpa-out/tanstack-codegen-ts/src/components/plasmic/create_plasmic_app/PlasmicButton.tsx

@@ -60,11 +60,14 @@ import {
 
 import * as pp from "@plasmicapp/react-web";
 
-import globalcss from "@plasmicapp/react-web/lib/plasmic.css?url";
-import defaultcss from "../plasmic__default_style.css?url"; // plasmic-import: global/defaultcss
+import { _useGlobalVariants } from "./plasmic"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/projectModule
+import { _useStyleTokens } from "./PlasmicStyleTokensProvider"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/styleTokensProvider
 
-import projectcss from "./plasmic.css?url"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/projectcss
-import sty from "./PlasmicButton.css?url"; // plasmic-import: TQcvW_pSKi3/css
+import "@plasmicapp/react-web/lib/plasmic.css";
+import "../plasmic__default_style.css"; // plasmic-import: global/defaultcss
+
+import "./plasmic.css"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/projectcss
+import "./PlasmicButton.css"; // plasmic-import: TQcvW_pSKi3/css
 
 import CheckSvgIcon from "./icons/PlasmicIcon__CheckSvg"; // plasmic-import: gj-_D7n31Ho/icon
 import IconIcon from "./icons/PlasmicIcon__Icon"; // plasmic-import: 6PNxx3YMyDQ/icon
@@ -215,37 +218,38 @@ function PlasmicButton__RenderFunc(props: {
         path: "showStartIcon",
         type: "private",
         variableType: "variant",
-        initFunc: ({ $props, $state, $queries, $ctx }) => $props.showStartIcon
+        initFunc: ({ $props, $state, $queries, $q, $ctx }) =>
+          $props.showStartIcon
       },
       {
         path: "showEndIcon",
         type: "private",
         variableType: "variant",
-        initFunc: ({ $props, $state, $queries, $ctx }) => $props.showEndIcon
+        initFunc: ({ $props, $state, $queries, $q, $ctx }) => $props.showEndIcon
       },
       {
         path: "isDisabled",
         type: "private",
         variableType: "variant",
-        initFunc: ({ $props, $state, $queries, $ctx }) => $props.isDisabled
+        initFunc: ({ $props, $state, $queries, $q, $ctx }) => $props.isDisabled
       },
       {
         path: "shape",
         type: "private",
         variableType: "variant",
-        initFunc: ({ $props, $state, $queries, $ctx }) => $props.shape
+        initFunc: ({ $props, $state, $queries, $q, $ctx }) => $props.shape
       },
       {
         path: "size",
         type: "private",
         variableType: "variant",
-        initFunc: ({ $props, $state, $queries, $ctx }) => $props.size
+        initFunc: ({ $props, $state, $queries, $q, $ctx }) => $props.size
       },
       {
         path: "color",
         type: "private",
         variableType: "variant",
-        initFunc: ({ $props, $state, $queries, $ctx }) => $props.color
+        initFunc: ({ $props, $state, $queries, $q, $ctx }) => $props.color
       }
     ],
     [$props, $ctx, $refs]
@@ -254,6 +258,7 @@ function PlasmicButton__RenderFunc(props: {
     $props,
     $ctx,
     $queries: {},
+    $q: {},
     $refs
   });
 
@@ -265,6 +270,8 @@ function PlasmicButton__RenderFunc(props: {
     focusVisibleWithin_root: isRootFocusVisibleWithin
   };
 
+  const styleTokensClassNames = _useStyleTokens();
+
   return (
     <button
       data-plasmic-name={"root"}
@@ -277,7 +284,7 @@ function PlasmicButton__RenderFunc(props: {
         "root_reset_47tFXWjN2C4NyHFGGpaYQ3",
         "plasmic_default_styles",
         "plasmic_mixins",
-        "plasmic_tokens",
+        styleTokensClassNames,
         "Button__root__gpc3K",
         {
           Button__root___focusVisibleWithin__gpc3KcjR25:
@@ -792,7 +799,9 @@ type NodeComponentProps<T extends NodeNameType> =
     variants?: PlasmicButton__VariantsArgs;
     args?: PlasmicButton__ArgsType;
     overrides?: NodeOverridesType<T>;
-  } & Omit<PlasmicButton__VariantsArgs, ReservedPropsType> & // Specify variants directly as props
+  } &
+    // Specify variants directly as props
+    Omit<PlasmicButton__VariantsArgs, ReservedPropsType> &
     // Specify args directly as props
     Omit<PlasmicButton__ArgsType, ReservedPropsType> &
     // Specify overrides for each element directly as props
@@ -856,12 +865,7 @@ export const PlasmicButton = Object.assign(
 export const PlasmicButton__HeadOptions = {
   meta: [{ name: "twitter:card", content: "summary" }],
 
-  links: [
-    { rel: "stylesheet", href: globalcss },
-    { rel: "stylesheet", href: defaultcss },
-    { rel: "stylesheet", href: projectcss },
-    { rel: "stylesheet", href: sty }
-  ]
+  links: []
 } as Record<"meta" | "links", Array<Record<string, string>>>;
 
 export default PlasmicButton;

package/cpa-out/tanstack-codegen-ts/src/components/plasmic/create_plasmic_app/PlasmicDynamicPage.tsx

@@ -59,12 +59,38 @@ import {
 } from "@plasmicapp/react-web/lib/host";
 
 import RandomDynamicPageButton from "../../RandomDynamicPageButton"; // plasmic-import: Q23H1_1M_P/component
+import { _useGlobalVariants } from "./plasmic"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/projectModule
+import { _useStyleTokens } from "./PlasmicStyleTokensProvider"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/styleTokensProvider
 
-import globalcss from "@plasmicapp/react-web/lib/plasmic.css?url";
-import defaultcss from "../plasmic__default_style.css?url"; // plasmic-import: global/defaultcss
+import "@plasmicapp/react-web/lib/plasmic.css";
+import "../plasmic__default_style.css"; // plasmic-import: global/defaultcss
 
-import projectcss from "./plasmic.css?url"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/projectcss
-import sty from "./PlasmicDynamicPage.css?url"; // plasmic-import: AO44A-w7hh/css
+import "./plasmic.css"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/projectcss
+import "./PlasmicDynamicPage.css"; // plasmic-import: AO44A-w7hh/css
+
+const emptyProxy: any = new Proxy(() => "", {
+  get(_, prop) {
+    return prop === Symbol.toPrimitive ? () => "" : emptyProxy;
+  }
+});
+
+function wrapQueriesWithLoadingProxy($q: any): any {
+  return new Proxy($q, {
+    get(target, queryName) {
+      const query = target[queryName];
+      return !query || query.isLoading || !query.data ? emptyProxy : query;
+    }
+  });
+}
+
+export function generateDynamicMetadata($q: any, $ctx: any) {
+  return {
+    openGraph: {},
+    twitter: {
+      card: "summary"
+    }
+  };
+}
 
 createPlasmicElementProxy;
 
@@ -124,6 +150,8 @@ function PlasmicDynamicPage__RenderFunc(props: {
   const refsRef = React.useRef({});
   const $refs = refsRef.current;
 
+  const styleTokensClassNames = _useStyleTokens();
+
   return (
     <React.Fragment>
       <style>{`
@@ -144,7 +172,7 @@ function PlasmicDynamicPage__RenderFunc(props: {
             "root_reset_47tFXWjN2C4NyHFGGpaYQ3",
             "plasmic_default_styles",
             "plasmic_mixins",
-            "plasmic_tokens",
+            styleTokensClassNames,
             "DynamicPage__root__hgzte"
           )}
         >
@@ -225,7 +253,9 @@ type NodeComponentProps<T extends NodeNameType> =
     variants?: PlasmicDynamicPage__VariantsArgs;
     args?: PlasmicDynamicPage__ArgsType;
     overrides?: NodeOverridesType<T>;
-  } & Omit<PlasmicDynamicPage__VariantsArgs, ReservedPropsType> & // Specify variants directly as props
+  } &
+    // Specify variants directly as props
+    Omit<PlasmicDynamicPage__VariantsArgs, ReservedPropsType> &
     // Specify args directly as props
     Omit<PlasmicDynamicPage__ArgsType, ReservedPropsType> &
     // Specify overrides for each element directly as props
@@ -282,25 +312,18 @@ export const PlasmicDynamicPage = Object.assign(
     internalVariantProps: PlasmicDynamicPage__VariantProps,
     internalArgProps: PlasmicDynamicPage__ArgProps,
 
-    // Page metadata
-    pageMetadata: {
-      title: "",
-      description: "",
-      ogImageSrc: "",
-      canonical: ""
-    }
+    pageMetadata: generateDynamicMetadata(wrapQueriesWithLoadingProxy({}), {
+      pagePath: "/dynamic/[slug]",
+      searchParams: {},
+      params: {}
+    })
   }
 );
 
 export const PlasmicDynamicPage__HeadOptions = {
   meta: [{ name: "twitter:card", content: "summary" }],
 
-  links: [
-    { rel: "stylesheet", href: globalcss },
-    { rel: "stylesheet", href: defaultcss },
-    { rel: "stylesheet", href: projectcss },
-    { rel: "stylesheet", href: sty }
-  ]
+  links: []
 } as Record<"meta" | "links", Array<Record<string, string>>>;
 
 export default PlasmicDynamicPage;

package/cpa-out/tanstack-codegen-ts/src/components/plasmic/create_plasmic_app/PlasmicGlobalVariant__Screen.tsx

@@ -21,7 +21,7 @@ export function ScreenContextProvider(
 }
 
 export const useScreenVariants = createUseScreenVariants(true, {
-  desktopOnly: "(min-width:768px)",
+  desktopOnly: "(min-width:768px)"
 });
 
 export default ScreenContext;

package/cpa-out/tanstack-codegen-ts/src/components/plasmic/create_plasmic_app/PlasmicHomepage.tsx

@@ -60,14 +60,38 @@ import {
 
 import RandomDynamicPageButton from "../../RandomDynamicPageButton"; // plasmic-import: Q23H1_1M_P/component
 import { Fetcher } from "@plasmicapp/react-web/lib/data-sources";
+import { _useGlobalVariants } from "./plasmic"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/projectModule
+import { _useStyleTokens } from "./PlasmicStyleTokensProvider"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/styleTokensProvider
 
-import { useScreenVariants as useScreenVariantsscBjPxgdxdzbv } from "./PlasmicGlobalVariant__Screen"; // plasmic-import: SCBjPXGDXDZBV/globalVariant
+import "@plasmicapp/react-web/lib/plasmic.css";
+import "../plasmic__default_style.css"; // plasmic-import: global/defaultcss
 
-import globalcss from "@plasmicapp/react-web/lib/plasmic.css?url";
-import defaultcss from "../plasmic__default_style.css?url"; // plasmic-import: global/defaultcss
+import "./plasmic.css"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/projectcss
+import "./PlasmicHomepage.css"; // plasmic-import: 6uuAAE1jiCew/css
 
-import projectcss from "./plasmic.css?url"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/projectcss
-import sty from "./PlasmicHomepage.css?url"; // plasmic-import: 6uuAAE1jiCew/css
+const emptyProxy: any = new Proxy(() => "", {
+  get(_, prop) {
+    return prop === Symbol.toPrimitive ? () => "" : emptyProxy;
+  }
+});
+
+function wrapQueriesWithLoadingProxy($q: any): any {
+  return new Proxy($q, {
+    get(target, queryName) {
+      const query = target[queryName];
+      return !query || query.isLoading || !query.data ? emptyProxy : query;
+    }
+  });
+}
+
+export function generateDynamicMetadata($q: any, $ctx: any) {
+  return {
+    openGraph: {},
+    twitter: {
+      card: "summary"
+    }
+  };
+}
 
 createPlasmicElementProxy;
 
@@ -128,9 +152,9 @@ function PlasmicHomepage__RenderFunc(props: {
   const refsRef = React.useRef({});
   const $refs = refsRef.current;
 
-  const globalVariants = ensureGlobalVariants({
-    screen: useScreenVariantsscBjPxgdxdzbv()
-  });
+  const globalVariants = _useGlobalVariants();
+
+  const styleTokensClassNames = _useStyleTokens();
 
   return (
     <React.Fragment>
@@ -152,7 +176,7 @@ function PlasmicHomepage__RenderFunc(props: {
             "root_reset_47tFXWjN2C4NyHFGGpaYQ3",
             "plasmic_default_styles",
             "plasmic_mixins",
-            "plasmic_tokens",
+            styleTokensClassNames,
             "Homepage__root__qtZIr"
           )}
         >
@@ -266,7 +290,9 @@ type NodeComponentProps<T extends NodeNameType> =
     variants?: PlasmicHomepage__VariantsArgs;
     args?: PlasmicHomepage__ArgsType;
     overrides?: NodeOverridesType<T>;
-  } & Omit<PlasmicHomepage__VariantsArgs, ReservedPropsType> & // Specify variants directly as props
+  } &
+    // Specify variants directly as props
+    Omit<PlasmicHomepage__VariantsArgs, ReservedPropsType> &
     // Specify args directly as props
     Omit<PlasmicHomepage__ArgsType, ReservedPropsType> &
     // Specify overrides for each element directly as props
@@ -324,25 +350,18 @@ export const PlasmicHomepage = Object.assign(
     internalVariantProps: PlasmicHomepage__VariantProps,
     internalArgProps: PlasmicHomepage__ArgProps,
 
-    // Page metadata
-    pageMetadata: {
-      title: "",
-      description: "",
-      ogImageSrc: "",
-      canonical: ""
-    }
+    pageMetadata: generateDynamicMetadata(wrapQueriesWithLoadingProxy({}), {
+      pagePath: "/",
+      searchParams: {},
+      params: {}
+    })
   }
 );
 
 export const PlasmicHomepage__HeadOptions = {
   meta: [{ name: "twitter:card", content: "summary" }],
 
-  links: [
-    { rel: "stylesheet", href: globalcss },
-    { rel: "stylesheet", href: defaultcss },
-    { rel: "stylesheet", href: projectcss },
-    { rel: "stylesheet", href: sty }
-  ]
+  links: []
 } as Record<"meta" | "links", Array<Record<string, string>>>;
 
 export default PlasmicHomepage;

package/cpa-out/tanstack-codegen-ts/src/components/plasmic/create_plasmic_app/PlasmicRandomDynamicPageButton.tsx

@@ -59,12 +59,14 @@ import {
 } from "@plasmicapp/react-web/lib/host";
 
 import Button from "../../Button"; // plasmic-import: TQcvW_pSKi3/component
+import { _useGlobalVariants } from "./plasmic"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/projectModule
+import { _useStyleTokens } from "./PlasmicStyleTokensProvider"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/styleTokensProvider
 
-import globalcss from "@plasmicapp/react-web/lib/plasmic.css?url";
-import defaultcss from "../plasmic__default_style.css?url"; // plasmic-import: global/defaultcss
+import "@plasmicapp/react-web/lib/plasmic.css";
+import "../plasmic__default_style.css"; // plasmic-import: global/defaultcss
 
-import projectcss from "./plasmic.css?url"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/projectcss
-import sty from "./PlasmicRandomDynamicPageButton.css?url"; // plasmic-import: Q23H1_1M_P/css
+import "./plasmic.css"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/projectcss
+import "./PlasmicRandomDynamicPageButton.css"; // plasmic-import: Q23H1_1M_P/css
 
 import CheckSvgIcon from "./icons/PlasmicIcon__CheckSvg"; // plasmic-import: gj-_D7n31Ho/icon
 import IconIcon from "./icons/PlasmicIcon__Icon"; // plasmic-import: 6PNxx3YMyDQ/icon
@@ -128,6 +130,8 @@ function PlasmicRandomDynamicPageButton__RenderFunc(props: {
   const refsRef = React.useRef({});
   const $refs = refsRef.current;
 
+  const styleTokensClassNames = _useStyleTokens();
+
   return (
     <Button
       data-plasmic-name={"root"}
@@ -208,7 +212,9 @@ type NodeComponentProps<T extends NodeNameType> =
     variants?: PlasmicRandomDynamicPageButton__VariantsArgs;
     args?: PlasmicRandomDynamicPageButton__ArgsType;
     overrides?: NodeOverridesType<T>;
-  } & Omit<PlasmicRandomDynamicPageButton__VariantsArgs, ReservedPropsType> & // Specify variants directly as props
+  } &
+    // Specify variants directly as props
+    Omit<PlasmicRandomDynamicPageButton__VariantsArgs, ReservedPropsType> &
     // Specify args directly as props
     Omit<PlasmicRandomDynamicPageButton__ArgsType, ReservedPropsType> &
     // Specify overrides for each element directly as props
@@ -267,12 +273,7 @@ export const PlasmicRandomDynamicPageButton = Object.assign(
 export const PlasmicRandomDynamicPageButton__HeadOptions = {
   meta: [{ name: "twitter:card", content: "summary" }],
 
-  links: [
-    { rel: "stylesheet", href: globalcss },
-    { rel: "stylesheet", href: defaultcss },
-    { rel: "stylesheet", href: projectcss },
-    { rel: "stylesheet", href: sty }
-  ]
+  links: []
 } as Record<"meta" | "links", Array<Record<string, string>>>;
 
 export default PlasmicRandomDynamicPageButton;

package/cpa-out/tanstack-codegen-ts/src/components/plasmic/create_plasmic_app/PlasmicStyleTokensProvider.tsx

@@ -0,0 +1,17 @@
+/* eslint-disable */
+/* tslint:disable */
+// @ts-nocheck
+
+// This code is auto-generated by Plasmic; please do not edit!
+// Plasmic Project: 47tFXWjN2C4NyHFGGpaYQ3
+
+import { createUseStyleTokens } from "@plasmicapp/react-web";
+
+import { _useGlobalVariants } from "./plasmic"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/projectModule
+
+const data = {
+  base: `${"plasmic_tokens_47tFXWjN2C4NyHFGGpaYQ3"}`,
+  varianted: []
+};
+
+export const _useStyleTokens = createUseStyleTokens(data, _useGlobalVariants);

package/cpa-out/tanstack-codegen-ts/src/components/plasmic/create_plasmic_app/icons/PlasmicIcon__CheckSvg.tsx

@@ -21,7 +21,7 @@ export function CheckSvgIcon(props: CheckSvgIconProps) {
       style={{
         fill: "currentcolor",
 
-        ...(style || {}),
+        ...(style || {})
       }}
       className={classNames("plasmic-default__svg", className)}
       {...restProps}