Skip to content

Commit 2dd3996

Browse files
vicbchuckjaz
vicb
authored and
chuckjaz
committed
refactor(ShadowCss): cleanup
1 parent d0dea57 commit 2dd3996

2 files changed

Lines changed: 40 additions & 51 deletions

File tree

‎modules/@angular/compiler/src/shadow_css.ts‎

Lines changed: 40 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,6 @@
66
* found in the LICENSE file at https://angular.io/license
77
*/
88

9-
import {StringWrapper, isBlank, isPresent} from './facade/lang';
10-
119
/**
1210
* This file is a port of shadowCSS from webcomponents.js to TypeScript.
1311
*
@@ -175,9 +173,8 @@ export class ShadowCss {
175173
**/
176174
private _insertPolyfillDirectivesInCssText(cssText: string): string {
177175
// Difference with webcomponents.js: does not handle comments
178-
return StringWrapper.replaceAllMapped(
179-
cssText, _cssContentNextSelectorRe,
180-
function(m: any /** TODO #9100 */) { return m[1] + '{'; });
176+
return cssText.replace(
177+
_cssContentNextSelectorRe, function(...m: string[]) { return m[1] + '{'; });
181178
}
182179

183180
/*
@@ -197,13 +194,10 @@ export class ShadowCss {
197194
**/
198195
private _insertPolyfillRulesInCssText(cssText: string): string {
199196
// Difference with webcomponents.js: does not handle comments
200-
return StringWrapper.replaceAllMapped(
201-
cssText, _cssContentRuleRe, function(m: any /** TODO #9100 */) {
202-
let rule = m[0];
203-
rule = StringWrapper.replace(rule, m[1], '');
204-
rule = StringWrapper.replace(rule, m[2], '');
205-
return m[3] + rule;
206-
});
197+
return cssText.replace(_cssContentRuleRe, (...m: string[]) => {
198+
const rule = m[0].replace(m[1], '').replace(m[2], '');
199+
return m[3] + rule;
200+
});
207201
}
208202

