From a19c0313324f976df7bea64f7ea1a51dcf3af97c Mon Sep 17 00:00:00 2001 From: remorses Date: Tue, 4 Feb 2025 19:27:04 +0100 Subject: [PATCH] fix lightningcss bug on double var(), fix Nextjs turbopack https://github.com/parcel-bundler/lightningcss/issues/897 --- README.md | 10 ++++++++++ unframer/scripts/download.ts | 6 ++++++ 2 files changed, 16 insertions(+) diff --git a/README.md b/README.md index a9a2cba..1de11ba 100644 --- a/README.md +++ b/README.md @@ -256,6 +256,16 @@ If you find any errors rendering your components: - Color, a string - React component, created when you use a `component` variable in Framer, for example in the Ticker component +## What should I use Unframer for? + +While having the ability to export Framer components to React is a powerful feature, you should try not to put any business logic in Framer if you want to use the React export feature. + +This of Framer as a stateless UI design tool, you can design components in Framer and export them to React, passing any kind of scalar value as a prop. + +If you find yourself writing custom code components and overrides in Framer, you would find it much easier to write custom code in your React codebase instead. + +You can basically do anything you want by designing components in Framer and rendering them in your app. + ## Known limitations: - You may face React warnings like: diff --git a/unframer/scripts/download.ts b/unframer/scripts/download.ts index a36c711..459aa54 100644 --- a/unframer/scripts/download.ts +++ b/unframer/scripts/download.ts @@ -211,6 +211,12 @@ export async function fixFramerCode({ resultFile }) { 'Could not find expected ReferenceError string in bundle', ) } + + // fix lightningcss bug on double var(), fix Nextjs turbopack https://github.com/parcel-bundler/lightningcss/issues/897 + codeAfter = codeAfter.replace( + `font-family: var(var(--framer-code-font-family, var(--framer-font-family, Inter, Inter Placeholder, sans-serif)))`, + `font-family: var(--framer-code-font-family, var(--framer-font-family, Inter, Inter Placeholder, sans-serif))`, + ) codeAfter += '\n\n' codeAfter += dedent` export { Link as FramerLink }