Skip to content

Commit 3c2e656

Browse files
authored
fix: tweak css nth regex (#9806)
fixes #9795
1 parent fc83498 commit 3c2e656

File tree

4 files changed

+159
-16
lines changed

4 files changed

+159
-16
lines changed

.changeset/swift-donkeys-perform.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'svelte': patch
3+
---
4+
5+
fix: tweak css nth regex

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ const REGEX_ATTRIBUTE_FLAGS = /^[a-zA-Z]+/; // only `i` and `s` are valid today,
66
const REGEX_COMBINATOR_WHITESPACE = /^\s*(\+|~|>|\|\|)\s*/;
77
const REGEX_COMBINATOR = /^(\+|~|>|\|\|)/;
88
const REGEX_PERCENTAGE = /^\d+(\.\d+)?%/;
9-
const REGEX_NTH_OF = /^(even|odd|(-?[0-9]?n?(\s*\+\s*[0-9]+)?))(\s+of\s+)?/;
9+
const REGEX_NTH_OF = /^\s*(even|odd|(-?[0-9]?n?(\s*\+\s*[0-9]+)?))(\s*(?=[,)])|\s+of\s+)/;
1010
const REGEX_WHITESPACE_OR_COLON = /[\s:]/;
1111
const REGEX_BRACE_OR_SEMICOLON = /[{;]/;
1212
const REGEX_LEADING_HYPHEN_OR_DIGIT = /-?\d/;
@@ -294,7 +294,7 @@ function read_selector(parser, inside_pseudo_class = false) {
294294
start,
295295
end: parser.index
296296
});
297-
} else if (parser.match_regex(REGEX_NTH_OF)) {
297+
} else if (inside_pseudo_class && parser.match_regex(REGEX_NTH_OF)) {
298298
children.push({
299299
type: 'Nth',
300300
value: /** @type {string} */ (parser.read(REGEX_NTH_OF)),

packages/svelte/tests/parser-modern/samples/css-nth-syntax/input.svelte

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,14 @@
2121
h1:nth-child(odd) {
2222
background: red;
2323
}
24+
h1:nth-child(
25+
n
26+
) {
27+
background: red;
28+
}
29+
h1:global(nav) {
30+
background: red;
31+
}
2432
</style>
2533

26-
<h1>Broken</h1>
34+
<h1>Foo</h1>

packages/svelte/tests/parser-modern/samples/css-nth-syntax/output.json

Lines changed: 143 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"css": {
33
"type": "Style",
44
"start": 0,
5-
"end": 467,
5+
"end": 586,
66
"attributes": [],
77
"children": [
88
{
@@ -471,43 +471,173 @@
471471
},
472472
"start": 408,
473473
"end": 458
474+
},
475+
{
476+
"type": "Rule",
477+
"prelude": {
478+
"type": "SelectorList",
479+
"start": 463,
480+
"end": 492,
481+
"children": [
482+
{
483+
"type": "Selector",
484+
"start": 463,
485+
"end": 492,
486+
"children": [
487+
{
488+
"type": "TypeSelector",
489+
"name": "h1",
490+
"start": 463,
491+
"end": 465
492+
},
493+
{
494+
"type": "PseudoClassSelector",
495+
"name": "nth-child",
496+
"args": {
497+
"type": "SelectorList",
498+
"start": 476,
499+
"end": 491,
500+
"children": [
501+
{
502+
"type": "Selector",
503+
"start": 476,
504+
"end": 491,
505+
"children": [
506+
{
507+
"type": "Nth",
508+
"value": "\n n\n ",
509+
"start": 476,
510+
"end": 491
511+
}
512+
]
513+
}
514+
]
515+
},
516+
"start": 465,
517+
"end": 492
518+
}
519+
]
520+
}
521+
]
522+
},
523+
"block": {
524+
"type": "Block",
525+
"start": 493,
526+
"end": 525,
527+
"children": [
528+
{
529+
"type": "Declaration",
530+
"start": 503,
531+
"end": 518,
532+
"property": "background",
533+
"value": "red"
534+
}
535+
]
536+
},
537+
"start": 463,
538+
"end": 525
539+
},
540+
{
541+
"type": "Rule",
542+
"prelude": {
543+
"type": "SelectorList",
544+
"start": 530,
545+
"end": 544,
546+
"children": [
547+
{
548+
"type": "Selector",
549+
"start": 530,
550+
"end": 544,
551+
"children": [
552+
{
553+
"type": "TypeSelector",
554+
"name": "h1",
555+
"start": 530,
556+
"end": 532
557+
},
558+
{
559+
"type": "PseudoClassSelector",
560+
"name": "global",
561+
"args": {
562+
"type": "SelectorList",
563+
"start": 540,
564+
"end": 543,
565+
"children": [
566+
{
567+
"type": "Selector",
568+
"start": 540,
569+
"end": 543,
570+
"children": [
571+
{
572+
"type": "TypeSelector",
573+
"name": "nav",
574+
"start": 540,
575+
"end": 543
576+
}
577+
]
578+
}
579+
]
580+
},
581+
"start": 532,
582+
"end": 544
583+
}
584+
]
585+
}
586+
]
587+
},
588+
"block": {
589+
"type": "Block",
590+
"start": 545,
591+
"end": 577,
592+
"children": [
593+
{
594+
"type": "Declaration",
595+
"start": 555,
596+
"end": 570,
597+
"property": "background",
598+
"value": "red"
599+
}
600+
]
601+
},
602+
"start": 530,
603+
"end": 577
474604
}
475605
],
476606
"content": {
477607
"start": 7,
478-
"end": 459,
479-
"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"
608+
"end": 578,
609+
"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"
480610
}
481611
},
482612
"js": [],
483-
"start": 469,
484-
"end": 484,
613+
"start": 588,
614+
"end": 600,
485615
"type": "Root",
486616
"fragment": {
487617
"type": "Fragment",
488618
"nodes": [
489619
{
490620
"type": "Text",
491-
"start": 467,
492-
"end": 469,
621+
"start": 586,
622+
"end": 588,
493623
"raw": "\n\n",
494624
"data": "\n\n"
495625
},
496626
{
497627
"type": "RegularElement",
498-
"start": 469,
499-
"end": 484,
628+
"start": 588,
629+
"end": 600,
500630
"name": "h1",
501631
"attributes": [],
502632
"fragment": {
503633
"type": "Fragment",
504634
"nodes": [
505635
{
506636
"type": "Text",
507-
"start": 473,
508-
"end": 479,
509-
"raw": "Broken",
510-
"data": "Broken"
637+
"start": 592,
638+
"end": 595,
639+
"raw": "Foo",
640+
"data": "Foo"
511641
}
512642
],
513643
"transparent": true

0 commit comments

Comments
 (0)