Fix jumbo emoji styles for vanilla-extract selector rules.

src/app/components/message/layout/layout.css.ts

@@ -1,4 +1,4 @@
-import { createVar, keyframes, style, styleVariants } from '@vanilla-extract/css';
+import { createVar, globalStyle, keyframes, style, styleVariants } from '@vanilla-extract/css';
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
 import { DefaultReset, color, config, toRem } from 'folds';
 import * as htmlCss from '../../../styles/CustomHtml.css';
@@ -232,25 +232,6 @@ export const MessageTextBody = recipe({
       true: {
         fontSize: toRem(100),
         lineHeight: toRem(100),
-        selectors: {
-          [`& .${htmlCss.EmoticonBase}`]: {
-            height: toRem(100),
-            padding: 0,
-            verticalAlign: 'bottom',
-          },
-          [`& .${htmlCss.Emoticon.classNames.base}`]: {
-            fontSize: toRem(100),
-            height: toRem(100),
-            minWidth: toRem(100),
-            lineHeight: toRem(100),
-            top: 0,
-          },
-          [`& .${htmlCss.EmoticonImg}`]: {
-            height: toRem(100),
-            width: toRem(100),
-            objectFit: 'contain',
-          },
-        },
       },
     },
     emote: {
@@ -263,3 +244,25 @@ export const MessageTextBody = recipe({
 });
 
 export type MessageTextBodyVariants = RecipeVariants<typeof MessageTextBody>;
+
+const jumboEmojiClass = MessageTextBody.classNames.variants.jumboEmoji.true;
+
+globalStyle(`${jumboEmojiClass} .${htmlCss.EmoticonBase}`, {
+  height: toRem(100),
+  padding: 0,
+  verticalAlign: 'bottom',
+});
+
+globalStyle(`${jumboEmojiClass} .${htmlCss.Emoticon.classNames.base}`, {
+  fontSize: toRem(100),
+  height: toRem(100),
+  minWidth: toRem(100),
+  lineHeight: toRem(100),
+  top: 0,
+});
+
+globalStyle(`${jumboEmojiClass} .${htmlCss.EmoticonImg}`, {
+  height: toRem(100),
+  width: toRem(100),
+  objectFit: 'contain',
+});