From c67b1f120da55ac87a4de6b7416a1b0f3105ab6b Mon Sep 17 00:00:00 2001 From: Anton Arnautov Date: Fri, 8 May 2026 12:33:02 +0200 Subject: [PATCH 1/2] Initial commit --- examples/vite/src/index.scss | 5 ++++- package.json | 2 +- .../styling/MessageComposer.scss | 2 +- .../css-normalize/minimal-normalize.scss | 18 ++++++++++++++++++ .../wrapped-modern-normalize.scss | 9 +++++++++ src/styling/index.scss | 3 --- 6 files changed, 33 insertions(+), 6 deletions(-) create mode 100644 src/styling/css-normalize/minimal-normalize.scss create mode 100644 src/styling/css-normalize/wrapped-modern-normalize.scss diff --git a/examples/vite/src/index.scss b/examples/vite/src/index.scss index 14faf0ae6..e21acebe7 100644 --- a/examples/vite/src/index.scss +++ b/examples/vite/src/index.scss @@ -1,9 +1,12 @@ -@layer stream-new, stream-new-plugins, stream-overrides, stream-app-overrides; +@layer css-reset, 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(css-reset); +// @import url('stream-chat-react/dist/css/minimal-normalize.css') layer(css-reset); +// @import url('stream-chat-react/dist/css/wrapped-modern-normalize.css') layer(css-reset); @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') diff --git a/package.json b/package.json index e3d510362..4ff4bce03 100644 --- a/package.json +++ b/package.json @@ -181,7 +181,7 @@ "scripts": { "clean": "rm -rf dist", "build": "yarn clean && concurrently 'yarn build-translations' 'vite build' 'tsc --project tsconfig.lib.json' 'yarn build-styling'", - "build-styling": "sass src/styling/index.scss:dist/css/index.css src/styling/_emoji-replacement.scss:dist/css/emoji-replacement.css src/plugins/Emojis/styling/index.scss:dist/css/emoji-picker.css; cp -r src/styling/assets dist/css/assets", + "build-styling": "sass src/styling/index.scss:dist/css/index.css src/styling/_emoji-replacement.scss:dist/css/emoji-replacement.css src/plugins/Emojis/styling/index.scss:dist/css/emoji-picker.css src/styling/css-normalize/minimal-normalize.scss:dist/css/minimal-normalize.css src/styling/css-normalize/wrapped-modern-normalize.scss:dist/css/wrapped-modern-normalize.css; cp -r src/styling/assets dist/css/assets", "build-translations": "i18next-cli extract", "coverage": "vitest run --coverage", "lint": "yarn prettier --list-different && yarn eslint && yarn validate-translations", diff --git a/src/components/MessageComposer/styling/MessageComposer.scss b/src/components/MessageComposer/styling/MessageComposer.scss index d11744c0a..af38a6c6b 100644 --- a/src/components/MessageComposer/styling/MessageComposer.scss +++ b/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; } } diff --git a/src/styling/css-normalize/minimal-normalize.scss b/src/styling/css-normalize/minimal-normalize.scss new file mode 100644 index 000000000..1c0576560 --- /dev/null +++ b/src/styling/css-normalize/minimal-normalize.scss @@ -0,0 +1,18 @@ +.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; + } +} diff --git a/src/styling/css-normalize/wrapped-modern-normalize.scss b/src/styling/css-normalize/wrapped-modern-normalize.scss new file mode 100644 index 000000000..a9ca13690 --- /dev/null +++ b/src/styling/css-normalize/wrapped-modern-normalize.scss @@ -0,0 +1,9 @@ +// modern-normalize package wrapped in .str-chat to prevent normalization +// from leaking into application styling that does not expect it +// only recommended for gradual migration + +@use 'sass:meta'; + +.str-chat { + @include meta.load-css('../../../node_modules/modern-normalize/modern-normalize.css'); +} diff --git a/src/styling/index.scss b/src/styling/index.scss index 00df44f66..e0de310db 100644 --- a/src/styling/index.scss +++ b/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); From 7bd191f67ed8c97ffc5532dc223925991c478057 Mon Sep 17 00:00:00 2001 From: Anton Arnautov Date: Fri, 8 May 2026 15:16:25 +0200 Subject: [PATCH 2/2] Next iteration --- examples/vite/src/index.scss | 6 ++---- package.json | 2 +- src/components/Search/styling/Search.scss | 3 +-- src/styling/base.scss | 2 ++ .../css-normalize/minimal-normalize.scss | 18 ----------------- src/styling/css-normalize/minimal.scss | 20 +++++++++++++++++++ .../wrapped-modern-normalize.scss | 9 --------- 7 files changed, 26 insertions(+), 34 deletions(-) delete mode 100644 src/styling/css-normalize/minimal-normalize.scss create mode 100644 src/styling/css-normalize/minimal.scss delete mode 100644 src/styling/css-normalize/wrapped-modern-normalize.scss diff --git a/examples/vite/src/index.scss b/examples/vite/src/index.scss index e21acebe7..a7ec39b74 100644 --- a/examples/vite/src/index.scss +++ b/examples/vite/src/index.scss @@ -1,12 +1,10 @@ -@layer css-reset, 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(css-reset); -// @import url('stream-chat-react/dist/css/minimal-normalize.css') layer(css-reset); -// @import url('stream-chat-react/dist/css/wrapped-modern-normalize.css') layer(css-reset); +@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') diff --git a/package.json b/package.json index 4ff4bce03..e3d510362 100644 --- a/package.json +++ b/package.json @@ -181,7 +181,7 @@ "scripts": { "clean": "rm -rf dist", "build": "yarn clean && concurrently 'yarn build-translations' 'vite build' 'tsc --project tsconfig.lib.json' 'yarn build-styling'", - "build-styling": "sass src/styling/index.scss:dist/css/index.css src/styling/_emoji-replacement.scss:dist/css/emoji-replacement.css src/plugins/Emojis/styling/index.scss:dist/css/emoji-picker.css src/styling/css-normalize/minimal-normalize.scss:dist/css/minimal-normalize.css src/styling/css-normalize/wrapped-modern-normalize.scss:dist/css/wrapped-modern-normalize.css; cp -r src/styling/assets dist/css/assets", + "build-styling": "sass src/styling/index.scss:dist/css/index.css src/styling/_emoji-replacement.scss:dist/css/emoji-replacement.css src/plugins/Emojis/styling/index.scss:dist/css/emoji-picker.css; cp -r src/styling/assets dist/css/assets", "build-translations": "i18next-cli extract", "coverage": "vitest run --coverage", "lint": "yarn prettier --list-different && yarn eslint && yarn validate-translations", diff --git a/src/components/Search/styling/Search.scss b/src/components/Search/styling/Search.scss index f19ad4f3a..ded3b57df 100644 --- a/src/components/Search/styling/Search.scss +++ b/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; diff --git a/src/styling/base.scss b/src/styling/base.scss index 4d585773b..e753d2101 100644 --- a/src/styling/base.scss +++ b/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); diff --git a/src/styling/css-normalize/minimal-normalize.scss b/src/styling/css-normalize/minimal-normalize.scss deleted file mode 100644 index 1c0576560..000000000 --- a/src/styling/css-normalize/minimal-normalize.scss +++ /dev/null @@ -1,18 +0,0 @@ -.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; - } -} diff --git a/src/styling/css-normalize/minimal.scss b/src/styling/css-normalize/minimal.scss new file mode 100644 index 000000000..bd6f1f430 --- /dev/null +++ b/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; + } + } +} diff --git a/src/styling/css-normalize/wrapped-modern-normalize.scss b/src/styling/css-normalize/wrapped-modern-normalize.scss deleted file mode 100644 index a9ca13690..000000000 --- a/src/styling/css-normalize/wrapped-modern-normalize.scss +++ /dev/null @@ -1,9 +0,0 @@ -// modern-normalize package wrapped in .str-chat to prevent normalization -// from leaking into application styling that does not expect it -// only recommended for gradual migration - -@use 'sass:meta'; - -.str-chat { - @include meta.load-css('../../../node_modules/modern-normalize/modern-normalize.css'); -}