fix: handle circular import issue in a compiler friendly way

[stipsan]

Description

By moving the import to colocate with the StyledCard definition we're able to avoid the circular deps issue in CJS, and regain the benefit of declaring the styled(PreviewCard) on the top-level instead of at runtime in that the CSS is known ahead of time for styled-components.

What to review

It makes sense what it's named and its internal warning.

Testing

I tested it manually, but I'm not familiar with the original cjs bundle issue being referred to, can @bjoerge advice?

Notes for release

N/A as it's an internal refactor that allows React Compiler but is otherwise the same as before

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
page-building-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 30, 2024 2:25pm
performance-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 30, 2024 2:25pm
test-compiled-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 30, 2024 2:25pm
test-next-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 30, 2024 2:25pm
test-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 30, 2024 2:25pm

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
studio-workshop	⬜️ Ignored (Inspect)	Visit Preview		May 30, 2024 2:25pm

[github-actions]

No changes to documentation

[socket-security]

New and removed dependencies detected. Learn more about Socket for GitHub ↗︎

Package	New capabilities	Transitives	Size	Publisher

🚮 Removed packages: npm/@sanity/[email protected], npm/@sanity/[email protected], npm/@sanity/[email protected], npm/@sanity/[email protected], npm/@sanity/[email protected], npm/@sanity/[email protected], npm/@sanity/[email protected], npm/@tanstack/[email protected], npm/@tanstack/[email protected], npm/@testing-library/[email protected], npm/@testing-library/[email protected], npm/@testing-library/[email protected], npm/[email protected]

View full report↗︎

[github-actions]

Component Testing Report Updated May 30, 2024 2:29 PM (UTC)

File	Status	Duration	Passed	Skipped	Failed
comments/CommentInput.spec.tsx	✅ Passed (Inspect)	35s	15	0	0
formBuilder/ArrayInput.spec.tsx	✅ Passed (Inspect)	6s	3	0	0
formBuilder/inputs/PortableText/Annotations.spec.tsx	✅ Passed (Inspect)	25s	6	0	0
formBuilder/inputs/PortableText/copyPaste/CopyPaste.spec.tsx	✅ Passed (Inspect)	31s	11	7	0
formBuilder/inputs/PortableText/Decorators.spec.tsx	✅ Passed (Inspect)	14s	6	0	0
formBuilder/inputs/PortableText/DisableFocusAndUnset.spec.tsx	✅ Passed (Inspect)	8s	3	0	0
formBuilder/inputs/PortableText/FocusTracking.spec.tsx	✅ Passed (Inspect)	35s	15	0	0
formBuilder/inputs/PortableText/Input.spec.tsx	✅ Passed (Inspect)	1m 21s	21	0	0
formBuilder/inputs/PortableText/ObjectBlock.spec.tsx	✅ Passed (Inspect)	1m 3s	18	0	0
formBuilder/inputs/PortableText/PresenceCursors.spec.tsx	✅ Passed (Inspect)	6s	3	9	0
formBuilder/inputs/PortableText/RangeDecoration.spec.tsx	✅ Passed (Inspect)	21s	9	0	0
formBuilder/inputs/PortableText/Styles.spec.tsx	✅ Passed (Inspect)	14s	6	0	0
formBuilder/inputs/PortableText/Toolbar.spec.tsx	✅ Passed (Inspect)	30s	12	0	0

[binoy14]

makes sense to me, thanks!