ripple 0.2.165 → 0.2.167

package/tests/client/css/global-advanced-selectors.test.ripple

@@ -0,0 +1,229 @@
+import { compile } from 'ripple/compiler';
+
+describe('CSS :global with advanced selectors', () => {
+	it('handles :global with ::slotted()', () => {
+		const source = `
+export component Test() {
+	<div>
+		<slot />
+	</div>
+
+	<style>
+		:global(::slotted(*)) {
+			color: red;
+		}
+
+		div :global(::slotted(span)) {
+			color: blue;
+		}
+	</style>
+}`;
+		const { css } = compile(source, 'test.ripple');
+
+		expect(css).toMatch(/div\.ripple-[a-z0-9]+ ::slotted\(span\) {/);
+		expect(css).toContain('::slotted(*) {');
+	});
+
+	it('handles :global with ::part()', () => {
+		const source = `
+export component Test() {
+	<div>{'content'}</div>
+
+	<style>
+		:global(::part(button)) {
+			color: red;
+		}
+
+		div :global(::part(input)) {
+			border: 1px solid blue;
+		}
+	</style>
+}`;
+		const { css } = compile(source, 'test.ripple');
+
+		expect(css).toMatch(/div\.ripple-[a-z0-9]+ ::part\(input\) {/);
+		expect(css).toContain('::part(button) {');
+	});
+
+	it('handles :global with :host and :host-context', () => {
+		const source = `
+export component Test() {
+	<div>{'content'}</div>
+
+	<style>
+		:global(:host) {
+			display: block;
+		}
+
+		:global(:host(.active)) {
+			color: red;
+		}
+
+		:global(:host-context(.dark)) {
+			background: black;
+		}
+	</style>
+}`;
+		const { css } = compile(source, 'test.ripple');
+
+		expect(css).toContain(':host {');
+		expect(css).toContain(':host(.active) {');
+		expect(css).toContain(':host-context(.dark) {');
+	});
+
+	it('handles :global with complex :nth-* selectors', () => {
+		const source = `
+export component Test() {
+	<div>
+		<span>{'one'}</span>
+		<span>{'two'}</span>
+		<span>{'three'}</span>
+	</div>
+
+	<style>
+		:global(span:nth-child(odd)) {
+			color: red;
+		}
+
+		:global(span:nth-last-child(2)) {
+			color: blue;
+		}
+
+		:global(div:nth-of-type(3n+1)) {
+			margin-top: 10px;
+		}
+	</style>
+}`;
+		const { css } = compile(source, 'test.ripple');
+
+		expect(css).toContain('span:nth-child(odd) {');
+		expect(css).toContain('span:nth-last-child(2) {');
+		expect(css).toContain('div:nth-of-type(3n+1) {');
+	});
+
+	it('handles :global with language and directional pseudo-classes', () => {
+		const source = `
+export component Test() {
+	<div>{'content'}</div>
+
+	<style>
+		:global(:lang(en)) {
+			quotes: '"' '"';
+		}
+
+		:global(:dir(rtl)) {
+			direction: rtl;
+		}
+
+		:global(div:lang(fr)) {
+			quotes: '«' '»';
+		}
+	</style>
+}`;
+		const { css } = compile(source, 'test.ripple');
+
+		expect(css).toContain(':lang(en) {');
+		expect(css).toContain(':dir(rtl) {');
+		expect(css).toContain('div:lang(fr) {');
+	});
+
+	it('handles :global with :focus-within and :focus-visible', () => {
+		const source = `
+export component Test() {
+	<div>
+		<input type="text" />
+	</div>
+
+	<style>
+		:global(div:focus-within) {
+			border: 2px solid blue;
+		}
+
+		:global(input:focus-visible) {
+			outline: 2px solid red;
+		}
+	</style>
+}`;
+		const { css } = compile(source, 'test.ripple');
+
+		expect(css).toContain('div:focus-within {');
+		expect(css).toContain('input:focus-visible {');
+	});
+
+	it('handles :global with :any-link, :target, :scope', () => {
+		const source = `
+export component Test() {
+	<div>
+		<a href="#">{'link'}</a>
+	</div>
+
+	<style>
+		:global(:any-link) {
+			color: blue;
+		}
+
+		:global(:target) {
+			background: yellow;
+		}
+
+		:global(:scope) {
+			border: 1px solid black;
+		}
+	</style>
+}`;
+		const { css } = compile(source, 'test.ripple');
+
+		expect(css).toContain(':any-link {');
+		expect(css).toContain(':target {');
+		expect(css).toContain(':scope {');
+	});
+
+	it('handles :global with form-related pseudo-classes', () => {
+		const source = `
+export component Test() {
+	<form>
+		<input type="text" required />
+		<input type="checkbox" checked />
+	</form>
+
+	<style>
+		:global(input:required) {
+			border-color: red;
+		}
+
+		:global(input:optional) {
+			border-color: gray;
+		}
+
+		:global(input:checked) {
+			background: blue;
+		}
+
+		:global(input:disabled) {
+			opacity: 0.5;
+		}
+
+		:global(input:read-only) {
+			background: lightgray;
+		}
+
+		:global(input:valid) {
+			border-color: green;
+		}
+
+		:global(input:invalid) {
+			border-color: red;
+		}
+	</style>
+}`;
+		const { css } = compile(source, 'test.ripple');
+
+		expect(css).toContain('input:required {');
+		expect(css).toContain('input:optional {');
+		expect(css).toContain('input:checked {');
+		expect(css).toContain('input:disabled {');
+		expect(css).toContain('input:read-only {');
+		expect(css).toContain('input:valid {');
+		expect(css).toContain('input:invalid {');
+	});
+});

package/tests/client/css/global-at-rules.test.ripple

@@ -0,0 +1,126 @@
+import { compile } from 'ripple/compiler';
+
+describe('CSS :global with @media and @supports', () => {
+	it('handles :global inside @media queries', () => {
+		const source = `
+export component Test() {
+	<div>{'content'}</div>
+
+	<style>
+		@media (min-width: 768px) {
+			:global(div) {
+				color: red;
+			}
+
+			div :global(span) {
+				color: blue;
+			}
+		}
+	</style>
+}`;
+		const { css } = compile(source, 'test.ripple');
+
+		expect(css).toContain('@media (min-width: 768px) {');
+		expect(css).toContain('div {');
+		expect(css).toMatch(/div\.ripple-[a-z0-9]+ span {/);
+	});
+
+	it('handles :global inside @supports queries', () => {
+		const source = `
+export component Test() {
+	<div>{'content'}</div>
+
+	<style>
+		@supports (display: grid) {
+			:global(.container) {
+				display: grid;
+			}
+
+			div :global(.item) {
+				grid-column: 1;
+			}
+		}
+	</style>
+}`;
+		const { css } = compile(source, 'test.ripple');
+
+		expect(css).toContain('@supports (display: grid) {');
+		expect(css).toContain('.container {');
+		expect(css).toMatch(/div\.ripple-[a-z0-9]+ \.item {/);
+	});
+
+	it('handles nested @media with :global', () => {
+		const source = `
+export component Test() {
+	<div>{'content'}</div>
+
+	<style>
+		div {
+			color: black;
+
+			@media (min-width: 768px) {
+				:global {
+					.foo {
+						color: red;
+					}
+				}
+
+				color: blue;
+			}
+		}
+	</style>
+}`;
+		const { css } = compile(source, 'test.ripple');
+
+		expect(css).toContain('@media (min-width: 768px) {');
+		expect(css).toContain('.foo {');
+		expect(css).not.toMatch(/\.foo\.ripple-[a-z0-9]+/);
+		expect(css).toMatch(/div\.ripple-[a-z0-9]+ {/);
+	});
+
+	it('handles :global in @container queries', () => {
+		const source = `
+export component Test() {
+	<div>{'content'}</div>
+
+	<style>
+		@container (min-width: 400px) {
+			:global(div) {
+				color: red;
+			}
+		}
+	</style>
+}`;
+		const { css } = compile(source, 'test.ripple');
+
+		expect(css).toContain('@container (min-width: 400px) {');
+		expect(css).toContain('div {');
+	});
+
+	it('handles multiple at-rules with :global', () => {
+		const source = `
+export component Test() {
+	<div>{'content'}</div>
+
+	<style>
+		@media screen {
+			@supports (display: flex) {
+				:global(.flex-container) {
+					display: flex;
+				}
+
+				div :global(.flex-item) {
+					flex: 1;
+				}
+			}
+		}
+	</style>
+}`;
+		const { css } = compile(source, 'test.ripple');
+
+		expect(css).toContain('@media screen {');
+		expect(css).toContain('@supports (display: flex) {');
+		expect(css).toContain('.flex-container {');
+		expect(css).toMatch(/div\.ripple-[a-z0-9]+ \.flex-item {/);
+	});
+});

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

@@ -0,0 +1,165 @@
+import { compile } from 'ripple/compiler';
+
+describe('CSS :global basic tests', () => {
+	it('applies global selector to all elements', () => {
+		const source = `
+export component Test() {
+	<div>{'content'}</div>
+
+	<style>
+		:global(div) {
+			color: red;
+		}
+	</style>
+}`;
+		const { css } = compile(source, 'test.ripple');
+
+		expect(css).toContain('div {');
+		expect(css).toContain('color: red;');
+		expect(css).not.toMatch(/div\.ripple-[a-z0-9]+/);
+	});
+
+	it('applies global selector with class', () => {
+		const source = `
+export component Test() {
+	<div class="foo">{'content'}</div>
+
+	<style>
+		:global(div.foo) {
+			color: pink;
+		}
+
+		:global(.foo) {
+			font-weight: bold;
+		}
+	</style>
+}`;
+		const { css } = compile(source, 'test.ripple');
+
+		expect(css).toContain('div.foo {');
+		expect(css).toContain('.foo {');
+		expect(css).not.toMatch(/\.foo\.ripple-[a-z0-9]+/);
+	});
+
+	it('mixes global and local selectors', () => {
+		const source = `
+export component Test() {
+	<div>
+		<p class="foo">{'red/bold'}</p>
+	</div>
+
+	<style>
+		:global(div) .foo {
+			color: red;
+		}
+
+		:global(div) > .foo {
+			font-weight: bold;
+		}
+	</style>
+}`;
+		const { css } = compile(source, 'test.ripple');
+
+		expect(css).toContain('div .foo');
+		expect(css).toContain('div > .foo');
+		expect(css).toMatch(/\.foo\.ripple-[a-z0-9]+/);
+	});
+
+	it('handles global block syntax', () => {
+		const source = `
+export component Test() {
+	<div>{'content'}</div>
+
+	<style>
+		:global {
+			.x {
+				color: green;
+			}
+
+			.a, .selector, .list {
+				color: green;
+			}
+		}
+	</style>
+}`;
+		const { css } = compile(source, 'test.ripple');
+
+		expect(css).toContain('.x {');
+		expect(css).toContain('.a, .selector, .list {');
+		expect(css).not.toMatch(/\.x\.ripple-[a-z0-9]+/);
+	});
+
+	it('handles global with pseudo-classes', () => {
+		const source = `
+export component Test() {
+	<button>{'click'}</button>
+
+	<style>
+		:global(button:hover) {
+			opacity: 0.8;
+		}
+
+		:global(button):focus {
+			outline: none;
+		}
+	</style>
+}`;
+		const { css } = compile(source, 'test.ripple');
+
+		expect(css).toContain('button:hover {');
+		expect(css).toContain('button:focus {');
+		expect(css).not.toMatch(/button\.ripple-[a-z0-9]+/);
+	});
+
+	it('handles multiple global selectors in selector list', () => {
+		const source = `
+export component Test() {
+	<div>{'content'}</div>
+
+	<style>
+		:global(html),
+		:global(body) {
+			margin: 0;
+			padding: 0;
+		}
+	</style>
+}`;
+		const { css } = compile(source, 'test.ripple');
+
+		expect(css).toContain('html,');
+		expect(css).toContain('body {');
+	});
+
+	it('scopes local selectors while keeping globals unscoped', () => {
+		const source = `
+export component Test() {
+	<div class="styled-container">
+				<h1>{'Styled heading'}</h1>
+				<p class="text">{'Styled paragraph'}</p>
+			</div>
+
+	<style>
+		.styled-container {
+			background-color: rgb(0, 0, 255);
+			padding: 16px;
+		}
+
+		:global(h1) {
+			color: rgb(255, 255, 255);
+			font-size: 32px;
+		}
+
+		.text {
+			color: rgb(200, 200, 200);
+			font-size: 14px;
+		}
+	</style>
+}`;
+		const { css } = compile(source, 'test.ripple');
+
+		expect(css).toMatch(/\.styled-container\.ripple-[a-z0-9]+/);
+		expect(css).toMatch(/\.text\.ripple-[a-z0-9]+/);
+		expect(css).toContain('h1 {');
+		expect(css).not.toMatch(/h1\.ripple-[a-z0-9]+/);
+	});
+});

package/tests/client/css/global-classes-ids.test.ripple

@@ -0,0 +1,179 @@
+import { compile } from 'ripple/compiler';
+
+describe('CSS :global with classes and IDs', () => {
+	it('handles :global with single class', () => {
+		const source = `
+export component Test() {
+	<div class="foo">{'content'}</div>
+
+	<style>
+		:global(.foo) {
+			color: red;
+		}
+	</style>
+}`;
+		const { css } = compile(source, 'test.ripple');
+
+		expect(css).toContain('.foo {');
+		expect(css).not.toMatch(/\.foo\.ripple-[a-z0-9]+/);
+	});
+
+	it('handles :global with chained classes', () => {
+		const source = `
+export component Test() {
+	<div class="foo bar">{'content'}</div>
+
+	<style>
+		:global(.foo.bar) {
+			color: red;
+		}
+
+		:global(.foo).bar {
+			color: blue;
+		}
+
+		.foo:global(.bar) {
+			color: green;
+		}
+	</style>
+}`;
+		const { css } = compile(source, 'test.ripple');
+
+		expect(css).toContain('.foo.bar {');
+		expect(css).toMatch(/\.foo\.bar\.ripple-[a-z0-9]+ {/);
+		expect(css).toMatch(/\.foo\.ripple-[a-z0-9]+\.bar {/);
+	});
+
+	it('handles local class inside :global selector', () => {
+		const source = `
+export component Test() {
+	<div class="outer">
+		<span class="inner">{'content'}</span>
+	</div>
+
+	<style>
+		:global(.outer) .inner {
+			color: red;
+		}
+
+		:global(div) .foo {
+			color: blue;
+		}
+	</style>
+}`;
+		const { css } = compile(source, 'test.ripple');
+
+		expect(css).toMatch(/\.outer \.inner\.ripple-[a-z0-9]+ {/);
+		expect(css).toMatch(/\(unused\) :global\(div\) \.foo {/);
+	});
+
+	it('handles :global with ID selectors', () => {
+		const source = `
+export component Test() {
+	<div id="app">
+		<div id="content">{'text'}</div>
+	</div>
+
+	<style>
+		:global(#app) {
+			width: 100%;
+		}
+
+		:global(#app) #content {
+			padding: 20px;
+		}
+
+		div :global(#content) {
+			margin: 0;
+		}
+	</style>
+}`;
+		const { css } = compile(source, 'test.ripple');
+
+		expect(css).toContain('#app {');
+		expect(css).not.toContain('#app #content {');
+		expect(css).not.toMatch(/#app\.ripple-[a-z0-9]+/);
+		expect(css).toMatch(/div\.ripple-[a-z0-9]+ #content {/);
+	});
+
+	it('handles :global with class and ID combination', () => {
+		const source = `
+export component Test() {
+	<div id="app" class="container">{'content'}</div>
+
+	<style>
+		:global(#app.container) {
+			color: red;
+		}
+
+		:global(.container)#app {
+			color: blue;
+		}
+
+		#app:global(.container) {
+			color: green;
+		}
+	</style>
+}`;
+		const { css } = compile(source, 'test.ripple');
+
+		expect(css).toContain('#app.container {');
+		expect(css).toMatch(/\.container#app\.ripple-[a-z0-9]+ {/);
+		expect(css).toMatch(/#app\.ripple-[a-z0-9]+\.container {/);
+	});
+
+	it('handles multiple classes with :global', () => {
+		const source = `
+export component Test() {
+	<div class="a b c">{'content'}</div>
+
+	<style>
+		:global(.a).b.c {
+			color: red;
+		}
+
+		.a:global(.b).c {
+			color: blue;
+		}
+
+		.a.b:global(.c) {
+			color: green;
+		}
+	</style>
+}`;
+		const { css } = compile(source, 'test.ripple');
+
+		expect((css.match(/\.a\.b\.c\.ripple-[a-z0-9]+ {/g) || []).length).toBe(2);
+		expect(css).toMatch(/\.a\.b\.ripple-[a-z0-9]+\.c {/);
+	});
+
+	it('handles :global with class descendant selectors', () => {
+		const source = `
+export component Test() {
+	<div class="outer">
+		<div class="middle">
+			<div class="inner">{'content'}</div>
+		</div>
+	</div>
+
+	<style>
+		:global(.outer) .middle .inner {
+			color: red;
+		}
+
+		.outer :global(.middle .inner) {
+			color: blue;
+		}
+
+		.outer .middle:global(.inner) {
+			color: green;
+		}
+	</style>
+}`;
+		const { css } = compile(source, 'test.ripple');
+
+		expect(css).toMatch(/\.outer \.middle\.ripple-[a-z0-9]+ \.inner:where\(\.ripple-[a-z0-9]+\)/);
+		expect(css).toMatch(/\.outer\.ripple-[a-z0-9]+ \.middle \.inner {/);
+		expect(css).toMatch(/\.outer\.ripple-[a-z0-9]+ \.middle:where\(\.ripple-[a-z0-9]+\)\.inner/);
+	});
+});