unframer 4.1.8 → 4.2.0

package/dist/css.js

@@ -1,247 +1,25 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import dedent from 'string-dedent';
 import { withCSS as withCSSOriginal } from './framer.js';
-function getFontFamilyName(font) {
-    // New fonts have cssFamilyName, old fonts have family
-    return font.cssFamilyName || font.family;
-}
-function deduplicateByKey(arr, key) {
-    let map = new Map();
-    for (let item of arr) {
-        let value = key(item);
-        if (map.has(value)) {
-            continue;
-        }
-        map.set(value, item);
-    }
-    return Array.from(map.values());
-}
-export function logFontsUsage(fontsBundles) {
-    if (!fontsBundles.length) {
-        return '';
-    }
-    let familyToFilenames = new Map();
-    for (let fontDefBundle of fontsBundles) {
-        let filename = fontDefBundle.fileName;
-        for (let font of fontDefBundle.fonts) {
-            const familyName = getFontFamilyName(font);
-            if (!familyName)
-                continue;
-            if (familyToFilenames.has(familyName)) {
-                familyToFilenames.get(familyName).add(filename);
-            }
-            else {
-                familyToFilenames.set(familyName, new Set([filename]));
-            }
-        }
-    }
-    let str = `There are ${familyToFilenames.size} fonts used:\n`;
-    for (let [family, filenames] of familyToFilenames.entries()) {
-        str += `${JSON.stringify(family)}, used by\n`;
-        for (let filename of filenames) {
-            str += `  - ${filename}\n`;
-        }
-    }
-    return str;
-}
-export function getFontsStyles(_fontsDefs) {
-    if (!_fontsDefs.length) {
-        return '';
-    }
-    let urlToFilenames = new Map();
-    for (let fontDefBundle of _fontsDefs) {
-        let filename = fontDefBundle.fileName;
-        for (let font of fontDefBundle.fonts) {
-            if (urlToFilenames.has(font.url)) {
-                urlToFilenames.get(font.url).add(filename);
-            }
-            else {
-                urlToFilenames.set(font.url, new Set([filename]));
-            }
-        }
-    }
-    const allFonts = deduplicateByKey(_fontsDefs.flatMap((x) => x.fonts), (x) => x?.url)
-        .filter((x) => {
-        if (!x.url)
-            return false;
-        const familyName = getFontFamilyName(x);
-        if (!familyName) {
-            console.log('Font missing family field:', JSON.stringify(x, null, 2));
-            return false;
-        }
-        return true;
-    })
-        .sort((a, b) => a.url.localeCompare(b.url));
-    // group fonts by the filenames users
-    const grouped = groupBy(allFonts, (x) => {
-        return [...(urlToFilenames.get(x.url) || [])].sort().join(', ');
-    });
-    let str = '\n\n';
-    for (let [groupComment, fonts] of grouped.entries()) {
-        fonts = sortByKey(fonts, (x) => x.url);
-        str += `/* used by ${groupComment} */\n`;
-        str +=
-            '\n' +
-                fonts
-                    .map((x) => {
-                    let str = '';
-                    const familyName = getFontFamilyName(x);
-                    str += dedent `
-                    @font-face {
-                        font-family: "${familyName}";
-                        src: url('${x.url}');\n
-                    `;
-                    if (x.style) {
-                        str += `    font-style: ${x.style};\n`;
-                    }
-                    if (x.weight) {
-                        str += `    font-weight: ${x.weight};\n`;
-                    }
-                    if (x.unicodeRange) {
-                        str += `    unicode-range: ${x.unicodeRange};\n`;
-                    }
-                    str += `}\n`;
-                    return str;
-                })
-                    .join('\n') +
-                '\n';
-    }
-    return str;
-}
-export const defaultBreakpointSizes = {
-    base: 0,
-    sm: 320,
-    md: 768,
-    lg: 960,
-    xl: 1200,
-    '2xl': 1536,
-};
-// @deprecated TODO remove this in future releases
-export const breakpointsStylesLegacy = (breakpointSizes) => {
-    breakpointSizes = { ...defaultBreakpointSizes, ...breakpointSizes };
-    return /* css */ `
-/* Base */
-@media (min-width: ${breakpointSizes.base}px) and (max-width: ${breakpointSizes.sm - 1}px) {
-    .unframer-hidden.unframer-base {
-        display: contents;
-    }
-}
-
-/* Small */
-@media (min-width: ${breakpointSizes.sm}px) and (max-width: ${breakpointSizes.md - 1}px) {
-    .unframer-hidden.unframer-sm {
-        display: contents;
-    }
-}
-
-/* Medium */
-@media (min-width: ${breakpointSizes.md}px) and (max-width: ${breakpointSizes.lg - 1}px) {
-    .unframer-hidden.unframer-md {
-        display: contents;
-    }
-}
-
-/* Large */
-@media (min-width: ${breakpointSizes.lg}px) and (max-width: ${breakpointSizes.xl - 1}px) {
-    .unframer-hidden.unframer-lg {
-        display: contents;
-    }
-}
-
-/* Extra Large */
-@media (min-width: ${breakpointSizes.xl}px) and (max-width: ${breakpointSizes['2xl'] - 1}px) {
-    .unframer-hidden.unframer-xl {
-        display: contents;
-    }
-}
-
-/* 2 Extra Large */
-@media (min-width: ${breakpointSizes['2xl']}px) {
-    .unframer-hidden.unframer-2xl {
-        display: contents;
-    }
-}
-
-.unframer-hidden {
-    display: none;
-}
-`;
-};
-export const breakpointsStyles = (breakpointSizes) => {
-    breakpointSizes = { ...defaultBreakpointSizes, ...breakpointSizes };
-    return /* css */ `
-
-/* Base */
-@media (min-width: ${breakpointSizes.base}px) and (max-width: ${breakpointSizes.sm - 1}px) {
-    .unframer-hidden:not(.unframer-base) {
-        display: none !important;
-    }
-}
-
-/* Small */
-@media (min-width: ${breakpointSizes.sm}px) and (max-width: ${breakpointSizes.md - 1}px) {
-    .unframer-hidden:not(.unframer-sm) {
-        display: none !important;
-    }
-}
-
-/* Medium */
-@media (min-width: ${breakpointSizes.md}px) and (max-width: ${breakpointSizes.lg - 1}px) {
-    .unframer-hidden:not(.unframer-md) {
-        display: none !important;
-    }
-}
-
-/* Large */
-@media (min-width: ${breakpointSizes.lg}px) and (max-width: ${breakpointSizes.xl - 1}px) {
-    .unframer-hidden:not(.unframer-lg) {
-        display: none !important;
-    }
-}
-
-/* Extra Large */
-@media (min-width: ${breakpointSizes.xl}px) and (max-width: ${breakpointSizes['2xl'] - 1}px) {
-    .unframer-hidden:not(.unframer-xl) {
-        display: none !important;
-    }
-}
-
-/* 2 Extra Large */
-@media (min-width: ${breakpointSizes['2xl']}px) {
-    .unframer-hidden:not(.unframer-2xl) {
-        display: none !important;
-    }
-}
-`;
-};
-export function groupBy(arr, key) {
-    const map = new Map();
-    for (let item of arr) {
-        const k = key(item);
-        if (!map.has(k)) {
-            map.set(k, []);
-        }
-        map.get(k)?.push(item);
-    }
-    return map;
-}
-function sortByKey(arr, key) {
-    return arr.slice().sort((a, b) => key(a).localeCompare(key(b)));
-}
+export * from './css-core.js';
 /**
  * Custom withCSS function that restores the previous behavior
- * of rendering inline style tags instead of using cssCollector
+ * of rendering inline style tags instead of using cssCollector.
+ *
+ * On the client we return withCSSOriginal so the component tree structure
+ * matches what framer.js internal components produce (just <Component/>,
+ * no Fragment wrapper). On the server we render <style> + <Component>
+ * inside a Fragment to inject CSS into the SSR HTML. The tree differs
+ * between server and client but suppressHydrationWarning on the Component
+ * handles the mismatch.
  */
 export function withCSS(Component, escapedCSS, componentSerializationId) {
     const framerCSSMarker = 'data-framer-css-ssr';
     if (typeof window !== 'undefined' && typeof window.document !== 'undefined')
         return withCSSOriginal(Component, escapedCSS, componentSerializationId || '');
     return (props) => {
-        // Check if we're in SSR mode
         const isBrowser = typeof window !== 'undefined' &&
             typeof window.document !== 'undefined';
         if (!isBrowser) {
-            // Server-side: render style tags like the old behavior
             const id = componentSerializationId;
             const cssContent = typeof escapedCSS === 'function'
                 ? escapedCSS('EXPORT')
@@ -252,7 +30,6 @@ export function withCSS(Component, escapedCSS, componentSerializationId) {
                     _jsx("style", { [framerCSSMarker]: true, "data-framer-component": id, dangerouslySetInnerHTML: { __html: cssContent } }), _jsx(Component, { ...props })
                 ] }));
         }
