msb-public
/
svelte
mirror of https://github.com/sveltejs/svelte
1
0
Code Issues Projects Releases Wiki Activity

fix: tweak css nth regex (#9806)

Browse Source 
fixes #9795
pull/9808/head
Simon H 1 year ago committed by GitHub
parent fc8349817f
commit 3c2e656187
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 159 additions and 16 deletions
Show Stats Download Patch File Download Diff File

5
.changeset/swift-donkeys-perform.md
Unescape View File

@ -0,0 +1,5 @@
---
'svelte': patch
---
fix: tweak css nth regex

4
packages/svelte/src/compiler/phases/1-parse/read/style.js
Unescape View File

@ -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_WHITESPACE = /^\s*(\+|~|>|\|\|)\s*/;
const REGEX_COMBINATOR = /^(\+|~|>|\|\|)/; const REGEX_COMBINATOR = /^(\+|~|>|\|\|)/;
const REGEX_PERCENTAGE = /^\d+(\.\d+)?%/; 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_WHITESPACE_OR_COLON = /[\s:]/;
const REGEX_BRACE_OR_SEMICOLON = /[{;]/; const REGEX_BRACE_OR_SEMICOLON = /[{;]/;
const REGEX_LEADING_HYPHEN_OR_DIGIT = /-?\d/; const REGEX_LEADING_HYPHEN_OR_DIGIT = /-?\d/;
@ -294,7 +294,7 @@ function read_selector(parser, inside_pseudo_class = false) {
start, start,
end: parser.index end: parser.index
}); });
} else if (parser.match_regex(REGEX_NTH_OF)) { } else if (inside_pseudo_class && parser.match_regex(REGEX_NTH_OF)) {
children.push({ children.push({
type: 'Nth', type: 'Nth',
value: /** @type {string} */ (parser.read(REGEX_NTH_OF)), value: /** @type {string} */ (parser.read(REGEX_NTH_OF)),

10
packages/svelte/tests/parser-modern/samples/css-nth-syntax/input.svelte
Unescape View File

@ -21,6 +21,14 @@
h1:nth-child(odd) { h1:nth-child(odd) {
background: red; background: red;
} }
h1:nth-child(
n
) {
background: red;
}
h1:global(nav) {
background: red;
}
</style> </style>
<h1>Broken</h1> <h1>Foo</h1>

156
packages/svelte/tests/parser-modern/samples/css-nth-syntax/output.json
Unescape View File

@ -2,7 +2,7 @@
"css": { "css": {
"type": "Style", "type": "Style",
"start": 0, "start": 0,
"end": 467, "end": 586,
"attributes": [], "attributes": [],
"children": [ "children": [
{ {
@ -471,32 +471,162 @@
}, },
"start": 408, "start": 408,
"end": 458 "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": { "content": {
"start": 7, "start": 7,
"end": 459, "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" "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": [], "js": [],
"start": 469, "start": 588,
"end": 484, "end": 600,
"type": "Root", "type": "Root",
"fragment": { "fragment": {
"type": "Fragment", "type": "Fragment",
"nodes": [ "nodes": [
{ {
"type": "Text", "type": "Text",
"start": 467, "start": 586,
"end": 469, "end": 588,
"raw": "\n\n", "raw": "\n\n",
"data": "\n\n" "data": "\n\n"
}, },
{ {
"type": "RegularElement", "type": "RegularElement",
"start": 469, "start": 588,
"end": 484, "end": 600,
"name": "h1", "name": "h1",
"attributes": [], "attributes": [],
"fragment": { "fragment": {
@ -504,10 +634,10 @@
"nodes": [ "nodes": [
{ {
"type": "Text", "type": "Text",
"start": 473, "start": 592,
"end": 479, "end": 595,
"raw": "Broken", "raw": "Foo",
"data": "Broken" "data": "Foo"
} }
], ],
"transparent": true "transparent": true

Write Preview
Loading…
Cancel
Save