ripple 0.3.72 → 0.3.76

package/tests/client/css/global-advanced-selectors.test.tsrx

@@ -3,21 +3,23 @@ import { compile } from '@tsrx/ripple';
 describe('CSS :global with advanced selectors', () => {
 	it('handles :global with ::slotted()', () => {
 		const source = `
-export function Test() { return <>
-	<div>
-		<slot />
-	</div>
-
-	<style>
-		:global(::slotted(*)) {
-			color: red;
-		}
-
-		div :global(::slotted(span)) {
-			color: blue;
-		}
-	</style>
-</>; }`;
+export function Test() @{
+	<>
+		<div>
+			<slot />
+		</div>
+
+		<style>
+			:global(::slotted(*)) {
+				color: red;
+			}
+
+			div :global(::slotted(span)) {
+				color: blue;
+			}
+		</style>
+	</>
+}`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toMatch(/div\.tsrx-[a-z0-9]+ ::slotted\(span\) {/);
@@ -26,19 +28,21 @@ export function Test() { return <>
 
 	it('handles :global with ::part()', () => {
 		const source = `
-export function Test() { return <>
-	<div>{'content'}</div>
-
-	<style>
-		:global(::part(button)) {
-			color: red;
-		}
-
-		div :global(::part(input)) {
-			border: 1px solid blue;
-		}
-	</style>
-</>; }`;
+export function Test() @{
+	<>
+		<div>{'content'}</div>
+
+		<style>
+			:global(::part(button)) {
+				color: red;
+			}
+
+			div :global(::part(input)) {
+				border: 1px solid blue;
+			}
+		</style>
+	</>
+}`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toMatch(/div\.tsrx-[a-z0-9]+ ::part\(input\) {/);
@@ -47,23 +51,25 @@ export function Test() { return <>
 
 	it('handles :global with :host and :host-context', () => {
 		const source = `
-export function Test() { return <>
-	<div>{'content'}</div>
-
-	<style>
-		:global(:host) {
-			display: block;
-		}
-
-		:global(:host(.active)) {
-			color: red;
-		}
-
-		:global(:host-context(.dark)) {
-			background: black;
-		}
-	</style>
-</>; }`;
+export function Test() @{
+	<>
+		<div>{'content'}</div>
+
+		<style>
+			:global(:host) {
+				display: block;
+			}
+
+			:global(:host(.active)) {
+				color: red;
+			}
+
+			:global(:host-context(.dark)) {
+				background: black;
+			}
+		</style>
+	</>
+}`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain(':host {');
@@ -73,27 +79,29 @@ export function Test() { return <>
 
 	it('handles :global with complex :nth-* selectors', () => {
 		const source = `
-export function Test() { return <>
-	<div>
-		<span>{'one'}</span>
-		<span>{'two'}</span>
-		<span>{'three'}</span>
-	</div>
-
-	<style>
-		:global(span:nth-child(odd)) {
-			color: red;
-		}
-
-		:global(span:nth-last-child(2)) {
-			color: blue;
-		}
-
-		:global(div:nth-of-type(3n+1)) {
-			margin-top: 10px;
-		}
-	</style>
-</>; }`;
+export function Test() @{
+	<>
+		<div>
+			<span>{'one'}</span>
+			<span>{'two'}</span>
+			<span>{'three'}</span>
+		</div>
+
+		<style>
+			:global(span:nth-child(odd)) {
+				color: red;
+			}
+
+			:global(span:nth-last-child(2)) {
+				color: blue;
+			}
+
+			:global(div:nth-of-type(3n+1)) {
+				margin-top: 10px;
+			}
+		</style>
+	</>
+}`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('span:nth-child(odd) {');
@@ -103,23 +111,25 @@ export function Test() { return <>
 
 	it('handles :global with language and directional pseudo-classes', () => {
 		const source = `
-export function Test() { return <>
-	<div>{'content'}</div>
-
-	<style>
-		:global(:lang(en)) {
-			quotes: '"' '"';
-		}
-
-		:global(:dir(rtl)) {
-			direction: rtl;
-		}
-
-		:global(div:lang(fr)) {
-			quotes: '«' '»';
-		}
-	</style>
-</>; }`;
+export function Test() @{
+	<>
+		<div>{'content'}</div>
+
+		<style>
+			:global(:lang(en)) {
+				quotes: '"' '"';
+			}
+
+			:global(:dir(rtl)) {
+				direction: rtl;
+			}
+
+			:global(div:lang(fr)) {
+				quotes: '«' '»';
+			}
+		</style>
+	</>
+}`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain(':lang(en) {');
@@ -129,21 +139,23 @@ export function Test() { return <>
 
 	it('handles :global with :focus-within and :focus-visible', () => {
 		const source = `
-export function Test() { return <>
-	<div>
-		<input type="text" />
-	</div>
-
-	<style>
-		:global(div:focus-within) {
-			border: 2px solid blue;
-		}
-
-		:global(input:focus-visible) {
-			outline: 2px solid red;
-		}
-	</style>
-</>; }`;
+export function Test() @{
+	<>
+		<div>
+			<input type="text" />
+		</div>
+
+		<style>
+			:global(div:focus-within) {
+				border: 2px solid blue;
+			}
+
+			:global(input:focus-visible) {
+				outline: 2px solid red;
+			}
+		</style>
+	</>
+}`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('div:focus-within {');
@@ -152,25 +164,27 @@ export function Test() { return <>
 
 	it('handles :global with :any-link, :target, :scope', () => {
 		const source = `
-export function Test() { return <>
-	<div>
-		<a href="#">{'link'}</a>
-	</div>
-
-	<style>
-		:global(:any-link) {
-			color: blue;
-		}
-
-		:global(:target) {
-			background: yellow;
-		}
-
-		:global(:scope) {
-			border: 1px solid black;
-		}
-	</style>
-</>; }`;
+export function Test() @{
+	<>
+		<div>
+			<a href="#">{'link'}</a>
+		</div>
+
+		<style>
+			:global(:any-link) {
+				color: blue;
+			}
+
+			:global(:target) {
+				background: yellow;
+			}
+
+			:global(:scope) {
+				border: 1px solid black;
+			}
+		</style>
+	</>
+}`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain(':any-link {');
@@ -180,42 +194,44 @@ export function Test() { return <>
 
 	it('handles :global with form-related pseudo-classes', () => {
 		const source = `
-export function Test() { return <>
-	<form>
-		<input type="text" required />
-		<input type="checkbox" checked />
-	</form>
-
-	<style>
-		:global(input:required) {
-			border-color: red;
-		}
-
-		:global(input:optional) {
-			border-color: gray;
-		}
-
-		:global(input:checked) {
-			background: blue;
-		}
-
-		:global(input:disabled) {
-			opacity: 0.5;
-		}
-
-		:global(input:read-only) {
-			background: lightgray;
-		}
-
-		:global(input:valid) {
-			border-color: green;
-		}
-
-		:global(input:invalid) {
-			border-color: red;
-		}
-	</style>
-</>; }`;
+export function Test() @{
+	<>
+		<form>
+			<input type="text" required />
+			<input type="checkbox" checked />
+		</form>
+
+		<style>
+			:global(input:required) {
+				border-color: red;
+			}
+
+			:global(input:optional) {
+				border-color: gray;
+			}
+
+			:global(input:checked) {
+				background: blue;
+			}
+
+			:global(input:disabled) {
+				opacity: 0.5;
+			}
+
+			:global(input:read-only) {
+				background: lightgray;
+			}
+
+			:global(input:valid) {
+				border-color: green;
+			}
+
+			:global(input:invalid) {
+				border-color: red;
+			}
+		</style>
+	</>
+}`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('input:required {');

package/tests/client/css/global-at-rules.test.tsrx

@@ -3,21 +3,22 @@ import { compile } from '@tsrx/ripple';
 describe('CSS :global with @media and @supports', () => {
 	it('handles :global inside @media queries', () => {
 		const source = `
-export function Test() { return <>
-	<div>{'content'}</div>
-
-	<style>
-		@media (min-width: 768px) {
-			:global(div) {
-				color: red;
-			}
+export function Test() @{
+	<>
+		<div>{'content'}</div>
+		<style>
+			@media (min-width: 768px) {
+				:global(div) {
+					color: red;
+				}
 
-			div :global(span) {
-				color: blue;
+				div :global(span) {
+					color: blue;
+				}
 			}
-		}
-	</style>
-</>; }`;
+		</style>
+	</>
+}`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('@media (min-width: 768px) {');
@@ -27,21 +28,22 @@ export function Test() { return <>
 
 	it('handles :global inside @supports queries', () => {
 		const source = `
-export function Test() { return <>
-	<div>{'content'}</div>
-
-	<style>
-		@supports (display: grid) {
-			:global(.container) {
-				display: grid;
-			}
+export function Test() @{
+	<>
+		<div>{'content'}</div>
+		<style>
+			@supports (display: grid) {
+				:global(.container) {
+					display: grid;
+				}
 
-			div :global(.item) {
-				grid-column: 1;
+				div :global(.item) {
+					grid-column: 1;
+				}
 			}
-		}
-	</style>
-</>; }`;
+		</style>
+	</>
+}`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('@supports (display: grid) {');
@@ -51,25 +53,26 @@ export function Test() { return <>
 
 	it('handles nested @media with :global', () => {
 		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) {');
@@ -80,17 +83,18 @@ export function Test() { return <>
 
 	it('handles :global in @container queries', () => {
 		const source = `
-export function Test() { return <>
-	<div>{'content'}</div>
-
-	<style>
-		@container (min-width: 400px) {
-			:global(div) {
-				color: red;
+export function Test() @{
+	<>
+		<div>{'content'}</div>
+		<style>
+			@container (min-width: 400px) {
+				:global(div) {
+					color: red;
+				}
 			}
-		}
-	</style>
-</>; }`;
+		</style>
+	</>
+}`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('@container (min-width: 400px) {');
@@ -99,23 +103,24 @@ export function Test() { return <>
 
 	it('handles multiple at-rules with :global', () => {
 		const source = `
-export function Test() { return <>
-	<div>{'content'}</div>
-
-	<style>
-		@media screen {
-			@supports (display: flex) {
-				:global(.flex-container) {
-					display: flex;
-				}
+export function Test() @{
+	<>
+		<div>{'content'}</div>
+		<style>
+			@media screen {
+				@supports (display: flex) {
+					:global(.flex-container) {
+						display: flex;
+					}
 
-				div :global(.flex-item) {
-					flex: 1;
+					div :global(.flex-item) {
+						flex: 1;
+					}
 				}
 			}
-		}
-	</style>
-</>; }`;
+		</style>
+	</>
+}`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('@media screen {');