ripple 0.3.17 → 0.3.18

package/tests/client/compiler/{compiler.tracked-access.test.rsrx → compiler.tracked-access.test.tsrx}

@@ -9,7 +9,7 @@ import { track } from 'ripple';
                 console.log(count.__v);
             }
         `;
-		expect(() => compile(code, 'test.ripple')).toThrow(
+		expect(() => compile(code, 'test.tsrx')).toThrow(
 			/Directly accessing internal property "__v" of a tracked object is not allowed/,
 		);
 	});
@@ -22,7 +22,7 @@ import { track } from 'ripple';
                 console.log(myTracked.a);
             }
         `;
-		expect(() => compile(code, 'test.ripple')).toThrow(
+		expect(() => compile(code, 'test.tsrx')).toThrow(
 			/Directly accessing internal property "a" of a tracked object is not allowed/,
 		);
 	});
@@ -35,7 +35,7 @@ import { track } from 'ripple';
                 console.log(myTracked.b);
             }
         `;
-		expect(() => compile(code, 'test.ripple')).toThrow(
+		expect(() => compile(code, 'test.tsrx')).toThrow(
 			/Directly accessing internal property "b" of a tracked object is not allowed/,
 		);
 	});
@@ -48,7 +48,7 @@ import { track } from 'ripple';
                 console.log(myTracked.c);
             }
         `;
-		expect(() => compile(code, 'test.ripple')).toThrow(
+		expect(() => compile(code, 'test.tsrx')).toThrow(
 			/Directly accessing internal property "c" of a tracked object is not allowed/,
 		);
 	});
@@ -61,7 +61,7 @@ import { track } from 'ripple';
                 console.log(myTracked.f);
             }
         `;
-		expect(() => compile(code, 'test.ripple')).toThrow(
+		expect(() => compile(code, 'test.tsrx')).toThrow(
 			/Directly accessing internal property "f" of a tracked object is not allowed/,
 		);
 	});
@@ -74,7 +74,7 @@ import { track } from 'ripple';
                 console.log(count);
             }
         `;
-		expect(() => compile(code, 'test.ripple')).not.toThrow();
+		expect(() => compile(code, 'test.tsrx')).not.toThrow();
 	});
 
 	it('should compile successfully with correct get() function access', () => {
@@ -85,7 +85,7 @@ import { get, track } from 'ripple';
                 console.log(get(count));
             }
         `;
-		expect(() => compile(code, 'test.ripple')).not.toThrow();
+		expect(() => compile(code, 'test.tsrx')).not.toThrow();
 	});
 
 	it('should not error on accessing __v of a non-tracked object', () => {
@@ -95,7 +95,7 @@ import { get, track } from 'ripple';
                 console.log(obj.__v);
             }
         `;
-		expect(() => compile(code, 'test.ripple')).not.toThrow();
+		expect(() => compile(code, 'test.tsrx')).not.toThrow();
 	});
 
 	it('should not error on accessing __v of a non-tracked object (member expression)', () => {
@@ -105,7 +105,7 @@ import { get, track } from 'ripple';
                 console.log(data.value.__v);
             }
         `;
-		expect(() => compile(code, 'test.ripple')).not.toThrow();
+		expect(() => compile(code, 'test.tsrx')).not.toThrow();
 	});
 
 	it(
@@ -118,7 +118,7 @@ import { get, track } from 'ripple';
                 console.log(config.b);
             }
         `;
-			expect(() => compile(code, 'test.ripple')).not.toThrow();
+			expect(() => compile(code, 'test.tsrx')).not.toThrow();
 		},
 	);
 
@@ -130,7 +130,7 @@ import { track } from 'ripple';
                 console.log(count[0]);
             }
         `;
-		expect(() => compile(code, 'test.ripple')).not.toThrow();
+		expect(() => compile(code, 'test.tsrx')).not.toThrow();
 	});
 
 	it('should allow indexed [1] access on a tracked object', () => {
@@ -141,7 +141,7 @@ import { track } from 'ripple';
                 let raw = count[1];
             }
         `;
