javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-11-05 13:26:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(core): css-what parser for CSS selectors + support for :not(), :is(), and :where() Level 4 and ~ (#10514)

Browse Source
This commit is contained in:
Dimitris-Rafail Katsampas
2024-06-28 23:57:29 +03:00
committed by GitHub
parent 88a047254b
commit 2fb4f23670
10 changed files with 750 additions and 449 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
packages/core/ui/styling/css-selector.spec.ts
View File

@@ -8,12 +8,12 @@ describe('css-selector', () => {
sel.match(<any>{
cssType: 'button',
testAttr: true,
})
}),
).toBeTruthy();
expect(
sel.match(<any>{
cssType: 'button',
})
}),
).toBeFalsy();
});
@@ -119,7 +119,7 @@ describe('css-selector', () => {
}
});
it('direct parent combinator', () => {
it('direct child combinator', () => {
const rule = createOne(`listview > item:selected { color: red; }`);
expect(
rule.selectors[0].match({
@@ -128,7 +128,7 @@ describe('css-selector', () => {
parent: {
cssType: 'listview',
},
})
}),
).toBe(true);
expect(
rule.selectors[0].match({
@@ -140,11 +140,11 @@ describe('css-selector', () => {
cssType: 'listview',
},
},
})
}),
).toBe(false);
});
it('ancestor combinator', () => {
it('descendant combinator', () => {
const rule = createOne(`listview item:selected { color: red; }`);
expect(
rule.selectors[0].match({
@@ -153,7 +153,7 @@ describe('css-selector', () => {
parent: {
cssType: 'listview',
},
})
}),
).toBe(true);
expect(
rule.selectors[0].match({
@@ -165,7 +165,7 @@ describe('css-selector', () => {
cssType: 'listview',
},
},
})
}),
).toBe(true);
expect(
rule.selectors[0].match({
@@ -177,7 +177,7 @@ describe('css-selector', () => {
cssType: 'page',
},
},
})
}),
).toBe(false);
});
@@ -202,6 +202,79 @@ describe('css-selector', () => {
expect(sel.match(child)).toBe(true);
});
it(':not() pseudo-class', () => {
const rule = createOne(`listview :not(item:selected) { color: red; }`);
expect(
rule.selectors[0].match({
cssType: 'item',
cssPseudoClasses: new Set(['selected']),
parent: {
cssType: 'listview',
},
}),
).toBe(false);
expect(
rule.selectors[0].match({
cssType: 'item',
parent: {
cssType: 'listview',
},
}),
).toBe(true);
expect(
rule.selectors[0].match({
cssType: 'label',
parent: {
cssType: 'listview',
},
}),
).toBe(true);
});
it(':is() pseudo-class', () => {
const rule = createOne(`listview :is(item:selected) { color: red; }`);
expect(
rule.selectors[0].match({
cssType: 'item',
cssPseudoClasses: new Set(['selected']),
parent: {
cssType: 'listview',
},
}),
).toBe(true);
expect(
rule.selectors[0].match({
cssType: 'item',
parent: {
cssType: 'listview',
},
}),
).toBe(false);
});
it(':where() pseudo-class', () => {
const rule = createOne(`listview :is(item:selected) { color: red; }`);
expect(
rule.selectors[0].match({
cssType: 'item',
cssPseudoClasses: new Set(['selected']),
parent: {
cssType: 'listview',
},
}),
).toBe(true);
expect(
rule.selectors[0].match({
cssType: 'item',
parent: {
cssType: 'listview',
},
}),
).toBe(false);
// TODO: Re-add this when decorators actually work with ts-jest
//expect(rule.selectors[0].specificity).toEqual(0);
});
function toString() {
return this.cssType;
}