ripple 0.2.165 → 0.2.167

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

@@ -0,0 +1,124 @@
+import { compile } from 'ripple/compiler';
+
+describe('CSS :global with combinators', () => {
+	it('handles :global with child combinator', () => {
+		const source = `
+export component Test() {
+	<div>
+		<span>{'content'}</span>
+	</div>
+
+	<style>
+		div > :global(span) {
+			color: red;
+		}
+	</style>
+}`;
+		const { css } = compile(source, 'test.ripple');
+
+		expect(css).toMatch(/div\.ripple-[a-z0-9]+ > span {/);
+		expect(css).not.toMatch(/span\.ripple-[a-z0-9]+/);
+	});
+
+	it('handles :global with adjacent sibling combinator', () => {
+		const source = `
+export component Test() {
+	<div>
+		<span>{'one'}</span>
+		<span>{'two'}</span>
+	</div>
+
+	<style>
+		span + :global(span) {
+			color: red;
+		}
+
+		:global(div) + span {
+			color: blue;
+		}
+	</style>
+}`;
+		const { css } = compile(source, 'test.ripple');
+
+		expect(css).toMatch(/span\.ripple-[a-z0-9]+ \+ span {/);
+		expect(css).toContain('(unused) :global(div) + span {');
+	});
+
+	it('handles :global with general sibling combinator', () => {
+		const source = `
+export component Test() {
+	<div>
+		<span>{'one'}</span>
+		<span>{'two'}</span>
+	</div>
+
+	<style>
+		span ~ :global(span) {
+			color: red;
+		}
+
+		:global(div) ~ span {
+			color: blue;
+		}
+	</style>
+}`;
+		const { css } = compile(source, 'test.ripple');
+
+		expect(css).toContain('~');
+
+		expect(css).toMatch(/span\.ripple-[a-z0-9]+ ~ span {/);
+		expect(css).toMatch('(unused) :global(div) ~ span {');
+	});
+
+	it('handles complex combinator chains with :global', () => {
+		const source = `
+export component Test() {
+	<div>
+		<span>
+			<button>{'nested button'}</button>
+		</span>
+		<button>{'sibling button'}</button>
+	</div>
+
+	<style>
+		div > :global(span > button) {
+			color: red;
+		}
+
+		:global(div) > span + button {
+			color: blue;
+		}
+	</style>
+}`;
+		const { css } = compile(source, 'test.ripple');
+
+		expect(css).toMatch(/div\.ripple-[a-z0-9]+ > span > button {/);
+		expect(css).toMatch(/div > span\.ripple-[a-z0-9]+ \+ button:where\(\.ripple-[a-z0-9]+\) {/);
+	});
+
+	it('handles :global with descendant combinator', () => {
+		const source = `
+export component Test() {
+	<div>
+		<span>
+			<button>{'click'}</button>
+		</span>
+	</div>
+
+	<style>
+		div :global(span button) {
+			color: red;
+		}
+
+		:global(div) span button {
+			color: blue;
+		}
+	</style>
+}`;
+
+		const { css } = compile(source, 'test.ripple');
+
+		expect(css).toMatch(/div\.ripple-[a-z0-9]+ span button {/);
+		expect(css).toMatch(/div span\.ripple-[a-z0-9]+ button:where\(\.ripple-[a-z0-9]+\) {/);
+	});
+});

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

@@ -0,0 +1,221 @@
+import { compile } from 'ripple/compiler';
+
+describe('CSS :global with complex nesting', () => {
+	it('handles :global block with nested selectors', () => {
+		const source = `
+export component Test() {
+	<div>
+		<span>
+			<button>{'click'}</button>
+		</span>
+	</div>
+
+	<style>
+		:global {
+			div {
+				span {
+					color: red;
+
+					button {
+						color: blue;
+					}
+				}
+			}
+		}
+	</style>
+}`;
+		const { css } = compile(source, 'test.ripple');
+
+		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('handles local block with :global nested inside', () => {
+		const source = `
+export component Test() {
+	<div>
+		<span>{'content'}</span>
+	</div>
+
+	<style>
+		div {
+			color: red;
+
+			:global(span) {
+				color: blue;
+			}
+
+			p {
+				color: green;
+			}
+		}
+	</style>
+}`;
+		const { css } = compile(source, 'test.ripple');
+
+		expect(css).toMatch(/div\.ripple-[a-z0-9]+ {/);
+		expect(css).not.toMatch(/span\.ripple-[a-z0-9]+ {/);
+		expect(css).toContain('(unused) p {');
+	});
+
+	it('handles :global block with local nested inside', () => {
+		const source = `
+export component Test() {
+	<div>
+		<span>
+			<button>{'click'}</button>
+		</span>
+	</div>
+
+	<style>
+		:global {
+			div {
+				.local {
+					color: red;
+				}
+			}
+		}
+	</style>
+}`;
+		const { css } = compile(source, 'test.ripple');
+
+		expect(css).toContain('div {');
+		expect(css).toContain('.local {');
+		expect(css).not.toMatch(/div\.ripple-[a-z0-9]+ {/);
+		expect(css).not.toMatch(/\.local\.ripple-[a-z0-9]+ {/);
+	});
+
+	it('handles alternating :global and local nesting', () => {
+		const source = `
+export component Test() {
+	<div>
+		<span>
+			<button>
+				<em>{'text'}</em>
+			</button>
+		</span>
+	</div>
+
+	<style>
+		div {
+			:global(span) {
+				button {
+					:global(em) {
+						color: red;
+					}
+				}
+			}
+		}
+	</style>
+}`;
+		const { css } = compile(source, 'test.ripple');
+
+		expect(css).toMatch(/div\.ripple-[a-z0-9]+ {/);
+		expect(css).toMatch(/button\.ripple-[a-z0-9]+ {/);
+		expect(css).toContain('span {');
+		expect(css).toContain('em {');
+	});
+
+	it('handles deeply nested :global blocks', () => {
+		const source = `
+export component Test() {
+	<div>
+		<span>
+			<button>{'click'}</button>
+		</span>
+	</div>
+
+	<style>
+		div {
+			:global {
+				span {
+					:global {
+						button {
+							color: red;
+						}
+					}
+				}
+			}
+		}
+	</style>
+}`;
+		const { css } = compile(source, 'test.ripple');
+
+		expect(css).toMatch(/div\.ripple-[a-z0-9]+ {/);
+		expect(css).toContain('span {');
+		expect(css).toContain('button {');
+		expect(css).not.toMatch(/span\.ripple-[a-z0-9]+/);
+		expect(css).not.toMatch(/button\.ripple-[a-z0-9]+/);
+	});
+
+	it('handles :global with nesting combinator &', () => {
+		const source = `
+export component Test() {
+	<div class="container">
+		<button class="active">{'click'}</button>
+	</div>
+
+	<style>
+		.container {
+			:global {
+				&.active {
+					color: red;
+				}
+			}
+
+			button {
+				:global(&.pressed) {
+					color: blue;
+				}
+			}
+		}
+	</style>
+}`;
+		const { css } = compile(source, 'test.ripple');
+
+		expect(css).toMatch(/\.container\.ripple-[a-z0-9]+ {/);
+		expect(css).toMatch(/button\.ripple-[a-z0-9]+ {/);
+		expect(css).toContain('&.active {');
+		expect(css).toContain('&.pressed {');
+	});
+
+	it('handles complex :global nesting with multiple levels', () => {
+		const source = `
+export component Test() {
+	<div>
+		<nav>
+			<ul>
+				<li>
+					<a href="#">{'link'}</a>
+				</li>
+			</ul>
+		</nav>
+	</div>
+
+	<style>
+		div {
+			:global(nav) {
+				ul {
+					:global(li) {
+						a {
+							color: red;
+						}
+					}
+				}
+			}
+		}
+	</style>
+}`;
+		const { css } = compile(source, 'test.ripple');
+
+		expect(css).toMatch(/div\.ripple-[a-z0-9]+ {/);
+		expect(css).toMatch(/ul\.ripple-[a-z0-9]+ {/);
+		expect(css).toMatch(/a\.ripple-[a-z0-9]+ {/);
+
+		expect(css).toContain('nav {');
+		expect(css).toContain('li {');
+		expect(css).not.toMatch(/nav\.ripple-[a-z0-9]+ {/);
+		expect(css).not.toMatch(/li\.ripple-[a-z0-9]+ {/);
+	});
+});

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

@@ -0,0 +1,200 @@
+import { compile } from 'ripple/compiler';
+
+describe('CSS :global edge cases', () => {
+	it('handles multiple :global selectors in one rule', () => {
+		const source = `
+export component Test() {
+	<div>{'content'}</div>
+
+	<style>
+		:global(div), :global(span), p {
+			color: red;
+		}
+	</style>
+}`;
+		const { css } = compile(source, 'test.ripple');
+
+		expect(css).toContain('div, span ');
+		expect(css).toContain('(unused) p');
+	});
+
+	it('handles :global with attribute selectors', () => {
+		const source = `
+export component 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.ripple');
+
+		expect(css).toContain('[data-test] {');
+		expect(css).toMatch(/div\.ripple-[a-z0-9]+\[data-foo="bar"\]/);
+	});
+
+	it('handles :global with universal selector', () => {
+		const source = `
+export component Test() {
+	<div>{'content'}</div>
+
+	<style>
+		:global(*) {
+			box-sizing: border-box;
+		}
+
+		div :global(*) {
+			margin: 0;
+		}
+	</style>
+}`;
+		const { css } = compile(source, 'test.ripple');
+
+		expect(css).toContain('* {');
+		expect(css).toMatch(/div\.ripple-[a-z0-9]+ \* {/);
+	});
+
+	it('handles :global with ID selectors', () => {
+		const source = `
+export component Test() {
+	<div id="test">{'content'}</div>
+
+	<style>
+		:global(#app) {
+			width: 100%;
+		}
+
+		div :global(#test) {
+			color: red;
+		}
+	</style>
+}`;
+		const { css } = compile(source, 'test.ripple');
+
+		expect(css).toContain('#app {');
+		expect(css).toMatch(/div\.ripple-[a-z0-9]+ #test {/);
+		expect(css).not.toMatch(/#app\.ripple-[a-z0-9]+/);
+		expect(css).not.toMatch(/#test\.ripple-[a-z0-9]+/);
+	});
+
+	it('handles :global with pseudo-elements', () => {
+		const source = `
+export component Test() {
+	<div>{'content'}</div>
+
+	<style>
+		:global(div)::before {
+			content: "before";
+		}
+
+		div :global(span)::after {
+			content: "after";
+		}
+	</style>
+}`;
+		const { css } = compile(source, 'test.ripple');
+
+		expect(css).toContain('div::before {');
+		``;
+		expect(css).toMatch(/div\.ripple-[a-z0-9]+ span::after {/);
+	});
+
+	it('handles empty :global blocks', () => {
+		const source = `
+export component Test() {
+	<div>{'content'}</div>
+
+	<style>
+		div {
+			:global {
+			}
+			color: red;
+		}
+	</style>
+}`;
+		const { css } = compile(source, 'test.ripple');
+
+		expect(css).toContain('color: red');
+		expect(css).toMatch(/div\.ripple-[a-z0-9]+ {/);
+	});
+
+	it('handles :global with complex selector chains', () => {
+		const source = `
+export component 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.ripple');
+
+		expect(css).toMatch(/div\.container > span.wrapper\.ripple-[a-z0-9]+ \+ button\[disabled\] {/);
+		expect(css).toMatch(/\.foo > \.bar span\.ripple-[a-z0-9]+ {/);
+	});
+
+	it('rejects :global in the middle of a selector sequence', () => {
+		const source = `
+export component 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.ripple')).toThrow(
+			':global(...) can be at the start or end of a selector sequence, but not in the middle',
+		);
+	});
+
+	it('handles :global at start and end of selector', () => {
+		const source = `
+export component 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.ripple');
+
+		expect(css).toMatch(/html div\.ripple-[a-z0-9]+ span:where\(\.ripple-[a-z0-9]+\) {/);
+		expect(css).toMatch(/div\.ripple-[a-z0-9]+ span:where\(\.ripple-[a-z0-9]+\) strong {/);
+		expect(css).toMatch(/body div\.ripple-[a-z0-9]+ em {/);
+	});
+});

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

@@ -0,0 +1,101 @@
+import { compile } from 'ripple/compiler';
+
+describe('CSS :global with keyframes', () => {
+	it('handles -global- prefix for keyframes', () => {
+		const source = `
+export component Test() {
+	<div>{'animated'}</div>
+
+	<style>
+		@keyframes -global-foo {
+			0% { opacity: 0; }
+			100% { opacity: 1; }
+		}
+
+		div {
+			animation: foo 1s;
+		}
+	</style>
+}`;
+		const { css } = compile(source, 'test.ripple');
+
+		expect(css).toContain('@keyframes foo');
+		expect(css).not.toContain('-global-foo');
+		expect(css).toContain('animation: foo 1s;');
+	});
+
+	it('handles scoped keyframes without -global- prefix', () => {
+		const source = `
+export component Test() {
+	<div>{'animated'}</div>
+
+	<style>
+		@keyframes foo {
+			0% { opacity: 0; }
+			100% { opacity: 1; }
+		}
+	</style>
+}`;
+		const { css } = compile(source, 'test.ripple');
+
+		expect(css).toMatch(/@keyframes ripple-[a-z0-9]+-foo/);
+	});
+
+	it('handles mix of global and scoped keyframes', () => {
+		const source = `
+export component 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.ripple');
+
+		expect(css).toContain('@keyframes fadeIn');
+		expect(css).not.toContain('-global-fadeIn');
+		expect(css).toMatch(/@keyframes ripple-[a-z0-9]+-slideIn/);
+		expect(css).toMatch(/\.scoped-anim\.ripple-[a-z0-9]+/);
+		expect(css).toMatch(/\.global-anim\.ripple-[a-z0-9]+/);
+	});
+
+	it('handles multiple animations with global keyframes', () => {
+		const source = `
+export component 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.ripple');
+
+		expect(css).toContain('@keyframes foo');
+		expect(css).toContain('@keyframes bar');
+	});
+});