ripple 0.3.71 → 0.3.74

package/tests/client/css/global-additional-cases.test.tsrx

@@ -4,15 +4,17 @@ import { compile } from '@tsrx/ripple';
 describe('CSS :global additional use cases', () => {
 	it('handles :global as modifier with dot notation', () => {
 		const source = `
-export function Test() { return <>
-	<div class="x">{'content'}</div>
-
-	<style>
-		div :global.x {
-			color: red;
-		}
-	</style>
-</>; }`;
+export function Test() @{
+	<>
+		<div class="x">{'content'}</div>
+
+		<style>
+			div :global.x {
+				color: red;
+			}
+		</style>
+	</>
+}`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toMatch(/div\.tsrx-[a-z0-9]+\.x {/);
@@ -20,17 +22,19 @@ export function Test() { return <>
 
 	it('handles :global modifier in nested syntax', () => {
 		const source = `
-export function Test() { return <>
-	<div class="x">{'content'}</div>
-
-	<style>
-		div {
-			:global.x {
-				color: green;
+export function Test() @{
+	<>
+		<div class="x">{'content'}</div>
+
+		<style>
+			div {
+				:global.x {
+					color: green;
+				}
 			}
-		}
-	</style>
-</>; }`;
+		</style>
+	</>
+}`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('&.x {');
@@ -38,17 +42,19 @@ export function Test() { return <>
 
 	it('handles :global with & nesting selector inside block', () => {
 		const source = `
-export function Test() { return <>
-	<div class="x">{'content'}</div>
-
-	<style>
-		div {
-			& :global.x {
-				color: green;
+export function Test() @{
+	<>
+		<div class="x">{'content'}</div>
+
+		<style>
+			div {
+				& :global.x {
+					color: green;
+				}
 			}
-		}
-	</style>
-</>; }`;
+		</style>
+	</>
+}`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('&.x {');
@@ -56,15 +62,17 @@ export function Test() { return <>
 
 	it('handles :global with :is pseudo-class modifier', () => {
 		const source = `
-export function Test() { return <>
-	<div>{'content'}</div>
-
-	<style>
-		div :global:is(html.dark-mode *) {
-			color: green;
-		}
-	</style>
-</>; }`;
+export function Test() @{
+	<>
+		<div>{'content'}</div>
+
+		<style>
+			div :global:is(html.dark-mode *) {
+				color: green;
+			}
+		</style>
+	</>
+}`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toMatch(/div\.tsrx-[a-z0-9]+:is\(html\.dark-mode \*\) {/);
@@ -72,17 +80,19 @@ export function Test() { return <>
 
 	it('handles :global with & inside :global block', () => {
 		const source = `
-export function Test() { return <>
-	<div class="class">{'content'}</div>
-
-	<style>
-		div {
-			&:global(.class) {
-				color: green;
+export function Test() @{
+	<>
+		<div class="class">{'content'}</div>
+
+		<style>
+			div {
+				&:global(.class) {
+					color: green;
+				}
 			}
-		}
-	</style>
-</>; }`;
+		</style>
+	</>
+}`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toMatch(/div\.tsrx-[a-z0-9]+ {/);
@@ -91,17 +101,19 @@ export function Test() { return <>
 
 	it('handles :global(*) with & and descendant', () => {
 		const source = `
-export function Test() { return <>
-	<div class="class">{'content'}</div>
-
-	<style>
-		:global(*) {
-			&:hover .class {
-				color: green;
+export function Test() @{
+	<>
+		<div class="class">{'content'}</div>
+
+		<style>
+			:global(*) {
+				&:hover .class {
+					color: green;
+				}
 			}
-		}
-	</style>
-</>; }`;
+		</style>
+	</>
+}`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('* {');
@@ -110,16 +122,18 @@ export function Test() { return <>
 
 	it('handles multiple :global selectors in list', () => {
 		const source = `
-export function Test() { return <>
-	<x>{'content'}</x>
-	<y>{'content'}</y>
-
-	<style>
-		:global x, :global y {
-			color: green;
-		}
-	</style>
-</>; }`;
+export function Test() @{
+	<>
+		<x>{'content'}</x>
+		<y>{'content'}</y>
+
+		<style>
+			:global x, :global y {
+				color: green;
+			}
+		</style>
+	</>
+}`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain(' x,  y {');
@@ -127,19 +141,21 @@ export function Test() { return <>
 
 	it('handles :global block with nested selector list', () => {
 		const source = `
-export function Test() { return <>
-	<div>
-		<y>{'content'}</y>
-	</div>
-
-	<style>
-		div :global, div :global y, unused :global {
-			z {
-				color: green;
+export function Test() @{
+	<>
+		<div>
+			<y>{'content'}</y>
+		</div>
+
+		<style>
+			div :global, div :global y, unused :global {
+				z {
+					color: green;
+				}
 			}
-		}
-	</style>
-</>; }`;
+		</style>
+	</>
+}`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toMatch(/div\.tsrx-[a-z0-9]+/);
@@ -148,33 +164,35 @@ export function Test() { return <>
 
 	it('handles keyframes inside :global block', () => {
 		const source = `
-export function Test() { return <>
-	<div class="x">{'animated'}</div>
+export function Test() @{
+	<>
+		<div class="x">{'animated'}</div>
+
+		<style>
+			:global {
+				.x {
+					animation: test 1s;
+				}
 
-	<style>
-		:global {
-			.x {
-				animation: test 1s;
-			}
+				.y {
+					animation: test-in 1s;
+				}
 
-			.y {
-				animation: test-in 1s;
+				@keyframes test-in {
+					to {
+						opacity: 1;
+					}
+				}
 			}
 
-			@keyframes test-in {
+			@keyframes test {
 				to {
 					opacity: 1;
 				}
 			}
-		}
-
-		@keyframes test {
-			to {
-				opacity: 1;
-			}
-		}
-	</style>
-</>; }`;
+		</style>
+	</>
+}`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('@keyframes test-in {');
@@ -186,16 +204,18 @@ export function Test() { return <>
 
 	it('handles global keyframes with no component elements', () => {
 		const source = `
-export function Test() { return <>
-	<div>{'content'}</div>
-
-	<style>
-		@keyframes -global-orphan {
-			0% { color: red; }
-			100% { color: blue; }
-		}
-	</style>
-</>; }`;
+export function Test() @{
+	<>
+		<div>{'content'}</div>
+
+		<style>
+			@keyframes -global-orphan {
+				0% { color: red; }
+				100% { color: blue; }
+			}
+		</style>
+	</>
+}`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('@keyframes orphan');
@@ -204,22 +224,24 @@ export function Test() { return <>
 
 	it('handles :global with class modifier syntax', () => {
 		const source = `
-export function Test() { return <>
-	<div class="blue">{'might be programmatically added'}</div>
-	<span class="x blue">{'span content'}</span>
-
-	<style>
-		div:global(.blue) {
-			color: blue;
-		}
-		span:global(.blue).x {
-			color: blue;
-		}
-		span.x:global(.bg) {
-			background: red;
-		}
-	</style>
-</>; }`;
+export function Test() @{
+	<>
+		<div class="blue">{'might be programmatically added'}</div>
+		<span class="x blue">{'span content'}</span>
+
+		<style>
+			div:global(.blue) {
+				color: blue;
+			}
+			span:global(.blue).x {
+				color: blue;
+			}
+			span.x:global(.bg) {
+				background: red;
+			}
+		</style>
+	</>
+}`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toMatch(/div\.tsrx-[a-z0-9]+\.blue {/);
@@ -229,15 +251,17 @@ export function Test() { return <>
 
 	it('handles multiple :global() in descendant sequence', () => {
 		const source = `
-export function Test() { return <>
-	<p>{'this may or may not be styled'}</p>
-
-	<style>
-		:global(div) > :global(section) > p {
-			color: red;
-		}
-	</style>
-</>; }`;
+export function Test() @{
+	<>
+		<p>{'this may or may not be styled'}</p>
+
+		<style>
+			:global(div) > :global(section) > p {
+				color: red;
+			}
+		</style>
+	</>
+}`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('div > section > p');
@@ -246,19 +270,21 @@ export function Test() { return <>
 
 	it('handles :is with :global and html context', () => {
 		const source = `
-export function Test() { return <>
-	<x>
-		<y>
-			<z>{'content'}</z>
-		</y>
-	</x>
-
-	<style>
-		x :is(:global(html *)) {
-			color: green;
-		}
-	</style>
-</>; }`;
+export function Test() @{
+	<>
+		<x>
+			<y>
+				<z>{'content'}</z>
+			</y>
+		</x>
+
+		<style>
+			x :is(:global(html *)) {
+				color: green;
+			}
+		</style>
+	</>
+}`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toMatch(/x\.tsrx-[a-z0-9]+ :is\(html \*\) {/);
@@ -266,26 +292,28 @@ export function Test() { return <>
 
 	it('handles :global block with :has inside', () => {
 		const source = `
-export function Test() { return <>
-	<div>
-		<x>{'content'}</x>
-	</div>
-
-	<style>
-		:global(.foo) {
-			:has(x) {
-				color: green;
+export function Test() @{
+	<>
+		<div>
+			<x>{'content'}</x>
+		</div>
+
+		<style>
+			:global(.foo) {
+				:has(x) {
+					color: green;
+				}
+				&:has(x) {
+					color: green;
+				}
 			}
-			&:has(x) {
+
+			:global(.foo):has(x) {
 				color: green;
 			}
-		}
-
-		:global(.foo):has(x) {
-			color: green;
-		}
-	</style>
-</>; }`;
+		</style>
+	</>
+}`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('.foo {');
@@ -296,51 +324,53 @@ export function Test() { return <>
 
 	it('handles :not with :global in complex nesting', () => {
 		const source = `
-export function Test() { return <>
-	<p class="foo">{'foo'}</p>
-	<p class="bar">
-		{'bar'}
-		<span>{'baz'}</span>
-	</p>
-	<span>{'buzz'}</span>
-
-	<style>
-		:not(:global(.foo)) {
-			color: green;
-		}
-		:not(.foo):not(:global(.unused)) {
-			color: green;
-		}
-		:global(.x):not(.foo) {
-			color: green;
-		}
-		:global(.x) :not(p) {
-			color: green;
-		}
-		:global(.x):not(p) {
-			color: green;
-		}
-
-		:global(span):not(p span) {
-			color: green;
-		}
-		span:not(:global(p span)) {
-			color: green;
-		}
-		:global(span:not(p span)) {
-			color: green;
-		}
-
-		:global(.x) {
-			:not(.foo) {
+export function Test() @{
+	<>
+		<p class="foo">{'foo'}</p>
+		<p class="bar">
+			{'bar'}
+			<span>{'baz'}</span>
+		</p>
+		<span>{'buzz'}</span>
+
+		<style>
+			:not(:global(.foo)) {
+				color: green;
+			}
+			:not(.foo):not(:global(.unused)) {
+				color: green;
+			}
+			:global(.x):not(.foo) {
+				color: green;
+			}
+			:global(.x) :not(p) {
+				color: green;
+			}
+			:global(.x):not(p) {
+				color: green;
+			}
+
+			:global(span):not(p span) {
+				color: green;
+			}
+			span:not(:global(p span)) {
 				color: green;
 			}
-			&:not(.foo) {
+			:global(span:not(p span)) {
 				color: green;
 			}
-		}
-	</style>
-</>; }`;
+
+			:global(.x) {
+				:not(.foo) {
+					color: green;
+				}
+				&:not(.foo) {
+					color: green;
+				}
+			}
+		</style>
+	</>
+}`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain(':not(.foo)');
@@ -349,33 +379,35 @@ export function Test() { return <>
 
 	it('handles sibling combinators with children and :global before scoped elements', () => {
 		const source = `
-export function Test({ children }) { return <>
-	<div>
-		<p class="before">{'before'}</p>
-
-		{children}
-
-		<p class="foo">
-			<span>{'foo'}</span>
-		</p>
-		<p class="bar">{'bar'}</p>
-	</div>
-
-	<style>
-		.before + .foo { color: green; }
-		.before ~ .foo { color: green; }
-		.before ~ .bar { color: green; }
-
-		:global(.x) + .foo { color: green; }
-		:global(.x) + .foo span { color: green; }
-		:global(.x) ~ .foo { color: green; }
-		:global(.x) ~ .foo span { color: green; }
-		:global(.x) ~ .bar { color: green; }
-
-		/* should be unused as this is not a possibility */
-		:global(.x) + .bar { color: green; }
-	</style>
-</>; }`;
+export function Test({ children }) @{
+	<>
+		<div>
+			<p class="before">{'before'}</p>
+
+			{children}
+
+			<p class="foo">
+				<span>{'foo'}</span>
+			</p>
+			<p class="bar">{'bar'}</p>
+		</div>
+
+		<style>
+			.before + .foo { color: green; }
+			.before ~ .foo { color: green; }
+			.before ~ .bar { color: green; }
+
+			:global(.x) + .foo { color: green; }
+			:global(.x) + .foo span { color: green; }
+			:global(.x) ~ .foo { color: green; }
+			:global(.x) ~ .foo span { color: green; }
+			:global(.x) ~ .bar { color: green; }
+
+			/* should be unused as this is not a possibility */
+			:global(.x) + .bar { color: green; }
+		</style>
+	</>
+}`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toMatch(/\.before\.tsrx-[a-z0-9]+ \+ \.foo:where\(\.tsrx-[a-z0-9]+\) {/);
@@ -386,37 +418,39 @@ export function Test({ children }) { return <>
 
 	it('handles sibling combinators with component and :global before scoped elements', () => {
 		const source = `
-export function Test({ children }) { return <>
-	<div>
-		<p class="before">{'before'}</p>
-
-		<Child1 />
-
-		<p class="foo">
-			<span>{'foo'}</span>
-		</p>
-		<p class="bar">{'bar'}</p>
-	</div>
-
-	<style>
-		.before + .foo { color: green; }
-		.before ~ .foo { color: green; }
-		.before ~ .bar { color: green; }
-
-		:global(.x) + .foo { color: green; }
-		:global(.x) + .foo span { color: green; }
-		:global(.x) ~ .foo { color: green; }
-		:global(.x) ~ .foo span { color: green; }
-		:global(.x) ~ .bar { color: green; }
-
-		/* should be unused as this is not a possibility */
-		:global(.x) + .bar { color: green; }
-	</style>
-</>; }
-
-function Child1() { return <>
+export function Test({ children }) @{
+	<>
+		<div>
+			<p class="before">{'before'}</p>
+
+			<Child1 />
+
+			<p class="foo">
+				<span>{'foo'}</span>
+			</p>
+			<p class="bar">{'bar'}</p>
+		</div>
+
+		<style>
+			.before + .foo { color: green; }
+			.before ~ .foo { color: green; }
+			.before ~ .bar { color: green; }
+
+			:global(.x) + .foo { color: green; }
+			:global(.x) + .foo span { color: green; }
+			:global(.x) ~ .foo { color: green; }
+			:global(.x) ~ .foo span { color: green; }
+			:global(.x) ~ .bar { color: green; }
+
+			/* should be unused as this is not a possibility */
+			:global(.x) + .bar { color: green; }
+		</style>
+	</>
+}
+
+function Child1() @{
 	<div>{'child1'}</div>
-</>; }`;
+}`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toMatch(/\.before\.tsrx-[a-z0-9]+ \+ \.foo:where\(\.tsrx-[a-z0-9]+\) {/);
@@ -431,38 +465,40 @@ function Child1() { return <>
 			const source = `
 import { track } from 'ripple';
 
-export function Test({ children }) { return <>
+export function Test({ children }) @{
 	const DynamicComponent = track(() => Child1);
-	<div>
-		<p class="before">{'before'}</p>
-
-		<@DynamicComponent />
-
-		<p class="foo">
-			<span>{'foo'}</span>
-		</p>
-		<p class="bar">{'bar'}</p>
-	</div>
-
-	<style>
-		.before + .foo { color: green; }
-		.before ~ .foo { color: green; }
-		.before ~ .bar { color: green; }
-
-		:global(.x) + .foo { color: green; }
-		:global(.x) + .foo span { color: green; }
-		:global(.x) ~ .foo { color: green; }
-		:global(.x) ~ .foo span { color: green; }
-		:global(.x) ~ .bar { color: green; }
-
-		/* should be unused as this is not a possibility */
-		:global(.x) + .bar { color: green; }
-	</style>
-</>; }
-
-function Child1() { return <>
+	<>
+		<div>
+			<p class="before">{'before'}</p>
+
+			<@DynamicComponent />
+
+			<p class="foo">
+				<span>{'foo'}</span>
+			</p>
+			<p class="bar">{'bar'}</p>
+		</div>
+
+		<style>
+			.before + .foo { color: green; }
+			.before ~ .foo { color: green; }
+			.before ~ .bar { color: green; }
+
+			:global(.x) + .foo { color: green; }
+			:global(.x) + .foo span { color: green; }
+			:global(.x) ~ .foo { color: green; }
+			:global(.x) ~ .foo span { color: green; }
+			:global(.x) ~ .bar { color: green; }
+
+			/* should be unused as this is not a possibility */
+			:global(.x) + .bar { color: green; }
+		</style>
+	</>
+}
+
+function Child1() @{
 	<div>{'child1'}</div>
-</>; }`;
+}`;
 			const { css } = compile(source, 'test.tsrx');
 
 			expect(css).toMatch(/\.before\.tsrx-[a-z0-9]+ \+ \.foo:where\(\.tsrx-[a-z0-9]+\) {/);
@@ -478,34 +514,36 @@ function Child1() { return <>
 			const source = `
 import { track } from 'ripple';
 
-export function Test({ children, classes }) { return <>
+export function Test({ children, classes }) @{
 	const dynamicElement = track('div');
-	<div>
-		<p class="before">{'before'}</p>
-		// Use Dynamic Element but it's the same with a regular one
-		<@dynamicElement class={classes} />
-
-		<p class="foo">
-			<span>{'foo'}</span>
-		</p>
-		<p class="bar">{'bar'}</p>
-	</div>
-
-	<style>
-		.before + .foo { color: green; }
-		.before ~ .foo { color: green; }
-		.before ~ .bar { color: green; }
-
-		:global(.x) + .foo { color: green; }
-		:global(.x) + .foo span { color: green; }
-		:global(.x) ~ .foo { color: green; }
-		:global(.x) ~ .foo span { color: green; }
-		:global(.x) ~ .bar { color: green; }
-
-		/* should be unused as this is not a possibility */
-		:global(.x) + .bar { color: green; }
-	</style>
-</>; }`;
+	<>
+		<div>
+			<p class="before">{'before'}</p>
+			// Use Dynamic Element but it's the same with a regular one
+			<@dynamicElement class={classes} />
+
+			<p class="foo">
+				<span>{'foo'}</span>
+			</p>
+			<p class="bar">{'bar'}</p>
+		</div>
+
+		<style>
+			.before + .foo { color: green; }
+			.before ~ .foo { color: green; }
+			.before ~ .bar { color: green; }
+
+			:global(.x) + .foo { color: green; }
+			:global(.x) + .foo span { color: green; }
+			:global(.x) ~ .foo { color: green; }
+			:global(.x) ~ .foo span { color: green; }
+			:global(.x) ~ .bar { color: green; }
+
+			/* should be unused as this is not a possibility */
+			:global(.x) + .bar { color: green; }
+		</style>
+	</>
+}`;
 
 			const { css } = compile(source, 'test.tsrx');
 
@@ -518,19 +556,21 @@ export function Test({ children, classes }) { return <>
 
 	it('handles :global with multiple global descendants', () => {
 		const source = `
-export function Test() { return <>
-	<div class="root">
-		<section class="whatever">
-			<p>{'hello'}</p>
-		</section>
-	</div>
-
-	<style>
-		:global(html) :global(body) .root p {
-			color: red;
-		}
-	</style>
-</>; }`;
+export function Test() @{
+	<>
+		<div class="root">
+			<section class="whatever">
+				<p>{'hello'}</p>
+			</section>
+		</div>
+
+		<style>
+			:global(html) :global(body) .root p {
+				color: red;
+			}
+		</style>
+	</>
+}`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toMatch(/html body \.root\.tsrx-[a-z0-9]+ p:where\(\.tsrx-[a-z0-9]+\) {/);
@@ -538,25 +578,27 @@ export function Test() { return <>
 
 	it('handles nested @media with :global blocks', () => {
 		const source = `
-export function Test() { return <>
-	<div>{'content'}</div>
-
-	<style>
-		div {
-			color: black;
-
-			@media (min-width: 768px) {
-				:global {
-					.foo {
-						color: red;
+export function Test() @{
+	<>
+		<div>{'content'}</div>
+
+		<style>
+			div {
+				color: black;
+
+				@media (min-width: 768px) {
+					:global {
+						.foo {
+							color: red;
+						}
 					}
-				}
 
-				color: blue;
+					color: blue;
+				}
 			}
-		}
-	</style>
-</>; }`;
+		</style>
+	</>
+}`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('@media (min-width: 768px) {');
@@ -566,28 +608,30 @@ export function Test() { return <>
 
 	it('handles :has with complex combinators', () => {
 		const source = `
-export function Test() { return <>
-	<g>
-		<h>
-			<i>{'content'}</i>
-		</h>
-		<j>
-			<k>{'content'}</k>
-		</j>
-	</g>
-
-	<style>
-		g:has(> h > i) {
-			color: green;
-		}
-		h:has(> h > i) {
-			color: red;
-		}
-		g:has(+ j > k) {
-			color: green;
-		}
-	</style>
-</>; }`;
+export function Test() @{
+	<>
+		<g>
+			<h>
+				<i>{'content'}</i>
+			</h>
+			<j>
+				<k>{'content'}</k>
+			</j>
+		</g>
+
+		<style>
+			g:has(> h > i) {
+				color: green;
+			}
+			h:has(> h > i) {
+				color: red;
+			}
+			g:has(+ j > k) {
+				color: green;
+			}
+		</style>
+	</>
+}`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toMatch(
@@ -598,20 +642,22 @@ export function Test() { return <>
 
 	it('handles :global with attribute selectors containing special characters', () => {
 		const source = `
-export function Test() { return <>
-	<div>
-		<h1 data-title="Hello, world!">{'hello world'}</h1>
-	</div>
-
-	<style>
-		div :global(h1[data-title="Hello, world!"]) {
-			color: red;
-		}
-		div :global(h1[attribute], video[autoplay]) {
-			color: red;
-		}
-	</style>
-</>; }`;
+export function Test() @{
+	<>
+		<div>
+			<h1 data-title="Hello, world!">{'hello world'}</h1>
+		</div>
+
+		<style>
+			div :global(h1[data-title="Hello, world!"]) {
+				color: red;
+			}
+			div :global(h1[attribute], video[autoplay]) {
+				color: red;
+			}
+		</style>
+	</>
+}`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toMatch(/div\.tsrx-[a-z0-9]+ h1\[data-title="Hello, world!"\]/);
@@ -620,17 +666,19 @@ export function Test() { return <>
 
 	it('handles escaped commas in :global class names', () => {
 		const source = `
-export function Test() { return <>
-	<div>
-		<h1 class="h1,h2,h3">{'hello world'}</h1>
-	</div>
-
-	<style>
-		div :global(.h1\\,h2\\,h3) {
-			color: red;
-		}
-	</style>
-</>; }`;
+export function Test() @{
+	<>
+		<div>
+			<h1 class="h1,h2,h3">{'hello world'}</h1>
+		</div>
+
+		<style>
+			div :global(.h1\\,h2\\,h3) {
+				color: red;
+			}
+		</style>
+	</>
+}`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toMatch(/div\.tsrx-[a-z0-9]+ \.h1\\,h2\\,h3 {/);
@@ -641,21 +689,23 @@ export function Test() { return <>
  */
 	it('handles :global with :is containing multiple selectors', () => {
 		const source = `
-export function Test() { return <>
-	<div>
-		<h1>{'hello world'}</h1>
-		<h2>{'subtitle'}</h2>
-	</div>
-
-	<style>
-		div :global(:is(h1, h2)) {
-			color: red;
-		}
-		div :global(:where(h1, h2)) {
-			color: red;
-		}
-	</style>
-</>; }`;
+export function Test() @{
+	<>
+		<div>
+			<h1>{'hello world'}</h1>
+			<h2>{'subtitle'}</h2>
+		</div>
+
+		<style>
+			div :global(:is(h1, h2)) {
+				color: red;
+			}
+			div :global(:where(h1, h2)) {
+				color: red;
+			}
+		</style>
+	</>
+}`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toMatch(/div\.tsrx-[a-z0-9]+ :is\(h1, h2\)/);
@@ -664,19 +714,21 @@ export function Test() { return <>
 
 	it('handles :global with :is containing compound selectors', () => {
 		const source = `
-export function Test() { return <>
-	<div>
-		<h1>{'hello world'}</h1>
-		<h2>{'subtitle'}</h2>
-		<h3>{'sub-subtitle'}</h3>
-	</div>
-
-	<style>
-		div :global(h1 ~ :is(h2, h3)) {
-			color: red;
-		}
-	</style>
-</>; }`;
+export function Test() @{
+	<>
+		<div>
+			<h1>{'hello world'}</h1>
+			<h2>{'subtitle'}</h2>
+			<h3>{'sub-subtitle'}</h3>
+		</div>
+
+		<style>
+			div :global(h1 ~ :is(h2, h3)) {
+				color: red;
+			}
+		</style>
+	</>
+}`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toMatch(/div\.tsrx-[a-z0-9]+ h1 ~ :is\(h2, h3\)/);
@@ -684,20 +736,22 @@ export function Test() { return <>
 
 	it('handles :global with pseudo-elements', () => {
 		const source = `
-export function Test() { return <>
-	<div>
-		<h1 class="foo">{'hello world'}</h1>
-	</div>
-
-	<style>
-		.foo :global(.bar)::after {
-			color: red;
-		}
-		.foo :global(.bar)::after .baz {
-			color: red;
-		}
-	</style>
-</>; }`;
+export function Test() @{
+	<>
+		<div>
+			<h1 class="foo">{'hello world'}</h1>
+		</div>
+
+		<style>
+			.foo :global(.bar)::after {
+				color: red;
+			}
+			.foo :global(.bar)::after .baz {
+				color: red;
+			}
+		</style>
+	</>
+}`;
 		expect(() => compile(source, 'test.tsrx')).toThrow(
 			':global(...) can be at the start or end of a selector sequence, but not in the middle',
 		);