unframer 1.5.0 → 1.7.1

package/README.md

@@ -46,14 +46,12 @@ Download framer components as simple files
 1. Import the component inside your `jsx` files, for example
 
 ```tsx
+import './framer/styles.cs' // load base Framer styles
 import Menu from './framer/menus'
-import { FramerStyles } from 'unframer'
 
 export default function App() {
     return (
         <div>
-            {/* Injects fonts and other framer utility styles */}
-            <FramerStyles Components={[Menu]} />
             <Menu componentVariable='some variable' />
         </div>
     )
@@ -63,14 +61,12 @@ export default function App() {
 ## Using responsive variants
 
 ```tsx
+import './framer/styles.cs'
 import Logos from './framer/logos'
-import { FramerStyles } from 'unframer'
 
 export default function App() {
     return (
         <div>
-            {/* Injects fonts and other framer utility styles */}
-            <FramerStyles Components={[Logos]} />
             {/* Changes component variant based on breakpoint */}
             <Logos.Responsive
                 variants={{
@@ -91,14 +87,12 @@ You can use `className` or `style` props to style your components
 Notice that you will often need to use `!important` to override styles already defined in framer like `width` and `height`
 
 ```tsx
+import './framer/styles.cs'
 import Logos from './framer/logos'
-import { FramerStyles } from 'unframer'
 
 export default function App() {
     return (
         <div>
-            {/* Injects fonts and other framer utility styles */}
-            <FramerStyles Components={[Logos]} />
             {/* Changes component variant based on breakpoint */}
             <Logos.responsive
                 className='!w-full'
@@ -113,6 +107,31 @@ export default function App() {
 }
 ```
 
+## Sizing components
+
+Framer components can have a fixed size, this comes from the root element in the Framer component editor. To override this size you will need to use the `style` prop or use a class with high specificity.
+
+```tsx
+import './framer/styles.cs'
+import Logos from './framer/logos'
+
+export default function App() {
+    return (
+        <div>
+            <Logos.responsive
+                className='!w-full' // use !important to override framer default size
+                style={{ width: '100%' }} // or use style prop, which has higher specificity than the Framer class
+                variants={{
+                    lg: 'Desktop',
+                    md: 'Tablet',
+                    base: 'Mobile',
+                }}
+            />
+        </div>
+    )
+}
+```
+
 ## Supported component props
 
 `unframer` will add TypeScript definitions for your Framer components props and variables, some example variables you can use are:
@@ -128,7 +147,6 @@ export default function App() {
 
 Known limitations:
 
-
 -   Color styles (also known as tokens) can get out of sync with your Framer project, if this happen you will have to find the corresponding css variable (in the form of `--token-xxxx`) in the component code and define it in your CSS, for example:
 
 ```css
@@ -137,7 +155,11 @@ Known limitations:
 }
 ```
 
--   Instead of using relative links to your Framer components you should either use link variables or absolute links (starting with https://, not links to other Framer pages). This is because links to Framer pages are encoded with opaque ids.
+-   Links to Framer pages won't work, this is because links to Framer pages are encoded with opaque ids. Instead you should
+
+    1. use link variables
+    1. absolute links (starting with https://, not links to other Framer pages).
+    1. append a query when creating a link (for example instead of writing `/home` you write `/home?` and don't press enter, this will preserve the link as it is)
 
 -   Internationalization is not supported
 

package/dist/cli.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cli.d.ts","sourceRoot":"","sources":["../src/cli.tsx"],"names":[],"mappings":"AAYA,eAAO,MAAM,GAAG,mBAAQ,CAAA"}
+{"version":3,"file":"cli.d.ts","sourceRoot":"","sources":["../src/cli.tsx"],"names":[],"mappings":"AAaA,eAAO,MAAM,GAAG,mBAAQ,CAAA"}

package/dist/cli.js

@@ -1,4 +1,4 @@
-import { bundle, logger } from './exporter.js';
+import { bundle } from './exporter.js';
 import JSON from 'json5';
 import { setMaxListeners } from 'events';
 import chokidar from 'chokidar';
@@ -7,6 +7,7 @@ import { findUp } from 'find-up';
 import path from 'path';
 const configName = 'unframer.json';
 import { cac } from 'cac';
+import { logger } from './utils.js';
 export const cli = cac();
 const __dirname = path.dirname(new URL(import.meta.url).pathname);
 cli.command('', 'Run unframer')
@@ -119,7 +120,7 @@ async function processConfig({ config, watch, signal, }) {
     }
     catch (e) {
         if (signal) {
-            logger.log('Error processing config', e.message);
+            logger.log('Error processing config', e.stack);
             return;
         }
         throw e;

package/dist/cli.js.map

@@ -1 +1 @@
-{"version":3,"file":"cli.js","sourceRoot":"","sources":["../src/cli.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"cli.js","sourceRoot":"","sources":["../src/cli.tsx"],"names":[],"mappings":"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"}

package/dist/cli.test.js

@@ -1,6 +1,6 @@
 import tmp from 'tmp';
 import { test, expect } from 'vitest';
-import { bundle, componentCamelCase, extractTokenInfo } from './exporter.js';
+import { bundle, componentCamelCase, extractTokenInfo, findRelativeLinks, } from './exporter.js';
 test('componentCamelCase', () => {
     expect(componentCamelCase('logo-ticker')).toMatchInlineSnapshot(`"LogoTickerFramerComponent"`);
     expect(componentCamelCase('Logo-Ticker')).toMatchInlineSnapshot(`"LogoTickerFramerComponent"`);
@@ -8,6 +8,19 @@ test('componentCamelCase', () => {
     expect(componentCamelCase('nav')).toMatchInlineSnapshot(`"NavFramerComponent"`);
     expect(componentCamelCase('framer_nav')).toMatchInlineSnapshot(`"FramerNavFramerComponent"`);
 });
+test('findRelativeLinks', () => {
+    expect(findRelativeLinks(`
+    some code
+    href: { pathVariables: { m3uy2HDcr: m3uy2HDcry78Q_MgWu2, }, webPageId: 'MREmP2Mxd', },
+    other code
+    webPageId: 'another id', webPageId: 'xxx',
+    `)).toMatchInlineSnapshot(`
+      [
+        2,
+        4,
+      ]
+    `);
+});
 test('extractTokenInfo', async () => {
     const str = `
         some other code

package/dist/cli.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"cli.test.js","sourceRoot":"","sources":["../src/cli.test.ts"],"names":[],"mappings":"AAAA,OAAO,GAAG,MAAM,KAAK,CAAA;AAErB,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAA;AACrC,OAAO,EAAE,MAAM,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAA;AAE5E,IAAI,CAAC,oBAAoB,EAAE,GAAG,EAAE;IAC5B,MAAM,CAAC,kBAAkB,CAAC,aAAa,CAAC,CAAC,CAAC,qBAAqB,CAAC,6BAA6B,CAAC,CAAA;IAC9F,MAAM,CAAC,kBAAkB,CAAC,aAAa,CAAC,CAAC,CAAC,qBAAqB,CAAC,6BAA6B,CAAC,CAAA;IAC9F,MAAM,CAAC,kBAAkB,CAAC,MAAM,CAAC,CAAC,CAAC,qBAAqB,CAAC,uBAAuB,CAAC,CAAA;IACjF,MAAM,CAAC,kBAAkB,CAAC,KAAK,CAAC,CAAC,CAAC,qBAAqB,CAAC,sBAAsB,CAAC,CAAA;IAC/E,MAAM,CAAC,kBAAkB,CAAC,YAAY,CAAC,CAAC,CAAC,qBAAqB,CAAC,4BAA4B,CAAC,CAAA;AAChG,CAAC,CAAC,CAAA;AAEF,IAAI,CACA,kBAAkB,EAClB,KAAK,IAAI,EAAE;IACP,MAAM,GAAG,GAAG;;;;;;;;;;SAUX,CAAA;IACD,MAAM,MAAM,GAAG,gBAAgB,CAAC,GAAG,CAAC,CAAA;IACpC,MAAM,CAAC,MAAM,CAAC,CAAC,qBAAqB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAqCpC,CAAC,CAAA;AACN,CAAC,EACD,IAAI,GAAG,EAAE,CACZ,CAAA;AACD,IAAI,CACA,yBAAyB,EACzB,KAAK,IAAI,EAAE;IACP,MAAM,UAAU,GAAG,GAAG,CAAC,OAAO,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAA;IAC5D,OAAO,CAAC,GAAG,CAAC,YAAY,EAAE,UAAU,CAAC,CAAA;IACrC,MAAM,GAAG,GACL,+DAA+D,CAAA;IACnE,MAAM,MAAM,CAAC;QACT,UAAU,EAAE;YACR,MAAM,EAAE,GAAG;SACd;QACD,GAAG,EAAE,UAAU;KAClB,CAAC,CAAA;AACN,CAAC,EACD,IAAI,GAAG,EAAE,CACZ,CAAA;AACD,IAAI,CACA,UAAU,EACV,KAAK,IAAI,EAAE;IACP,MAAM,UAAU,GAAG,GAAG,CAAC,OAAO,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAA;IAC5D,OAAO,CAAC,GAAG,CAAC,YAAY,EAAE,UAAU,CAAC,CAAA;IACrC,MAAM,GAAG,GAAG,wDAAwD,CAAA;IACpE,MAAM,MAAM,CAAC;QACT,UAAU,EAAE;YACR,IAAI,EAAE,GAAG;SACZ;QACD,GAAG,EAAE,UAAU;KAClB,CAAC,CAAA;AACN,CAAC,EACD,IAAI,GAAG,EAAE,CACZ,CAAA;AACD,IAAI,CACA,uBAAuB,EACvB,KAAK,IAAI,EAAE;IACP,MAAM,UAAU,GAAG,GAAG,CAAC,OAAO,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAA;IAC5D,OAAO,CAAC,GAAG,CAAC,YAAY,EAAE,UAAU,CAAC,CAAA;IACrC,MAAM,GAAG,GACL,qEAAqE,CAAA;IACzE,MAAM,MAAM,CAAC;QACT,UAAU,EAAE;YACR,KAAK,EAAE,GAAG;SACb;QACD,GAAG,EAAE,UAAU;KAClB,CAAC,CAAA;AACN,CAAC,EACD,IAAI,GAAG,EAAE,CACZ,CAAA"}
+{"version":3,"file":"cli.test.js","sourceRoot":"","sources":["../src/cli.test.ts"],"names":[],"mappings":"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"}

package/dist/css.d.ts

@@ -0,0 +1,27 @@
+import { ComponentFont } from './framer.js';
+export declare const breakpointSizes: {
+    readonly base: 0;
+    readonly sm: 320;
+    readonly md: 768;
+    readonly lg: 960;
+    readonly xl: 1200;
+    readonly '2xl': 1536;
+};
+export type ComponentFontBundle = {
+    /**
+     * This flag specifies whether the font bundle includes the specific font
+     * weights of Framer’s Inter font that the component uses. New smart
+     * components do that (which means we can emit CSS only for Inter fonts that
+     * are actually used); older smart components don’t (which means some places
+     * will emit CSS for all Inter fonts if this flag is not set).
+     * https://www.notion.so/framer/RFC-ComponentFont-v2-d5fd3e822fb049ffb6971554ab0e4e42
+     */
+    explicitInter: boolean;
+    fileName?: string;
+    fonts: ComponentFont[];
+};
+export declare function logFontsUsage(fontsBundles: ComponentFontBundle[]): string;
+export declare function getFontsStyles(_fontsDefs: ComponentFontBundle[]): string;
+export declare const breakpointsStyles: string;
+export declare function groupBy<T>(arr: T[], key: (x: T) => string): Map<string, T[]>;
+//# sourceMappingURL=css.d.ts.map

package/dist/css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"css.d.ts","sourceRoot":"","sources":["../src/css.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAE3C,eAAO,MAAM,eAAe;;;;;;;CAOlB,CAAA;AAcV,MAAM,MAAM,mBAAmB,GAAG;IAC9B;;;;;;;OAOG;IACH,aAAa,EAAE,OAAO,CAAA;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE,aAAa,EAAE,CAAA;CACzB,CAAA;AAED,wBAAgB,aAAa,CAAC,YAAY,EAAE,mBAAmB,EAAE,UAuBhE;AAED,wBAAgB,cAAc,CAAC,UAAU,EAAE,mBAAmB,EAAE,UAwD/D;AAED,eAAO,MAAM,iBAAiB,QAwD7B,CAAA;AAED,wBAAgB,OAAO,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,oBAUzD"}

package/dist/css.js

@@ -0,0 +1,158 @@
+import dedent from 'dedent';
+export const breakpointSizes = {
+    base: 0,
+    sm: 320,
+    md: 768,
+    lg: 960,
+    xl: 1200,
+    '2xl': 1536,
+};
+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) {
+            if (familyToFilenames.has(font.family)) {
+                familyToFilenames.get(font.family).add(filename);
+            }
+            else {
+                familyToFilenames.set(font.family, 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) => x.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 = '';
+                    str += dedent `
+                    @font-face {
+                        font-family: '${x.family}'; 
+                        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 += `    unicodeRange: ${x.unicodeRange};\n`;
+                    }
+                    str += `}\n`;
+                    return str;
+                })
+                    .join('\n') +
+                '\n';
+    }
+    return str;
+}
+export const breakpointsStyles = /* 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 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)));
+}
+//# sourceMappingURL=css.js.map

package/dist/css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"css.js","sourceRoot":"","sources":["../src/css.ts"],"names":[],"mappings":"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"}

package/dist/exporter.d.ts

@@ -1,9 +1,6 @@
 import { Plugin } from 'esbuild';
 import { PropertyControls } from '../framer-fixed/dist/framer.js';
-export declare const logger: {
-    log(...args: any[]): void;
-    error(...args: any[]): void;
-};
+import { ComponentFontBundle } from './css.js';
 export declare function bundle({ cwd: out, watch, components, signal, }: {
     cwd?: string | undefined;
     watch?: boolean | undefined;
@@ -12,7 +9,10 @@ export declare function bundle({ cwd: out, watch, components, signal, }: {
 }): Promise<void>;
 export declare function findRelativeLinks(text: string): number[];
 export declare function extractPropControlsSafe(text: any, name: any): Promise<PropertyControls<any, any> | undefined>;
-export declare function extractPropControlsUnsafe(filename: any, name: any): Promise<any>;
+export declare function extractPropControlsUnsafe(filename: any, name: any): Promise<{
+    propertyControls?: PropertyControls;
+    fonts?: ComponentFontBundle[];
+}>;
 export declare function propControlsToType(controls: PropertyControls, fileName: any): string;
 export declare function parsePropertyControls(code: string): string | null;
 export declare function esbuildPluginBundleDependencies({ signal, }: {
@@ -24,7 +24,6 @@ export declare function resolveRedirect({ redirectCache, signal, url, }: {
     signal?: AbortSignal;
 }): Promise<any>;
 export declare function recursiveResolveRedirect(url?: string, signal?: AbortSignal): Promise<string | undefined>;
-export declare function deduplicateByKey<T>(key: keyof T, arr: (T | undefined)[]): any[];
 type TokenInfo = {
     tokenName: string;
     metadata?: Record<string, any>;

package/dist/exporter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"exporter.d.ts","sourceRoot":"","sources":["../src/exporter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAA0C,MAAM,SAAS,CAAA;AAQxE,OAAO,EAGH,gBAAgB,EACnB,MAAM,gCAAgC,CAAA;AAQvC,eAAO,MAAM,MAAM;;;CAOlB,CAAA;AAYD,wBAAsB,MAAM,CAAC,EACzB,GAAG,EAAE,GAAQ,EACb,KAAa,EACb,UAAyC,EACzC,MAA6C,GAChD;;;;;CAAA,iBA+NA;AAMD,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,MAAM,YAY7C;AAED,wBAAsB,uBAAuB,CAAC,IAAI,KAAA,EAAE,IAAI,KAAA,mDAmCvD;AAmGD,wBAAsB,yBAAyB,CAAC,QAAQ,KAAA,EAAE,IAAI,KAAA,gBA2B7D;AAWD,wBAAgB,kBAAkB,CAAC,QAAQ,EAAE,gBAAgB,EAAE,QAAQ,KAAA,UA4FtE;AAED,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,MAAM,iBAqCjD;AAWD,wBAAgB,+BAA+B,CAAC,EAC5C,MAA6C,GAChD;;CAAA,UA0IA;AAED,wBAAsB,eAAe,CAAC,EAClC,aAAa,EACb,MAAM,EACN,GAAG,GACN,EAAE;IACC,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,aAAa,CAAC,EAAE,GAAG,CAAA;IACnB,MAAM,CAAC,EAAE,WAAW,CAAA;CACvB,gBAkBA;AAED,wBAAsB,wBAAwB,CAC1C,GAAG,CAAC,EAAE,MAAM,EACZ,MAAM,CAAC,EAAE,WAAW,+BAkBvB;AAgCD,wBAAgB,gBAAgB,CAAC,CAAC,EAAE,GAAG,EAAE,MAAM,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,GAAG,SAAS,CAAC,EAAE,SASvE;AAED,KAAK,SAAS,GAAG;IACb,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,SAAS,EAAE,CA2D1D;AAqBD,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,MAAM,UAS7C"}
+{"version":3,"file":"exporter.d.ts","sourceRoot":"","sources":["../src/exporter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAA0C,MAAM,SAAS,CAAA;AAOxE,OAAO,EAIH,gBAAgB,EAEnB,MAAM,gCAAgC,CAAA;AAKvC,OAAO,EACH,mBAAmB,EAKtB,MAAM,UAAU,CAAA;AAcjB,wBAAsB,MAAM,CAAC,EACzB,GAAG,EAAE,GAAQ,EACb,KAAa,EACb,UAAyC,EACzC,MAA6C,GAChD;;;;;CAAA,iBAkRA;AAMD,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,MAAM,YAY7C;AAED,wBAAsB,uBAAuB,CAAC,IAAI,KAAA,EAAE,IAAI,KAAA,mDAmCvD;AAmGD,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,CAsBD;AAWD,wBAAgB,kBAAkB,CAAC,QAAQ,EAAE,gBAAgB,EAAE,QAAQ,KAAA,UA4FtE;AAED,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,MAAM,iBAqCjD;AAWD,wBAAgB,+BAA+B,CAAC,EAC5C,MAA6C,GAChD;;CAAA,UA0IA;AAED,wBAAsB,eAAe,CAAC,EAClC,aAAa,EACb,MAAM,EACN,GAAG,GACN,EAAE;IACC,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,aAAa,CAAC,EAAE,GAAG,CAAA;IACnB,MAAM,CAAC,EAAE,WAAW,CAAA;CACvB,gBAkBA;AAED,wBAAsB,wBAAwB,CAC1C,GAAG,CAAC,EAAE,MAAM,EACZ,MAAM,CAAC,EAAE,WAAW,+BAkBvB;AAgCD,KAAK,SAAS,GAAG;IACb,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,SAAS,EAAE,CA2D1D;AASD,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,MAAM,UAS7C"}

package/dist/exporter.js

@@ -1,22 +1,15 @@
 import { transform, context } from 'esbuild';
+import { Sema } from 'async-sema';
 import dprint from 'dprint-node';
-import pico from 'picocolors';
 import { polyfillNode } from 'esbuild-plugin-polyfill-node';
-import { ControlType, } from '../framer-fixed/dist/framer.js';
+import { ControlType, combinedCSSRules, } from '../framer-fixed/dist/framer.js';
 import { fetch as _fetch } from 'native-fetch';
 import fs from 'fs';
 import path from 'path';
-import { execSync } from 'child_process';
-const __dirname = path.dirname(new URL(import.meta.url).pathname);
-const prefix = '[unframer]';
-export const logger = {
-    log(...args) {
-        console.log(prefix, ...args);
-    },
-    error(...args) {
-        console.error([prefix, ...args].map((x) => pico.red(x)).join(' '));
-    },
-};
+import { exec } from 'child_process';
+import { breakpointsStyles, getFontsStyles, groupBy, logFontsUsage, } from './css.js';
+import dedent from 'dedent';
+import { logger } from './utils.js';
 const fetchWithRetry = retryTwice(_fetch);
 function validateUrl(url) {
     try {
@@ -125,27 +118,60 @@ export async function bundle({ cwd: out = '', watch = false, components = {}, si
             logger.log(`writing`, path.relative(out, file.path));
             fs.writeFileSync(resultPathAbs, codeNew, 'utf-8');
         }
-        for (let file of result.outputFiles) {
-            const name = path.basename(file.path).replace(/\.js$/, '');
-            const resultPathAbs = path.resolve(out, file.path);
-            if (!components[name]) {
-                continue;
-            }
-            logger.log(`extracting types for ${name}`);
-            const propControls = await extractPropControlsUnsafe(resultPathAbs, name);
-            if (!propControls) {
-                logger.log(`no property controls found for ${name}`);
-            }
-            const types = propControlsToType(propControls, name);
-            // name = 'framer-' + name
-            // logger.log('name', name)
-            fs.writeFileSync(path.resolve(out, `${name}.d.ts`), types);
+        let allFonts = [];
+        const sema = new Sema(10);
+        const packageJson = path.resolve(out, 'package.json');
+        fs.writeFileSync(packageJson, JSON.stringify({ type: 'module' }), 'utf-8');
+        try {
+            await Promise.all(result.outputFiles.map(async (file) => {
+                try {
+                    await sema.acquire();
+                    const name = path
+                        .basename(file.path)
+                        .replace(/\.js$/, '');
+                    const resultPathAbs = path.resolve(out, file.path);
+                    if (!components[name]) {
+                        return;
+                    }
+                    logger.log(`extracting types for ${name}`);
+                    const { propertyControls, fonts } = await extractPropControlsUnsafe(resultPathAbs, name);
+                    if (!propertyControls) {
+                        logger.log(`no property controls found for ${name}`);
+                    }
+                    allFonts.push(...(fonts || []).map((x) => ({
+                        ...x,
+                        fileName: path.basename(file.path),
+                    })));
+                    const types = propControlsToType(propertyControls, name);
+                    // name = 'framer-' + name
+                    // logger.log('name', name)
+                    fs.writeFileSync(path.resolve(out, `${name}.d.ts`), types);
+                }
+                finally {
+                    sema.release();
+                }
+            }));
+        }
+        finally {
+            fs.rmSync(packageJson);
         }
+        const cssString = '/* This css file has all the necessary styles to run all your components */\n' +
+            breakpointsStyles +
+            '\n\n' +
+            combinedCSSRules
+                .map((x) => (x?.startsWith('  ') ? dedent(x) : x))
+                .join('\n') +
+            getFontsStyles(allFonts);
+        fs.writeFileSync(path.resolve(out, 'styles.css'), cssString, 'utf-8');
+        logFontsUsage(allFonts)
+            .split('\n')
+            .forEach((x) => logger.log(x));
         const outFiles = result.outputFiles
             .map((x) => path.resolve(out, x.path))
             .concat([
             path.resolve(out, 'meta.json'),
             path.resolve(out, 'tokens.css'),
+            path.resolve(out, 'styles.css'),
         ])
             .concat(result.outputFiles.map((x) => path.resolve(out, x.path.replace('.js', '.d.ts'))));
         const filesToDelete = prevFiles.filter((x) => !outFiles.includes(x));
@@ -161,7 +187,9 @@ export async function bundle({ cwd: out = '', watch = false, components = {}, si
         if (watch) {
             logger.log('waiting for components or config changes');
         }
-        const tokensCss = getTokensCss({ out, result });
+        const tokensCss = "/* This css file contains your color variables, sometimes these get desynced when updated in Framer so it's good that you copy and paste this snippet into your app css */\n" +
+            '/* Bug: https://www.framer.community/c/bugs/color-style-unlinks-when-copying-component-between-projects-resulting-in-potential-value-discrepancy */\n' +
+            getTokensCss({ out, result });
         fs.writeFileSync(path.resolve(out, 'tokens.css'), tokensCss, 'utf-8');
     }
     if (!watch) {
@@ -213,17 +241,15 @@ function decapitalize(str) {
     return str.charAt(0).toLowerCase() + str.slice(1);
 }
 export function findRelativeLinks(text) {
-    // regex to match these objects, could be in different lines or formatted, webPageId is the key element
-    // href: { webPageId: 'someId' }
     const regex = /webPageId:\s+/g;
-    const matches = text.matchAll(regex);
-    // get line number for each match
     const lines = text.split('\n');
-    const lineNumbers = Array.from(matches, (match) => {
-        const index = lines.findIndex((line) => line.includes(match[0]));
-        return index;
-    });
-    return lineNumbers;
+    const lineNumbers = new Set();
+    for (let i = 0; i < lines.length; i++) {
+        if (regex.test(lines[i])) {
+            lineNumbers.add(i);
+        }
+    }
+    return [...lineNumbers];
 }
 export async function extractPropControlsSafe(text, name) {
     try {
@@ -330,26 +356,20 @@ function getTokensCss({ out, result, }) {
     return tokensCss;
 }
 export async function extractPropControlsUnsafe(filename, name) {
-    const packageJson = path.resolve(path.dirname(filename), 'package.json');
-    try {
-        fs.writeFileSync(packageJson, JSON.stringify({ type: 'module' }), 'utf-8');
-        const delimiter = '__delimiter__';
-        let propCode = `JSON.stringify(x.default?.propertyControls || null, null, 2)`;
-        // propCode = `x.default`
-        const code = `import(${JSON.stringify(filename)}).then(x => { console.log(${JSON.stringify(delimiter)}); console.log(${propCode})
+    const delimiter = '__delimiter__';
+    let propCode = `JSON.stringify({propertyControls: x.default?.propertyControls, fonts: x?.default?.fonts } || {}, null, 2)`;
+    // propCode = `x.default`
+    const code = `import(${JSON.stringify(filename)}).then(x => { console.log(${JSON.stringify(delimiter)}); console.log(${propCode})
         })`;
-        const res = execSync(`node --input-type=module -e '${code}'`);
-        let stdout = res.toString();
-        stdout = stdout.split(delimiter)[1];
-        // console.log(stdout)
-        return safeJsonParse(stdout);
-    }
-    catch (e) {
-        logger.error(`Cannot get property controls for ${name}`, e.stack);
-    }
-    finally {
-        fs.rmSync(packageJson);
-    }
+    let stdout = await new Promise((res, rej) => exec(`node --input-type=module -e '${code}'`, (err, stdout) => {
+        if (err) {
+            return rej(err);
+        }
+        res(stdout);
+    }));
+    stdout = stdout.split(delimiter)[1];
+    // console.log(stdout)
+    return safeJsonParse(stdout);
 }
 function safeJsonParse(text) {
     try {
@@ -678,16 +698,6 @@ function retryTwice(fn) {
         }
     };
 }
-export function deduplicateByKey(key, arr) {
-    const map = new Map();
-    for (let item of arr) {
-        if (!item) {
-            continue;
-        }
-        map.set(item?.[key], item);
-    }
-    return Array.from(map.values());
-}
 export function extractTokenInfo(code) {
     const lines = code.split('\n');
     const tokenLines = lines.filter((line) => line.includes('var(--token'));
@@ -750,17 +760,6 @@ function splitOnce(str, separator) {
     }
     return [str.slice(0, index), str.slice(index + 1)];
 }
-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;
-}
 export function componentCamelCase(str) {
     if (!str) {
         return 'FramerComponent';