ripple 0.3.72 → 0.3.76

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

@@ -3,35 +3,37 @@ import { compile } from '@tsrx/ripple';
 describe('CSS :global nested blocks', () => {
 	it('handles nested global blocks', () => {
 		const source = `
-export function Test() { return <>
-	<div>
-		<p>{'content'}</p>
-	</div>
-
-	<style>
-		div {
-			:global {
-				.x {
+export function Test() @{
+	<>
+		<div>
+			<p>{'content'}</p>
+		</div>
+
+		<style>
+			div {
+				:global {
+					.x {
+						color: green;
+					}
+				}
+
+				:global(.x) {
 					color: green;
 				}
-			}
 
-			:global(.x) {
-				color: green;
-			}
+				p :global {
+					.y {
+						color: green;
+					}
+				}
 
-			p :global {
-				.y {
+				p :global(.y) {
 					color: green;
 				}
 			}
-
-			p :global(.y) {
-				color: green;
-			}
-		}
-	</style>
-</>; }`;
+		</style>
+	</>
+}`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toMatch(/div\.tsrx-[a-z0-9]+ {/);
@@ -44,29 +46,31 @@ export function Test() { return <>
 
 	it('handles :global with nesting selector', () => {
 		const source = `
-export function Test() { return <>
-	<div class="x">{'content'}</div>
+export function Test() @{
+	<>
+		<div class="x">{'content'}</div>
+
+		<style>
+			div {
+				:global {
+					&.x {
+						color: green;
+					}
+				}
+			}
 
-	<style>
-		div {
-			:global {
+			div :global {
 				&.x {
 					color: green;
 				}
 			}
-		}
 
-		div :global {
-			&.x {
+			div :global.x {
 				color: green;
 			}
-		}
-
-		div :global.x {
-			color: green;
-		}
-	</style>
-</>; }`;
+		</style>
+	</>
+}`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('&.x {');
@@ -75,23 +79,25 @@ export function Test() { return <>
 
 	it('handles global block with de-nested syntax', () => {
 		const source = `
-export function Test() { return <>
-	<div><p>{'content'}</p></div>
+export function Test() @{
+	<>
+		<div><p>{'content'}</p></div>
 
-	<style>
-		:global div {
-			.y {
-				color: green;
+		<style>
+			:global div {
+				.y {
+					color: green;
+				}
 			}
-		}
 
-		div :global p {
-			.y {
-				color: green;
+			div :global p {
+				.y {
+					color: green;
+				}
 			}
-		}
-	</style>
-</>; }`;
+		</style>
+	</>
+}`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('div {');
@@ -101,23 +107,25 @@ export function Test() { return <>
 
 	it('handles global local nested combinations', () => {
 		const source = `
-export function Test() { return <>
-	<div>{'content'}</div>
+export function Test() @{
+	<>
+		<div>{'content'}</div>
 
-	<style>
-		div {
-			:global(.whatever) {
-				color: green;
+		<style>
+			div {
+				:global(.whatever) {
+					color: green;
+				}
 			}
-		}
 
-		:global(.whatever) {
-			div {
-				color: green;
+			:global(.whatever) {
+				div {
+					color: green;
+				}
 			}
-		}
-	</style>
-</>; }`;
+		</style>
+	</>
+}`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('.whatever {');
@@ -127,21 +135,23 @@ export function Test() { return <>
 
 	it('handles :global with :is and :where pseudoclasses', () => {
 		const source = `
-export function Test() { return <>
-	<div>
-		<span>{'content'}</span>
-	</div>
-
-	<style>
-		div :global(:is(span)) {
-			color: green;
-		}
-
-		:global(.foo) :is(div) {
-			color: green;
-		}
-	</style>
-</>; }`;
+export function Test() @{
+	<>
+		<div>
+			<span>{'content'}</span>
+		</div>
+
+		<style>
+			div :global(:is(span)) {
+				color: green;
+			}
+
+			:global(.foo) :is(div) {
+				color: green;
+			}
+		</style>
+	</>
+}`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toMatch(/div\.tsrx-[a-z0-9]+ :is\(span\) {/);

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

@@ -3,21 +3,22 @@ import { compile } from '@tsrx/ripple';
 describe('CSS :global with pseudo-classes', () => {
 	it('handles :global with :has()', () => {
 		const source = `
-export function Test() { return <>
-	<div>
-		<span>{'content'}</span>
-	</div>
-
-	<style>
-		div:has(:global(span)) {
-			color: red;
-		}
-
-		:global(div:has(span)) {
-			color: blue;
-		}
-	</style>
-</>; }`;
+export function Test() @{
+	<>
+		<div>
+			<span>{'content'}</span>
+		</div>
+		<style>
+			div:has(:global(span)) {
+				color: red;
+			}
+
+			:global(div:has(span)) {
+				color: blue;
+			}
+		</style>
+	</>
+}`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toMatch(/div\.tsrx-[a-z0-9]+:has\(span\)/);
@@ -26,22 +27,23 @@ export function Test() { return <>
 
 	it('handles :global with :is()', () => {
 		const source = `
-export function Test() { return <>
-	<div>
-		<span>{'one'}</span>
-		<p>{'two'}</p>
-	</div>
-
-	<style>
-		div :is(:global(span), p) {
-			color: red;
-		}
-
-		:global(div:is(.foo, .bar)) {
-			color: blue;
-		}
-	</style>
-</>; }`;
+export function Test() @{
+	<>
+		<div>
+			<span>{'one'}</span>
+			<p>{'two'}</p>
+		</div>
+		<style>
+			div :is(:global(span), p) {
+				color: red;
+			}
+
+			:global(div:is(.foo, .bar)) {
+				color: blue;
+			}
+		</style>
+	</>
+}`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toMatch(/div\.tsrx-[a-z0-9]+ :is\(span, p:where\(\.tsrx-[a-z0-9]+\)\) {/);
@@ -52,22 +54,23 @@ export function Test() { return <>
 
 	it('handles :global with :where()', () => {
 		const source = `
-export function Test() { return <>
-	<div>
-		<span>{'one'}</span>
-		<p>{'two'}</p>
-	</div>
-
-	<style>
-		div :where(:global(span), p) {
-			color: red;
-		}
-
-		:global(div:where(.foo, .bar)) {
-			color: blue;
-		}
-	</style>
-</>; }`;
+export function Test() @{
+	<>
+		<div>
+			<span>{'one'}</span>
+			<p>{'two'}</p>
+		</div>
+		<style>
+			div :where(:global(span), p) {
+				color: red;
+			}
+
+			:global(div:where(.foo, .bar)) {
+				color: blue;
+			}
+		</style>
+	</>
+}`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toMatch(/div\.tsrx-[a-z0-9]+ :where\(span, p:where\(\.tsrx-[a-z0-9]+\)\) {/);
@@ -78,21 +81,22 @@ export function Test() { return <>
 
 	it('handles :global with :not()', () => {
 		const source = `
-export function Test() { return <>
-	<div>
-		<span>{'content'}</span>
-	</div>
-
-	<style>
-		div:not(:global(span)) {
-			color: red;
-		}
-
-		:global(div:not(.foo)) {
-			color: blue;
-		}
-	</style>
-</>; }`;
+export function Test() @{
+	<>
+		<div>
+			<span>{'content'}</span>
+		</div>
+		<style>
+			div:not(:global(span)) {
+				color: red;
+			}
+
+			:global(div:not(.foo)) {
+				color: blue;
+			}
+		</style>
+	</>
+}`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toMatch(/div\.tsrx-[a-z0-9]+:not\(span\)/);
@@ -101,21 +105,22 @@ export function Test() { return <>
 
 	it('handles nested pseudo-classes with :global', () => {
 		const source = `
-export function Test() { return <>
-	<div>
-		<span>{'content'}</span>
-	</div>
-
-	<style>
-		div:is(:has(:global(span))) {
-			color: red;
-		}
-
-		:global(div:where(:is(.foo))) {
-			color: blue;
-		}
-	</style>
-</>; }`;
+export function Test() @{
+	<>
+		<div>
+			<span>{'content'}</span>
+		</div>
+		<style>
+			div:is(:has(:global(span))) {
+				color: red;
+			}
+
+			:global(div:where(:is(.foo))) {
+				color: blue;
+			}
+		</style>
+	</>
+}`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toMatch(/div\.tsrx-[a-z0-9]+:is\(:where\(\.tsrx-[a-z0-9]+\):has\(span\)\) {/);
@@ -124,27 +129,28 @@ export function Test() { return <>
 
 	it('handles :global with :nth-child and other structural pseudo-classes', () => {
 		const source = `
-export function Test() { return <>
-	<div>
-		<span>{'one'}</span>
-		<span>{'two'}</span>
-		<span>{'three'}</span>
-	</div>
-
-	<style>
-		:global(span):nth-child(2) {
-			color: red;
-		}
-
-		div > :global(span:first-child) {
-			color: blue;
-		}
-
-		:global(div):last-child {
-			color: green;
-		}
-	</style>
-</>; }`;
+export function Test() @{
+	<>
+		<div>
+			<span>{'one'}</span>
+			<span>{'two'}</span>
+			<span>{'three'}</span>
+		</div>
+		<style>
+			:global(span):nth-child(2) {
+				color: red;
+			}
+
+			div > :global(span:first-child) {
+				color: blue;
+			}
+
+			:global(div):last-child {
+				color: green;
+			}
+		</style>
+	</>
+}`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('span:nth-child(2) {');