-		expect(() => compile(code, 'test.ripple')).not.toThrow();
+		expect(() => compile(code, 'test.tsrx')).not.toThrow();
 	});
 
 	it('should allow [0] write on a tracked object', () => {
@@ -152,7 +152,7 @@ import { track } from 'ripple';
                 count[0] = 5;
             }
         `;
-		expect(() => compile(code, 'test.ripple')).not.toThrow();
+		expect(() => compile(code, 'test.tsrx')).not.toThrow();
 	});
 
 	it('should allow .value read access on a tracked object', () => {
@@ -163,7 +163,7 @@ import { track } from 'ripple';
                 console.log(count.value);
             }
         `;
-		expect(() => compile(code, 'test.ripple')).not.toThrow();
+		expect(() => compile(code, 'test.tsrx')).not.toThrow();
 	});
 
 	it('should allow .value assignment on a tracked object', () => {
@@ -174,7 +174,7 @@ import { track } from 'ripple';
                 count.value = 5;
             }
         `;
-		expect(() => compile(code, 'test.ripple')).not.toThrow();
+		expect(() => compile(code, 'test.tsrx')).not.toThrow();
 	});
 
 	it('should allow .length read access on a tracked object', () => {
@@ -185,6 +185,6 @@ import { track } from 'ripple';
                 console.log(count.length);
             }
         `;
-		expect(() => compile(code, 'test.ripple')).not.toThrow();
+		expect(() => compile(code, 'test.tsrx')).not.toThrow();
 	});
 });

package/tests/client/compiler/{compiler.try-in-function.test.rsrx → compiler.try-in-function.test.tsrx}

@@ -28,7 +28,7 @@ describe('compiler > Volar transform does not duplicate try blocks from function
 	}
 	<div onclick={doWork}>{"click"}</div>
 }`;
-		const result = compile_to_volar_mappings(source, 'test.ripple').code;
+		const result = compile_to_volar_mappings(source, 'test.tsrx').code;
 
 		expect(count_occurrences(result, 'try {')).toBe(1);
 		expect(count_occurrences(result, 'catch')).toBe(1);
@@ -44,7 +44,7 @@ describe('compiler > Volar transform does not duplicate try blocks from function
 	};
 	<div onclick={doWork}>{"click"}</div>
 }`;
-		const result = compile_to_volar_mappings(source, 'test.ripple').code;
+		const result = compile_to_volar_mappings(source, 'test.tsrx').code;
 
 		expect(count_occurrences(result, 'try {')).toBe(1);
 		expect(count_occurrences(result, 'await fetch')).toBe(1);
@@ -63,7 +63,7 @@ describe('compiler > Volar transform does not duplicate try blocks from function
 	}
 	<div onclick={save}>{"save"}</div>
 }`;
-		const result = compile_to_volar_mappings(source, 'test.ripple').code;
+		const result = compile_to_volar_mappings(source, 'test.tsrx').code;
 
 		expect(count_occurrences(result, 'try {')).toBe(1);
 		expect(count_occurrences(result, 'catch')).toBe(1);
@@ -78,7 +78,7 @@ export component App() {
 	} catch (e) {}
 	<div>{"hi"}</div>
 }`;
-		const result = compile_to_volar_mappings(source, 'test.ripple').code;
+		const result = compile_to_volar_mappings(source, 'test.tsrx').code;
 
 		expect(count_occurrences(result, 'try {')).toBe(1);
 		expect(count_occurrences(result, 'trackAsync(() => fetch(\'/api\'))')).toBe(1);
@@ -98,7 +98,7 @@ export component App() {
 	}
 	<div onclick={refresh}>{"click"}</div>
 }`;
-		const result = compile_to_volar_mappings(source, 'test.ripple').code;
+		const result = compile_to_volar_mappings(source, 'test.tsrx').code;
 
 		expect(count_occurrences(result, 'try {')).toBe(2);
 		expect(count_occurrences(result, 'trackAsync(() => fetch(\'/init\'))')).toBe(1);
@@ -116,7 +116,7 @@ export component App() {
 	}
 	<div>{"hi"}</div>
 }`;
