bug: stream-chat-react imports global CSS (Google Fonts Geist + modern-normalize) overriding host app styles

[sebastianmusial]

Description:

The stream-chat-react package currently includes global CSS imports that affect the entire application instead of being scoped to the component library.

Specifically, the following lines are imported:

@import url("https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap");
@import 'modern-normalize' layer(css-reset);

Problem

These imports introduce unintended global side effects:

• Google Fonts (Geist) - Loads and applies a font globally across the entire application.
• modern-normalize - Resets core styles (font-family, line-height, box-sizing) on html and *, overriding styles defined by the host application.

This behavior is problematic because a component library should not enforce global styling decisions or modify base styles of the consuming app.

Expected Behavior

• Styles should be scoped to the chat components only.
• No global CSS resets or font imports should be included by default.
• Consumers should have full control over typography and normalization.

Workaround

We are currently using a Yarn 4 yarn patch to remove these imports locally without forking the repository.

The patch removes the two lines above from the package CSS. This is safe because:

Stream Chat components rely on CSS variables (e.g. --str-chat__font-family)

We explicitly set:

--str-chat__font-family: inherit;

so the chat correctly inherits the application's font

Component styles remain fully functional without the global imports

Suggested Fix

• Remove global @import statements from the package
• If needed, document optional styles (e.g. fonts, normalize) so users can opt-in
• Ensure all styles are properly scoped to the component namespace