fix: add global compound selector validation (#6322)

fixes #6272
prevents invalid CSS output

---------

Co-authored-by: Roy Choo <roy.choo@bytedance.com>
Co-authored-by: tanhauhau <lhtan93@gmail.com>
Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
pull/8342/head
Roy Choo 2 years ago committed by GitHub
parent ed575cc927
commit acbf8135a8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -234,6 +234,10 @@ export default {
code: 'css-invalid-global-selector', code: 'css-invalid-global-selector',
message: ':global(...) must contain a single selector' message: ':global(...) must contain a single selector'
}, },
css_invalid_global_selector_position: {
code: 'css-invalid-global-selector-position',
message: ':global(...) not at the start of a selector sequence should not contain type or universal selectors'
},
css_invalid_selector: (selector: string) => ({ css_invalid_selector: (selector: string) => ({
code: 'css-invalid-selector', code: 'css-invalid-selector',
message: `Invalid selector "${selector}"` message: `Invalid selector "${selector}"`

@ -148,6 +148,7 @@ export default class Selector {
} }
this.validate_global_with_multiple_selectors(component); this.validate_global_with_multiple_selectors(component);
this.validate_global_compound_selector(component);
this.validate_invalid_combinator_without_selector(component); this.validate_invalid_combinator_without_selector(component);
} }
@ -179,6 +180,23 @@ export default class Selector {
} }
} }
validate_global_compound_selector(component: Component) {
for (const block of this.blocks) {
for (let index = 0; index < block.selectors.length; index++) {
const selector = block.selectors[index];
if (selector.type === 'PseudoClassSelector' &&
selector.name === 'global' &&
index !== 0 &&
selector.children &&
selector.children.length > 0 &&
!/[.:#\s]/.test(selector.children[0].value)
) {
component.error(selector, compiler_errors.css_invalid_global_selector_position);
}
}
}
}
get_amount_class_specificity_increased() { get_amount_class_specificity_increased() {
let count = 0; let count = 0;
for (const block of this.blocks) { for (const block of this.blocks) {

@ -0,0 +1,12 @@
[{
"code": "css-invalid-global-selector-position",
"message": ":global(...) not at the start of a selector sequence should not contain type or universal selectors",
"start": {
"line": 2,
"column": 5
},
"end": {
"line": 2,
"column": 17
}
}]

@ -0,0 +1,5 @@
<style>
.foo:global(div) {
color: red;
}
</style>
Loading…
Cancel
Save