Skip to content

fix(compiler): scope nested CSS rules #69885

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

Draft
crisbeto wants to merge 1 commit into
base: main
Choose a base branch
from
+412 −21
Draft

fix(compiler): scope nested CSS rules #69885

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
40 changes: 27 additions & 13 deletions packages/compiler/src/shadow_css.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -596,18 +596,21 @@ export class ShadowCss {
let selector = rule.selector;
let content = rule.content;
if (rule.selector[0] !== '@') {
selector = this._scopeSelector({
selector,
scopeSelector,
hostSelector,
isParentSelector: true,
});
if (rule.isBlock) {
selector = this._scopeSelector({
selector,
scopeSelector,
hostSelector,
isParentSelector: true,
});
content = this._scopeSelectors(rule.content, scopeSelector, hostSelector);
}
} else if (scopedAtRuleIdentifiers.some((atRule) => rule.selector.startsWith(atRule))) {
content = this._scopeSelectors(rule.content, scopeSelector, hostSelector);
} else if (rule.selector.startsWith('@font-face') || rule.selector.startsWith('@page')) {
content = this._stripScopingSelectors(rule.content);
}
return new CssRule(selector, content);
return new CssRule(selector, content, rule.isBlock);
});
}

Expand Down Expand Up @@ -637,7 +640,7 @@ export class ShadowCss {
const selector = rule.selector
.replace(_shadowDeepSelectors, ' ')
.replace(_polyfillHostNoCombinatorRe, ' ');
return new CssRule(selector, rule.content);
return new CssRule(selector, rule.content, rule.isBlock);
});
}

Expand Down Expand Up @@ -748,7 +751,7 @@ export class ShadowCss {
const _scopeSelectorPart = (p: string) => {
let scopedP = p.trim();

if (!scopedP) {
if (!scopedP || scopedP === '&') {
return p;
}

Expand Down Expand Up @@ -1021,18 +1024,22 @@ const _commentWithHashPlaceHolderRe = new RegExp(COMMENT_PLACEHOLDER, 'g');

const BLOCK_PLACEHOLDER = '%BLOCK%';
const _ruleRe = new RegExp(
`(\\s*(?:${COMMENT_PLACEHOLDER}\\s*)*)([^;\\{\\}]+?)(\\s*)((?:{%BLOCK%}?\\s*;?)|(?:\\s*;))`,
`(\\s*(?:${COMMENT_PLACEHOLDER}\\s*)*)([^;\\{\\}]+?)(\\s*)((?:{%BLOCK%}?\\s*;?)|(?:\\s*;)|$)`,
'g',
);
const CONTENT_PAIRS = new Map([['{', '}']]);

const COMMA_IN_PLACEHOLDER = '%COMMA_IN_PLACEHOLDER%';
const SEMI_IN_PLACEHOLDER = '%SEMI_IN_PLACEHOLDER%';
const COLON_IN_PLACEHOLDER = '%COLON_IN_PLACEHOLDER%';
const LBRACE_IN_PLACEHOLDER = '%LBRACE_IN_PLACEHOLDER%';
const RBRACE_IN_PLACEHOLDER = '%RBRACE_IN_PLACEHOLDER%';

const _cssCommaInPlaceholderReGlobal = new RegExp(COMMA_IN_PLACEHOLDER, 'g');
const _cssSemiInPlaceholderReGlobal = new RegExp(SEMI_IN_PLACEHOLDER, 'g');
const _cssColonInPlaceholderReGlobal = new RegExp(COLON_IN_PLACEHOLDER, 'g');
const _cssLbraceInPlaceholderReGlobal = new RegExp(LBRACE_IN_PLACEHOLDER, 'g');
const _cssRbraceInPlaceholderReGlobal = new RegExp(RBRACE_IN_PLACEHOLDER, 'g');

// Matches any CSS variable name, defined by a double-hyphen followed by any valid ident.
// https://www.w3.org/TR/css-syntax-3/#ident-token-diagram
Expand Down Expand Up @@ -1067,8 +1074,9 @@ export function namespaceCssVariables(cssText: string): string {

export class CssRule {
constructor(
public selector: string,
public content: string,
readonly selector: string,
readonly content: string,
readonly isBlock: boolean,
) {}
}

Expand All @@ -1081,12 +1089,14 @@ export function processRules(input: string, ruleCallback: (rule: CssRule) => Css
let content = '';
let suffix = m[4];
let contentPrefix = '';
let hasBlock = false;
if (suffix && suffix.startsWith('{' + BLOCK_PLACEHOLDER)) {
content = inputWithEscapedBlocks.blocks[nextBlockIndex++];
suffix = suffix.substring(BLOCK_PLACEHOLDER.length + 1);
contentPrefix = '{';
hasBlock = true;
}
const rule = ruleCallback(new CssRule(selector, content));
const rule = ruleCallback(new CssRule(selector, content, hasBlock));
return `${m[1]}${rule.selector}${m[3]}${contentPrefix}${rule.content}${suffix}`;
});
return unescapeInStrings(escapedResult);
Expand Down Expand Up @@ -1155,6 +1165,8 @@ const ESCAPE_IN_STRING_MAP: {[key: string]: string} = {
';': SEMI_IN_PLACEHOLDER,
',': COMMA_IN_PLACEHOLDER,
':': COLON_IN_PLACEHOLDER,
'{': LBRACE_IN_PLACEHOLDER,
'}': RBRACE_IN_PLACEHOLDER,
};

/**
Expand Down Expand Up @@ -1225,6 +1237,8 @@ function unescapeInStrings(input: string): string {
let result = input.replace(_cssCommaInPlaceholderReGlobal, ',');
result = result.replace(_cssSemiInPlaceholderReGlobal, ';');
result = result.replace(_cssColonInPlaceholderReGlobal, ':');
result = result.replace(_cssLbraceInPlaceholderReGlobal, '{');
result = result.replace(_cssRbraceInPlaceholderReGlobal, '}');
return result;
}

Expand Down
Loading
Loading