ripple 0.3.72 → 0.3.76

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

@@ -3,15 +3,17 @@ import { compile } from '@tsrx/ripple';
 describe('CSS :global edge cases', () => {
 	it('handles multiple :global selectors in one rule', () => {
 		const source = `
-export function Test() { return <>
-	<div>{'content'}</div>
-
-	<style>
-		:global(div), :global(span), p {
-			color: red;
-		}
-	</style>
-</>; }`;
+export function Test() @{
+	<>
+		<div>{'content'}</div>
+
+		<style>
+			:global(div), :global(span), p {
+				color: red;
+			}
+		</style>
+	</>
+}`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('div, span ');
@@ -20,19 +22,21 @@ export function Test() { return <>
 
 	it('handles :global with attribute selectors', () => {
 		const source = `
-export function Test() { return <>
-	<div data-test="value">{'content'}</div>
-
-	<style>
-		:global([data-test]) {
-			color: red;
-		}
-
-		div:global([data-foo="bar"]) {
-			color: blue;
-		}
-	</style>
-</>; }`;
+export function Test() @{
+	<>
+		<div data-test="value">{'content'}</div>
+
+		<style>
+			:global([data-test]) {
+				color: red;
+			}
+
+			div:global([data-foo="bar"]) {
+				color: blue;
+			}
+		</style>
+	</>
+}`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('[data-test] {');
@@ -41,19 +45,21 @@ export function Test() { return <>
 
 	it('handles :global with universal selector', () => {
 		const source = `
-export function Test() { return <>
-	<div>{'content'}</div>
-
-	<style>
-		:global(*) {
-			box-sizing: border-box;
-		}
-
-		div :global(*) {
-			margin: 0;
-		}
-	</style>
-</>; }`;
+export function Test() @{
+	<>
+		<div>{'content'}</div>
+
+		<style>
+			:global(*) {
+				box-sizing: border-box;
+			}
+
+			div :global(*) {
+				margin: 0;
+			}
+		</style>
+	</>
+}`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('* {');
@@ -62,19 +68,21 @@ export function Test() { return <>
 
 	it('handles :global with ID selectors', () => {
 		const source = `
-export function Test() { return <>
-	<div id="test">{'content'}</div>
-
-	<style>
-		:global(#app) {
-			width: 100%;
-		}
-
-		div :global(#test) {
-			color: red;
-		}
-	</style>
-</>; }`;
+export function Test() @{
+	<>
+		<div id="test">{'content'}</div>
+
+		<style>
+			:global(#app) {
+				width: 100%;
+			}
+
+			div :global(#test) {
+				color: red;
+			}
+		</style>
+	</>
+}`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('#app {');
@@ -85,19 +93,21 @@ export function Test() { return <>
 
 	it('handles :global with pseudo-elements', () => {
 		const source = `
-export function Test() { return <>
-	<div>{'content'}</div>
-
-	<style>
-		:global(div)::before {
-			content: "before";
-		}
-
-		div :global(span)::after {
-			content: "after";
-		}
-	</style>
-</>; }`;
+export function Test() @{
+	<>
+		<div>{'content'}</div>
+
+		<style>
+			:global(div)::before {
+				content: "before";
+			}
+
+			div :global(span)::after {
+				content: "after";
+			}
+		</style>
+	</>
+}`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('div::before {');
@@ -107,17 +117,19 @@ export function Test() { return <>
 
 	it('handles empty :global blocks', () => {
 		const source = `
-export function Test() { return <>
-	<div>{'content'}</div>
-
-	<style>
-		div {
-			:global {
+export function Test() @{
+	<>
+		<div>{'content'}</div>
+
+		<style>
+			div {
+				:global {
+				}
+				color: red;
 			}
-			color: red;
-		}
-	</style>
-</>; }`;
+		</style>
+	</>
+}`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('color: red');
@@ -126,23 +138,25 @@ export function Test() { return <>
 
 	it('handles :global with complex selector chains', () => {
 		const source = `
-export function Test() { return <>
-	<div class="container">
-		<span class="wrapper foo">
-			<button class="bar"><span>{'click'}</span></button>
-		</span>
-	</div>
-
-	<style>
-		:global(div.container) > span.wrapper + :global(button[disabled]) {
-			color: red;
-		}
-
-		:global(.foo > .bar) span {
-			color: blue;
-		}
-	</style>
-</>; }`;
+export function Test() @{
+	<>
+		<div class="container">
+			<span class="wrapper foo">
+				<button class="bar"><span>{'click'}</span></button>
+			</span>
+		</div>
+
+		<style>
+			:global(div.container) > span.wrapper + :global(button[disabled]) {
+				color: red;
+			}
+
+			:global(.foo > .bar) span {
+				color: blue;
+			}
+		</style>
+	</>
+}`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toMatch(/div\.container > span.wrapper\.tsrx-[a-z0-9]+ \+ button\[disabled\] {/);
@@ -151,19 +165,21 @@ export function Test() { return <>
 
 	it('rejects :global in the middle of a selector sequence', () => {
 		const source = `
-export function Test() { return <>
-	<div>
-		<span class="foo">
-			<button class="bar">{'click'}</button>
-		</span>
-	</div>
-
-	<style>
-		div :global(.foo > .bar) span {
-			color: red;
-		}
-	</style>
-</>; }`;
+export function Test() @{
+	<>
+		<div>
+			<span class="foo">
+				<button class="bar">{'click'}</button>
+			</span>
+		</div>
+
+		<style>
+			div :global(.foo > .bar) span {
+				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',
@@ -172,25 +188,27 @@ export function Test() { return <>
 
 	it('handles :global at start and end of selector', () => {
 		const source = `
-export function Test() { return <>
-	<div>
-		<span>{'content'}</span>
-	</div>
-
-	<style>
-		:global(html) div span {
-			color: red;
-		}
-
-		div span :global(strong) {
-			color: blue;
-		}
-
-		:global(body) div :global(em) {
-			color: green;
-		}
-	</style>
-</>; }`;
+export function Test() @{
+	<>
+		<div>
+			<span>{'content'}</span>
+		</div>
+
+		<style>
+			:global(html) div span {
+				color: red;
+			}
+
+			div span :global(strong) {
+				color: blue;
+			}
+
+			:global(body) div :global(em) {
+				color: green;
+			}
+		</style>
+	</>
+}`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toMatch(/html div\.tsrx-[a-z0-9]+ span:where\(\.tsrx-[a-z0-9]+\) {/);

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

@@ -3,20 +3,22 @@ import { compile } from '@tsrx/ripple';
 describe('CSS :global with keyframes', () => {
 	it('handles -global- prefix for keyframes', () => {
 		const source = `
-export function Test() { return <>
-	<div>{'animated'}</div>
-
-	<style>
-		@keyframes -global-foo {
-			0% { opacity: 0; }
-			100% { opacity: 1; }
-		}
-
-		div {
-			animation: foo 1s;
-		}
-	</style>
-</>; }`;
+export function Test() @{
+	<>
+		<div>{'animated'}</div>
+
+		<style>
+			@keyframes -global-foo {
+				0% { opacity: 0; }
+				100% { opacity: 1; }
+			}
+
+			div {
+				animation: foo 1s;
+			}
+		</style>
+	</>
+}`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('@keyframes foo');
@@ -26,16 +28,18 @@ export function Test() { return <>
 
 	it('handles scoped keyframes without -global- prefix', () => {
 		const source = `
-export function Test() { return <>
-	<div>{'animated'}</div>
-
-	<style>
-		@keyframes foo {
-			0% { opacity: 0; }
-			100% { opacity: 1; }
-		}
-	</style>
-</>; }`;
+export function Test() @{
+	<>
+		<div>{'animated'}</div>
+
+		<style>
+			@keyframes foo {
+				0% { opacity: 0; }
+				100% { opacity: 1; }
+			}
+		</style>
+	</>
+}`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toMatch(/@keyframes tsrx-[a-z0-9]+-foo/);
@@ -43,30 +47,32 @@ export function Test() { return <>
 
 	it('handles mix of global and scoped keyframes', () => {
 		const source = `
-export function Test() { return <>
-	<div class="global-anim">{'one'}</div>
-	<div class="scoped-anim">{'two'}</div>
-
-	<style>
-		@keyframes -global-fadeIn {
-			0% { opacity: 0; }
-			100% { opacity: 1; }
-		}
-
-		@keyframes slideIn {
-			0% { transform: translateX(-100%); }
-			100% { transform: translateX(0); }
-		}
-
-		.global-anim {
-			animation: fadeIn 1s;
-		}
-
-		.scoped-anim {
-			animation: slideIn 1s;
-		}
-	</style>
-</>; }`;
+export function Test() @{
+	<>
+		<div class="global-anim">{'one'}</div>
+		<div class="scoped-anim">{'two'}</div>
+
+		<style>
+			@keyframes -global-fadeIn {
+				0% { opacity: 0; }
+				100% { opacity: 1; }
+			}
+
+			@keyframes slideIn {
+				0% { transform: translateX(-100%); }
+				100% { transform: translateX(0); }
+			}
+
+			.global-anim {
+				animation: fadeIn 1s;
+			}
+
+			.scoped-anim {
+				animation: slideIn 1s;
+			}
+		</style>
+	</>
+}`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('@keyframes fadeIn');
@@ -78,21 +84,23 @@ export function Test() { return <>
 
 	it('handles multiple animations with global keyframes', () => {
 		const source = `
-export function Test() { return <>
-	<div>{'animated'}</div>
-
-	<style>
-		@keyframes -global-foo {
-			0% { opacity: 0; }
-			100% { opacity: 1; }
-		}
-
-		@keyframes -global-bar {
-			0% { transform: scale(0); }
-			100% { transform: scale(1); }
-		}
-	</style>
-</>; }`;
+export function Test() @{
+	<>
+		<div>{'animated'}</div>
+
+		<style>
+			@keyframes -global-foo {
+				0% { opacity: 0; }
+				100% { opacity: 1; }
+			}
+
+			@keyframes -global-bar {
+				0% { transform: scale(0); }
+				100% { transform: scale(1); }
+			}
+		</style>
+	</>
+}`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('@keyframes foo');
@@ -101,39 +109,43 @@ export function Test() { return <>
 
 	it('handles animation property referencing keyframes (not marking as unused)', () => {
 		const source = `
-export function Parent() { return <>
-	<div class="parent">
-		<Child />
-	</div>
-
-	<style>
-		/* Scoped keyframe - only usable within Parent */
-		@keyframes slideIn {
-			from { transform: translateX(-100%); }
-			to { transform: translateX(0); }
-		}
-
-		/* Global keyframe - usable in any component */
-		@keyframes -global-fadeIn {
-			0% { opacity: 0; }
-			100% { opacity: 1; }
-		}
-
-		.parent {
-			animation: slideIn 1s;
-		}
-	</style>
-</>; }
-
-function Child() { return <>
-	<div class="child">{'Child content'}</div>
-
-	<style>
-		.child {
-			animation: fadeIn 3s; /* Uses global fadeIn from Parent */
-		}
-	</style>
-</>; }`;
+export function Parent() @{
+	<>
+		<div class="parent">
+			<Child />
+		</div>
+
+		<style>
+			/* Scoped keyframe - only usable within Parent */
+			@keyframes slideIn {
+				from { transform: translateX(-100%); }
+				to { transform: translateX(0); }
+			}
+
+			/* Global keyframe - usable in any component */
+			@keyframes -global-fadeIn {
+				0% { opacity: 0; }
+				100% { opacity: 1; }
+			}
+
+			.parent {
+				animation: slideIn 1s;
+			}
+		</style>
+	</>
+}
+
+function Child() @{
+	<>
+		<div class="child">{'Child content'}</div>
+
+		<style>
+			.child {
+				animation: fadeIn 3s; /* Uses global fadeIn from Parent */
+			}
+		</style>
+	</>
+}`;
 		const { css } = compile(source, 'test.tsrx');
 
 		// Parent should have scoped slideIn and global fadeIn