Elgato_dark/angular
1
0
Fork 0
mirror of https://github.com/angular/angular synced 2026-05-24 09:28:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(compiler): scope selectors in @scope queries (#50747)

Browse source 
make sure selectors inside @scope queries are correctly scoped

PR Close #50747
This commit is contained in:
Daniel Puckowski 2023-06-16 11:16:25 -04:00 committed by Dylan Hunn
parent 3dafc14e84
commit c27a1e61d6
2 changed files with 29 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/compiler/src/shadow_css.ts
View file

@ -560,7 +560,7 @@ export class ShadowCss {
} else if (
rule.selector.startsWith('@media') || rule.selector.startsWith('@supports') ||
rule.selector.startsWith('@document') || rule.selector.startsWith('@layer') ||
rule.selector.startsWith('@container')) {
rule.selector.startsWith('@container') || rule.selector.startsWith('@scope')) {
content = this._scopeSelectors(rule.content, scopeSelector, hostSelector);
} else if (rule.selector.startsWith('@font-face') || rule.selector.startsWith('@page')) {
content = this._stripScopingSelectors(rule.content);

28
packages/compiler/test/shadow_css/at_rules_spec.ts
View file

@ -173,6 +173,34 @@ describe('ShadowCss, at-rules', () => {
});
});
describe('@scope', () => {
it('should scope normal selectors inside a scope rule with scoping limits', () => {
const css = `
@scope (.media-object) to (.content > *) {
img { border-radius: 50%; }
.content { padding: 1em; }
}`;
const result = shim(css, 'host-a');
expect(result).toEqualCss(`
@scope (.media-object) to (.content > *) {
img[host-a] { border-radius: 50%; }
.content[host-a] { padding: 1em; }
}`);
});
it('should scope normal selectors inside a scope rule', () => {
const css = `
@scope (.light-scheme) {
a { color: darkmagenta; }
}`;
const result = shim(css, 'host-a');
expect(result).toEqualCss(`
@scope (.light-scheme) {
a[host-a] { color: darkmagenta; }
}`);
});
});
describe('@document', () => {
it('should handle document rules', () => {
const css = '@document url(http://www.w3.org/) {div {font-size:50px;}}';