tests

packages/svelte/tests/css/samples/nested-css/expected.css

@@ -0,0 +1,59 @@
+
+	.a.svelte-xyz {
+		color: green;
+
+		/* implicit & */
+		.b:where(.svelte-xyz) /* (unused) .unused*/ {
+			color: green;
+
+			.c:where(.svelte-xyz) {
+				color: green;
+			}
+
+			/* (unused) .unused {
+				color: red;
+
+				.c:where(.svelte-xyz) {
+					color: red;
+				}
+			}*/
+		}
+
+		/* (empty) .d:where(.svelte-xyz) {
+			.unused {
+				color: red;
+			}
+		}*/
+
+		/* explicit & */
+		& .b:where(.svelte-xyz) {
+			color: green;
+
+			/* (empty) .c:where(.svelte-xyz) {
+				& & {
+					color: red;
+				}
+			}*/
+		}
+
+		& & {
+			color: green;
+		}
+
+		/* silly but valid */
+		&& {
+			color: rebeccapurple;
+		}
+
+		.container:where(.svelte-xyz) & {
+			color: green;
+		}
+
+		/* (unused) &.b {
+			color: red;
+		}*/
+
+		/* (unused) .unused {
+			color: red;
+		}*/
+	}

packages/svelte/tests/css/samples/nested-css/input.svelte

@@ -0,0 +1,74 @@
+<div class="a">
+	<div class="a"></div>
+
+	<div class="b">
+		<div class="c"></div>
+	</div>
+
+	<div class="d"></div>
+</div>
+
+<div class="container">
+	<div class="a"></div>
+</div>
+
+<style>
+	.a {
+		color: green;
+
+		/* implicit & */
+		.b, .unused {
+			color: green;
+
+			.c {
+				color: green;
+			}
+
+			.unused {
+				color: red;
+
+				.c {
+					color: red;
+				}
+			}
+		}
+
+		.d {
+			.unused {
+				color: red;
+			}
+		}
+
+		/* explicit & */
+		& .b {
+			color: green;
+
+			.c {
+				& & {
+					color: red;
+				}
+			}
+		}
+
+		& & {
+			color: green;
+		}
+
+		/* silly but valid */
+		&& {
+			color: rebeccapurple;
+		}
+
+		.container & {
+			color: green;
+		}
+
+		&.b {
+			color: red;
+		}
+
+		.unused {
+			color: red;
+		}
+	}
+</style>

packages/svelte/tests/css/samples/special-characters/expected.css

@@ -0,0 +1,7 @@
+
+	[foo='{;}'].svelte-xyz {
+		content: "{};[]";
+
+		/* [] ; { } */
+		color: red;
+	}

packages/svelte/tests/css/samples/special-characters/input.svelte

@@ -0,0 +1,10 @@
+<x foo={'{;}'}></x>
+
+<style>
+	[foo='{;}'] {
+		content: "{};[]";
+
+		/* [] ; { } */
+		color: red;
+	}
+</style>