-		const result = compile_to_volar_mappings(source, 'test.ripple').code;
+		const result = compile_to_volar_mappings(source, 'test.tsrx').code;
 
 		expect(count_occurrences(result, 'try {')).toBe(1);
 		expect(count_occurrences(result, 'await fetch')).toBe(1);
@@ -136,7 +136,7 @@ export component App() {
 	}
 	<div>{"hi"}</div>
 }`;
-		const result = compile_to_volar_mappings(source, 'test.ripple').code;
+		const result = compile_to_volar_mappings(source, 'test.tsrx').code;
 
 		expect(count_occurrences(result, 'try {')).toBe(2);
 		expect(count_occurrences(result, 'await fetch')).toBe(2);
@@ -153,7 +153,7 @@ export component App() {
 	};
 	<div>{"hi"}</div>
 }`;
-		const result = compile_to_volar_mappings(source, 'test.ripple').code;
+		const result = compile_to_volar_mappings(source, 'test.tsrx').code;
 
 		expect(count_occurrences(result, 'try {')).toBe(1);
 		expect(count_occurrences(result, 'await fetch')).toBe(1);

package/tests/client/compiler/{compiler.typescript.test.rsrx → compiler.typescript.test.tsrx}

@@ -10,7 +10,7 @@ const stringBox = makeStringBox('abc');
 const ErrorMap = Map<string, Error>;
 const errorMap = new ErrorMap();`;
 
-		const result = compile(source, 'test.ripple', { mode: 'client' });
+		const result = compile(source, 'test.tsrx', { mode: 'client' });
 
 		expect(result.js.code).toMatchSnapshot();
 	});
@@ -21,7 +21,7 @@ function getString(e: string = 'test') {
 	return e;
 }`;
 
-		const result = compile(source, 'test.ripple', { mode: 'client' });
+		const result = compile(source, 'test.tsrx', { mode: 'client' });
 
 		expect(result.js.code).toMatchSnapshot();
 	});
@@ -37,7 +37,7 @@ class PrintEvent implements BaseEvent {
 	}
 }`;
 
-		const result = compile(source, 'test.ripple', { mode: 'client' });
+		const result = compile(source, 'test.tsrx', { mode: 'client' });
 
 		expect(result.js.code).not.toContain('implements');
 		expect(result.js.code).toMatchSnapshot();
@@ -50,7 +50,7 @@ class PrintEvent implements BaseEvent {
 	}
 }`;
 
-		const result = compile(source, 'test.ripple', { mode: 'client' });
+		const result = compile(source, 'test.tsrx', { mode: 'client' });
 
 		expect(result.js.code).not.toContain('Map<string, string>');
 		expect(result.js.code).toContain('class StringMap extends Map');

package/tests/client/composite/__snapshots__/composite.render.test.tsrx.snap

@@ -0,0 +1,37 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`composite > render > correct handles passing through component props and children 1`] = `
+<div>
+  <!---->
+  <div>
+    <div>
+      I am A
+    </div>
+    <!---->
+    <div>
+      other text
+    </div>
+    <!---->
+    <div>
+      I am B
+    </div>
+    <!---->
+  </div>
+  <!---->
+  
+</div>
+`;
+
+exports[`composite > render > render simple text as children 1`] = `
+<div>
+  <!---->
+  <button
+    class="my-button"
+  >
+    Click Me
+    <!---->
+  </button>
+  <!---->
+  
+</div>
+`;

package/tests/client/css/{global-additional-cases.test.rsrx → global-additional-cases.test.tsrx}

@@ -13,7 +13,7 @@ export component Test() {
 		}
 	</style>
 }`;
-		const { css } = compile(source, 'test.ripple');
+		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toMatch(/div\.ripple-[a-z0-9]+\.x {/);
 	});
@@ -31,7 +31,7 @@ export component Test() {
 		}
 	</style>
 }`;
-		const { css } = compile(source, 'test.ripple');
+		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('&.x {');
 	});
@@ -49,7 +49,7 @@ export component Test() {
 		}
 	</style>
 }`;
-		const { css } = compile(source, 'test.ripple');
+		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('&.x {');
 	});
@@ -65,7 +65,7 @@ export component Test() {
 		}
 	</style>
 }`;
