Merge 8d67a09957 into d16099ef0f

.changeset/signed-nth-child.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: accept a negative `a` in `:nth-child(an+b)` and an uppercase `n`

packages/svelte/src/compiler/phases/1-parse/read/style.js

@@ -9,9 +9,10 @@ const REGEX_COMBINATOR = /(\+|~|>|\|\|)/y;
 const REGEX_PERCENTAGE = /\d+(\.\d+)?%/y;
 // `of` must be preceded by whitespace, otherwise it would be part of the `<an+b>` token
 // (`2nof` is a single dimension token). It does not need to be followed by whitespace,
-// because a `.`, `#`, `[`, `*`, `:` or `&` already ends the `of` identifier — minifiers rely on that
+// because a `.`, `#`, `[`, `*`, `:` or `&` already ends the `of` identifier — minifiers rely on that.
+// The sign of `a` (or of a lone `<integer>`) may be `+` or `-`, and the `n` is case-insensitive
 const REGEX_NTH_OF =
-	/(even|odd|\+?(\d+|\d*n(\s*[+-]\s*\d+)?)|-\d*n(\s*\+\s*\d+))((?=\s*[,)])|\s+of(\s+|(?=[.#[*:&])))/y;
+	/(even|odd|[+-]?(\d+|\d*[nN](\s*[+-]\s*\d+)?))((?=\s*[,)])|\s+of(\s+|(?=[.#[*:&])))/y;
 const REGEX_WHITESPACE_OR_COLON = /[\s:]/;
 const REGEX_LEADING_HYPHEN_OR_DIGIT = /-?\d/y;
 const REGEX_VALID_IDENTIFIER_CHAR = /[a-zA-Z0-9_-]/;

packages/svelte/tests/css/samples/nth-child-signed-an-plus-b/expected.css

@@ -0,0 +1,17 @@
+
+	/* the `a` of `an+b`, and a lone `<integer>`, can be negative, and `n` is case-insensitive */
+	li.svelte-xyz:nth-child(-1) {
+		color: red;
+	}
+	li.svelte-xyz:nth-child(-2n) {
+		color: green;
+	}
+	li.svelte-xyz:nth-child(-2n-1) {
+		color: blue;
+	}
+	li.svelte-xyz:nth-child(2N+1) {
+		color: yellow;
+	}
+	li.svelte-xyz:nth-child(-2n-1 of .important) {
+		color: purple;
+	}

packages/svelte/tests/css/samples/nth-child-signed-an-plus-b/input.svelte

@@ -0,0 +1,23 @@
+<ul>
+	<li>a</li>
+	<li class="important">b</li>
+</ul>
+
+<style>
+	/* the `a` of `an+b`, and a lone `<integer>`, can be negative, and `n` is case-insensitive */
+	li:nth-child(-1) {
+		color: red;
+	}
+	li:nth-child(-2n) {
+		color: green;
+	}
+	li:nth-child(-2n-1) {
+		color: blue;
+	}
+	li:nth-child(2N+1) {
+		color: yellow;
+	}
+	li:nth-child(-2n-1 of .important) {
+		color: purple;
+	}
+</style>