209203
/* Ensure styles are scoped. Pseudo-scoping takes a rule like:
@@ -220,7 +214,7 @@ export class ShadowCss {
220214
cssText = this._convertColonHost(cssText);
221215
cssText = this._convertColonHostContext(cssText);
222216
cssText = this._convertShadowDOMSelectors(cssText);
223-
if (isPresent(scopeSelector)) {
217+
if (scopeSelector) {
224218
cssText = this._scopeSelectors(cssText, scopeSelector, hostSelector);
225219
}
226220
cssText = cssText + '\n' + unscoped;
@@ -248,9 +242,7 @@ export class ShadowCss {
248242
let m: RegExpExecArray;
249243
_cssContentUnscopedRuleRe.lastIndex = 0;
250244
while ((m = _cssContentUnscopedRuleRe.exec(cssText)) !== null) {
251-
let rule = m[0];
252-
rule = StringWrapper.replace(rule, m[2], '');
253-
rule = StringWrapper.replace(rule, m[1], m[3]);
245+
const rule = m[0].replace(m[2], '').replace(m[1], m[3]);
254246
r += rule + '\n\n';
255247
}
256248
return r;
@@ -289,14 +281,14 @@ export class ShadowCss {
289281

290282
private _convertColonRule(cssText: string, regExp: RegExp, partReplacer: Function): string {
291283
// p1 = :host, p2 = contents of (), p3 rest of rule
292-
return StringWrapper.replaceAllMapped(cssText, regExp, function(m: any /** TODO #9100 */) {
293-
if (isPresent(m[2])) {
294-
const parts = m[2].split(','), r: any[] /** TODO #9100 */ = [];
284+
return cssText.replace(regExp, function(...m: string[]) {
285+
if (m[2]) {
286+
const parts = m[2].split(',');
287+
const r: string[] = [];
295288
for (let i = 0; i < parts.length; i++) {
296289
let p = parts[i];
297-
if (isBlank(p)) break;
298-
p = p.trim();
299-
r.push(partReplacer(_polyfillHostNoCombinator, p, m[3]));
290+
if (!p) break;
291+
r.push(partReplacer(_polyfillHostNoCombinator, p.trim(), m[3]));
300292
}
301293
return r.join(',');
302294
} else {
@@ -306,15 +298,15 @@ export class ShadowCss {
306298
}
307299

308300
private _colonHostContextPartReplacer(host: string, part: string, suffix: string): string {
309-
if (StringWrapper.contains(part, _polyfillHost)) {
301+
if (part.indexOf(_polyfillHost) > -1) {
310302
return this._colonHostPartReplacer(host, part, suffix);
311303
} else {
312304
return host + part + suffix + ', ' + part + ' ' + host + suffix;
313305
}
314306
}
315307

316308
private _colonHostPartReplacer(host: string, part: string, suffix: string): string {
317-
return host + StringWrapper.replace(part, _polyfillHost, '') + suffix;
309+
return host + part.replace(_polyfillHost, '') + suffix;
318310
}
319311

320312
/*
@@ -323,7 +315,7 @@ export class ShadowCss {
323315
*/
324316
private _convertShadowDOMSelectors(cssText: string): string {
325317
return _shadowDOMSelectorsRe.reduce(
326-
(result, pattern) => { return StringWrapper.replaceAll(result, pattern, ' '); }, cssText);
318+
(result, pattern) => { return result.replace(pattern, ' '); }, cssText);
327319
}
328320

329321
// change a selector like 'div' to 'name div'
@@ -369,8 +361,7 @@ export class ShadowCss {
369361
private _makeScopeMatcher(scopeSelector: string): RegExp {
370362
const lre = /\[/g;
371363
const rre = /\]/g;
372-
scopeSelector = StringWrapper.replaceAll(scopeSelector, lre, '\\[');
373-
scopeSelector = StringWrapper.replaceAll(scopeSelector, rre, '\\]');
364+
scopeSelector = scopeSelector.replace(lre, '\\[').replace(rre, '\\]');
374365
return new RegExp('^(' + scopeSelector + ')' + _selectorReSuffix, 'm');
375366
}
376367

@@ -387,8 +378,8 @@ export class ShadowCss {
387378
_polyfillHostRe.lastIndex = 0;
388379
if (_polyfillHostRe.test(selector)) {
389380
const replaceBy = this.strictStyling ? `[${hostSelector}]` : scopeSelector;
390-
selector = StringWrapper.replace(selector, _polyfillHostNoCombinator, replaceBy);
391-
return StringWrapper.replaceAll(selector, _polyfillHostRe, replaceBy + ' ');
381+
return selector.replace(_polyfillHostNoCombinator, replaceBy)
382+
.replace(_polyfillHostRe, replaceBy + ' ');
392383
} else {
393384
return scopeSelector + ' ' + selector;
394385
}
@@ -404,9 +395,9 @@ export class ShadowCss {
404395
const attrName = '[' + scopeSelector + ']';
405396

406397
const _scopeSelectorPart = (p: string) => {
407-
var scopedP = p.trim();
398+
let scopedP = p.trim();
408399

409-
if (scopedP.length == 0) {
400+
if (!scopedP) {
410401
return '';
411402
}
412403

@@ -480,7 +471,7 @@ const _colonHostContextRe = /:host-context/gim;
480471
const _commentRe = /\/\*\s*[\s\S]*?\*\//g;
481472

482473
function stripComments(input: string): string {
483-
return StringWrapper.replaceAllMapped(input, _commentRe, (_: any /** TODO #9100 */) => '');
474+
return input.replace(_commentRe, '');
484475
}
485476

486477
// all comments except inline source mapping
@@ -504,32 +495,31 @@ export class CssRule {
504495
export function processRules(input: string, ruleCallback: Function): string {
505496
const inputWithEscapedBlocks = escapeBlocks(input);
506497
let nextBlockIndex = 0;
507-
return StringWrapper.replaceAllMapped(
508-
inputWithEscapedBlocks.escapedString, _ruleRe, function(m: any /** TODO #9100 */) {
509-
const selector = m[2];
510-
let content = '';
511-
let suffix = m[4];
512-
let contentPrefix = '';
513-
if (isPresent(m[4]) && m[4].startsWith('{' + BLOCK_PLACEHOLDER)) {
514-
content = inputWithEscapedBlocks.blocks[nextBlockIndex++];
515-
suffix = m[4].substring(BLOCK_PLACEHOLDER.length + 1);
516-
contentPrefix = '{';
517-
}
518-
const rule = ruleCallback(new CssRule(selector, content));
519-
return `${m[1]}${rule.selector}${m[3]}${contentPrefix}${rule.content}${suffix}`;
520-
});
498+
return inputWithEscapedBlocks.escapedString.replace(_ruleRe, function(...m: string[]) {
499+
const selector = m[2];
500+
let content = '';
501+
let suffix = m[4];
502+
let contentPrefix = '';
503+
if (suffix && suffix.startsWith('{' + BLOCK_PLACEHOLDER)) {
504+
content = inputWithEscapedBlocks.blocks[nextBlockIndex++];
505+
suffix = suffix.substring(BLOCK_PLACEHOLDER.length + 1);
506+
contentPrefix = '{';
507+
}
508+
const rule = ruleCallback(new CssRule(selector, content));
509+
return `${m[1]}${rule.selector}${m[3]}${contentPrefix}${rule.content}${suffix}`;
510+
});
521511
}
522512

523513
class StringWithEscapedBlocks {
524514
constructor(public escapedString: string, public blocks: string[]) {}
525515
}
526516

527517
function escapeBlocks(input: string): StringWithEscapedBlocks {
528-
const inputParts = StringWrapper.split(input, _curlyRe);
529-
const resultParts: any[] /** TODO #9100 */ = [];
530-
const escapedBlocks: any[] /** TODO #9100 */ = [];
518+
const inputParts = input.split(_curlyRe);
519+
const resultParts: string[] = [];
520+
const escapedBlocks: string[] = [];
531521
let bracketCount = 0;
532-
let currentBlockParts: any[] /** TODO #9100 */ = [];
522+
let currentBlockParts: string[] = [];
533523
for (let partIndex = 0; partIndex < inputParts.length; partIndex++) {
534524
const part = inputParts[partIndex];
535525
if (part == CLOSE_CURLY) {

‎modules/@angular/compiler/test/shadow_css_spec.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@
77
*/
88

99
import {CssRule, ShadowCss, processRules} from '@angular/compiler/src/shadow_css';
10-
import {describe, expect, it} from '@angular/core/testing/testing_internal';
1110
import {normalizeCSS} from '@angular/platform-browser/testing/browser_util';
1211

1312
export function main() {

0 commit comments

Comments
 (0)