-		const { css } = compile(source, 'test.ripple');
+		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toMatch(/div\.ripple-[a-z0-9]+:is\(html\.dark-mode \*\) {/);
 	});
@@ -83,7 +83,7 @@ export component Test() {
 		}
 	</style>
 }`;
-		const { css } = compile(source, 'test.ripple');
+		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toMatch(/div\.ripple-[a-z0-9]+ {/);
 		expect(css).toContain('&.class {');
@@ -102,7 +102,7 @@ export component Test() {
 		}
 	</style>
 }`;
-		const { css } = compile(source, 'test.ripple');
+		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('* {');
 		expect(css).toMatch(/&:hover \.class\.ripple-[a-z0-9]+ {/);
@@ -120,7 +120,7 @@ export component Test() {
 		}
 	</style>
 }`;
-		const { css } = compile(source, 'test.ripple');
+		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain(' x,  y {');
 	});
@@ -140,7 +140,7 @@ export component Test() {
 		}
 	</style>
 }`;
-		const { css } = compile(source, 'test.ripple');
+		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toMatch(/div\.ripple-[a-z0-9]+/);
 		expect(css).toContain('z {');
@@ -175,7 +175,7 @@ export component Test() {
 		}
 	</style>
 }`;
-		const { css } = compile(source, 'test.ripple');
+		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('@keyframes test-in {');
 		expect(css).toContain('.x {');
@@ -196,7 +196,7 @@ export component Test() {
 		}
 	</style>
 }`;
-		const { css } = compile(source, 'test.ripple');
+		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('@keyframes orphan');
 		expect(css).not.toContain('-global-orphan');
@@ -220,7 +220,7 @@ export component Test() {
 		}
 	</style>
 }`;
-		const { css } = compile(source, 'test.ripple');
+		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toMatch(/div\.ripple-[a-z0-9]+\.blue {/);
 		expect(css).toMatch(/span\.blue\.x\.ripple-[a-z0-9]+ {/);
@@ -238,7 +238,7 @@ export component Test() {
 		}
 	</style>
 }`;
-		const { css } = compile(source, 'test.ripple');
+		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('div > section > p');
 		expect(css).toMatch(/p\.ripple-[a-z0-9]+ {/);
@@ -259,7 +259,7 @@ export component Test() {
 		}
 	</style>
 }`;
-		const { css } = compile(source, 'test.ripple');
+		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toMatch(/x\.ripple-[a-z0-9]+ :is\(html \*\) {/);
 	});
@@ -286,7 +286,7 @@ export component Test() {
 		}
 	</style>
 }`;
-		const { css } = compile(source, 'test.ripple');
+		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('.foo {');
 		expect(css).toMatch(/\.ripple-[a-z0-9]+:has\(x:where\(\.ripple-[a-z0-9]+\)\) {/);
@@ -341,7 +341,7 @@ export component Test() {
 		}
 	</style>
 }`;
-		const { css } = compile(source, 'test.ripple');
+		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain(':not(.foo)');
 		expect(css).toContain('span');
@@ -376,7 +376,7 @@ export component Test({ children }) {
 		:global(.x) + .bar { color: green; }
 	</style>
 }`;
