◆ プロパティの組み合わせごとにルールが作られてクラスが設定される
◆ マウス追跡時の top/left みたいに無数の組み合わせがあるとルール数がとても多くなる
◆ 多すぎると重くなるので 場合によっては style に直接指定などしたほうがいいかも
Emotion で動的に変わる部分を作ると 変わるたびにクラス名が作られてそのクラス名が HTML 要素に設定されています
ある時点での状態がこれだとすると

<div class="css-157hq5v"></div>

CSS プロパティのいずれかが変化した後はこういう風に別のクラスです

<div class="css-7srm6e"></div>

パターンが限られてるなら対して問題なさそうですが マウスについてくるようなものを作ると top/left に指定する px のパターンはとても多いものになります
そういうときに head タグ内の style タグがすごいことになってそうです

気になったので試してみます

const Component = () => {
	const [state, setState] = React.useState([0, 0])

	React.useEffect(() => {
		const fn = (e) => {
			setState([e.clientX, e.clientY])
		}
		window.addEventListener("mousemove", fn, { passive: true })
		return () => {
			window.removeEventListener("mousemove", fn)
		}
	}, [])

	return (
		<div
			className={css`
				color: red;
				border-radius: 50%;
				width: 10px;
				height: 10px;
				background: orange;
				position: fixed;
				top: ${state[1]}px;
				left: ${state[0]}px;
			`}>
		</div>
	)
}

こういうコンポーネントを用意しました
マウスを動かすとオレンジ色の●がついてきます

プレビュー用

<!doctype html>
<meta charset="utf-8" />

<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script src="https://unpkg.com/@emotion/css@11.9.0/dist/emotion-css.umd.min.js"></script>

<script type="text/babel">
	const { useState } = React
	const { render } = ReactDOM
	const { css } = emotion

	const Component = () => {
		const [state, setState] = React.useState([0, 0])

		React.useEffect(() => {
			const fn = (e) => {
				setState([e.clientX, e.clientY])
			}
			window.addEventListener("mousemove", fn, { passive: true })
			return () => {
				window.removeEventListener("mousemove", fn)
			}
		}, [])

		return (
			<div
				className={css`
					color: red;
					border-radius: 50%;
					width: 10px;
					height: 10px;
					background: orange;
					position: fixed;
					top: ${state[1]}px;
					left: ${state[0]}px;
				`}>
			</div>
		)
	}

	render(
		<Component />,
		document.getElementById("root")
	)
</script>

<div id="root"></div>

適当に動かしてから style タグの数を確認してみます

document.styleSheets.length
// 1

意外にも 1 つしかありませんでした

<style data-emotion="css" data-s=""></style>

中身はからっぽです

document.querySelector("style").textContent
// ''

style タグ内のテキストを使わず JavaScript の API で制御してるようですね
中身のルール数を確認すると……

document.querySelector("style").sheet.cssRules.length
// 259

ルール数はやっぱり多いですね
しばらく適当にマウスを動かしてからみると 簡単に 1000 や 2000 まで行っていました
SPA みたいなロードしないページで頻繁に変わるスタイルを Emotion で作るのは重くなる原因かもしれません

ルールというのは セレクタとそれに対応するスタイル設定です

document.querySelector("style").sheet.cssRules[0].cssText
// '.css-psj0r { color: red; border-radius: 50%; width: 10px; height: 10px; background: orange; position: fixed; top: 0px; left: 0px; }'

使っている箇所がなければ削除していってくれればいいのですけどね
自分で消すなら selectorText に一致するものがない場合に消すことはできます

const sheet = document.querySelector("style").sheet

if (!document.querySelector(sheet.cssRules[0].selectorText)) {
	sheet.deleteRule(0)
}

しかし 消したスタイルがまた必要になった場合 Emotion は再度挿入してくれません
チェックを高速化するためか 過去に生成したクラス名は内部で保持してるらしく 要素にクラス名が設定されるだけです

こういうパターンが多い動的なスタイルは Emotion を使わず直接 style 属性に書くという方法も考えられます

// 略
return (
	<div
		className={css`
			color: red;
			border-radius: 50%;
			width: 10px;
			height: 10px;
			background: orange;
			position: fixed;
		`}
		style={{
			top: `${state[1]}px`,
			left: `${state[0]}px`,
		}}>
	</div>
)

これなら Emotion が生成するクラス名はずっと固定で ルール数も 1 のままです
ただし Emotion の機能が利用できないので ネストして内側にある特定のセレクタの要素にスタイルを適用するとか :hover 時にスタイルを適用するようなことはできなくなります

実際のところ 数千や数万程度のルールで重くなるのかと言う気もするので試してみます

const sheet = new CSSStyleSheet()
sheet.replaceSync(
	Array.from(
		Array(100_000),
		x => `${Math.random().toString(16).replace("0.", ".a")} { color: #${Math.random().toString(16).slice(2, 8)};}`
	).join("\n")
)

という感じで自動で生成して 10 万のルールがある CSSStyleSheet を追加してみました
HTML 要素は数える程度で それぞれのルールは単純なクラスセレクタ 1 つと color に色指定のみですが 目に見えて重くなってます
ただ重いけどまだ許容範囲かなという気もしてます
devtools は固まったり画面が出てこなかったりしますが devtools を出さなければ 10 万のルールを追加する前よりは遅い気がする程度です

この辺は PC スペック依存でもあるのですが ある程度 HTML の要素が多く CSS のルールも複雑だと 1 万個も行かないあたりから重く感じるかもです

マウスの座標みたいな無数のパターンのスタイルが発生する場合は style の直接設定などを考慮したほうがいいかもしれませんね