ripple 0.2.165 → 0.2.167

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

@@ -0,0 +1,150 @@
+import { compile } from 'ripple/compiler';
+
+describe('CSS :global nested blocks', () => {
+	it('handles nested global blocks', () => {
+		const source = `
+export component Test() {
+	<div>
+		<p>{'content'}</p>
+	</div>
+
+	<style>
+		div {
+			:global {
+				.x {
+					color: green;
+				}
+			}
+
+			:global(.x) {
+				color: green;
+			}
+
+			p :global {
+				.y {
+					color: green;
+				}
+			}
+
+			p :global(.y) {
+				color: green;
+			}
+		}
+	</style>
+}`;
+		const { css } = compile(source, 'test.ripple');
+
+		expect(css).toMatch(/div\.ripple-[a-z0-9]+ {/);
+		expect(css).toContain('.x {');
+		expect(css).toContain('.y {');
+		expect(css).not.toMatch(/\.x\.ripple-[a-z0-9]+/);
+		expect(css).not.toMatch(/\.y\.ripple-[a-z0-9]+/);
+		expect(css).toMatch(/p\.ripple-[a-z0-9]+ \.y {/);
+	});
+
+	it('handles :global with nesting selector', () => {
+		const source = `
+export component Test() {
+	<div class="x">{'content'}</div>
+
+	<style>
+		div {
+			:global {
+				&.x {
+					color: green;
+				}
+			}
+		}
+
+		div :global {
+			&.x {
+				color: green;
+			}
+		}
+
+		div :global.x {
+			color: green;
+		}
+	</style>
+}`;
+		const { css } = compile(source, 'test.ripple');
+
+		expect(css).toContain('&.x {');
+		expect(css).toMatch(/div\.ripple-[a-z0-9]+\.x {/);
+	});
+
+	it('handles global block with de-nested syntax', () => {
+		const source = `
+export component Test() {
+	<div><p>{'content'}</p></div>
+
+	<style>
+		:global div {
+			.y {
+				color: green;
+			}
+		}
+
+		div :global p {
+			.y {
+				color: green;
+			}
+		}
+	</style>
+}`;
+		const { css } = compile(source, 'test.ripple');
+
+		expect(css).toContain('div {');
+		expect(css).toContain('.y {');
+		expect(css).toMatch(/div\.ripple-[a-z0-9]+ p {/);
+	});
+
+	it('handles global local nested combinations', () => {
+		const source = `
+export component Test() {
+	<div>{'content'}</div>
+
+	<style>
+		div {
+			:global(.whatever) {
+				color: green;
+			}
+		}
+
+		:global(.whatever) {
+			div {
+				color: green;
+			}
+		}
+	</style>
+}`;
+		const { css } = compile(source, 'test.ripple');
+
+		expect(css).toContain('.whatever {');
+		expect(css).not.toMatch(/\.whatever\.ripple-[a-z0-9]+ {/);
+		expect(css).toMatch(/div\.ripple-[a-z0-9]+ {/);
+	});
+
+	it('handles :global with :is and :where pseudoclasses', () => {
+		const source = `
+export component Test() {
+	<div>
+		<span>{'content'}</span>
+	</div>
+
+	<style>
+		div :global(:is(span)) {
+			color: green;
+		}
+
+		:global(.foo) :is(div) {
+			color: green;
+		}
+	</style>
+}`;
+		const { css } = compile(source, 'test.ripple');
+
+		expect(css).toMatch(/div\.ripple-[a-z0-9]+ :is\(span\) {/);
+		expect(css).toMatch(/\.foo :is\(div\.ripple-[a-z0-9]+\) {/);
+	});
+});

package/tests/client/css/global-pseudo.test.ripple

@@ -0,0 +1,155 @@
+import { compile } from 'ripple/compiler';
+
+describe('CSS :global with pseudo-classes', () => {
+	it('handles :global with :has()', () => {
+		const source = `
+export component Test() {
+	<div>
+		<span>{'content'}</span>
+	</div>
+
+	<style>
+		div:has(:global(span)) {
+			color: red;
+		}
+
+		:global(div:has(span)) {
+			color: blue;
+		}
+	</style>
+}`;
+		const { css } = compile(source, 'test.ripple');
+
+		expect(css).toMatch(/div\.ripple-[a-z0-9]+:has\(span\)/);
+		expect(css).toContain('div:has(span)');
+	});
+
+	it('handles :global with :is()', () => {
+		const source = `
+export component Test() {
+	<div>
+		<span>{'one'}</span>
+		<p>{'two'}</p>
+	</div>
+
+	<style>
+		div :is(:global(span), p) {
+			color: red;
+		}
+
+		:global(div:is(.foo, .bar)) {
+			color: blue;
+		}
+	</style>
+}`;
+		const { css } = compile(source, 'test.ripple');
+
+		expect(css).toMatch(/div\.ripple-[a-z0-9]+ :is\(span, p:where\(\.ripple-[a-z0-9]+\)\) {/);
+		expect(css).not.toMatch(/span:where/);
+		expect(css).not.toMatch(/span\.ripple/);
+		expect(css).toContain('div:is(.foo, .bar)');
+	});
+
+	it('handles :global with :where()', () => {
+		const source = `
+export component Test() {
+	<div>
+		<span>{'one'}</span>
+		<p>{'two'}</p>
+	</div>
+
+	<style>
+		div :where(:global(span), p) {
+			color: red;
+		}
+
+		:global(div:where(.foo, .bar)) {
+			color: blue;
+		}
+	</style>
+}`;
+		const { css } = compile(source, 'test.ripple');
+
+		expect(css).toMatch(/div\.ripple-[a-z0-9]+ :where\(span, p:where\(\.ripple-[a-z0-9]+\)\) {/);
+		expect(css).not.toMatch(/span:where/);
+		expect(css).not.toMatch(/span\.ripple/);
+		expect(css).toContain('div:where(.foo, .bar)');
+	});
+
+	it('handles :global with :not()', () => {
+		const source = `
+export component Test() {
+	<div>
+		<span>{'content'}</span>
+	</div>
+
+	<style>
+		div:not(:global(span)) {
+			color: red;
+		}
+
+		:global(div:not(.foo)) {
+			color: blue;
+		}
+	</style>
+}`;
+		const { css } = compile(source, 'test.ripple');
+
+		expect(css).toMatch(/div\.ripple-[a-z0-9]+:not\(span\)/);
+		expect(css).toContain('div:not(.foo)');
+	});
+
+	it('handles nested pseudo-classes with :global', () => {
+		const source = `
+export component Test() {
+	<div>
+		<span>{'content'}</span>
+	</div>
+
+	<style>
+		div:is(:has(:global(span))) {
+			color: red;
+		}
+
+		:global(div:where(:is(.foo))) {
+			color: blue;
+		}
+	</style>
+}`;
+		const { css } = compile(source, 'test.ripple');
+
+		expect(css).toMatch(/div\.ripple-[a-z0-9]+:is\(:where\(\.ripple-[a-z0-9]+\):has\(span\)\) {/);
+		expect(css).toContain('div:where(:is(.foo))');
+	});
+
+	it('handles :global with :nth-child and other structural pseudo-classes', () => {
+		const source = `
+export component Test() {
+	<div>
+		<span>{'one'}</span>
+		<span>{'two'}</span>
+		<span>{'three'}</span>
+	</div>
+
+	<style>
+		:global(span):nth-child(2) {
+			color: red;
+		}
+
+		div > :global(span:first-child) {
+			color: blue;
+		}
+
+		:global(div):last-child {
+			color: green;
+		}
+	</style>
+}`;
+		const { css } = compile(source, 'test.ripple');
+
+		expect(css).toContain('span:nth-child(2) {');
+		expect(css).toMatch(/div\.ripple-[a-z0-9]+ > span:first-child {/);
+		expect(css).toContain('div:last-child {');
+		expect(css).not.toMatch(/span\.ripple-[a-z0-9]+:nth-child/);
+	});
+});

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

@@ -0,0 +1,229 @@
+import { compile } from 'ripple/compiler';
+
+describe('CSS :global scoping verification', () => {
+	it('verifies scoped styles are isolated', () => {
+		const source = `
+export component Test() {
+	<div class="scoped">{'content'}</div>
+
+	<style>
+		.scoped {
+			color: red;
+		}
+	</style>
+}`;
+		const { css } = compile(source, 'test.ripple');
+
+		expect(css).toMatch(/\.scoped\.ripple-[a-z0-9]+/);
+		expect(css).not.toContain('.scoped {');
+	});
+
+	it('verifies :global styles bypass scoping', () => {
+		const source = `
+export component Test() {
+	<div class="global">{'content'}</div>
+
+	<style>
+		:global(.global) {
+			color: red;
+		}
+	</style>
+}`;
+		const { css } = compile(source, 'test.ripple');
+
+		expect(css).toContain('.global {');
+		expect(css).not.toMatch(/\.global\.ripple-[a-z0-9]+/);
+	});
+
+	it('verifies mixed local and global maintain proper scoping', () => {
+		const source = `
+export component Test() {
+	<div class="outer">
+		<span class="inner">{'content'}</span>
+	</div>
+
+	<style>
+		.outer {
+			color: red;
+		}
+
+		:global(.outer) {
+			color: blue;
+		}
+
+		.outer .inner {
+			color: green;
+		}
+
+		:global(.outer) .inner {
+			color: yellow;
+		}
+
+		.outer :global(.inner) {
+			color: purple;
+		}
+	</style>
+}`;
+		const { css } = compile(source, 'test.ripple');
+
+		expect(css).toMatch(/\.outer\.ripple-[a-z0-9]+ {/);
+		expect(css).toMatch(/\.outer {/);
+		expect(css).toMatch(/\.outer\.ripple-[a-z0-9]+ \.inner:where\(\.ripple-[a-z0-9]+\) {/);
+		expect(css).toMatch(/\.outer \.inner\.ripple-[a-z0-9]+/);
+		expect(css).toMatch(/\.outer\.ripple-[a-z0-9]+ \.inner {/);
+	});
+
+	it('verifies :global blocks scope all nested selectors globally', () => {
+		const source = `
+export component Test() {
+	<div>
+		<span>
+			<button>{'click'}</button>
+		</span>
+	</div>
+
+	<style>
+		:global {
+			div {
+				color: red;
+			}
+
+			span {
+				color: blue;
+			}
+
+			button {
+				color: green;
+			}
+		}
+	</style>
+}`;
+		const { css } = compile(source, 'test.ripple');
+
+		expect(css).toContain('div {');
+		expect(css).toContain('span {');
+		expect(css).toContain('button {');
+		expect(css).not.toMatch(/div\.ripple-[a-z0-9]+/);
+		expect(css).not.toMatch(/span\.ripple-[a-z0-9]+/);
+		expect(css).not.toMatch(/button\.ripple-[a-z0-9]+/);
+	});
+
+	it('verifies element selectors are scoped by default', () => {
+		const source = `
+export component Test() {
+	<div>
+		<span>
+			<button>{'click'}</button>
+		</span>
+	</div>
+
+	<style>
+		div {
+			color: red;
+		}
+
+		span {
+			color: blue;
+		}
+
+		button {
+			color: green;
+		}
+	</style>
+}`;
+		const { css } = compile(source, 'test.ripple');
+
+		expect(css).toMatch(/div\.ripple-[a-z0-9]+/);
+		expect(css).toMatch(/span\.ripple-[a-z0-9]+/);
+		expect(css).toMatch(/button\.ripple-[a-z0-9]+/);
+	});
+
+	it('verifies :global() escapes only the wrapped selector', () => {
+		const source = `
+export component Test() {
+	<div class="local">
+		<span class="global">
+			<button class="local">{'click'}</button>
+		</span>
+	</div>
+
+	<style>
+		.local :global(.global .local) {
+			color: red;
+		}
+	</style>
+}`;
+		const { css } = compile(source, 'test.ripple');
+
+		expect(css).toMatch(/\.local\.ripple-[a-z0-9]+ \.global \.local {/);
+		expect(css).not.toMatch(/\.global\.ripple-[a-z0-9]+/);
+	});
+
+	it('verifies multiple components have different scope hashes', () => {
+		const source1 = `
+export component Test1() {
+	<div class="test">{'one'}</div>
+
+	<style>
+		.test {
+			color: red;
+		}
+	</style>
+}`;
+		const source2 = `
+export component Test2() {
+	<div class="test">{'two'}</div>
+
+	<style>
+		.test {
+			color: blue;
+		}
+	</style>
+}`;
+		const { css: css1 } = compile(source1, 'test1.ripple');
+		const { css: css2 } = compile(source2, 'test2.ripple');
+
+		expect(css1).toMatch(/\.test\.ripple-[a-z0-9]+/);
+		expect(css2).toMatch(/\.test\.ripple-[a-z0-9]+/);
+
+		const hash1Match = css1.match(/\.test\.ripple-([a-z0-9]+)/);
+		const hash2Match = css2.match(/\.test\.ripple-([a-z0-9]+)/);
+
+		expect(hash1Match).toBeTruthy();
+		expect(hash2Match).toBeTruthy();
+
+		if (hash1Match && hash2Match) {
+			expect(hash1Match[1]).not.toBe(hash2Match[1]);
+		}
+	});
+
+	it('verifies :global styles are consistent across components', () => {
+		const source1 = `
+export component Test1() {
+	<div class="global">{'one'}</div>
+
+	<style>
+		:global(.global) {
+			color: red;
+		}
+	</style>
+}`;
+		const source2 = `
+export component Test2() {
+	<div class="global">{'two'}</div>
+
+	<style>
+		:global(.global) {
+			color: blue;
+		}
+	</style>
+}`;
+		const { css: css1 } = compile(source1, 'test1.ripple');
+		const { css: css2 } = compile(source2, 'test2.ripple');
+
+		expect(css1).toContain('.global {');
+		expect(css1).not.toMatch(/\.global\.ripple-[a-z0-9]+/);
+		expect(css2).toContain('.global {');
+		expect(css2).not.toMatch(/\.global\.ripple-[a-z0-9]+/);
+	});
+});

package/tests/client/dynamic-elements.test.ripple

@@ -279,7 +279,6 @@ describe('dynamic DOM elements', () => {
 
 		const element = container.querySelector('div');
 		expect(element).toBeTruthy();
-		console.log(element);
 		expect(element.classList.contains('test-class')).toBe(true);
 
 		// Check if scoped CSS class is present - THIS MIGHT FAIL if CSS pruning issue exists

package/tests/server/streaming-ssr.test.ripple

@@ -42,12 +42,15 @@ test('renderToStream handles async components', async ({ expect }) => {
 test('renderToStream handles await blocks with pending state', async ({ expect }) => {
 	component AwaitComponent() {
 		let data = 'initial';
-		  await new Promise((resolve) => setTimeout(() => {
-        data = 'resolved';
-		    resolve('');
-      }, 20));
+		await new Promise((resolve) => setTimeout(() => {
+			data = 'resolved';
+			resolve('');
+		}, 20));
 		try {
-			<div>{'Data: '}{data}</div>
+			<div>
+				{'Data: '}
+				{data}
+			</div>
 		} pending {
 			<div>{'Loading...'}</div>
 		}
@@ -62,6 +65,6 @@ test('renderToStream handles await blocks with pending state', async ({ expect }
 		});
 		stream.on('end', resolve);
 	});
-	console.log(result)
+
 	expect(result).toBe('<div>Loading...</div><div>Data: resolved</div>');
 });