-        // Client-side: just render the component
         return _jsx(Component, { ...props });
     };
 }

package/dist/css.js.map

@@ -1 +1 @@
-{"version":3,"file":"css.js","sourceRoot":"","sources":["../src/css.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"css.js","sourceRoot":"","sources":["../src/css.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,aAAa,CAAA;AAExD,cAAc,eAAe,CAAA;AAE7B;;;;;;;;;;GAUG;AACH,MAAM,UAAU,OAAO,CACnB,SAAc,EACd,UAAe,EACf,wBAAiC,EACnC;IACE,MAAM,eAAe,GAAG,qBAAqB,CAAA;IAE7C,IAAI,OAAO,MAAM,KAAK,WAAW,IAAI,OAAO,MAAM,CAAC,QAAQ,KAAK,WAAW;QACvE,OAAO,eAAe,CAAC,SAAS,EAAE,UAAU,EAAE,wBAAwB,IAAI,EAAE,CAAC,CAAA;IAEjF,OAAO,CAAC,KAAU,EAAE,EAAE,CAAC;QACnB,MAAM,SAAS,GACX,OAAO,MAAM,KAAK,WAAW;YAC7B,OAAO,MAAM,CAAC,QAAQ,KAAK,WAAW,CAAA;QAE1C,IAAI,CAAC,SAAS,EAAE,CAAC;YACb,MAAM,EAAE,GAAG,wBAAwB,CAAA;YACnC,MAAM,UAAU,GACZ,OAAO,UAAU,KAAK,UAAU;gBAC5B,CAAC,CAAC,UAAU,CAAC,QAAQ,CAAC;gBACtB,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC;oBACzB,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC;oBACvB,CAAC,CAAC,UAAU,CAAA;YAEtB,OAAO,CACH;oBACI,gBACU,CAAC,eAAe,CAAC,EAAE,IAAI,2BACN,EAAE,EACzB,uBAAuB,EAAE,EAAE,MAAM,EAAE,UAAU,EAAE,GACjD,EACF,KAAC,SAAS,OAAK,KAAK,GAAI;oBACzB,CACN,CAAA;QACL,CAAC;QAED,OAAO,KAAC,SAAS,OAAK,KAAK,GAAI,CAAA;IAAA,CAClC,CAAA;AAAA,CACJ"}

package/dist/exporter.d.ts

@@ -1,6 +1,6 @@
 import { BuildResult, type BuildOptions } from 'esbuild';
 import { Config } from './cli.js';
-import { ComponentFontBundle } from './css.js';
+import { ComponentFontBundle } from './css-core.js';
 import type { PropertyControls } from './framer-types.js';
 export type StyleToken = {
     id: string;

package/dist/exporter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"exporter.d.ts","sourceRoot":"","sources":["../src/exporter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAkB,KAAK,YAAY,EAAE,MAAM,SAAS,CAAA;AAIxE,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAqBjC,OAAO,EACH,mBAAmB,EAOtB,MAAM,UAAU,CAAA;AAUjB,OAAO,KAAK,EAAsB,gBAAgB,EAAE,MAAM,mBAAmB,CAAA;AA6C7E,MAAM,MAAM,UAAU,GAAG;IACrB,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,UAAU,EAAE,MAAM,CAAA;IAClB,SAAS,EAAE,MAAM,CAAA;CACpB,CAAA;AAkBD,wBAAsB,MAAM,CAAC,EACzB,MAAM,EACN,GAAG,EAAE,GAAQ,EACb,KAAa,EACb,MAA6C,EAC7C,QAAgB,EACnB,EAAE;IACC,MAAM,EAAE,MAAM,CAAA;IACd,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,MAAM,CAAC,EAAE,WAAW,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACrB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAowBA;AAID,wBAAgB,qBAAqB,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE;;;CAAA,+BA+BjD;AAED,wBAAgB,cAAc,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE;;;CAAA,oBAyB1C;AAED,wBAAgB,mBAAmB,CAAC,IAAI,EAAE;IACtC,YAAY,CAAC,EAAE,OAAO,GAAG,OAAO,CAAA;IAChC,OAAO,EAAE,MAAM,CAAA;CAClB,UAaA;AAED,wBAAgB,iBAAiB,CAC7B,MAAM,EAAE,UAAU,EAAE,EACpB,YAAY,GAAE,OAAO,GAAG,OAAiB,UAmE5C;AACD,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,MAAM,YAY7C;AAID,wBAAsB,yBAAyB,CAC3C,QAAQ,KAAA,EACR,IAAI,KAAA,GACL,OAAO,CAAC;IACP,gBAAgB,CAAC,EAAE,gBAAgB,CAAA;IACnC,KAAK,CAAC,EAAE,mBAAmB,EAAE,CAAA;CAChC,CAAC,CAsED;AAWD,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,MAAM,iBAqCjD;AAED,KAAK,kBAAkB,GAAG;IACtB,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAE9B,YAAY,EAAE,MAAM,CAAA;CACvB,CAAA;AAED,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,GAAG,kBAAkB,EAAE,CA2DnE;AAsBD,wBAAgB,cAAc,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,UAMvD;AAED,wBAAsB,0BAA0B,CAAC,EAC7C,MAAM,EACN,MAAM,EACT,EAAE;IACC,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,MAAM,CAAA;CACjB;;;GAwHA;AAED,KAAK,YAAY,GAAG;IAChB,UAAU,EAAE,KAAK,CAAC;QACd,iBAAiB,EAAE,MAAM,CAAA;QACzB,IAAI,EAAE,MAAM,CAAA;QACZ,GAAG,EAAE,MAAM,CAAA;QACX,aAAa,EAAE,MAAM,CAAA;QACrB,gBAAgB,CAAC,EAAE,gBAAgB,CAAA;KACtC,CAAC,CAAA;CACL,CAAA;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,OAAO,CAyB5E"}
+{"version":3,"file":"exporter.d.ts","sourceRoot":"","sources":["../src/exporter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAkB,KAAK,YAAY,EAAE,MAAM,SAAS,CAAA;AAIxE,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAoBjC,OAAO,EACH,mBAAmB,EAOtB,MAAM,eAAe,CAAA;AAUtB,OAAO,KAAK,EAAsB,gBAAgB,EAAE,MAAM,mBAAmB,CAAA;AA6C7E,MAAM,MAAM,UAAU,GAAG;IACrB,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,UAAU,EAAE,MAAM,CAAA;IAClB,SAAS,EAAE,MAAM,CAAA;CACpB,CAAA;AAkBD,wBAAsB,MAAM,CAAC,EACzB,MAAM,EACN,GAAG,EAAE,GAAQ,EACb,KAAa,EACb,MAA6C,EAC7C,QAAgB,EACnB,EAAE;IACC,MAAM,EAAE,MAAM,CAAA;IACd,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,MAAM,CAAC,EAAE,WAAW,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACrB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAizBA;AAID,wBAAgB,qBAAqB,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE;;;CAAA,+BA+BjD;AAED,wBAAgB,cAAc,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE;;;CAAA,oBAyB1C;AAED,wBAAgB,mBAAmB,CAAC,IAAI,EAAE;IACtC,YAAY,CAAC,EAAE,OAAO,GAAG,OAAO,CAAA;IAChC,OAAO,EAAE,MAAM,CAAA;CAClB,UAaA;AAiBD,wBAAgB,iBAAiB,CAC7B,MAAM,EAAE,UAAU,EAAE,EACpB,YAAY,GAAE,OAAO,GAAG,OAAiB,UAyF5C;AACD,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,MAAM,YAY7C;AAID,wBAAsB,yBAAyB,CAC3C,QAAQ,KAAA,EACR,IAAI,KAAA,GACL,OAAO,CAAC;IACP,gBAAgB,CAAC,EAAE,gBAAgB,CAAA;IACnC,KAAK,CAAC,EAAE,mBAAmB,EAAE,CAAA;CAChC,CAAC,CAsED;AAWD,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,MAAM,iBAqCjD;AAED,KAAK,kBAAkB,GAAG;IACtB,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAE9B,YAAY,EAAE,MAAM,CAAA;CACvB,CAAA;AAED,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,GAAG,kBAAkB,EAAE,CA2DnE;AAsBD,wBAAgB,cAAc,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,UAMvD;AAED,wBAAsB,0BAA0B,CAAC,EAC7C,MAAM,EACN,MAAM,EACT,EAAE;IACC,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,MAAM,CAAA;CACjB;;;GAwHA;AAED,KAAK,YAAY,GAAG;IAChB,UAAU,EAAE,KAAK,CAAC;QACd,iBAAiB,EAAE,MAAM,CAAA;QACzB,IAAI,EAAE,MAAM,CAAA;QACZ,GAAG,EAAE,MAAM,CAAA;QACX,aAAa,EAAE,MAAM,CAAA;QACrB,gBAAgB,CAAC,EAAE,gBAAgB,CAAA;KACtC,CAAC,CAAA;CACL,CAAA;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,OAAO,CAyB5E"}

package/dist/exporter.js

@@ -3,16 +3,15 @@ import url from 'url';
 import { createRequire } from 'node:module';
 const require = createRequire(import.meta.url);
 import { Sema } from 'async-sema';
-import { nodeModulesPolyfillPlugin } from 'esbuild-plugins-node-modules-polyfill';
 import { transform } from '@babel/core';
 import { exec } from 'child_process';
 import fs from 'fs';
 import path from 'path';
 import crypto from 'crypto';
 import { dedent } from './utils.js';
-import { babelPluginJsxTransform, removeJsxExpressionContainer, } from './babel-jsx.js';
+import { babelPluginJsxTransform, babelPluginSuppressHydration, removeJsxExpressionContainer, } from './babel-jsx.js';
 import { babelPluginTypedoc } from './babel-typedoc.js';
-import { breakpointsStyles, defaultBreakpointSizes, getFontsStyles, logFontsUsage, } from './css.js';
+import { breakpointsStyles, defaultBreakpointSizes, getFontsStyles, logFontsUsage, } from './css-core.js';
 import { propControlsToTypedocComments, componentImportedName, } from './typescript.js';
 import { defaultExternalPackages, esbuildPluginBundleDependencies, resolveRedirect, } from './esbuild.js';
 import { notifyError } from './sentry.js';
@@ -133,7 +132,6 @@ export async function bundle({ config, cwd: out = '', watch = false, signal = un
                     missingPackages.add(pkg);
                 },
             }),
-            nodeModulesPolyfillPlugin({}),
             {
                 name: 'virtual loader',
                 setup(build) {
@@ -370,6 +368,14 @@ export async function bundle({ config, cwd: out = '', watch = false, signal = un
                     typedocComments,
                 };
             }
+            catch (e) {
+                const name = path
+                    .relative(out, file.path)
+                    .replace(/\.jsx?$/, '');
+                spinner.error(`Failed to extract types for ${name}: ${e instanceof Error ? e.message : e}`);
+                logger.log(e instanceof Error ? e.stack : e);
+                return undefined;
+            }
             finally {
                 sema.release();
             }
@@ -393,14 +399,21 @@ export async function bundle({ config, cwd: out = '', watch = false, signal = un
         logFontsUsage(allFonts)
             ?.split('\n')
             .forEach((x) => logger.log(x));
+        function isChunkPath(filePath) {
+            return (filePath.includes('/chunks/') ||
+                filePath.includes('\\chunks\\'));
+        }
         const jsxFiles = buildResult.outputFiles
             .filter((x) => x.path.endsWith('.js') &&
+            !isChunkPath(x.path) &&
             fs.existsSync(getFilePaths(x.path, out).jsxPath))
             .map((x) => getFilePaths(x.path, out).jsxPath);
         const outFiles = buildResult.outputFiles
             .map((x) => {
             const paths = getFilePaths(x.path, out);
-            if (x.path.endsWith('.js') && fs.existsSync(paths.jsxPath)) {
+            if (x.path.endsWith('.js') &&
+                !isChunkPath(x.path) &&
+                fs.existsSync(paths.jsxPath)) {
                 return null; // Will be handled by jsx files
             }
             return paths.finalJsPath;
@@ -483,6 +496,7 @@ export async function bundle({ config, cwd: out = '', watch = false, signal = un
                 try {
                     const plugins = [
                         // babelPluginDeduplicateImports,
+                        babelPluginSuppressHydration,
                         babelPluginJsxTransform,
                         removeJsxExpressionContainer,
                     ];
@@ -521,9 +535,15 @@ export async function bundle({ config, cwd: out = '', watch = false, signal = un
                     }
                 }
                 catch (e) {
+                    spinner.warn(`Babel/Biome formatting failed for ${componentName}: ${e instanceof Error ? e.message : e}`);
+                    logger.log(e instanceof Error ? e.stack : e);
                     notifyError(e, 'babel transform and format');
                 }
             }
+            else if (tooBig) {
+                const sizeMB = (file.text.length / (1024 * 1024)).toFixed(2);
+                spinner.warn(`Skipping JSX formatting for ${componentName} (${sizeMB} MB exceeds ${(tooBigSize / (1024 * 1024)).toFixed(2)} MB limit)`);
+            }
             const prefix = `// @ts-nocheck\n` + `/* eslint-disable */\n` + doNotEditComment;
             const codeJsx = prefix + formatted;
             const codeJs = prefix + file.text;
@@ -533,7 +553,11 @@ export async function bundle({ config, cwd: out = '', watch = false, signal = un
             });
             // Always write the temp .js file for type extraction
             await fs.promises.writeFile(paths.tempJsPath, codeJs, 'utf-8');
-            // Only write .jsx file if it's different from existing or if formatting was done
+            // Write .jsx file if formatting succeeded, or fall back to writing
+            // unformatted .js content into the .jsx path when formatting fails
+            // (babel error, component too big, etc.) but a stale .jsx already
+            // exists on disk. Without this fallback the stale .jsx keeps old
+            // chunk imports while the old chunks are deleted, breaking the build.
             if (didFormat && codeJsx !== existing) {
                 await fs.promises.writeFile(paths.jsxPath, codeJsx, 'utf-8');
                 logger.log(`Updated JSX file for ${componentName}`);
@@ -541,6 +565,13 @@ export async function bundle({ config, cwd: out = '', watch = false, signal = un
             else if (didFormat) {
                 logger.log(`JSX file unchanged for ${componentName}`);
             }
+            else if (existing && codeJs !== existing) {
+                // Formatting failed but .jsx exists with stale content (e.g.
+                // old chunk hashes). Overwrite with unformatted JS so imports
+                // stay in sync with the current build's chunks.
+                await fs.promises.writeFile(paths.jsxPath, codeJs, 'utf-8');
+                logger.log(`Updated JSX file (unformatted) for ${componentName}`);
+            }
         }
         spinner.stop();
         // await fs.promises.writeFile(
@@ -552,8 +583,10 @@ export async function bundle({ config, cwd: out = '', watch = false, signal = un
         for (let file of buildResult.outputFiles) {
             if (file.path.endsWith('.js')) {
                 const paths = getFilePaths(file.path, out);
-                if (fs.existsSync(paths.jsxPath)) {
+                if (!isChunkPath(paths.tempJsPath) &&
+                    fs.existsSync(paths.jsxPath)) {
                     // Remove temp .js file if .jsx equivalent exists
+                    // (never applies to chunks which stay as .js)
                     logger.log('removing temp JS file with JSX equivalent:', path.relative(out, paths.tempJsPath));
                     try {
                         await fs.promises.rm(paths.tempJsPath);
@@ -713,16 +746,44 @@ export function getDarkModeSelector(opts) {
     }
     return '.dark {\n' + content + '\n' + '}';
 }
+// A CSS custom property value must not contain structural characters that would
+// terminate the declaration or the surrounding `:root {}` block. Framer color
+// styles can in rare cases carry malformed color strings (e.g. text scraped from
+// a code-highlighting component), and an unescaped `}` closes the block early.
+// The leaked text then becomes a top-level class rule like `.[-:=] { -: =; }`,
+// which browsers tolerate but lightningcss (Vite's css minifier) rejects with
+// "Expected identifier in class selector". Skip such tokens to keep styles.css
+// always minifiable. See the getStyleTokensCss regression test.
+function isSafeCssColorValue(value) {
+    if (typeof value !== 'string' || value === '') {
+        return false;
+    }
+    return !/[;{}\n\r]/.test(value);
+}
 export function getStyleTokensCss(tokens, darkModeType = 'class') {
     if (!tokens?.length) {
         return '';
     }
+    // Drop tokens whose color values would produce invalid CSS. Both light and
+    // dark colors must be safe, otherwise the token is skipped entirely so the
+    // --unframer-* and --token-* variables never desync.
+    const validTokens = tokens.filter((token) => {
+        if (!isSafeCssColorValue(token.lightColor) ||
+            !isSafeCssColorValue(token.darkColor)) {
+            logger.log(`Skipping style token ${JSON.stringify(token.name || token.id)}: unsafe color value`);
+            return false;
+        }
+        return true;
+    });
+    if (!validTokens.length) {
+        return '';
+    }
     // Deduplicate --unframer-* names: multiple Framer tokens can share the same
     // user-facing name (e.g. two tokens both called "black" with different UUIDs).
     // Keep only the first occurrence of each kebab-cased name to avoid silent
     // CSS overwrites. The --token-{uuid} variables are always unique and unaffected.
     const seenNames = new Set();
-    const deduplicatedTokens = tokens.filter((token) => {
+    const deduplicatedTokens = validTokens.filter((token) => {
         const name = kebabCase(token.name || token.id);
         if (seenNames.has(name)) {
             return false;
@@ -737,7 +798,7 @@ export function getStyleTokensCss(tokens, darkModeType = 'class') {
         token.lightColor +
         ';')
         .join('\n');
-    const lightTokens = tokens
+    const lightTokens = validTokens
         .map((token) => '    --token-' + token.id + ': ' + token.lightColor + ';')
         .join('\n');
     const darkUnframerTokens = deduplicatedTokens
@@ -747,7 +808,7 @@ export function getStyleTokensCss(tokens, darkModeType = 'class') {
         token.darkColor +
         ';')
         .join('\n');
-    const darkTokens = tokens
+    const darkTokens = validTokens
         .map((token) => '    --token-' + token.id + ': ' + token.darkColor + ';')
         .join('\n');
     return (':root {\n' +
@@ -819,7 +880,7 @@ export async function extractPropControlsUnsafe(filename, name) {
         return {};
     }
     // console.log(stdout)
-    return safeJsonParse(stdout);
+    return safeJsonParse(stdout) || {};
 }
 function safeJsonParse(text) {
     try {