fix: match class and style directives against attribute selector (#16179)

Co-authored-by: 7nik <kifiranet@gmail.com>
pull/16196/head
7nik 3 months ago committed by GitHub
parent 402434e6cd
commit 2b20a2d16b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

@ -0,0 +1,5 @@
---
'svelte': patch
---
fix: match class and style directives against attribute selector

@ -532,12 +532,7 @@ function relative_selector_might_apply_to_node(relative_selector, rule, element,
}
case 'ClassSelector': {
if (
!attribute_matches(element, 'class', name, '~=', false) &&
!element.attributes.some(
(attribute) => attribute.type === 'ClassDirective' && attribute.name === name
)
) {
if (!attribute_matches(element, 'class', name, '~=', false)) {
return false;
}
@ -633,6 +628,16 @@ function attribute_matches(node, name, expected_value, operator, case_insensitiv
if (attribute.type === 'SpreadAttribute') return true;
if (attribute.type === 'BindDirective' && attribute.name === name) return true;
// match attributes against the corresponding directive but bail out on exact matching
if (attribute.type === 'StyleDirective' && name.toLowerCase() === 'style') return true;
if (attribute.type === 'ClassDirective' && name.toLowerCase() === 'class') {
if (operator == '~=') {
if (attribute.name === expected_value) return true;
} else {
return true;
}
}
if (attribute.type !== 'Attribute') continue;
if (attribute.name.toLowerCase() !== name.toLowerCase()) continue;

@ -0,0 +1,2 @@
span[class].svelte-xyz { color: green }
div[style].svelte-xyz { color: green }

@ -0,0 +1,7 @@
<span class:foo={true}></span>
<div style:--foo="bar"></div>
<style>
span[class] { color: green }
div[style] { color: green }
</style>

@ -0,0 +1,20 @@
import { test } from '../../test';
export default test({
warnings: [
{
code: 'css_unused_selector',
message: 'Unused CSS selector ".third"\nhttps://svelte.dev/e/css_unused_selector',
start: {
line: 6,
column: 2,
character: 115
},
end: {
line: 6,
column: 8,
character: 121
}
}
]
});

@ -0,0 +1,3 @@
.first.svelte-xyz { color: green }
.second.svelte-xyz { color: green }
/* (unused) .third { color: red }*/

@ -0,0 +1,7 @@
<div class:first={true} class:second={true}></div>
<style>
.first { color: green }
.second { color: green }
.third { color: red }
</style>
Loading…
Cancel
Save