ripple 0.3.72 → 0.3.76

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

@@ -3,15 +3,16 @@ import { compile } from '@tsrx/ripple';
 describe('CSS :global basic tests', () => {
 	it('applies global selector to all elements', () => {
 		const source = `
-export function Test() { return <>
-	<div>{'content'}</div>
-
-	<style>
-		:global(div) {
-			color: red;
-		}
-	</style>
-</>; }`;
+export function Test() @{
+	<>
+		<div>{'content'}</div>
+		<style>
+			:global(div) {
+				color: red;
+			}
+		</style>
+	</>
+}`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('div {');
@@ -21,19 +22,20 @@ export function Test() { return <>
 
 	it('applies global selector with class', () => {
 		const source = `
-export function Test() { return <>
-	<div class="foo">{'content'}</div>
-
-	<style>
-		:global(div.foo) {
-			color: pink;
-		}
-
-		:global(.foo) {
-			font-weight: bold;
-		}
-	</style>
-</>; }`;
+export function Test() @{
+	<>
+		<div class="foo">{'content'}</div>
+		<style>
+			:global(div.foo) {
+				color: pink;
+			}
+
+			:global(.foo) {
+				font-weight: bold;
+			}
+		</style>
+	</>
+}`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('div.foo {');
@@ -43,21 +45,22 @@ export function Test() { return <>
 
 	it('mixes global and local selectors', () => {
 		const source = `
-export function Test() { return <>
-	<div>
-		<p class="foo">{'red/bold'}</p>
-	</div>
-
-	<style>
-		:global(div) .foo {
-			color: red;
-		}
-
-		:global(div) > .foo {
-			font-weight: bold;
-		}
-	</style>
-</>; }`;
+export function Test() @{
+	<>
+		<div>
+			<p class="foo">{'red/bold'}</p>
+		</div>
+		<style>
+			:global(div) .foo {
+				color: red;
+			}
+
+			:global(div) > .foo {
+				font-weight: bold;
+			}
+		</style>
+	</>
+}`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('div .foo');
@@ -67,21 +70,22 @@ export function Test() { return <>
 
 	it('handles global block syntax', () => {
 		const source = `
-export function Test() { return <>
-	<div>{'content'}</div>
-
-	<style>
-		:global {
-			.x {
-				color: green;
-			}
-
-			.a, .selector, .list {
-				color: green;
+export function Test() @{
+	<>
+		<div>{'content'}</div>
+		<style>
+			:global {
+				.x {
+					color: green;
+				}
+
+				.a, .selector, .list {
+					color: green;
+				}
 			}
-		}
-	</style>
-</>; }`;
+		</style>
+	</>
+}`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('.x {');
@@ -91,19 +95,20 @@ export function Test() { return <>
 
 	it('handles global with pseudo-classes', () => {
 		const source = `
-export function Test() { return <>
-	<button>{'click'}</button>
-
-	<style>
-		:global(button:hover) {
-			opacity: 0.8;
-		}
-
-		:global(button):focus {
-			outline: none;
-		}
-	</style>
-</>; }`;
+export function Test() @{
+	<>
+		<button>{'click'}</button>
+		<style>
+			:global(button:hover) {
+				opacity: 0.8;
+			}
+
+			:global(button):focus {
+				outline: none;
+			}
+		</style>
+	</>
+}`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('button:hover {');
@@ -113,17 +118,18 @@ export function Test() { return <>
 
 	it('handles multiple global selectors in selector list', () => {
 		const source = `
-export function Test() { return <>
-	<div>{'content'}</div>
-
-	<style>
-		:global(html),
-		:global(body) {
-			margin: 0;
-			padding: 0;
-		}
-	</style>
-</>; }`;
+export function Test() @{
+	<>
+		<div>{'content'}</div>
+		<style>
+			:global(html),
+			:global(body) {
+				margin: 0;
+				padding: 0;
+			}
+		</style>
+	</>
+}`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('html,');
@@ -132,29 +138,30 @@ export function Test() { return <>
 
 	it('scopes local selectors while keeping globals unscoped', () => {
 		const source = `
-export function Test() { return <>
-	<div class="styled-container">
-				<h1>{'Styled heading'}</h1>
-				<p class="text">{'Styled paragraph'}</p>
-			</div>
-
-	<style>
-		.styled-container {
-			background-color: rgb(0, 0, 255);
-			padding: 16px;
-		}
-
-		:global(h1) {
-			color: rgb(255, 255, 255);
-			font-size: 32px;
-		}
-
-		.text {
-			color: rgb(200, 200, 200);
-			font-size: 14px;
-		}
-	</style>
-</>; }`;
+export function Test() @{
+	<>
+		<div class="styled-container">
+			<h1>{'Styled heading'}</h1>
+			<p class="text">{'Styled paragraph'}</p>
+		</div>
+		<style>
+			.styled-container {
+				background-color: rgb(0, 0, 255);
+				padding: 16px;
+			}
+
+			:global(h1) {
+				color: rgb(255, 255, 255);
+				font-size: 32px;
+			}
+
+			.text {
+				color: rgb(200, 200, 200);
+				font-size: 14px;
+			}
+		</style>
+	</>
+}`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toMatch(/\.styled-container\.tsrx-[a-z0-9]+/);

package/tests/client/css/global-classes-ids.test.tsrx

@@ -3,15 +3,17 @@ import { compile } from '@tsrx/ripple';
 describe('CSS :global with classes and IDs', () => {
 	it('handles :global with single class', () => {
 		const source = `
-export function Test() { return <>
-	<div class="foo">{'content'}</div>
-
-	<style>
-		:global(.foo) {
-			color: red;
-		}
-	</style>
-</>; }`;
+export function Test() @{
+	<>
+		<div class="foo">{'content'}</div>
+
+		<style>
+			:global(.foo) {
+				color: red;
+			}
+		</style>
+	</>
+}`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('.foo {');
@@ -20,23 +22,25 @@ export function Test() { return <>
 
 	it('handles :global with chained classes', () => {
 		const source = `
-export function Test() { return <>
-	<div class="foo bar">{'content'}</div>
-
-	<style>
-		:global(.foo.bar) {
-			color: red;
-		}
-
-		:global(.foo).bar {
-			color: blue;
-		}
-
-		.foo:global(.bar) {
-			color: green;
-		}
-	</style>
-</>; }`;
+export function Test() @{
+	<>
+		<div class="foo bar">{'content'}</div>
+
+		<style>
+			:global(.foo.bar) {
+				color: red;
+			}
+
+			:global(.foo).bar {
+				color: blue;
+			}
+
+			.foo:global(.bar) {
+				color: green;
+			}
+		</style>
+	</>
+}`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('.foo.bar {');
@@ -46,21 +50,23 @@ export function Test() { return <>
 
 	it('handles local class inside :global selector', () => {
 		const source = `
-export function Test() { return <>
-	<div class="outer">
-		<span class="inner">{'content'}</span>
-	</div>
-
-	<style>
-		:global(.outer) .inner {
-			color: red;
-		}
-
-		:global(div) .foo {
-			color: blue;
-		}
-	</style>
-</>; }`;
+export function Test() @{
+	<>
+		<div class="outer">
+			<span class="inner">{'content'}</span>
+		</div>
+
+		<style>
+			:global(.outer) .inner {
+				color: red;
+			}
+
+			:global(div) .foo {
+				color: blue;
+			}
+		</style>
+	</>
+}`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toMatch(/\.outer \.inner\.tsrx-[a-z0-9]+ {/);
@@ -69,25 +75,27 @@ export function Test() { return <>
 
 	it('handles :global with ID selectors', () => {
 		const source = `
-export function Test() { return <>
-	<div id="app">
-		<div id="content">{'text'}</div>
-	</div>
-
-	<style>
-		:global(#app) {
-			width: 100%;
-		}
-
-		:global(#app) #content {
-			padding: 20px;
-		}
-
-		div :global(#content) {
-			margin: 0;
-		}
-	</style>
-</>; }`;
+export function Test() @{
+	<>
+		<div id="app">
+			<div id="content">{'text'}</div>
+		</div>
+
+		<style>
+			:global(#app) {
+				width: 100%;
+			}
+
+			:global(#app) #content {
+				padding: 20px;
+			}
+
+			div :global(#content) {
+				margin: 0;
+			}
+		</style>
+	</>
+}`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('#app {');
@@ -98,23 +106,25 @@ export function Test() { return <>
 
 	it('handles :global with class and ID combination', () => {
 		const source = `
-export function Test() { return <>
-	<div id="app" class="container">{'content'}</div>
-
-	<style>
-		:global(#app.container) {
-			color: red;
-		}
-
-		:global(.container)#app {
-			color: blue;
-		}
-
-		#app:global(.container) {
-			color: green;
-		}
-	</style>
-</>; }`;
+export function Test() @{
+	<>
+		<div id="app" class="container">{'content'}</div>
+
+		<style>
+			:global(#app.container) {
+				color: red;
+			}
+
+			:global(.container)#app {
+				color: blue;
+			}
+
+			#app:global(.container) {
+				color: green;
+			}
+		</style>
+	</>
+}`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('#app.container {');
@@ -124,23 +134,25 @@ export function Test() { return <>
 
 	it('handles multiple classes with :global', () => {
 		const source = `
-export function Test() { return <>
-	<div class="a b c">{'content'}</div>
-
-	<style>
-		:global(.a).b.c {
-			color: red;
-		}
-
-		.a:global(.b).c {
-			color: blue;
-		}
-
-		.a.b:global(.c) {
-			color: green;
-		}
-	</style>
-</>; }`;
+export function Test() @{
+	<>
+		<div class="a b c">{'content'}</div>
+
+		<style>
+			:global(.a).b.c {
+				color: red;
+			}
+
+			.a:global(.b).c {
+				color: blue;
+			}
+
+			.a.b:global(.c) {
+				color: green;
+			}
+		</style>
+	</>
+}`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect((css.match(/\.a\.b\.c\.tsrx-[a-z0-9]+ {/g) || []).length).toBe(2);
@@ -149,27 +161,29 @@ export function Test() { return <>
 
 	it('handles :global with class descendant selectors', () => {
 		const source = `
-export function Test() { return <>
-	<div class="outer">
-		<div class="middle">
-			<div class="inner">{'content'}</div>
+export function Test() @{
+	<>
+		<div class="outer">
+			<div class="middle">
+				<div class="inner">{'content'}</div>
+			</div>
 		</div>
-	</div>
-
-	<style>
-		:global(.outer) .middle .inner {
-			color: red;
-		}
-
-		.outer :global(.middle .inner) {
-			color: blue;
-		}
-
-		.outer .middle:global(.inner) {
-			color: green;
-		}
-	</style>
-</>; }`;
+
+		<style>
+			:global(.outer) .middle .inner {
+				color: red;
+			}
+
+			.outer :global(.middle .inner) {
+				color: blue;
+			}
+
+			.outer .middle:global(.inner) {
+				color: green;
+			}
+		</style>
+	</>
+}`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toMatch(/\.outer \.middle\.tsrx-[a-z0-9]+ \.inner:where\(\.tsrx-[a-z0-9]+\)/);