eddev 0.2.0-beta.9 → 0.2.1

package/serverless-template/next.config.js

@@ -1,8 +1,9 @@
 const withTM = require("next-transpile-modules")
-const { resolve } = require("path")
+const { resolve, join } = require("path")
 const { DefinePlugin } = require("webpack")
 const settings = require("./ed.config.json")
 const { getRepoName } = require("eddev/utils/getRepoName")
+const { existsSync } = require("fs")
 
 module.exports = (() => {
   const cwd = process.cwd()
@@ -27,11 +28,11 @@ module.exports = (() => {
         ].filter(Boolean),
       }
     },
+    experimental: {},
     typescript: {
       ignoreBuildErrors: true,
     },
     webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
-      console.log(resolve(cwd, "manifest_blocks.ts"))
       config.resolve.alias = {
         ...config.resolve.alias,
         "@manifest/views": resolve(cwd, "manifest_views.ts"),
@@ -49,14 +50,20 @@ module.exports = (() => {
       const define = config.plugins.find((plugin) => plugin instanceof DefinePlugin)
       define.definitions["process.serverless"] = "true"
       define.definitions["process.admin"] = "false"
+      define.definitions["process.client"] = isServer ? "false" : "true"
       define.definitions["process.dev"] = process.env.NODE_ENV === "development"
 
       const themePath =
         (settings.serverless.theme === "remote" ? process.env.SITE_URL : "") + "/wp-content/themes/" + REPO_NAME
 
-      console.log("Theme path", themePath)
       define.definitions["process.env.themePath"] = JSON.stringify(themePath)
       define.definitions["process.themePath"] = JSON.stringify(themePath)
+      define.definitions["process.devUI"] = settings.devUI === "enabled"
+      define.definitions["process.serverlessEndpoint"] = JSON.stringify("/")
+
+      const rpcExists =
+        existsSync(join(process.cwd(), "apis/_rpc.ts")) || existsSync(join(process.cwd(), "apis/_rpc/index.ts"))
+      define.definitions["process.rpcEnabled"] = rpcExists ? "true" : "false"
       // config.plugins.push(
       //   new DefinePlugin({
       //     "process.serverless": "true",

package/serverless-template/package.json

@@ -8,12 +8,14 @@
     "start": "next start"
   },
   "dependencies": {
-    "next": "12.0.10",
     "react": "17.0.2",
-    "react-dom": "17.0.2"
+    "react-dom": "17.0.2",
+    "@trpc/next": "^9.19.0",
+    "@trpc/server": "^9.19.0"
   },
   "devDependencies": {
     "@types/react": "17.0.39",
-    "typescript": "4.5.5"
+    "typescript": "4.5.5",
+    "next": "^12.1.0"
   }
 }

package/serverless-template/pages/404.tsx

@@ -0,0 +1,12 @@
+import { fetchWordpressProps } from "../_utils/fetch-wordpress-props"
+
+export default function Home() {
+  return <div />
+}
+
+export async function getStaticProps({ params }: any) {
+  const result = await fetchWordpressProps("/404")
+  return {
+    props: result.data,
+  }
+}

package/serverless-template/pages/[...slug].tsx

@@ -2,7 +2,7 @@ import { GetStaticPathsResult, GetStaticPropsContext, GetStaticPropsResult } fro
 import { fetchWordpressProps } from "../_utils/fetch-wordpress-props"
 
 export default function Home(props: any) {
-  return <div>{JSON.stringify(props)}</div>
+  return <div />
 }
 
 export async function getStaticPaths(): Promise<GetStaticPathsResult> {
@@ -14,7 +14,12 @@ export async function getStaticPaths(): Promise<GetStaticPathsResult> {
 
 export async function getStaticProps({ params }: GetStaticPropsContext): Promise<GetStaticPropsResult<any>> {
   const result = await fetchWordpressProps((params?.slug as string[]).join("/"))
+  if (result.status === 404) {
+    return {
+      notFound: true,
+    }
+  }
   return {
-    props: result,
+    props: result.data,
   }
 }

package/serverless-template/pages/_app.tsx

@@ -5,30 +5,50 @@ import { NextRouter } from "eddev/components/NextRouter"
 import { ServerlessAppDataProvider } from "eddev/utils/serverlessAppContext"
 import { useMemo } from "react"
 import { useRouter } from "next/router"
+import { DevUILoader } from "eddev/dev-ui/loader"
+import { PageMeta } from "../_utils/PageMeta"
+import { withTRPC } from "@trpc/next"
 
-function MyApp({ Component, pageProps }: AppProps) {
-  if (!pageProps.appData) return <div />
-
-  const appData = useMemo(() => {
-    return pageProps.appData.data
-  }, [])
+let appData: any
 
+function Root({ Component, pageProps }: AppProps) {
   const route = useRouter()
 
+  if (!appData) appData = pageProps?.appData?.data
+
+  // const appData = useMemo(() => {
+  //   return pageProps?.appData?.data
+  // }, [])
+
   const viewProps = pageProps?.viewData?.data
 
-  const View = manifest[pageProps.view]
+  const View = manifest[pageProps.view || "404"]
 
-  console.log("ROUTE", pageProps, route.pathname)
+  if (!appData) return <div />
+
+  console.log(`Could not load view named "${pageProps.view}"`)
 
   return (
     <ServerlessAppDataProvider value={appData}>
       <NextRouter data={pageProps} path={route.pathname}>
-        <App>
-          <View {...viewProps} />
-        </App>
+        {pageProps?.meta?.head && <PageMeta {...pageProps?.meta?.head} />}
+        {pageProps?.meta?.footer && <PageMeta {...pageProps?.meta?.footer} />}
+        {process.devUI ? <DevUILoader /> : null}
+        <App>{View && <View {...viewProps} />}</App>
       </NextRouter>
     </ServerlessAppDataProvider>
   )
 }
-export default MyApp
+
+// @ts-ignore
+export default process.rpcEnabled
+  ? withTRPC({
+      config({ ctx }) {
+        return {
+          // @ts-ignore
+          url: process.serverlessEndpoint + "api/trpc",
+        }
+      },
+      ssr: false,
+    })(Root)
+  : Root

package/serverless-template/pages/_document.tsx

@@ -0,0 +1,19 @@
+import React from "react"
+import NextDocument, { Html, Head, Main, NextScript } from "next/document"
+import { getCssText } from "@theme"
+
+export default class Document extends NextDocument {
+  render() {
+    return (
+      <Html lang="en">
+        <Head>
+          <style id="stitches" dangerouslySetInnerHTML={{ __html: getCssText() }} />
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    )
+  }
+}

package/serverless-template/pages/api/rest/{[...method].ts → [method].ts}

@@ -1,3 +1,5 @@
+import { fetchWP } from "../../../_utils/fetch-wp"
+
 const validProxyPaths = {
   "form-submit": {
     path: "/wp-json/ed/v1/gf/submit",
@@ -15,7 +17,7 @@ const validProxyPaths = {
 
 export default async function (req: any, res: any) {
   // Ensure that the request is for a proxy path
-  const proxyPath = validProxyPaths[req.query.method[0] as keyof typeof validProxyPaths]!
+  const proxyPath = validProxyPaths[req.query.method as keyof typeof validProxyPaths]!
 
   if (!proxyPath) {
     return res.status(404).json({
@@ -25,7 +27,7 @@ export default async function (req: any, res: any) {
 
   const finalPath = proxyPath.path.replace("*", req.query.method.slice(1).join("/"))
 
-  const response = await fetch(process.env.SITE_URL + finalPath, {
+  const response = await fetchWP(process.env.SITE_URL + finalPath, {
     method: proxyPath.method,
     headers: {
       "Content-Type": "application/json",

package/serverless-template/pages/api/trpc/[...trpc].ts

@@ -0,0 +1,26 @@
+// @ts-ignore
+import { router, createContext } from "../../../apis/_rpc"
+import * as trpcNext from "@trpc/server/adapters/next"
+import type { NextApiRequest, NextApiResponse } from "next"
+
+const handler = trpcNext.createNextApiHandler({
+  router: router,
+  createContext: createContext,
+})
+
+export default function (req: NextApiRequest, res: NextApiResponse) {
+  // TODO: Use an origin whitelist
+  const origin = req.headers.origin
+  if (origin) {
+    res.setHeader("Access-Control-Allow-Origin", "*")
+    res.setHeader("Access-Control-Request-Method", "*")
+    res.setHeader("Access-Control-Request-Method", "OPTIONS, GET, POST")
+    res.setHeader("Access-Control-Allow-Headers", "*")
+    if (req.method === "OPTIONS") {
+      res.writeHead(200)
+      res.end()
+      return
+    }
+  }
+  return handler(req, res)
+}

package/serverless-template/pages/index.tsx

@@ -1,12 +1,12 @@
 import { fetchWordpressProps } from "../_utils/fetch-wordpress-props"
 
 export default function Home() {
-  return <div>Test</div>
+  return <div />
 }
 
 export async function getStaticProps({ params }: any) {
   const result = await fetchWordpressProps("/")
   return {
-    props: result,
+    props: result.data,
   }
 }

package/style/createStitches.d.ts

@@ -18,6 +18,12 @@ declare type TypographyConfig<Theme extends ConfigType.Theme<{}>, Media extends
         lineHeight?: ResponsiveValue<Media, Theme["lineHeights"] extends {} ? `$${Extract<keyof Theme["lineHeights"], string>}` | CSS["lineHeight"] : CSS["lineHeight"]>;
     };
 };
+export declare type BreakpointArray = {
+    key: string;
+    min: string | null;
+    max: string | null;
+}[];
+export declare function parseBreakpoints(names: string[], medias: any): BreakpointArray;
 interface GridConfig<Theme extends ConfigType.Theme<{}>, Media extends ConfigType.Media<{}>> {
     columns: number;
     breakpoints: {
@@ -36,7 +42,49 @@ declare type ResponsiveScale<Media extends ConfigType.Media<{}>, T extends {}> =
 declare type ResponsiveConfig<Media extends ConfigType.Media<{}>, T extends {}> = {
     [Scale in keyof T]: ResponsiveScale<Media, T[Scale]>;
 };
-export declare function createStitches<Prefix extends string = "", Media extends {} = {}, Theme extends {} = {}, Responsive extends {} = {}, ThemeMap extends {} = DefaultThemeMap, Utils extends {} = {}, Typography extends {} = {}>(config: {
+declare type ResponsiveAtom = {
+    lerpStart: boolean;
+} & ({
+    type: "multiplier";
+    value: number;
+} | {
+    type: "percent";
+    value: number;
+} | {
+    type: "px";
+    value: number;
+} | {
+    type: "number";
+    value: number;
+} | {
+    type: "unknown";
+    value: string | number;
+} | {
+    type: "undefined";
+});
+export declare type ResponsiveAtomCalc = ResponsiveAtom & {
+    defined: boolean;
+    breakpoint: string;
+    baseBreakpoint: string;
+    lastBreakpoint: string;
+    lerping?: {
+        fromBP: string | null;
+        toBP: string | null;
+        minMedia: number;
+        maxMedia: number;
+        minValue: number;
+        maxValue: number;
+    };
+    concreteValue: number | null;
+};
+export declare function parseResponsiveObject(breakpoints: ReturnType<typeof parseBreakpoints>, object: any): ResponsiveAtomCalc[];
+export declare function getResponsiveObjectStyles(breakpoints: ReturnType<typeof parseBreakpoints>, object: any, varName: string, unit?: string): any[];
+export declare function parseResponsiveTokens(theme: any, breakpoints: any): {
+    initialResponsive: any;
+    globalResponsive: any;
+};
+export declare function createStitches<Prefix extends string = "", Media extends {} = {}, Breakpoints extends (keyof Media)[] = [], Theme extends {} = {}, Responsive extends {} = {}, ThemeMap extends {} = DefaultThemeMap, Utils extends {} = {}, Typography extends {} = {}>(config: {
+    breakpoints: Breakpoints;
     prefix?: ConfigType.Prefix<Prefix>;
     media: ConfigType.Media<Media>;
     theme: ConfigType.Theme<Theme>;
@@ -55,12 +103,34 @@ export declare function createStitches<Prefix extends string = "", Media extends
     themeMap?: ConfigType.ThemeMap<ThemeMap>;
     utils: ConfigType.Utils<Utils>;
 }): {
+    originalConfig: {
+        breakpoints: Breakpoints;
+        prefix?: ConfigType.Prefix<Prefix> | undefined;
+        media: ConfigType.Media<Media>;
+        theme: ConfigType.Theme<Theme>;
+        responsive: ResponsiveConfig<Media & {
+            initial: string;
+            editor: string;
+        }, Responsive>;
+        typography: TypographyConfig<Theme, Media & {
+            initial: string;
+            editor: string;
+        }, Typography>;
+        grid: GridConfig<Theme, Media & {
+            initial: string;
+            editor: string;
+        }>;
+        themeMap?: ConfigType.ThemeMap<ThemeMap> | undefined;
+        utils: ConfigType.Utils<Utils>;
+    };
+    breakpoints: BreakpointArray;
     typeVariants: { [key in keyof TypographyConfig<Theme, Media & {
         initial: string;
         editor: string;
     }, Typography>]: any; };
     gridVariants: {};
     responsiveTokens: { [Scale in keyof Responsive]: { [T in keyof Responsive[Scale]]: number; }; };
+    responsiveGlobals: any;
     config: {
         prefix: "";
         media: {

package/style/createStitches.js

@@ -11,7 +11,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createStitches = void 0;
+exports.createStitches = exports.parseResponsiveTokens = exports.getResponsiveObjectStyles = exports.parseResponsiveObject = exports.parseBreakpoints = void 0;
 var react_1 = require("@stitches/react");
 var typeKeyMap = {
     fontSize: "fontSizes",
@@ -20,12 +20,14 @@ var typeKeyMap = {
     letterSpacing: "letterSpacings",
     fontWeight: "fontWeights",
 };
-function parseBreakpoints(medias) {
+function parseBreakpoints(names, medias) {
     var breakpoints = [];
     // Add an initial breakpoint
     breakpoints.push({ key: "initial", min: "0px", max: null });
     // Parse each breakpoint
     for (var key in medias) {
+        if (!names.includes(key))
+            continue;
         var media = medias[key];
         var minMatch = media.match(/min-width: ([0-9]+[a-z]+)/);
         var maxMatch = media.match(/max-width: ([0-9]+[a-z]+)/);
@@ -51,6 +53,7 @@ function parseBreakpoints(medias) {
     }
     return breakpoints;
 }
+exports.parseBreakpoints = parseBreakpoints;
 var unitless = function (value) { return parseFloat(value); };
 function parseTypography(theme, breakpoints, typography) {
     var globals = {};
@@ -143,55 +146,157 @@ function parseGrid(theme, media, grid) {
             "--grid-margin": breakpoint.margin,
             "--grid-col-width": "calc((var(--grid-inner-width) - (".concat(grid.columns - 1, " * var(--grid-gutter))) / ").concat(grid.columns, ")"),
         };
-        // for (let i = 1; i < grid.columns; i++) {
-        //   globalGrid[bpName][
-        //     `--grid-${i}-cols`
-        //   ] = `calc(var(--grid-col-width) * ${i} + var(--grid-gutter) * ${i - 1})`
-        // }
     }
     return { gridVariants: {}, globalGrid: globalGrid };
 }
-function parseResponsiveObject(theme, breakpoints, object, varName, scale) {
-    var _a;
-    // Util for grabbing the raw value of a token, for lerping
-    var resolveValue = function (value) {
-        if (typeof value === "string" && value.match(/^\$[a-z0-9\-\_]+$/) && scale) {
-            // Single scale
-            return theme[scale][value.replace("$", "")];
+function parseResponsiveValue(val) {
+    if (Array.isArray(val)) {
+        return __assign(__assign({}, parseResponsiveValue(val[0])), { lerpStart: true });
+    }
+    else if (typeof val === "string") {
+        if (val.match(/^x[0-9\.]+$/)) {
+            return {
+                lerpStart: false,
+                type: "multiplier",
+                value: parseFloat(val.replace(/^x/, "")),
+            };
         }
-        else if (typeof value === "number") {
-            return value + "px";
+        else if (val.match(/^[0-9\.]+%$/)) {
+            return {
+                lerpStart: false,
+                type: "percent",
+                value: parseFloat(val.replace(/^x/, "")),
+            };
         }
-        else {
-            return value;
+        else if (val.match(/^[0-9\.]+px$/)) {
+            return {
+                lerpStart: false,
+                type: "px",
+                value: parseFloat(val.replace(/px$/, "")),
+            };
         }
+    }
+    else if (typeof val === "number") {
+        return {
+            lerpStart: false,
+            type: "number",
+            value: val,
+        };
+    }
+    else if (val === undefined || val === null) {
+        return {
+            lerpStart: false,
+            type: "undefined",
+        };
+    }
+    return {
+        lerpStart: false,
+        type: "unknown",
+        value: val,
     };
-    var globals = {};
-    var initial = {};
-    var entries = Object.entries(object);
-    entries.forEach(function (_a, i) {
-        var _b;
-        var bpName = _a[0], responsiveValue = _a[1];
-        globals[bpName] = {};
-        if (Array.isArray(responsiveValue)) {
-            responsiveValue = responsiveValue[0];
-            // An array in the format [value] signifies font locking between the current breakpoint and the next defined one
-            var minSize = (_b = breakpoints.find(function (bp) { return "@" + bp.key === bpName; })) === null || _b === void 0 ? void 0 : _b.min;
-            var nextBreakpoint = breakpoints.find(function (bp) { var _a; return "@" + bp.key === ((_a = entries[i + 1]) === null || _a === void 0 ? void 0 : _a[0]); });
-            if (!nextBreakpoint)
-                throw new Error("Cannot create responsive '".concat(varName, "' at breakpoint '").concat(bpName, "', since it is the last-defined breakpoint. Your last size should be a string/number/token."));
-            var maxSize = nextBreakpoint.min;
-            var responsiveValue2 = object["@" + nextBreakpoint.key];
-            if (Array.isArray(responsiveValue2))
-                responsiveValue2 = responsiveValue2[0];
-            var size1 = resolveValue(responsiveValue);
-            var size2 = resolveValue(responsiveValue2);
-            responsiveValue = "calc(".concat(size1, " + (100vw - ").concat(minSize, ") / (").concat(unitless(maxSize), " - ").concat(unitless(minSize), ") * (").concat(unitless(size2), " - ").concat(unitless(size1), "))");
-        }
-        globals[bpName][varName] = responsiveValue;
+}
+function parseResponsiveObject(breakpoints, object) {
+    // Breakpoint hash
+    var breakpointHash = {};
+    for (var _i = 0, breakpoints_1 = breakpoints; _i < breakpoints_1.length; _i++) {
+        var bp = breakpoints_1[_i];
+        breakpointHash[bp.key] = {
+            min: bp.min ? parseFloat(bp.min) : null,
+            max: bp.max ? parseFloat(bp.max) : null,
+        };
+    }
+    var result = [];
+    var lerpStart = "initial";
+    var lastDefined = "initial";
+    var concreteValues = {};
+    for (var _a = 0, breakpoints_2 = breakpoints; _a < breakpoints_2.length; _a++) {
+        var bp = breakpoints_2[_a];
+        var value = parseResponsiveValue(object["@" + bp.key]);
+        var defined = value.type !== "undefined";
+        var base = !defined || value.type === "multiplier" ? lastDefined : bp.key;
+        lerpStart = value.lerpStart ? bp.key : lerpStart && !defined ? lerpStart : null;
+        if (value.type === "px" || value.type === "number") {
+            concreteValues[bp.key] = value.value;
+        }
+        else if (value.type === "multiplier") {
+            concreteValues[bp.key] = value.value * concreteValues[base];
+        }
+        else if (value.type === "percent") {
+            concreteValues[bp.key] = value.value;
+        }
+        result.push(__assign(__assign({}, value), { defined: defined, breakpoint: bp.key, lastBreakpoint: lastDefined, baseBreakpoint: base, lerping: lerpStart
+                ? {
+                    fromBP: lerpStart,
+                    toBP: null,
+                    minMedia: 0,
+                    maxMedia: 0,
+                    minValue: 0,
+                    maxValue: 0,
+                }
+                : undefined, concreteValue: concreteValues[bp.key] }));
+        if (defined) {
+            lastDefined = bp.key;
+        }
+    }
+    var nextBreakpoints = [];
+    var lastBreakpoint = null;
+    for (var i = breakpoints.length - 1; i >= 0; i--) {
+        var bp = breakpoints[i];
+        nextBreakpoints[i] = lastBreakpoint;
+        if (result[i].defined) {
+            lastBreakpoint = bp.key;
+        }
+    }
+    result.forEach(function (item, i) {
+        if (item.lerping) {
+            item.lerping.toBP = nextBreakpoints[i];
+        }
     });
-    return [globals, (_a = globals["@initial"]) === null || _a === void 0 ? void 0 : _a[varName]];
+    result.forEach(function (item, i) {
+        var lerp = item.lerping;
+        if (lerp) {
+            var fromBP = lerp.fromBP ? breakpointHash[lerp.fromBP] : null;
+            var toBP = lerp.toBP ? breakpointHash[lerp.toBP] : null;
+            if (!fromBP || fromBP.min === null) {
+                throw new Error("Cannot create responsive style for first breakpoint");
+            }
+            if (!toBP || toBP.min === null) {
+                throw new Error("Cannot create responsive style for last breakpoint");
+            }
+            lerp.minMedia = fromBP.min;
+            lerp.maxMedia = toBP.min;
+            lerp.minValue = item.concreteValue;
+            lerp.maxValue = result.find(function (o) { return o.breakpoint === lerp.toBP; }).concreteValue;
+        }
+    });
+    return result;
+}
+exports.parseResponsiveObject = parseResponsiveObject;
+function getResponsiveObjectStyles(breakpoints, object, varName, unit) {
+    var _a, _b;
+    var _c;
+    if (unit === void 0) { unit = "px"; }
+    // Prescale object
+    object = __assign({}, object);
+    var parsed = parseResponsiveObject(breakpoints, object);
+    var globals = {};
+    for (var _i = 0, parsed_1 = parsed; _i < parsed_1.length; _i++) {
+        var atom = parsed_1[_i];
+        if (atom.lerpStart && atom.lerping) {
+            var lerp = atom.lerping;
+            globals["@" + atom.breakpoint] = (_a = {},
+                _a[varName] = "calc(".concat(lerp.minValue).concat(unit, " + (100vw - ").concat(lerp.minMedia).concat(unit, ") / (").concat(lerp.maxMedia, " - ").concat(lerp.minMedia, ") * (").concat(lerp.maxValue, " - ").concat(lerp.minValue, "))"),
+                _a);
+        }
+        else if (atom.concreteValue) {
+            globals["@" + atom.breakpoint] = (_b = {},
+                _b[varName] = atom.concreteValue + unit,
+                _b);
+        }
+    }
+    return [globals, (_c = globals["@initial"]) === null || _c === void 0 ? void 0 : _c[varName]];
 }
+exports.getResponsiveObjectStyles = getResponsiveObjectStyles;
 // parseResponsiveTokens({'@initial': blah, '@desktop': blah}, breakpoints, )
 function parseResponsiveTokens(theme, breakpoints) {
     var globalResponsive = {
@@ -204,7 +309,7 @@ function parseResponsiveTokens(theme, breakpoints) {
         for (var key in theme[scale]) {
             var val = theme[scale][key];
             if (val && typeof val === "object") {
-                var _a = parseResponsiveObject(theme, breakpoints, val, "--" + scale + "-" + key, scale), tokenGlobals = _a[0], initial = _a[1];
+                var _a = getResponsiveObjectStyles(breakpoints, val, "--" + scale + "-" + key), tokenGlobals = _a[0], initial = _a[1];
                 for (var bp in tokenGlobals) {
                     globalResponsive[bp] = __assign(__assign({}, globalResponsive[bp]), tokenGlobals[bp]);
                 }
@@ -217,8 +322,9 @@ function parseResponsiveTokens(theme, breakpoints) {
     }
     return { initialResponsive: initialResponsive, globalResponsive: globalResponsive };
 }
+exports.parseResponsiveTokens = parseResponsiveTokens;
 function createStitches(config) {
-    var breakpoints = parseBreakpoints(config.media);
+    var breakpoints = parseBreakpoints(config.breakpoints, config.media);
     var _a = parseTypography(config.theme, breakpoints, config.typography), typeVariants = _a.typeVariants, globalTypography = _a.globalTypography;
     var _b = parseGrid(config.theme, config.media, config.grid), gridVariants = _b.gridVariants, globalGrid = _b.globalGrid;
     var _c = parseResponsiveTokens(config.responsive, breakpoints), initialResponsive = _c.initialResponsive, globalResponsive = _c.globalResponsive;
@@ -309,6 +415,6 @@ function createStitches(config) {
     });
     stitches.globalCss(responsiveGlobals)();
     var responsiveTokens = {};
-    return __assign(__assign({}, stitches), { typeVariants: typeVariants, gridVariants: gridVariants, responsiveTokens: responsiveTokens });
+    return __assign(__assign({}, stitches), { originalConfig: config, breakpoints: breakpoints, typeVariants: typeVariants, gridVariants: gridVariants, responsiveTokens: responsiveTokens, responsiveGlobals: responsiveGlobals });
 }
 exports.createStitches = createStitches;

package/utils/getRepoName.js

@@ -7,10 +7,18 @@ exports.getRepoName = void 0;
 var git_repo_name_1 = __importDefault(require("git-repo-name"));
 var path_1 = __importDefault(require("path"));
 function getRepoName(dir) {
-    var info = git_repo_name_1.default.sync(dir);
-    return {
-        repoName: info || "",
-        themeName: path_1.default.basename(dir),
-    };
+    if (process.env.VERCEL) {
+        return {
+            repoName: process.env.VERCEL_GIT_REPO_SLUG,
+            themeName: process.env.VERCEL_GIT_REPO_SLUG,
+        };
+    }
+    else {
+        var info = git_repo_name_1.default.sync(dir);
+        return {
+            repoName: info || "",
+            themeName: path_1.default.basename(dir),
+        };
+    }
 }
 exports.getRepoName = getRepoName;

package/utils/updateEnvFile.d.ts

@@ -0,0 +1 @@
+export declare function updateEnvFile(data: Record<string, string | number>, directory?: string): Promise<void>;