fix: clean up CSS build output (#3072)

BREAKING CHANGE: Importing styles from `stream-chat-react/dist/css/v2/*`
would no longer work, import from `stream-chat-react/dist/css/*`
instead.

Author: arnautov-anton

package.json

@@ -141,7 +141,6 @@
     "@eslint/js": "^9.39.4",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@stream-io/stream-chat-css": "^5.16.1",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
@@ -186,8 +185,8 @@
   },
   "scripts": {
     "clean": "rm -rf dist",
-    "build": "yarn clean && concurrently './scripts/copy-css.sh' 'yarn build-translations' 'vite build' 'tsc --project tsconfig.lib.json' 'yarn build-styling'",
-    "build-styling": "sass src/styling/index.scss dist/css/index.css",
+    "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; 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",

src/styling/_emoji-replacement.scss

@@ -0,0 +1,41 @@
+$emoji-flag-unicode-range: U+1F1E6-1F1FF;
+
+/* png based woff for most browsers */
+@font-face {
+  font-family: ReplaceFlagEmojiPNG;
+  src: url('assets/NotoColorEmoji-flags.woff2') format('woff2');
+  /* using the unicode-range attribute to limit the reach of the Flag Emoji web font to only flags */
+  unicode-range: $emoji-flag-unicode-range;
+}
+
+/* svg based for firefox */
+@font-face {
+  font-family: ReplaceFlagEmojiSVG;
+  src: url('assets/EmojiOneColor.woff2') format('woff2');
+  unicode-range: $emoji-flag-unicode-range;
+}
+
+.str-chat--windows-flags {
+  // TODO: consider adding the rule for reactions (list & selector) if we ever decide to make them use native emojis
+  .str-chat__textarea__textarea, // class name from theme v1
+  .str-chat__message-textarea,
+  .str-chat__message-text-inner *,
+  .str-chat__emoji-item--entity,
+  .emoji-mart-emoji-native * {
+    font-family: ReplaceFlagEmojiPNG, var(--str-chat__font-family), sans-serif;
+    font-display: swap;
+  }
+}
+
+@-moz-document url-prefix('') {
+  .str-chat--windows-flags {
+    .str-chat__textarea__textarea, // class name from theme v1
+    .str-chat__message-textarea,
+    .str-chat__message-text-inner *,
+    .str-chat__emoji-item--entity,
+    .emoji-mart-emoji-native * {
+      font-family: ReplaceFlagEmojiSVG, var(--str-chat__font-family), sans-serif;
+      font-display: swap;
+    }
+  }
+}

src/styling/_variables.scss

@@ -6,7 +6,6 @@
 @use 'palette-variables';
 @use './variables.css';
 @use 'base';
-@use 'icons';
 @use 'fonts';
 
 // alias is necessary to allow sass create namespaces with different names (and not same name styling)