botframework-webchat-fluent-theme 4.17.0-main.20240411.ff34969 → 4.17.0-main.20240416.4ff01ae

package/src/styles.ts

@@ -0,0 +1,4 @@
+import injectStyle from './styles/injectStyle';
+import useStyles from './styles/useStyles';
+
+export { injectStyle, useStyles };

package/src/tsconfig.json

@@ -5,7 +5,8 @@
     "jsx": "react",
     "moduleResolution": "Bundler",
     "skipLibCheck": true,
-    "target": "ESNext"
+    "target": "ESNext",
+    "plugins": [{ "name": "typescript-plugin-css-modules" }]
   },
   "extends": "@tsconfig/strictest/tsconfig.json"
 }

package/src/private/useStyleToEmotionObject.ts

@@ -1,32 +0,0 @@
-import createEmotion, { type Emotion } from '@emotion/css/create-instance';
-// TODO: [P0] Use `math-random`. Today, it requires "crypto" today, maybe missing "conditions" or what.
-// import random from 'math-random';
-import { useMemo } from 'react';
-
-const { random } = Math;
-
-const emotionPool: Record<string, Emotion> = {};
-const nonce = '';
-
-/* eslint no-magic-numbers: ["error", { "ignore": [0, 2, 5, 26, 65] }] */
-
-function createCSSKey() {
-  return random()
-    .toString(26)
-    .substr(2, 5)
-    .replace(/\d/gu, (value: string) => String.fromCharCode(value.charCodeAt(0) + 65));
-}
-
-export default function useStyleToEmotionObject() {
-  return useMemo(() => {
-    // Emotion doesn't hash with nonce. We need to provide the pooling mechanism.
-    // 1. If 2 instances use different nonce, they should result in different hash;
-    // 2. If 2 instances are being mounted, pooling will make sure we render only 1 set of <style> tags, instead of 2.
-    const emotion =
-      // Prefix "id-" to prevent object injection attack.
-      emotionPool[`id-${nonce}`] ||
-      (emotionPool[`id-${nonce}`] = createEmotion({ key: `webchat--css-${createCSSKey()}`, nonce }));
-
-    return (style: TemplateStringsArray) => emotion.css(style);
-  }, []);
-}

package/src/styles/index.ts

@@ -1,15 +0,0 @@
-import { useMemo } from 'react';
-
-import useStyleToEmotionObject from '../private/useStyleToEmotionObject';
-
-export function useStyles<T extends Record<`webchat-fluent__${string}`, any>>(styles: T): Record<keyof T, string> {
-  const getClassName = useStyleToEmotionObject();
-  // @ts-expect-error: entries/fromEntries don't allow to specify keys type
-  return useMemo(
-    () =>
-      Object.freeze(
-        Object.fromEntries(Object.entries(styles).map(([cls, style]) => [cls, `${cls} ${getClassName(style)}`]))
-      ),
-    [styles, getClassName]
-  );
-}