[kdelay]

Fixes #18609

Problem

REGEX_NTH_OF matched the <an+b> of <selector> form only with whitespace on both sides of of:

/(even|odd|...)((?=\s*[,)])|\s+of\s+)/y

CSS minifiers (cssnano, lightningcss) legally collapse 2n of .foo to 2n of.foo, because the . delim token already terminates the of identifier. Browsers accept the minified form, but the parser threw css_expected_identifier on it.

This is not only a parse-a-string problem: SvelteKit's inlineStyleThreshold re-parses the built (minified) CSS, so a component using :nth-child(... of .selector) compiles fine on its own and then fails the production build the moment its CSS file falls under the inline threshold.

Change

of still has to be preceded by whitespace (2nof lexes as a single dimension token), but it no longer has to be followed by whitespace when the next token is one that ends an identifier and can start a selector (., #, [, *, :).

Test plan

Added packages/svelte/tests/parser-modern/samples/css-nth-of-minified, covering 2n of.important, even of#first, -n+3 of[data-active], 2n of*, 2n of:not(.excluded) and 2n of.a, .b. It fails on main (the parser throws) and passes with this change; verified by reverting only the style.js hunk.

Boundary cases checked against parse(..., { modern: true }) on this branch, so the fix does not make the parser more lenient than CSS:

input	before	after
2n of .x	ok	ok
2n of.x	throws	ok
2n of#id / 2n of[data-a] / 2n of* / 2n of:not(.a)	throws	ok
2nof .x	throws	throws
2n of-foo	throws	throws
2n ofx	throws	throws
2n of) / 2n of,	throws	throws

The resulting AST is the same shape as the whitespace form (Nth node followed by the of selector's own selectors); the only difference is the trailing space inside Nth.value, which is part of the matched source text. compile() output was checked too: li:nth-child(2n of.a) and li:nth-child(2n of .a) both scope to li.svelte-1lj1c1s:nth-child(...) with no warnings.

One side effect worth noting: :nth-child(even of.x) did not throw before, because even and of were read as type selectors, so the AST was silently wrong. It is now parsed as an Nth node.

Full suite on this branch: pnpm test 7668 passed / 69 skipped, 33 files, 0 failures. pnpm lint clean (after pnpm build, which prettier-plugin-svelte needs). Changeset added (patch).

[pkg-svelte-dev]

Install the latest version of svelte from 91685af:

pnpm add https://pkg.svelte.dev/svelte/c/91685af27d648a87ff5ef7c9b5f61cd7df1798b0

Open in pkg.svelte.dev: https://pkg.svelte.dev/repos/svelte/pr/18611

Note

This PR is from a fork. A maintainer must approve approve each commit before it can be built and installed.

[changeset-bot]

🦋 Changeset detected

Latest commit: 91685af

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
svelte	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[kdelay]

Pushed 7b565d9: the same gap applied to the nesting selector.

:nth-child(2n of &.foo) parsed fine, but the collapsed of&.foo still threw css_expected_identifier, even though & ends the of identifier exactly like ., #, [, * and : do, so a minifier can emit it. Added & to the lookahead and extended the parser-modern sample with a nested case; reverting only the style.js hunk makes that sample fail.

I also checked of |div (namespace prefix) for completeness: it throws today even with whitespace, so I left it alone rather than widen the fix past current parity.

Full suite on the branch: 7668 passed / 69 skipped, 33 files, 0 failures. pnpm lint clean.

[dummdidumm]

thank you!