ripple 0.3.72 → 0.3.76

package/tests/client/css/global-combinators.test.tsrx

@@ -3,17 +3,18 @@ import { compile } from '@tsrx/ripple';
 describe('CSS :global with combinators', () => {
 	it('handles :global with child combinator', () => {
 		const source = `
-export function Test() { return <>
-	<div>
-		<span>{'content'}</span>
-	</div>
-
-	<style>
-		div > :global(span) {
-			color: red;
-		}
-	</style>
-</>; }`;
+export function Test() @{
+	<>
+		<div>
+			<span>{'content'}</span>
+		</div>
+		<style>
+			div > :global(span) {
+				color: red;
+			}
+		</style>
+	</>
+}`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toMatch(/div\.tsrx-[a-z0-9]+ > span {/);
@@ -22,22 +23,23 @@ export function Test() { return <>
 
 	it('handles :global with adjacent sibling combinator', () => {
 		const source = `
-export function Test() { return <>
-	<div>
-		<span>{'one'}</span>
-		<span>{'two'}</span>
-	</div>
-
-	<style>
-		span + :global(span) {
-			color: red;
-		}
-
-		:global(div) + span {
-			color: blue;
-		}
-	</style>
-</>; }`;
+export function Test() @{
+	<>
+		<div>
+			<span>{'one'}</span>
+			<span>{'two'}</span>
+		</div>
+		<style>
+			span + :global(span) {
+				color: red;
+			}
+
+			:global(div) + span {
+				color: blue;
+			}
+		</style>
+	</>
+}`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toMatch(/span\.tsrx-[a-z0-9]+ \+ span {/);
@@ -46,22 +48,23 @@ export function Test() { return <>
 
 	it('handles :global with general sibling combinator', () => {
 		const source = `
-export function Test() { return <>
-	<div>
-		<span>{'one'}</span>
-		<span>{'two'}</span>
-	</div>
-
-	<style>
-		span ~ :global(span) {
-			color: red;
-		}
-
-		:global(div) ~ span {
-			color: blue;
-		}
-	</style>
-</>; }`;
+export function Test() @{
+	<>
+		<div>
+			<span>{'one'}</span>
+			<span>{'two'}</span>
+		</div>
+		<style>
+			span ~ :global(span) {
+				color: red;
+			}
+
+			:global(div) ~ span {
+				color: blue;
+			}
+		</style>
+	</>
+}`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('~');
@@ -72,24 +75,25 @@ export function Test() { return <>
 
 	it('handles complex combinator chains with :global', () => {
 		const source = `
-export function Test() { return <>
-	<div>
-		<span>
-			<button>{'nested button'}</button>
-		</span>
-		<button>{'sibling button'}</button>
-	</div>
-
-	<style>
-		div > :global(span > button) {
-			color: red;
-		}
-
-		:global(div) > span + button {
-			color: blue;
-		}
-	</style>
-</>; }`;
+export function Test() @{
+	<>
+		<div>
+			<span>
+				<button>{'nested button'}</button>
+			</span>
+			<button>{'sibling button'}</button>
+		</div>
+		<style>
+			div > :global(span > button) {
+				color: red;
+			}
+
+			:global(div) > span + button {
+				color: blue;
+			}
+		</style>
+	</>
+}`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toMatch(/div\.tsrx-[a-z0-9]+ > span > button {/);
@@ -98,23 +102,24 @@ export function Test() { return <>
 
 	it('handles :global with descendant combinator', () => {
 		const source = `
-export function Test() { return <>
-	<div>
-		<span>
-			<button>{'click'}</button>
-		</span>
-	</div>
-
-	<style>
-		div :global(span button) {
-			color: red;
-		}
-
-		:global(div) span button {
-			color: blue;
-		}
-	</style>
-</>; }`;
+export function Test() @{
+	<>
+		<div>
+			<span>
+				<button>{'click'}</button>
+			</span>
+		</div>
+		<style>
+			div :global(span button) {
+				color: red;
+			}
+
+			:global(div) span button {
+				color: blue;
+			}
+		</style>
+	</>
+}`;
 
 		const { css } = compile(source, 'test.tsrx');
 

package/tests/client/css/global-complex-nesting.test.tsrx

@@ -3,27 +3,29 @@ import { compile } from '@tsrx/ripple';
 describe('CSS :global with complex nesting', () => {
 	it('handles :global block with nested selectors', () => {
 		const source = `
-export function Test() { return <>
-	<div>
-		<span>
-			<button>{'click'}</button>
-		</span>
-	</div>
-
-	<style>
-		:global {
-			div {
-				span {
-					color: red;
+export function Test() @{
+	<>
+		<div>
+			<span>
+				<button>{'click'}</button>
+			</span>
+		</div>
+
+		<style>
+			:global {
+				div {
+					span {
+						color: red;
 
-					button {
-						color: blue;
+						button {
+							color: blue;
+						}
 					}
 				}
 			}
-		}
-	</style>
-</>; }`;
+		</style>
+	</>
+}`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).not.toMatch(/div\.tsrx-[a-z0-9]+ {/);
@@ -33,25 +35,27 @@ export function Test() { return <>
 
 	it('handles local block with :global nested inside', () => {
 		const source = `
-export function Test() { return <>
-	<div>
-		<span>{'content'}</span>
-	</div>
+export function Test() @{
+	<>
+		<div>
+			<span>{'content'}</span>
+		</div>
 
-	<style>
-		div {
-			color: red;
+		<style>
+			div {
+				color: red;
 
-			:global(span) {
-				color: blue;
-			}
+				:global(span) {
+					color: blue;
+				}
 
-			p {
-				color: green;
+				p {
+					color: green;
+				}
 			}
-		}
-	</style>
-</>; }`;
+		</style>
+	</>
+}`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toMatch(/div\.tsrx-[a-z0-9]+ {/);
@@ -61,23 +65,25 @@ export function Test() { return <>
 
 	it('handles :global block with local nested inside', () => {
 		const source = `
-export function Test() { return <>
-	<div>
-		<span>
-			<button>{'click'}</button>
-		</span>
-	</div>
-
-	<style>
-		:global {
-			div {
-				.local {
-					color: red;
+export function Test() @{
+	<>
+		<div>
+			<span>
+				<button>{'click'}</button>
+			</span>
+		</div>
+
+		<style>
+			:global {
+				div {
+					.local {
+						color: red;
+					}
 				}
 			}
-		}
-	</style>
-</>; }`;
+		</style>
+	</>
+}`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('div {');
@@ -88,27 +94,29 @@ export function Test() { return <>
 
 	it('handles alternating :global and local nesting', () => {
 		const source = `
-export function Test() { return <>
-	<div>
-		<span>
-			<button>
-				<em>{'text'}</em>
-			</button>
-		</span>
-	</div>
-
-	<style>
-		div {
-			:global(span) {
-				button {
-					:global(em) {
-						color: red;
+export function Test() @{
+	<>
+		<div>
+			<span>
+				<button>
+					<em>{'text'}</em>
+				</button>
+			</span>
+		</div>
+
+		<style>
+			div {
+				:global(span) {
+					button {
+						:global(em) {
+							color: red;
+						}
 					}
 				}
 			}
-		}
-	</style>
-</>; }`;
+		</style>
+	</>
+}`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toMatch(/div\.tsrx-[a-z0-9]+ {/);
@@ -119,27 +127,29 @@ export function Test() { return <>
 
 	it('handles deeply nested :global blocks', () => {
 		const source = `
-export function Test() { return <>
-	<div>
-		<span>
-			<button>{'click'}</button>
-		</span>
-	</div>
-
-	<style>
-		div {
-			:global {
-				span {
-					:global {
-						button {
-							color: red;
+export function Test() @{
+	<>
+		<div>
+			<span>
+				<button>{'click'}</button>
+			</span>
+		</div>
+
+		<style>
+			div {
+				:global {
+					span {
+						:global {
+							button {
+								color: red;
+							}
 						}
 					}
 				}
 			}
-		}
-	</style>
-</>; }`;
+		</style>
+	</>
+}`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toMatch(/div\.tsrx-[a-z0-9]+ {/);
@@ -151,27 +161,29 @@ export function Test() { return <>
 
 	it('handles :global with nesting combinator &', () => {
 		const source = `
-export function Test() { return <>
-	<div class="container">
-		<button class="active">{'click'}</button>
-	</div>
-
-	<style>
-		.container {
-			:global {
-				&.active {
-					color: red;
+export function Test() @{
+	<>
+		<div class="container">
+			<button class="active">{'click'}</button>
+		</div>
+
+		<style>
+			.container {
+				:global {
+					&.active {
+						color: red;
+					}
 				}
-			}
 
-			button {
-				:global(&.pressed) {
-					color: blue;
+				button {
+					:global(&.pressed) {
+						color: blue;
+					}
 				}
 			}
-		}
-	</style>
-</>; }`;
+		</style>
+	</>
+}`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toMatch(/\.container\.tsrx-[a-z0-9]+ {/);
@@ -182,31 +194,33 @@ export function Test() { return <>
 
 	it('handles complex :global nesting with multiple levels', () => {
 		const source = `
-export function Test() { return <>
-	<div>
-		<nav>
-			<ul>
-				<li>
-					<a href="#">{'link'}</a>
-				</li>
-			</ul>
-		</nav>
-	</div>
-
-	<style>
-		div {
-			:global(nav) {
-				ul {
-					:global(li) {
-						a {
-							color: red;
+export function Test() @{
+	<>
+		<div>
+			<nav>
+				<ul>
+					<li>
+						<a href="#">{'link'}</a>
+					</li>
+				</ul>
+			</nav>
+		</div>
+
+		<style>
+			div {
+				:global(nav) {
+					ul {
+						:global(li) {
+							a {
+								color: red;
+							}
 						}
 					}
 				}
 			}
-		}
-	</style>
-</>; }`;
+		</style>
+	</>
+}`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toMatch(/div\.tsrx-[a-z0-9]+ {/);