⚡ Sangsakala Proxy 🏠 Home
Skip to content

fix(core): boolean properties and class substring operators in attribute selectors #11529

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.

Sign up for GitHub

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

Open
triniwiz wants to merge 2 commits into
base: main
Choose a base branch
from
Open

fix(core): boolean properties and class substring operators in attribute selectors #11529

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
bc871b7
fix(core): boolean properties and class substring operators in attrib…
triniwiz Oct 15, 2026
aab87c4
chore(core): drop comments
triniwiz Oct 15, 2026
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
35 changes: 35 additions & 0 deletions packages/core/ui/styling/css-selector.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -360,6 +360,41 @@ describe('css-selector', () => {
}
}

it('matches a boolean property only while it is true, like an HTML boolean attribute', () => {
const rule = createOne(`[hidden] { display: none; }`);

expect(rule.selectors[0].match(<any>{ cssType: 'label', hidden: false })).toBe(false);
expect(rule.selectors[0].match(<any>{ cssType: 'label', hidden: true })).toBe(true);
});

it('still compares a false boolean property by value', () => {
const rule = createOne(`[hidden=false] { color: red; }`);

expect(rule.selectors[0].match(<any>{ cssType: 'label', hidden: false })).toBe(true);
expect(rule.selectors[0].match(<any>{ cssType: 'label', hidden: true })).toBe(false);
});

it('matches substring operators against the class attribute', () => {
const contains = createOne(`[class*='btn-'] { color: red; }`).selectors[0];
const prefix = createOne(`[class^='col'] { color: red; }`).selectors[0];
const node = (className: string) => <any>{ cssType: 'label', class: className, cssClasses: new Set(className.split(' ')) };

expect(contains.match(node('btn btn-primary'))).toBe(true);
expect(contains.match(node('btn'))).toBe(false);
expect(contains.match(node('btn-'))).toBe(true);
expect(prefix.match(node('col-6 row'))).toBe(true);
expect(prefix.match(node('row col-6'))).toBe(false);
});

it('keeps class selectors and [class~=x] as class matches', () => {
const node = <any>{ cssType: 'label', class: 'a b', cssClasses: new Set(['a', 'b']) };

expect(createOne(`.b { color: red; }`).selectors[0].match(node)).toBe(true);
expect(createOne(`[class~=b] { color: red; }`).selectors[0].match(node)).toBe(true);
expect(createOne(`[class=b] { color: red; }`).selectors[0].match(node)).toBe(false);
expect(createOne(`[class='a b'] { color: red; }`).selectors[0].match(node)).toBe(true);
});

it('does not match a node that does not know the attribute', () => {
const rule = createOne(`.title[_ngcontent-c7] { color: red; }`);
const node = { cssType: 'label', cssClasses: new Set(['title']), '_ngcontent-c3': '' };
Expand Down
4 changes: 2 additions & 2 deletions packages/core/ui/styling/css-selector.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -381,7 +381,7 @@ export class AttributeSelector extends SimpleSelector {
let attr = node[this.attribute];

if (this.test === 'exists') {
return !isNullOrUndefined(attr);
return !isNullOrUndefined(attr) && attr !== false;
}

if (!this.value) {
Expand Down Expand Up @@ -983,7 +983,7 @@ function appendDeclaration(declarations: Declaration[], decl: ReworkCSS.Declarat

function createSimpleSelectorFromAst(ast: CSSWhatSelector): SimpleSelector {
if (ast.type === 'attribute') {
if (ast.name === 'class') {
if (ast.name === 'class' && ast.action === 'element' && ast.ignoreCase !== true) {
return new ClassSelector(ast.value);
}

Expand Down
Loading