Fix Trusted Types violations from dangerouslySetInnerHTML on style elements

[jgoping]

Linked to issue #32209.

Feature

• Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
• Related issues linked using fixes #number
• Integration tests added
• Documentation added
• Telemetry added. In case of a feature if it's used or not.
• Errors have helpful link attached, see contributing.md

Documentation

The purpose of this PR is to remove dangerouslySetInnerHTML calls as they throw Trusted Types violations. The three affected files each have the following change:

// Before:
<style dangerouslySetInnerHTML={{__html: css`...`}}/>

// After:
<style>{css`...`}</style>

The code was tested in a sample application to ensure it behaved as expected.

[ijjk]

Stats from current PR

Default Build (Increase detected ⚠️)

General Overall decrease ✓

	vercel/next.js canary	jgoping/next.js tt-violation-fix-styles	Change
buildDuration	15.9s	16s	⚠️ +74ms
buildDurationCached	6.3s	6.1s	-153ms
nodeModulesSize	479 MB	479 MB	-1.56 kB

Page Load Tests Overall increase ✓

	vercel/next.js canary	jgoping/next.js tt-violation-fix-styles	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.95	3.944	-0.01
/ avg req/sec	632.83	633.88	+1.05
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.368	1.355	-0.01
/error-in-render avg req/sec	1827.71	1844.95	+17.24

Client Bundles (main, webpack)

	vercel/next.js canary	jgoping/next.js tt-violation-fix-styles	Change
925.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42 kB	42 kB	✓
main-HASH.js gzip	29 kB	29 kB	✓
webpack-HASH.js gzip	1.54 kB	1.54 kB	✓
Overall change	72.7 kB	72.7 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	jgoping/next.js tt-violation-fix-styles	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	jgoping/next.js tt-violation-fix-styles	Change
_app-HASH.js gzip	1.36 kB	1.36 kB	✓
_error-HASH.js gzip	193 B	193 B	✓
amp-HASH.js gzip	308 B	308 B	✓
css-HASH.js gzip	327 B	327 B	✓
dynamic-HASH.js gzip	2.71 kB	2.71 kB	✓
head-HASH.js gzip	359 B	359 B	✓
hooks-HASH.js gzip	920 B	920 B	✓
image-HASH.js gzip	5.73 kB	5.73 kB	✓
index-HASH.js gzip	263 B	263 B	✓
link-HASH.js gzip	2.65 kB	2.65 kB	✓
routerDirect..HASH.js gzip	320 B	320 B	✓
script-HASH.js gzip	391 B	391 B	✓
withRouter-HASH.js gzip	318 B	318 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	16 kB	16 kB	✓

Client Build Manifests

	vercel/next.js canary	jgoping/next.js tt-violation-fix-styles	Change
_buildManifest.js gzip	458 B	458 B	✓
Overall change	458 B	458 B	✓

Rendered Page Sizes

	vercel/next.js canary	jgoping/next.js tt-violation-fix-styles	Change
index.html gzip	533 B	533 B	✓
link.html gzip	547 B	547 B	✓
withRouter.html gzip	528 B	528 B	✓
Overall change	1.61 kB	1.61 kB	✓

---

Default Build with SWC (Increase detected ⚠️)

General Overall decrease ✓

	vercel/next.js canary	jgoping/next.js tt-violation-fix-styles	Change
buildDuration	17.3s	16.9s	-340ms
buildDurationCached	6.1s	6.5s	⚠️ +400ms
nodeModulesSize	479 MB	479 MB	-1.56 kB

Page Load Tests Overall increase ✓

	vercel/next.js canary	jgoping/next.js tt-violation-fix-styles	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.774	3.704	-0.07
/ avg req/sec	662.43	674.9	+12.47
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.279	1.284	⚠️ +0.01
/error-in-render avg req/sec	1954.87	1947.77	⚠️ -7.1

Client Bundles (main, webpack)

	vercel/next.js canary	jgoping/next.js tt-violation-fix-styles	Change
925.HASH.js gzip	178 B	178 B	✓
framework-HASH.js gzip	42.7 kB	42.7 kB	✓
main-HASH.js gzip	29.5 kB	29.5 kB	✓
webpack-HASH.js gzip	1.54 kB	1.54 kB	✓
Overall change	73.9 kB	73.9 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	jgoping/next.js tt-violation-fix-styles	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	jgoping/next.js tt-violation-fix-styles	Change
_app-HASH.js gzip	1.35 kB	1.35 kB	✓
_error-HASH.js gzip	179 B	179 B	✓
amp-HASH.js gzip	311 B	311 B	✓
css-HASH.js gzip	324 B	324 B	✓
dynamic-HASH.js gzip	2.89 kB	2.89 kB	✓
head-HASH.js gzip	357 B	357 B	✓
hooks-HASH.js gzip	920 B	920 B	✓
image-HASH.js gzip	5.82 kB	5.82 kB	✓
index-HASH.js gzip	261 B	261 B	✓
link-HASH.js gzip	2.78 kB	2.78 kB	✓
routerDirect..HASH.js gzip	322 B	322 B	✓
script-HASH.js gzip	392 B	392 B	✓
withRouter-HASH.js gzip	317 B	317 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	16.3 kB	16.3 kB	✓

Client Build Manifests

	vercel/next.js canary	jgoping/next.js tt-violation-fix-styles	Change
_buildManifest.js gzip	457 B	457 B	✓
Overall change	457 B	457 B	✓

Rendered Page Sizes

	vercel/next.js canary	jgoping/next.js tt-violation-fix-styles	Change
index.html gzip	532 B	532 B	✓
link.html gzip	546 B	546 B	✓
withRouter.html gzip	528 B	528 B	✓
Overall change	1.61 kB	1.61 kB	✓

Commit: b2dffd2