diff --git a/.changeset/swift-donkeys-perform.md b/.changeset/swift-donkeys-perform.md new file mode 100644 index 0000000000..b911fa10a0 --- /dev/null +++ b/.changeset/swift-donkeys-perform.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: tweak css nth regex diff --git a/packages/svelte/src/compiler/phases/1-parse/read/style.js b/packages/svelte/src/compiler/phases/1-parse/read/style.js index 9f59e8205e..8b1d785446 100644 --- a/packages/svelte/src/compiler/phases/1-parse/read/style.js +++ b/packages/svelte/src/compiler/phases/1-parse/read/style.js @@ -6,7 +6,7 @@ const REGEX_ATTRIBUTE_FLAGS = /^[a-zA-Z]+/; // only `i` and `s` are valid today, const REGEX_COMBINATOR_WHITESPACE = /^\s*(\+|~|>|\|\|)\s*/; const REGEX_COMBINATOR = /^(\+|~|>|\|\|)/; const REGEX_PERCENTAGE = /^\d+(\.\d+)?%/; -const REGEX_NTH_OF = /^(even|odd|(-?[0-9]?n?(\s*\+\s*[0-9]+)?))(\s+of\s+)?/; +const REGEX_NTH_OF = /^\s*(even|odd|(-?[0-9]?n?(\s*\+\s*[0-9]+)?))(\s*(?=[,)])|\s+of\s+)/; const REGEX_WHITESPACE_OR_COLON = /[\s:]/; const REGEX_BRACE_OR_SEMICOLON = /[{;]/; const REGEX_LEADING_HYPHEN_OR_DIGIT = /-?\d/; @@ -294,7 +294,7 @@ function read_selector(parser, inside_pseudo_class = false) { start, end: parser.index }); - } else if (parser.match_regex(REGEX_NTH_OF)) { + } else if (inside_pseudo_class && parser.match_regex(REGEX_NTH_OF)) { children.push({ type: 'Nth', value: /** @type {string} */ (parser.read(REGEX_NTH_OF)), diff --git a/packages/svelte/tests/parser-modern/samples/css-nth-syntax/input.svelte b/packages/svelte/tests/parser-modern/samples/css-nth-syntax/input.svelte index b8e2d40864..5668a7799a 100644 --- a/packages/svelte/tests/parser-modern/samples/css-nth-syntax/input.svelte +++ b/packages/svelte/tests/parser-modern/samples/css-nth-syntax/input.svelte @@ -21,6 +21,14 @@ h1:nth-child(odd) { background: red; } + h1:nth-child( + n + ) { + background: red; + } + h1:global(nav) { + background: red; + } -

Broken

+

Foo

diff --git a/packages/svelte/tests/parser-modern/samples/css-nth-syntax/output.json b/packages/svelte/tests/parser-modern/samples/css-nth-syntax/output.json index 1cea48b17c..3716981b37 100644 --- a/packages/svelte/tests/parser-modern/samples/css-nth-syntax/output.json +++ b/packages/svelte/tests/parser-modern/samples/css-nth-syntax/output.json @@ -2,7 +2,7 @@ "css": { "type": "Style", "start": 0, - "end": 467, + "end": 586, "attributes": [], "children": [ { @@ -471,32 +471,162 @@ }, "start": 408, "end": 458 + }, + { + "type": "Rule", + "prelude": { + "type": "SelectorList", + "start": 463, + "end": 492, + "children": [ + { + "type": "Selector", + "start": 463, + "end": 492, + "children": [ + { + "type": "TypeSelector", + "name": "h1", + "start": 463, + "end": 465 + }, + { + "type": "PseudoClassSelector", + "name": "nth-child", + "args": { + "type": "SelectorList", + "start": 476, + "end": 491, + "children": [ + { + "type": "Selector", + "start": 476, + "end": 491, + "children": [ + { + "type": "Nth", + "value": "\n n\n ", + "start": 476, + "end": 491 + } + ] + } + ] + }, + "start": 465, + "end": 492 + } + ] + } + ] + }, + "block": { + "type": "Block", + "start": 493, + "end": 525, + "children": [ + { + "type": "Declaration", + "start": 503, + "end": 518, + "property": "background", + "value": "red" + } + ] + }, + "start": 463, + "end": 525 + }, + { + "type": "Rule", + "prelude": { + "type": "SelectorList", + "start": 530, + "end": 544, + "children": [ + { + "type": "Selector", + "start": 530, + "end": 544, + "children": [ + { + "type": "TypeSelector", + "name": "h1", + "start": 530, + "end": 532 + }, + { + "type": "PseudoClassSelector", + "name": "global", + "args": { + "type": "SelectorList", + "start": 540, + "end": 543, + "children": [ + { + "type": "Selector", + "start": 540, + "end": 543, + "children": [ + { + "type": "TypeSelector", + "name": "nav", + "start": 540, + "end": 543 + } + ] + } + ] + }, + "start": 532, + "end": 544 + } + ] + } + ] + }, + "block": { + "type": "Block", + "start": 545, + "end": 577, + "children": [ + { + "type": "Declaration", + "start": 555, + "end": 570, + "property": "background", + "value": "red" + } + ] + }, + "start": 530, + "end": 577 } ], "content": { "start": 7, - "end": 459, - "styles": "\n /* test that all these are parsed correctly */\n\th1:nth-of-type(2n+1){\n background: red;\n }\n h1:nth-child(-n + 3 of li.important) {\n background: red;\n }\n h1:nth-child(1) {\n background: red;\n }\n h1:nth-child(p) {\n background: red;\n }\n h1:nth-child(n+7) {\n background: red;\n }\n h1:nth-child(even) {\n background: red;\n }\n h1:nth-child(odd) {\n background: red;\n }\n" + "end": 578, + "styles": "\n /* test that all these are parsed correctly */\n\th1:nth-of-type(2n+1){\n background: red;\n }\n h1:nth-child(-n + 3 of li.important) {\n background: red;\n }\n h1:nth-child(1) {\n background: red;\n }\n h1:nth-child(p) {\n background: red;\n }\n h1:nth-child(n+7) {\n background: red;\n }\n h1:nth-child(even) {\n background: red;\n }\n h1:nth-child(odd) {\n background: red;\n }\n h1:nth-child(\n n\n ) {\n background: red;\n }\n h1:global(nav) {\n background: red;\n }\n" } }, "js": [], - "start": 469, - "end": 484, + "start": 588, + "end": 600, "type": "Root", "fragment": { "type": "Fragment", "nodes": [ { "type": "Text", - "start": 467, - "end": 469, + "start": 586, + "end": 588, "raw": "\n\n", "data": "\n\n" }, { "type": "RegularElement", - "start": 469, - "end": 484, + "start": 588, + "end": 600, "name": "h1", "attributes": [], "fragment": { @@ -504,10 +634,10 @@ "nodes": [ { "type": "Text", - "start": 473, - "end": 479, - "raw": "Broken", - "data": "Broken" + "start": 592, + "end": 595, + "raw": "Foo", + "data": "Foo" } ], "transparent": true