-		const { css } = compile(source, 'test.ripple');
+		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toMatch(/\.before\.ripple-[a-z0-9]+ \+ \.foo:where\(\.ripple-[a-z0-9]+\) {/);
 		expect((css.match(/\.x\ /g) || []).length).toBe(0);
@@ -417,7 +417,7 @@ export component Test({ children }) {
 component Child1() {
 	<div>{'child1'}</div>
 }`;
-		const { css } = compile(source, 'test.ripple');
+		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toMatch(/\.before\.ripple-[a-z0-9]+ \+ \.foo:where\(\.ripple-[a-z0-9]+\) {/);
 		expect((css.match(/\.x\ /g) || []).length).toBe(5);
@@ -463,7 +463,7 @@ export component Test({ children }) {
 component Child1() {
 	<div>{'child1'}</div>
 }`;
-			const { css } = compile(source, 'test.ripple');
+			const { css } = compile(source, 'test.tsrx');
 
 			expect(css).toMatch(/\.before\.ripple-[a-z0-9]+ \+ \.foo:where\(\.ripple-[a-z0-9]+\) {/);
 			expect((css.match(/\.x\ /g) || []).length).toBe(5);
@@ -507,7 +507,7 @@ export component Test({ children, classes }) {
 	</style>
 }`;
 
-			const { css } = compile(source, 'test.ripple');
+			const { css } = compile(source, 'test.tsrx');
 
 			expect(css).toMatch(/\.before\.ripple-[a-z0-9]+ \+ \.foo:where\(\.ripple-[a-z0-9]+\) {/);
 			expect((css.match(/\.x\ /g) || []).length).toBe(5);
@@ -531,7 +531,7 @@ export component Test() {
 		}
 	</style>
 }`;
-		const { css } = compile(source, 'test.ripple');
+		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toMatch(/html body \.root\.ripple-[a-z0-9]+ p:where\(\.ripple-[a-z0-9]+\) {/);
 	});
@@ -557,7 +557,7 @@ export component Test() {
 		}
 	</style>
 }`;
-		const { css } = compile(source, 'test.ripple');
+		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('@media (min-width: 768px) {');
 		expect(css).toContain('.foo {');
@@ -588,7 +588,7 @@ export component Test() {
 		}
 	</style>
 }`;
-		const { css } = compile(source, 'test.ripple');
+		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toMatch(
 			/g\.ripple-[a-z0-9]+:has\(> h:where\(\.ripple-[a-z0-9]+\) > i:where\(\.ripple-[a-z0-9]+\)\)/,
@@ -612,7 +612,7 @@ export component Test() {
 		}
 	</style>
 }`;
-		const { css } = compile(source, 'test.ripple');
+		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toMatch(/div\.ripple-[a-z0-9]+ h1\[data-title="Hello, world!"\]/);
 		expect(css).toContain('h1[attribute], video[autoplay]');
@@ -631,7 +631,7 @@ export component Test() {
 		}
 	</style>
 }`;
-		const { css } = compile(source, 'test.ripple');
+		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toMatch(/div\.ripple-[a-z0-9]+ \.h1\\,h2\\,h3 {/);
 	});
@@ -656,7 +656,7 @@ export component Test() {
 		}
 	</style>
 }`;
-		const { css } = compile(source, 'test.ripple');
+		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toMatch(/div\.ripple-[a-z0-9]+ :is\(h1, h2\)/);
 		expect(css).toMatch(/div\.ripple-[a-z0-9]+ :where\(h1, h2\)/);
@@ -677,7 +677,7 @@ export component Test() {
 		}
 	</style>
 }`;
-		const { css } = compile(source, 'test.ripple');
+		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toMatch(/div\.ripple-[a-z0-9]+ h1 ~ :is\(h2, h3\)/);
 	});
@@ -698,7 +698,7 @@ export component Test() {
 		}
 	</style>
 }`;
-		expect(() => compile(source, 'test.ripple')).toThrow(
+		expect(() => compile(source, 'test.tsrx')).toThrow(
 			':global(...) can be at the start or end of a selector sequence, but not in the middle',
 		);
 	});

package/tests/client/css/{global-advanced-selectors.test.rsrx → global-advanced-selectors.test.tsrx}

@@ -18,7 +18,7 @@ export component Test() {
 		}
 	</style>
 }`;
-		const { css } = compile(source, 'test.ripple');
+		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toMatch(/div\.ripple-[a-z0-9]+ ::slotted\(span\) {/);
 		expect(css).toContain('::slotted(*) {');
@@ -39,7 +39,7 @@ export component Test() {
 		}
 	</style>
 }`;
-		const { css } = compile(source, 'test.ripple');
+		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toMatch(/div\.ripple-[a-z0-9]+ ::part\(input\) {/);
 		expect(css).toContain('::part(button) {');
@@ -64,7 +64,7 @@ export component Test() {
 		}
 	</style>
 }`;
-		const { css } = compile(source, 'test.ripple');
+		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain(':host {');
 		expect(css).toContain(':host(.active) {');
