ripple 0.3.67 → 0.3.69

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

@@ -3,7 +3,7 @@ import { compile } from '@tsrx/ripple';
 describe('CSS :global nested blocks', () => {
 	it('handles nested global blocks', () => {
 		const source = `
-export component Test() {
+export function Test() { return <>
 	<div>
 		<p>{'content'}</p>
 	</div>
@@ -31,7 +31,7 @@ export component Test() {
 			}
 		}
 	</style>
-}`;
+</>; }`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toMatch(/div\.tsrx-[a-z0-9]+ {/);
@@ -44,7 +44,7 @@ export component Test() {
 
 	it('handles :global with nesting selector', () => {
 		const source = `
-export component Test() {
+export function Test() { return <>
 	<div class="x">{'content'}</div>
 
 	<style>
@@ -66,7 +66,7 @@ export component Test() {
 			color: green;
 		}
 	</style>
-}`;
+</>; }`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('&.x {');
@@ -75,7 +75,7 @@ export component Test() {
 
 	it('handles global block with de-nested syntax', () => {
 		const source = `
-export component Test() {
+export function Test() { return <>
 	<div><p>{'content'}</p></div>
 
 	<style>
@@ -91,7 +91,7 @@ export component Test() {
 			}
 		}
 	</style>
-}`;
+</>; }`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('div {');
@@ -101,7 +101,7 @@ export component Test() {
 
 	it('handles global local nested combinations', () => {
 		const source = `
-export component Test() {
+export function Test() { return <>
 	<div>{'content'}</div>
 
 	<style>
@@ -117,7 +117,7 @@ export component Test() {
 			}
 		}
 	</style>
-}`;
+</>; }`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('.whatever {');
@@ -127,7 +127,7 @@ export component Test() {
 
 	it('handles :global with :is and :where pseudoclasses', () => {
 		const source = `
-export component Test() {
+export function Test() { return <>
 	<div>
 		<span>{'content'}</span>
 	</div>
@@ -141,7 +141,7 @@ export component Test() {
 			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,7 +3,7 @@ import { compile } from '@tsrx/ripple';
 describe('CSS :global with pseudo-classes', () => {
 	it('handles :global with :has()', () => {
 		const source = `
-export component Test() {
+export function Test() { return <>
 	<div>
 		<span>{'content'}</span>
 	</div>
@@ -17,7 +17,7 @@ export component Test() {
 			color: blue;
 		}
 	</style>
-}`;
+</>; }`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toMatch(/div\.tsrx-[a-z0-9]+:has\(span\)/);
@@ -26,7 +26,7 @@ export component Test() {
 
 	it('handles :global with :is()', () => {
 		const source = `
-export component Test() {
+export function Test() { return <>
 	<div>
 		<span>{'one'}</span>
 		<p>{'two'}</p>
@@ -41,7 +41,7 @@ export component Test() {
 			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,7 +52,7 @@ export component Test() {
 
 	it('handles :global with :where()', () => {
 		const source = `
-export component Test() {
+export function Test() { return <>
 	<div>
 		<span>{'one'}</span>
 		<p>{'two'}</p>
@@ -67,7 +67,7 @@ export component Test() {
 			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,7 +78,7 @@ export component Test() {
 
 	it('handles :global with :not()', () => {
 		const source = `
-export component Test() {
+export function Test() { return <>
 	<div>
 		<span>{'content'}</span>
 	</div>
@@ -92,7 +92,7 @@ export component Test() {
 			color: blue;
 		}
 	</style>
-}`;
+</>; }`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toMatch(/div\.tsrx-[a-z0-9]+:not\(span\)/);
@@ -101,7 +101,7 @@ export component Test() {
 
 	it('handles nested pseudo-classes with :global', () => {
 		const source = `
-export component Test() {
+export function Test() { return <>
 	<div>
 		<span>{'content'}</span>
 	</div>
@@ -115,7 +115,7 @@ export component Test() {
 			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,7 +124,7 @@ export component Test() {
 
 	it('handles :global with :nth-child and other structural pseudo-classes', () => {
 		const source = `
-export component Test() {
+export function Test() { return <>
 	<div>
 		<span>{'one'}</span>
 		<span>{'two'}</span>
@@ -144,7 +144,7 @@ export component Test() {
 			color: green;
 		}
 	</style>
-}`;
+</>; }`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('span:nth-child(2) {');

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

@@ -3,7 +3,7 @@ import { compile } from '@tsrx/ripple';
 describe('CSS :global scoping verification', () => {
 	it('verifies scoped styles are isolated', () => {
 		const source = `
-export component Test() {
+export function Test() { return <>
 	<div class="scoped">{'content'}</div>
 
 	<style>
@@ -11,7 +11,7 @@ export component Test() {
 			color: red;
 		}
 	</style>
-}`;
+</>; }`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toMatch(/\.scoped\.tsrx-[a-z0-9]+/);
@@ -20,7 +20,7 @@ export component Test() {
 
 	it('verifies :global styles bypass scoping', () => {
 		const source = `
-export component Test() {
+export function Test() { return <>
 	<div class="global">{'content'}</div>
 
 	<style>
@@ -28,7 +28,7 @@ export component Test() {
 			color: red;
 		}
 	</style>
-}`;
+</>; }`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('.global {');
@@ -37,7 +37,7 @@ export component Test() {
 
 	it('verifies mixed local and global maintain proper scoping', () => {
 		const source = `
-export component Test() {
+export function Test() { return <>
 	<div class="outer">
 		<span class="inner">{'content'}</span>
 	</div>
@@ -63,7 +63,7 @@ export component Test() {
 			color: purple;
 		}
 	</style>
-}`;
+</>; }`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toMatch(/\.outer\.tsrx-[a-z0-9]+ {/);
@@ -75,7 +75,7 @@ export component Test() {
 
 	it('verifies :global blocks scope all nested selectors globally', () => {
 		const source = `
-export component Test() {
+export function Test() { return <>
 	<div>
 		<span>
 			<button>{'click'}</button>
@@ -97,7 +97,7 @@ export component Test() {
 			}
 		}
 	</style>
-}`;
+</>; }`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('div {');
@@ -110,7 +110,7 @@ export component Test() {
 
 	it('verifies element selectors are scoped by default', () => {
 		const source = `
-export component Test() {
+export function Test() { return <>
 	<div>
 		<span>
 			<button>{'click'}</button>
@@ -130,7 +130,7 @@ export component Test() {
 			color: green;
 		}
 	</style>
-}`;
+</>; }`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toMatch(/div\.tsrx-[a-z0-9]+/);
@@ -140,7 +140,7 @@ export component Test() {
 
 	it('verifies :global() escapes only the wrapped selector', () => {
 		const source = `
-export component Test() {
+export function Test() { return <>
 	<div class="local">
 		<span class="global">
 			<button class="local">{'click'}</button>
@@ -152,7 +152,7 @@ export component Test() {
 			color: red;
 		}
 	</style>
-}`;
+</>; }`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toMatch(/\.local\.tsrx-[a-z0-9]+ \.global \.local {/);
@@ -161,7 +161,7 @@ export component Test() {
 
 	it('verifies multiple components have different scope hashes', () => {
 		const source1 = `
-export component Test1() {
+export function Test1() { return <>
 	<div class="test">{'one'}</div>
 
 	<style>
@@ -169,9 +169,9 @@ export component Test1() {
 			color: red;
 		}
 	</style>
-}`;
+</>; }`;
 		const source2 = `
-export component Test2() {
+export function Test2() { return <>
 	<div class="test">{'two'}</div>
 
 	<style>
@@ -179,7 +179,7 @@ export component Test2() {
 			color: blue;
 		}
 	</style>
-}`;
+</>; }`;
 		const { css: css1 } = compile(source1, 'test1.tsrx');
 		const { css: css2 } = compile(source2, 'test2.tsrx');
 
@@ -199,7 +199,7 @@ export component Test2() {
 
 	it('verifies :global styles are consistent across components', () => {
 		const source1 = `
-export component Test1() {
+export function Test1() { return <>
 	<div class="global">{'one'}</div>
 
 	<style>
@@ -207,9 +207,9 @@ export component Test1() {
 			color: red;
 		}
 	</style>
-}`;
+</>; }`;
 		const source2 = `
-export component Test2() {
+export function Test2() { return <>
 	<div class="global">{'two'}</div>
 
 	<style>
@@ -217,7 +217,7 @@ export component Test2() {
 			color: blue;
 		}
 	</style>
-}`;
+</>; }`;
 		const { css: css1 } = compile(source1, 'test1.tsrx');
 		const { css: css2 } = compile(source2, 'test2.tsrx');