ripple 0.3.68 → 0.3.70

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

@@ -3,7 +3,7 @@ import { compile } from '@tsrx/ripple';
 describe('CSS :global basic tests', () => {
 	it('applies global selector to all elements', () => {
 		const source = `
-export component Test() {
+export function Test() { return <>
 	<div>{'content'}</div>
 
 	<style>
@@ -11,7 +11,7 @@ export component Test() {
 			color: red;
 		}
 	</style>
-}`;
+</>; }`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('div {');
@@ -21,7 +21,7 @@ export component Test() {
 
 	it('applies global selector with class', () => {
 		const source = `
-export component Test() {
+export function Test() { return <>
 	<div class="foo">{'content'}</div>
 
 	<style>
@@ -33,7 +33,7 @@ export component Test() {
 			font-weight: bold;
 		}
 	</style>
-}`;
+</>; }`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('div.foo {');
@@ -43,7 +43,7 @@ export component Test() {
 
 	it('mixes global and local selectors', () => {
 		const source = `
-export component Test() {
+export function Test() { return <>
 	<div>
 		<p class="foo">{'red/bold'}</p>
 	</div>
@@ -57,7 +57,7 @@ export component Test() {
 			font-weight: bold;
 		}
 	</style>
-}`;
+</>; }`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('div .foo');
@@ -67,7 +67,7 @@ export component Test() {
 
 	it('handles global block syntax', () => {
 		const source = `
-export component Test() {
+export function Test() { return <>
 	<div>{'content'}</div>
 
 	<style>
@@ -81,7 +81,7 @@ export component Test() {
 			}
 		}
 	</style>
-}`;
+</>; }`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('.x {');
@@ -91,7 +91,7 @@ export component Test() {
 
 	it('handles global with pseudo-classes', () => {
 		const source = `
-export component Test() {
+export function Test() { return <>
 	<button>{'click'}</button>
 
 	<style>
@@ -103,7 +103,7 @@ export component Test() {
 			outline: none;
 		}
 	</style>
-}`;
+</>; }`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('button:hover {');
@@ -113,7 +113,7 @@ export component Test() {
 
 	it('handles multiple global selectors in selector list', () => {
 		const source = `
-export component Test() {
+export function Test() { return <>
 	<div>{'content'}</div>
 
 	<style>
@@ -123,7 +123,7 @@ export component Test() {
 			padding: 0;
 		}
 	</style>
-}`;
+</>; }`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('html,');
@@ -132,7 +132,7 @@ export component Test() {
 
 	it('scopes local selectors while keeping globals unscoped', () => {
 		const source = `
-export component Test() {
+export function Test() { return <>
 	<div class="styled-container">
 				<h1>{'Styled heading'}</h1>
 				<p class="text">{'Styled paragraph'}</p>
@@ -154,7 +154,7 @@ export component Test() {
 			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,7 +3,7 @@ import { compile } from '@tsrx/ripple';
 describe('CSS :global with classes and IDs', () => {
 	it('handles :global with single class', () => {
 		const source = `
-export component Test() {
+export function Test() { return <>
 	<div class="foo">{'content'}</div>
 
 	<style>
@@ -11,7 +11,7 @@ export component Test() {
 			color: red;
 		}
 	</style>
-}`;
+</>; }`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('.foo {');
@@ -20,7 +20,7 @@ export component Test() {
 
 	it('handles :global with chained classes', () => {
 		const source = `
-export component Test() {
+export function Test() { return <>
 	<div class="foo bar">{'content'}</div>
 
 	<style>
@@ -36,7 +36,7 @@ export component Test() {
 			color: green;
 		}
 	</style>
-}`;
+</>; }`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('.foo.bar {');
@@ -46,7 +46,7 @@ export component Test() {
 
 	it('handles local class inside :global selector', () => {
 		const source = `
-export component Test() {
+export function Test() { return <>
 	<div class="outer">
 		<span class="inner">{'content'}</span>
 	</div>
@@ -60,7 +60,7 @@ export component Test() {
 			color: blue;
 		}
 	</style>
-}`;
+</>; }`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toMatch(/\.outer \.inner\.tsrx-[a-z0-9]+ {/);
@@ -69,7 +69,7 @@ export component Test() {
 
 	it('handles :global with ID selectors', () => {
 		const source = `
-export component Test() {
+export function Test() { return <>
 	<div id="app">
 		<div id="content">{'text'}</div>
 	</div>
@@ -87,7 +87,7 @@ export component Test() {
 			margin: 0;
 		}
 	</style>
-}`;
+</>; }`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('#app {');
@@ -98,7 +98,7 @@ export component Test() {
 
 	it('handles :global with class and ID combination', () => {
 		const source = `
-export component Test() {
+export function Test() { return <>
 	<div id="app" class="container">{'content'}</div>
 
 	<style>
@@ -114,7 +114,7 @@ export component Test() {
 			color: green;
 		}
 	</style>
-}`;
+</>; }`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('#app.container {');
@@ -124,7 +124,7 @@ export component Test() {
 
 	it('handles multiple classes with :global', () => {
 		const source = `
-export component Test() {
+export function Test() { return <>
 	<div class="a b c">{'content'}</div>
 
 	<style>
@@ -140,7 +140,7 @@ export component Test() {
 			color: green;
 		}
 	</style>
-}`;
+</>; }`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect((css.match(/\.a\.b\.c\.tsrx-[a-z0-9]+ {/g) || []).length).toBe(2);
@@ -149,7 +149,7 @@ export component Test() {
 
 	it('handles :global with class descendant selectors', () => {
 		const source = `
-export component Test() {
+export function Test() { return <>
 	<div class="outer">
 		<div class="middle">
 			<div class="inner">{'content'}</div>
@@ -169,7 +169,7 @@ export component Test() {
 			color: green;
 		}
 	</style>
-}`;
+</>; }`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toMatch(/\.outer \.middle\.tsrx-[a-z0-9]+ \.inner:where\(\.tsrx-[a-z0-9]+\)/);

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

@@ -3,7 +3,7 @@ import { compile } from '@tsrx/ripple';
 describe('CSS :global with combinators', () => {
 	it('handles :global with child combinator', () => {
 		const source = `
-export component Test() {
+export function Test() { return <>
 	<div>
 		<span>{'content'}</span>
 	</div>
@@ -13,7 +13,7 @@ export component Test() {
 			color: red;
 		}
 	</style>
-}`;
+</>; }`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toMatch(/div\.tsrx-[a-z0-9]+ > span {/);
@@ -22,7 +22,7 @@ export component Test() {
 
 	it('handles :global with adjacent sibling combinator', () => {
 		const source = `
-export component Test() {
+export function Test() { return <>
 	<div>
 		<span>{'one'}</span>
 		<span>{'two'}</span>
@@ -37,7 +37,7 @@ export component Test() {
 			color: blue;
 		}
 	</style>
-}`;
+</>; }`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toMatch(/span\.tsrx-[a-z0-9]+ \+ span {/);
@@ -46,7 +46,7 @@ export component Test() {
 
 	it('handles :global with general sibling combinator', () => {
 		const source = `
-export component Test() {
+export function Test() { return <>
 	<div>
 		<span>{'one'}</span>
 		<span>{'two'}</span>
@@ -61,7 +61,7 @@ export component Test() {
 			color: blue;
 		}
 	</style>
-}`;
+</>; }`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('~');
@@ -72,7 +72,7 @@ export component Test() {
 
 	it('handles complex combinator chains with :global', () => {
 		const source = `
-export component Test() {
+export function Test() { return <>
 	<div>
 		<span>
 			<button>{'nested button'}</button>
@@ -89,7 +89,7 @@ export component Test() {
 			color: blue;
 		}
 	</style>
-}`;
+</>; }`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toMatch(/div\.tsrx-[a-z0-9]+ > span > button {/);
@@ -98,7 +98,7 @@ export component Test() {
 
 	it('handles :global with descendant combinator', () => {
 		const source = `
-export component Test() {
+export function Test() { return <>
 	<div>
 		<span>
 			<button>{'click'}</button>
@@ -114,7 +114,7 @@ export component Test() {
 			color: blue;
 		}
 	</style>
-}`;
+</>; }`;
 
 		const { css } = compile(source, 'test.tsrx');
 

package/tests/client/css/global-complex-nesting.test.tsrx

@@ -3,7 +3,7 @@ import { compile } from '@tsrx/ripple';
 describe('CSS :global with complex nesting', () => {
 	it('handles :global block with nested selectors', () => {
 		const source = `
-export component Test() {
+export function Test() { return <>
 	<div>
 		<span>
 			<button>{'click'}</button>
@@ -23,7 +23,7 @@ export component Test() {
 			}
 		}
 	</style>
-}`;
+</>; }`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).not.toMatch(/div\.tsrx-[a-z0-9]+ {/);
@@ -33,7 +33,7 @@ export component Test() {
 
 	it('handles local block with :global nested inside', () => {
 		const source = `
-export component Test() {
+export function Test() { return <>
 	<div>
 		<span>{'content'}</span>
 	</div>
@@ -51,7 +51,7 @@ export component Test() {
 			}
 		}
 	</style>
-}`;
+</>; }`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toMatch(/div\.tsrx-[a-z0-9]+ {/);
@@ -61,7 +61,7 @@ export component Test() {
 
 	it('handles :global block with local nested inside', () => {
 		const source = `
-export component Test() {
+export function Test() { return <>
 	<div>
 		<span>
 			<button>{'click'}</button>
@@ -77,7 +77,7 @@ export component Test() {
 			}
 		}
 	</style>
-}`;
+</>; }`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('div {');
@@ -88,7 +88,7 @@ export component Test() {
 
 	it('handles alternating :global and local nesting', () => {
 		const source = `
-export component Test() {
+export function Test() { return <>
 	<div>
 		<span>
 			<button>
@@ -108,7 +108,7 @@ export component Test() {
 			}
 		}
 	</style>
-}`;
+</>; }`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toMatch(/div\.tsrx-[a-z0-9]+ {/);
@@ -119,7 +119,7 @@ export component Test() {
 
 	it('handles deeply nested :global blocks', () => {
 		const source = `
-export component Test() {
+export function Test() { return <>
 	<div>
 		<span>
 			<button>{'click'}</button>
@@ -139,7 +139,7 @@ export component Test() {
 			}
 		}
 	</style>
-}`;
+</>; }`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toMatch(/div\.tsrx-[a-z0-9]+ {/);
@@ -151,7 +151,7 @@ export component Test() {
 
 	it('handles :global with nesting combinator &', () => {
 		const source = `
-export component Test() {
+export function Test() { return <>
 	<div class="container">
 		<button class="active">{'click'}</button>
 	</div>
@@ -171,7 +171,7 @@ export component Test() {
 			}
 		}
 	</style>
-}`;
+</>; }`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toMatch(/\.container\.tsrx-[a-z0-9]+ {/);
@@ -182,7 +182,7 @@ export component Test() {
 
 	it('handles complex :global nesting with multiple levels', () => {
 		const source = `
-export component Test() {
+export function Test() { return <>
 	<div>
 		<nav>
 			<ul>
@@ -206,7 +206,7 @@ export component Test() {
 			}
 		}
 	</style>
-}`;
+</>; }`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toMatch(/div\.tsrx-[a-z0-9]+ {/);

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

@@ -3,7 +3,7 @@ import { compile } from '@tsrx/ripple';
 describe('CSS :global edge cases', () => {
 	it('handles multiple :global selectors in one rule', () => {
 		const source = `
-export component Test() {
+export function Test() { return <>
 	<div>{'content'}</div>
 
 	<style>
@@ -11,7 +11,7 @@ export component Test() {
 			color: red;
 		}
 	</style>
-}`;
+</>; }`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('div, span ');
@@ -20,7 +20,7 @@ export component Test() {
 
 	it('handles :global with attribute selectors', () => {
 		const source = `
-export component Test() {
+export function Test() { return <>
 	<div data-test="value">{'content'}</div>
 
 	<style>
@@ -32,7 +32,7 @@ export component Test() {
 			color: blue;
 		}
 	</style>
-}`;
+</>; }`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('[data-test] {');
@@ -41,7 +41,7 @@ export component Test() {
 
 	it('handles :global with universal selector', () => {
 		const source = `
-export component Test() {
+export function Test() { return <>
 	<div>{'content'}</div>
 
 	<style>
@@ -53,7 +53,7 @@ export component Test() {
 			margin: 0;
 		}
 	</style>
-}`;
+</>; }`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('* {');
@@ -62,7 +62,7 @@ export component Test() {
 
 	it('handles :global with ID selectors', () => {
 		const source = `
-export component Test() {
+export function Test() { return <>
 	<div id="test">{'content'}</div>
 
 	<style>
@@ -74,7 +74,7 @@ export component Test() {
 			color: red;
 		}
 	</style>
-}`;
+</>; }`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('#app {');
@@ -85,7 +85,7 @@ export component Test() {
 
 	it('handles :global with pseudo-elements', () => {
 		const source = `
-export component Test() {
+export function Test() { return <>
 	<div>{'content'}</div>
 
 	<style>
@@ -97,7 +97,7 @@ export component Test() {
 			content: "after";
 		}
 	</style>
-}`;
+</>; }`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('div::before {');
@@ -107,7 +107,7 @@ export component Test() {
 
 	it('handles empty :global blocks', () => {
 		const source = `
-export component Test() {
+export function Test() { return <>
 	<div>{'content'}</div>
 
 	<style>
@@ -117,7 +117,7 @@ export component Test() {
 			color: red;
 		}
 	</style>
-}`;
+</>; }`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('color: red');
@@ -126,7 +126,7 @@ export component Test() {
 
 	it('handles :global with complex selector chains', () => {
 		const source = `
-export component Test() {
+export function Test() { return <>
 	<div class="container">
 		<span class="wrapper foo">
 			<button class="bar"><span>{'click'}</span></button>
@@ -142,7 +142,7 @@ export component Test() {
 			color: blue;
 		}
 	</style>
-}`;
+</>; }`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toMatch(/div\.container > span.wrapper\.tsrx-[a-z0-9]+ \+ button\[disabled\] {/);
@@ -151,7 +151,7 @@ export component Test() {
 
 	it('rejects :global in the middle of a selector sequence', () => {
 		const source = `
-export component Test() {
+export function Test() { return <>
 	<div>
 		<span class="foo">
 			<button class="bar">{'click'}</button>
@@ -163,7 +163,7 @@ export component Test() {
 			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,7 +172,7 @@ export component Test() {
 
 	it('handles :global at start and end of selector', () => {
 		const source = `
-export component Test() {
+export function Test() { return <>
 	<div>
 		<span>{'content'}</span>
 	</div>
@@ -190,7 +190,7 @@ export component Test() {
 			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,7 +3,7 @@ import { compile } from '@tsrx/ripple';
 describe('CSS :global with keyframes', () => {
 	it('handles -global- prefix for keyframes', () => {
 		const source = `
-export component Test() {
+export function Test() { return <>
 	<div>{'animated'}</div>
 
 	<style>
@@ -16,7 +16,7 @@ export component Test() {
 			animation: foo 1s;
 		}
 	</style>
-}`;
+</>; }`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('@keyframes foo');
@@ -26,7 +26,7 @@ export component Test() {
 
 	it('handles scoped keyframes without -global- prefix', () => {
 		const source = `
-export component Test() {
+export function Test() { return <>
 	<div>{'animated'}</div>
 
 	<style>
@@ -35,7 +35,7 @@ export component Test() {
 			100% { opacity: 1; }
 		}
 	</style>
-}`;
+</>; }`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toMatch(/@keyframes tsrx-[a-z0-9]+-foo/);
@@ -43,7 +43,7 @@ export component Test() {
 
 	it('handles mix of global and scoped keyframes', () => {
 		const source = `
-export component Test() {
+export function Test() { return <>
 	<div class="global-anim">{'one'}</div>
 	<div class="scoped-anim">{'two'}</div>
 
@@ -66,7 +66,7 @@ export component Test() {
 			animation: slideIn 1s;
 		}
 	</style>
-}`;
+</>; }`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('@keyframes fadeIn');
@@ -78,7 +78,7 @@ export component Test() {
 
 	it('handles multiple animations with global keyframes', () => {
 		const source = `
-export component Test() {
+export function Test() { return <>
 	<div>{'animated'}</div>
 
 	<style>
@@ -92,7 +92,7 @@ export component Test() {
 			100% { transform: scale(1); }
 		}
 	</style>
-}`;
+</>; }`;
 		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('@keyframes foo');
@@ -101,7 +101,7 @@ export component Test() {
 
 	it('handles animation property referencing keyframes (not marking as unused)', () => {
 		const source = `
-export component Parent() {
+export function Parent() { return <>
 	<div class="parent">
 		<Child />
 	</div>
@@ -123,9 +123,9 @@ export component Parent() {
 			animation: slideIn 1s;
 		}
 	</style>
-}
+</>; }
 
-component Child() {
+function Child() { return <>
 	<div class="child">{'Child content'}</div>
 
 	<style>
@@ -133,7 +133,7 @@ component Child() {
 			animation: fadeIn 3s; /* Uses global fadeIn from Parent */
 		}
 	</style>
-}`;
+</>; }`;
 		const { css } = compile(source, 'test.tsrx');
 
 		// Parent should have scoped slideIn and global fadeIn