@@ -94,7 +94,7 @@ export component Test() {
 		}
 	</style>
 }`;
-		const { css } = compile(source, 'test.ripple');
+		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('span:nth-child(odd) {');
 		expect(css).toContain('span:nth-last-child(2) {');
@@ -120,7 +120,7 @@ export component Test() {
 		}
 	</style>
 }`;
-		const { css } = compile(source, 'test.ripple');
+		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain(':lang(en) {');
 		expect(css).toContain(':dir(rtl) {');
@@ -144,7 +144,7 @@ export component Test() {
 		}
 	</style>
 }`;
-		const { css } = compile(source, 'test.ripple');
+		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('div:focus-within {');
 		expect(css).toContain('input:focus-visible {');
@@ -171,7 +171,7 @@ export component Test() {
 		}
 	</style>
 }`;
-		const { css } = compile(source, 'test.ripple');
+		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain(':any-link {');
 		expect(css).toContain(':target {');
@@ -216,7 +216,7 @@ export component Test() {
 		}
 	</style>
 }`;
-		const { css } = compile(source, 'test.ripple');
+		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('input:required {');
 		expect(css).toContain('input:optional {');

package/tests/client/css/{global-at-rules.test.rsrx → global-at-rules.test.tsrx}

@@ -18,7 +18,7 @@ export component Test() {
 		}
 	</style>
 }`;
-		const { css } = compile(source, 'test.ripple');
+		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('@media (min-width: 768px) {');
 		expect(css).toContain('div {');
@@ -42,7 +42,7 @@ export component Test() {
 		}
 	</style>
 }`;
-		const { css } = compile(source, 'test.ripple');
+		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('@supports (display: grid) {');
 		expect(css).toContain('.container {');
@@ -70,7 +70,7 @@ export component Test() {
 		}
 	</style>
 }`;
-		const { css } = compile(source, 'test.ripple');
+		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('@media (min-width: 768px) {');
 		expect(css).toContain('.foo {');
@@ -91,7 +91,7 @@ export component Test() {
 		}
 	</style>
 }`;
-		const { css } = compile(source, 'test.ripple');
+		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('@container (min-width: 400px) {');
 		expect(css).toContain('div {');
@@ -116,7 +116,7 @@ export component Test() {
 		}
 	</style>
 }`;
-		const { css } = compile(source, 'test.ripple');
+		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('@media screen {');
 		expect(css).toContain('@supports (display: flex) {');

package/tests/client/css/{global-basic.test.rsrx → global-basic.test.tsrx}

@@ -12,7 +12,7 @@ export component Test() {
 		}
 	</style>
 }`;
-		const { css } = compile(source, 'test.ripple');
+		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('div {');
 		expect(css).toContain('color: red;');
@@ -34,7 +34,7 @@ export component Test() {
 		}
 	</style>
 }`;
-		const { css } = compile(source, 'test.ripple');
+		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('div.foo {');
 		expect(css).toContain('.foo {');
@@ -58,7 +58,7 @@ export component Test() {
 		}
 	</style>
 }`;
-		const { css } = compile(source, 'test.ripple');
+		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('div .foo');
 		expect(css).toContain('div > .foo');
@@ -82,7 +82,7 @@ export component Test() {
 		}
 	</style>
 }`;
-		const { css } = compile(source, 'test.ripple');
+		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('.x {');
 		expect(css).toContain('.a, .selector, .list {');
@@ -104,7 +104,7 @@ export component Test() {
 		}
 	</style>
 }`;
-		const { css } = compile(source, 'test.ripple');
+		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('button:hover {');
 		expect(css).toContain('button:focus {');
@@ -124,7 +124,7 @@ export component Test() {
 		}
 	</style>
 }`;
-		const { css } = compile(source, 'test.ripple');
+		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toContain('html,');
 		expect(css).toContain('body {');
@@ -155,7 +155,7 @@ export component Test() {
 		}
 	</style>
 }`;
-		const { css } = compile(source, 'test.ripple');
+		const { css } = compile(source, 'test.tsrx');
 
 		expect(css).toMatch(/\.styled-container\.ripple-[a-z0-9]+/);
 		expect(css).toMatch(/\.text\.ripple-[a-z0-9]+/);