@sigil-dev/compiler 0.9.10 → 0.9.12

package/test/scoped-css.test.ts

@@ -28,6 +28,42 @@ describe("Scoped CSS", () => {
 	});
 
 	describe("scopeCSS", () => {
+		test("several rules keep their own selectors (no text carried over)", () => {
+			const css = `.book {\n\tdisplay: flex;\n}\n.read .title {\n\ttext-decoration: line-through;\n}\n.author { color: #666; }`;
+			expect(scopeCSS(css, "h1")).toBe(
+				`.book.h1 {\n\tdisplay: flex;\n}\n.read .title.h1 {\n\ttext-decoration: line-through;\n}\n.author.h1 { color: #666; }`,
+			);
+		});
+
+		test("pseudo-classes, combinators and :is() lists", () => {
+			expect(scopeCSS(".b:hover, .c > .d { x: 1 }", "h1")).toBe(
+				".b.h1:hover, .c > .d.h1 { x: 1 }",
+			);
+			expect(scopeCSS(":is(.a, .b) .c { x: 1 }", "h1")).toBe(
+				":is(.a, .b) .c.h1 { x: 1 }",
+			);
+		});
+
+		test("@media is scoped inside; @keyframes and @import pass through", () => {
+			expect(
+				scopeCSS(
+					"@media (max-width: 600px) { .a { x: 1 } } @keyframes spin { from { a: 1 } } @import url(x.css);",
+					"h1",
+				),
+			).toBe(
+				"@media (max-width: 600px) { .a.h1 { x: 1 } } @keyframes spin { from { a: 1 } } @import url(x.css);",
+			);
+		});
+
+		test(":global() anywhere in a selector", () => {
+			expect(scopeCSS(":global(.map) .pin { a: 1 }", "h1")).toBe(
+				".map .pin.h1 { a: 1 }",
+			);
+			expect(scopeCSS(".x :global(.y) { a: 1 }", "h1")).toBe(
+				".x.h1 .y { a: 1 }",
+			);
+		});
+
 		test("appends hash to simple selector", () => {
 			const result = scopeCSS(".card { color: red; }", "abc12345");
 			expect(result).toContain(".card.abc12345");
@@ -73,7 +109,8 @@ describe("Scoped CSS", () => {
 				'.card::before { content: ".card"; }',
 				"abc12345",
 			);
-			expect(result).toContain(".card::before.abc12345");
+			// the class goes before the pseudo-element; after it is invalid CSS
+			expect(result).toContain(".card.abc12345::before");
 			expect(result).toContain('".card"'); // String literal preserved
 		});
 	});
@@ -104,7 +141,7 @@ describe("Scoped CSS", () => {
 		test("classList.add after createElement and attributes", () => {
 			const result = transform(`<div class="foo" />`, "abc12345");
 			// setProp(el, "className", "foo") should come before classList.add
-			const classNameIdx = result.indexOf('setProp(');
+			const classNameIdx = result.indexOf("setProp(");
 			const classListIdx = result.indexOf('classList.add("abc12345")');
 			expect(classNameIdx).toBeGreaterThan(0);
 			expect(classListIdx).toBeGreaterThan(classNameIdx);

package/test/ssr.test.ts

@@ -43,7 +43,7 @@ describe("SSR", () => {
 		test("static element with class", () => {
 			const result = transformSSR(`const el = <div class="app" />;`);
 			expect(result).toContain('class="app"');
-			expect(result).not.toContain("className");
+			expect(result).not.toContain('className="');
 		});
 
 		test("void element self closes", () => {

package/test/style-object.test.ts

@@ -1,13 +1,36 @@
 import { describe, expect, test } from "bun:test";
 import { transformSSR } from "./helpers/transform.ts";
 
+function render(src: string): string {
+	const body = transformSSR(src).replace(/^export\s+/gm, "");
+	return String(new Function(`${body};\nreturn Card();`)());
+}
+
 describe("SSR style objects", () => {
-	test("style={{...}} serializes to CSS string, not [object Object]", () => {
-		const out = transformSSR(
-			`export function Card() { return <div style={{ display: "grid", marginTop: 12 }}>x</div>; }`,
+	test("style={{...}} serializes to CSS text, numbers in px", () => {
+		expect(
+			render(
+				`export function Card() { return <div style={{ display: "grid", marginTop: 12 }}>x</div>; }`,
+			),
+		).toBe(`<div style="display:grid;margin-top:12px">x</div>`);
+	});
+
+	test("unitless properties, custom properties and empty values", () => {
+		expect(
+			render(
+				`const s = { opacity: 0.5, zIndex: 3, "--gap": 4, color: null, lineHeight: 1.2, padding: 0 };
+				export function Card() { return <div style={s} />; }`,
+			),
+		).toBe(
+			`<div style="opacity:0.5;z-index:3;--gap:4;line-height:1.2;padding:0"></div>`,
 		);
-		// the __e helper must carry the object branch
-		expect(out).toContain("constructor === Object");
-		expect(out).toContain("UNITLESS");
+	});
+
+	test("values are attribute-escaped", () => {
+		expect(
+			render(
+				`const bg = 'url("a.png")'; export function Card() { return <div style={{ background: bg }} />; }`,
+			),
+		).toBe(`<div style="background:url(&quot;a.png&quot;)"></div>`);
 	});
 });