fix: decouple modern-normalize from the SDK (#3180)

### 🎯 Goal

Decouple `modern-normalize` from the SDK and provide a minimal
normalization rules. This change will require a documentation changes
suggesting integrators to consider using `modern-normalize` within their
projects.

Continuation of the issue #3134.

Author: arnautov-anton

examples/vite/package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "human-id": "^4.1.3",
+    "modern-normalize": "^3.0.1",
     "react": "link:../../node_modules/react",
     "react-dom": "link:../../node_modules/react-dom",
     "stream-chat-react": "link:../../"

examples/vite/src/index.scss

@@ -1,9 +1,10 @@
-@layer stream-new, stream-new-plugins, stream-overrides, stream-app-overrides;
+@layer modern-normalize, stream-new, stream-new-plugins, stream-overrides, stream-app-overrides;
 
 // Geist font is preloaded in index.html to avoid layout shift on mount.
 //@import url('https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap');
 
 // v3 CSS import
+@import url('modern-normalize') layer(modern-normalize);
 @import url('stream-chat-react/dist/css/index.css') layer(stream-new);
 @import url('./AppSettings/AppSettings.scss') layer(stream-app-overrides);
 @import url('./CustomMessageActions/CustomMessageActions.scss')

package.json

@@ -79,7 +79,6 @@
     "lodash.mergewith": "^4.6.2",
     "lodash.throttle": "^4.1.1",
     "lodash.uniqby": "^4.7.0",
-    "modern-normalize": "^3.0.1",
     "nanoid": "^3.3.4",
     "react-dropzone": "^14.2.3",
     "react-fast-compare": "^3.2.2",
@@ -104,7 +103,8 @@
     "emoji-mart": "^5.4.0",
     "react": "^19.0.0 || ^18.0.0 || ^17.0.0",
     "react-dom": "^19.0.0 || ^18.0.0 || ^17.0.0",
-    "stream-chat": "^9.43.0"
+    "stream-chat": "^9.43.0",
+    "modern-normalize": "^3.0.1"
   },
   "peerDependenciesMeta": {
     "@breezystack/lamejs": {
@@ -118,6 +118,9 @@
     },
     "@emoji-mart/react": {
       "optional": true
+    },
+    "modern-normalize": {
+      "optional": true
     }
   },
   "files": [

src/components/MessageComposer/styling/MessageComposer.scss

@@ -202,12 +202,12 @@
       textarea {
         background: transparent;
         color: var(--str-chat__input-text-default);
+        font: var(--str-chat__font-body-default);
         resize: none;
         border: none;
         box-shadow: none;
         outline: none;
         width: 100%;
-        font-size: var(--str-chat__typography-font-size-md);
         scrollbar-width: none;
       }
     }

src/components/Search/styling/Search.scss

@@ -38,8 +38,7 @@
       border: none;
       background: none;
       width: 100%;
-      font-size: inherit;
-      line-height: inherit;
+      font: inherit;
 
       &:focus {
         outline: none;

src/styling/base.scss

@@ -1,3 +1,5 @@
+@use './css-normalize/minimal';
+
 .str-chat {
   --str-chat__focus-outline-color: var(--str-chat__border-utility-focused);
   --str-chat__focus-outline: 2px solid var(--str-chat__focus-outline-color);

src/styling/css-normalize/minimal.scss

@@ -0,0 +1,20 @@
+@layer minimal-normalize {
+  .str-chat {
+    *,
+    ::before,
+    ::after {
+      box-sizing: border-box;
+    }
+
+    button,
+    input,
+    optgroup,
+    select,
+    textarea {
+      font-family: inherit;
+      font-size: 100%;
+      line-height: 1.15;
+      margin: 0;
+    }
+  }
+}

src/styling/index.scss

@@ -55,6 +55,3 @@
 @use '../components/Tooltip/styling' as Tooltip;
 @use '../components/TypingIndicator/styling' as TypingIndicator;
 @use '../components/VideoPlayer/styling' as VideoPlayer;
-
-// Layers have to be kept the last
-@import 'modern-normalize' layer(css-reset);

yarn.lock

@@ -6047,11 +6047,6 @@ minizlib@^3.0.1, minizlib@^3.1.0:
   dependencies:
     minipass "^7.1.2"
 
-modern-normalize@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/modern-normalize/-/modern-normalize-3.0.1.tgz#4e2dc8da282ab854d53d70d7155a8027f59fbed6"
-  integrity sha512-VqlMdYi59Uch6fnUPxnpijWUQe+TW6zeWCvyr6Mb7JibheHzSuAAoJi2c71ZwIaWKpECpGpYHoaaBp6rBRr+/g==
-
 moment-timezone@^0.5.43:
   version "0.5.43"
   resolved "https://registry.yarnpkg.com/moment-timezone/-/moment-timezone-0.5.43.tgz#3dd7f3d0c67f78c23cd1906b9b2137a09b3c4790"