honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(shadow_css): support `/deep/` and `>>>` 

Fixes #7562

Closes #7563
This commit is contained in:
Tobias Bosch 2016-03-11 13:35:28 -08:00
parent b72bab49aa
commit cb38d72ff4
2 changed files with 12 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
modules/angular2/src/compiler/shadow_css.ts
View File

@ -343,14 +343,16 @@ export class ShadowCss {
strict: boolean): string { strict: boolean): string {
var r = [], parts = selector.split(','); var r = [], parts = selector.split(',');
for (var i = 0; i < parts.length; i++) { for (var i = 0; i < parts.length; i++) {
var p = parts[i]; var p = parts[i].trim();
p = p.trim(); var deepParts = StringWrapper.split(p, _shadowDeepSelectors);
if (this._selectorNeedsScoping(p, scopeSelector)) { var shallowPart = deepParts[0];
p = strict && !StringWrapper.contains(p, _polyfillHostNoCombinator) ? if (this._selectorNeedsScoping(shallowPart, scopeSelector)) {
this._applyStrictSelectorScope(p, scopeSelector) : deepParts[0] = strict && !StringWrapper.contains(shallowPart, _polyfillHostNoCombinator) ?
this._applySelectorScope(p, scopeSelector, hostSelector); this._applyStrictSelectorScope(shallowPart, scopeSelector) :
this._applySelectorScope(shallowPart, scopeSelector, hostSelector);
} }
r.push(p); // replace /deep/ with a space for child selectors
r.push(deepParts.join(' '));
} }
return r.join(', '); return r.join(', ');
} }
@ -434,17 +436,16 @@ var _cssColonHostRe = RegExpWrapper.create('(' + _polyfillHost + _parenSuffix, '
var _cssColonHostContextRe = RegExpWrapper.create('(' + _polyfillHostContext + _parenSuffix, 'im'); var _cssColonHostContextRe = RegExpWrapper.create('(' + _polyfillHostContext + _parenSuffix, 'im');
var _polyfillHostNoCombinator = _polyfillHost + '-no-combinator'; var _polyfillHostNoCombinator = _polyfillHost + '-no-combinator';
var _shadowDOMSelectorsRe = [ var _shadowDOMSelectorsRe = [
/>>>/g,
/::shadow/g, /::shadow/g,
/::content/g, /::content/g,
// Deprecated selectors // Deprecated selectors
// TODO(vicb): see https://github.com/angular/clang-format/issues/16 // TODO(vicb): see https://github.com/angular/clang-format/issues/16
// clang-format off // clang-format off
/\/deep\//g, // former >>>
/\/shadow-deep\//g, // former /deep/ /\/shadow-deep\//g, // former /deep/
/\/shadow\//g, // former ::shadow /\/shadow\//g, // former ::shadow
// clanf-format on // clanf-format on
]; ];
var _shadowDeepSelectors = /(?:>>>)|(?:\/deep\/)/g;
var _selectorReSuffix = '([>\\s~+\[.,{:][\\s\\S]*)?$'; var _selectorReSuffix = '([>\\s~+\[.,{:][\\s\\S]*)?$';
var _polyfillHostRe = RegExpWrapper.create(_polyfillHost, 'im'); var _polyfillHostRe = RegExpWrapper.create(_polyfillHost, 'im');
var _colonHostRe = /:host/gim; var _colonHostRe = /:host/gim;

4
modules/angular2/test/compiler/shadow_css_spec.ts
View File

@ -144,12 +144,12 @@ export function main() {
it('should handle /deep/', () => { it('should handle /deep/', () => {
var css = s('x /deep/ y {}', 'a'); var css = s('x /deep/ y {}', 'a');
expect(css).toEqual('x[a] y[a] {}'); expect(css).toEqual('x[a] y {}');
}); });
it('should handle >>>', () => { it('should handle >>>', () => {
var css = s('x >>> y {}', 'a'); var css = s('x >>> y {}', 'a');
expect(css).toEqual('x[a] y[a] {}'); expect(css).toEqual('x[a] y {}');
}); });
it('should pass through @import directives', () => { it('should pass through @import directives', () => {