Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

(WIP) fix: correctly mark :not selectors #14176

Closed
wants to merge 1 commit into from
Closed
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 37 additions & 17 deletions packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js
Original file line number Diff line number Diff line change
Expand Up @@ -489,14 +489,17 @@
}

for (const selector of other_selectors) {
if (selector.type === 'Percentage' || selector.type === 'Nth') continue;
if (selector.type === 'Percentage' || selector.type === 'Nth') {
if (state.inside_not) return true;
continue;
}

const name = selector.name.replace(regex_backslash_and_following_character, '$1');

switch (selector.type) {
case 'PseudoClassSelector': {
if (name === 'host' || name === 'root') {
return false;
return state.inside_not;
}

if (
Expand All @@ -514,6 +517,7 @@

if ((name === 'is' || name === 'where' || name === 'not') && selector.args) {
let matched = false;
let didnt_match = false;

for (const complex_selector of selector.args.children) {
const relative = truncate(complex_selector);
Expand All @@ -522,10 +526,12 @@
if (is_global) {
complex_selector.metadata.used = true;
matched = true;
} else if (name !== 'not' && apply_selector(relative, rule, element, state)) {
didnt_match = true;
} else if (apply_selector(relative, rule, element, { ...state, inside_not: true })) {
complex_selector.metadata.used = true;
matched = true;
} else if (
false &&

Check failure on line 534 in packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js

View workflow job for this annotation

GitHub Actions / Lint

Unexpected constant condition

Check failure on line 534 in packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js

View workflow job for this annotation

GitHub Actions / Lint

Unexpected constant truthiness on the left-hand side of a `&&` expression

Check failure on line 534 in packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js

View workflow job for this annotation

GitHub Actions / Lint

Unexpected constant truthiness on the left-hand side of a `&&` expression
name === 'not' &&
!apply_selector(relative, rule, element, { ...state, inside_not: true })
) {
Expand Down Expand Up @@ -554,9 +560,12 @@
// The result may not match a real element, so the only drawback is the missing prune.
complex_selector.metadata.used = true;
matched = true;
didnt_match = true;
for (const selector of relative) {
selector.metadata.scoped = true;
}
} else {
didnt_match = true;
}
}

Expand All @@ -578,21 +587,23 @@
});
}

return false;
return state.inside_not && didnt_match;
}
}

break;
}

case 'PseudoElementSelector': {
break;
return true;
}

case 'AttributeSelector': {
const whitelisted = whitelist_attribute_selector.get(element.name.toLowerCase());
if (whitelisted?.includes(selector.name.toLowerCase())) {
return true;
}
if (
!whitelisted?.includes(selector.name.toLowerCase()) &&
!attribute_matches(
element,
selector.name,
Expand All @@ -601,19 +612,20 @@
selector.flags?.includes('i') ?? false
)
) {
return false;
return state.inside_not;
}

break;
}

case 'ClassSelector': {
if (
!attribute_matches(element, 'class', name, '~=', false) &&
!element.attributes.some(
(attribute) => attribute.type === 'ClassDirective' && attribute.name === name
)
) {
return false;
const matches_class_directive = element.attributes.some(
(attribute) => attribute.type === 'ClassDirective' && attribute.name === name
);
if (!attribute_matches(element, 'class', name, '~=', false) && !matches_class_directive) {
return state.inside_not;
} else if (matches_class_directive) {
return true;
}

break;
Expand All @@ -633,26 +645,34 @@
name !== '*' &&
element.type !== 'SvelteElement'
) {
return false;
return state.inside_not;
} else if (element.type === 'SvelteElement' && state.inside_not) {
return true;
}

break;
}

case 'NestingSelector': {
let matched = false;
let didnt_match = true;

const parent = /** @type {Compiler.Css.Rule} */ (rule.metadata.parent_rule);

for (const complex_selector of parent.prelude.children) {
if (apply_selector(truncate(complex_selector), parent, element, state)) {
complex_selector.metadata.used = true;
matched = true;
} else {
didnt_match = true;
}
}

if (!matched) {
return false;
return state.inside_not;
}
if (state.inside_not && didnt_match) {
return true;
}

break;
Expand All @@ -661,7 +681,7 @@
}

// possible match
return true;
return !state.inside_not;
}

/**
Expand Down
Loading