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

refactor(ShadowCss): cleanup

This commit is contained in:
Victor Berchet 2016-09-26 09:31:45 -07:00 committed by Chuck Jazdzewski
parent a92b573309
commit f7bfda31ff
2 changed files with 40 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
modules/@angular/compiler/src/shadow_css.ts
View File

@ -6,8 +6,6 @@
* found in the LICENSE file at https://angular.io/license * found in the LICENSE file at https://angular.io/license
*/ */
import {StringWrapper, isBlank, isPresent} from './facade/lang';
/** /**
* This file is a port of shadowCSS from webcomponents.js to TypeScript. * This file is a port of shadowCSS from webcomponents.js to TypeScript.
* *
@ -175,9 +173,8 @@ export class ShadowCss {
**/ **/
private _insertPolyfillDirectivesInCssText(cssText: string): string { private _insertPolyfillDirectivesInCssText(cssText: string): string {
// Difference with webcomponents.js: does not handle comments // Difference with webcomponents.js: does not handle comments
return StringWrapper.replaceAllMapped( return cssText.replace(
cssText, _cssContentNextSelectorRe, _cssContentNextSelectorRe, function(...m: string[]) { return m[1] + '{'; });
function(m: any /** TODO #9100 */) { return m[1] + '{'; });
} }
/* /*
@ -197,11 +194,8 @@ export class ShadowCss {
**/ **/
private _insertPolyfillRulesInCssText(cssText: string): string { private _insertPolyfillRulesInCssText(cssText: string): string {
// Difference with webcomponents.js: does not handle comments // Difference with webcomponents.js: does not handle comments
return StringWrapper.replaceAllMapped( return cssText.replace(_cssContentRuleRe, (...m: string[]) => {
cssText, _cssContentRuleRe, function(m: any /** TODO #9100 */) { const rule = m[0].replace(m[1], '').replace(m[2], '');
let rule = m[0];
rule = StringWrapper.replace(rule, m[1], '');
rule = StringWrapper.replace(rule, m[2], '');
return m[3] + rule; return m[3] + rule;
}); });
} }
@ -220,7 +214,7 @@ export class ShadowCss {
cssText = this._convertColonHost(cssText); cssText = this._convertColonHost(cssText);
cssText = this._convertColonHostContext(cssText); cssText = this._convertColonHostContext(cssText);
cssText = this._convertShadowDOMSelectors(cssText); cssText = this._convertShadowDOMSelectors(cssText);
if (isPresent(scopeSelector)) { if (scopeSelector) {
cssText = this._scopeSelectors(cssText, scopeSelector, hostSelector); cssText = this._scopeSelectors(cssText, scopeSelector, hostSelector);
} }
cssText = cssText + '\n' + unscoped; cssText = cssText + '\n' + unscoped;
@ -248,9 +242,7 @@ export class ShadowCss {
let m: RegExpExecArray; let m: RegExpExecArray;
_cssContentUnscopedRuleRe.lastIndex = 0; _cssContentUnscopedRuleRe.lastIndex = 0;
while ((m = _cssContentUnscopedRuleRe.exec(cssText)) !== null) { while ((m = _cssContentUnscopedRuleRe.exec(cssText)) !== null) {
let rule = m[0]; const rule = m[0].replace(m[2], '').replace(m[1], m[3]);
rule = StringWrapper.replace(rule, m[2], '');
rule = StringWrapper.replace(rule, m[1], m[3]);
r += rule + '\n\n'; r += rule + '\n\n';
} }
return r; return r;
@ -289,14 +281,14 @@ export class ShadowCss {
private _convertColonRule(cssText: string, regExp: RegExp, partReplacer: Function): string { private _convertColonRule(cssText: string, regExp: RegExp, partReplacer: Function): string {
// p1 = :host, p2 = contents of (), p3 rest of rule // p1 = :host, p2 = contents of (), p3 rest of rule
return StringWrapper.replaceAllMapped(cssText, regExp, function(m: any /** TODO #9100 */) { return cssText.replace(regExp, function(...m: string[]) {
if (isPresent(m[2])) { if (m[2]) {
const parts = m[2].split(','), r: any[] /** TODO #9100 */ = []; const parts = m[2].split(',');
const r: string[] = [];
for (let i = 0; i < parts.length; i++) { for (let i = 0; i < parts.length; i++) {
let p = parts[i]; let p = parts[i];
if (isBlank(p)) break; if (!p) break;
p = p.trim(); r.push(partReplacer(_polyfillHostNoCombinator, p.trim(), m[3]));
r.push(partReplacer(_polyfillHostNoCombinator, p, m[3]));
} }
return r.join(','); return r.join(',');
} else { } else {
@ -306,7 +298,7 @@ export class ShadowCss {
} }
private _colonHostContextPartReplacer(host: string, part: string, suffix: string): string { private _colonHostContextPartReplacer(host: string, part: string, suffix: string): string {
if (StringWrapper.contains(part, _polyfillHost)) { if (part.indexOf(_polyfillHost) > -1) {
return this._colonHostPartReplacer(host, part, suffix); return this._colonHostPartReplacer(host, part, suffix);
} else { } else {
return host + part + suffix + ', ' + part + ' ' + host + suffix; return host + part + suffix + ', ' + part + ' ' + host + suffix;
@ -314,7 +306,7 @@ export class ShadowCss {
} }
private _colonHostPartReplacer(host: string, part: string, suffix: string): string { private _colonHostPartReplacer(host: string, part: string, suffix: string): string {
return host + StringWrapper.replace(part, _polyfillHost, '') + suffix; return host + part.replace(_polyfillHost, '') + suffix;
} }
/* /*
@ -323,7 +315,7 @@ export class ShadowCss {
*/ */
private _convertShadowDOMSelectors(cssText: string): string { private _convertShadowDOMSelectors(cssText: string): string {
return _shadowDOMSelectorsRe.reduce( return _shadowDOMSelectorsRe.reduce(
(result, pattern) => { return StringWrapper.replaceAll(result, pattern, ' '); }, cssText); (result, pattern) => { return result.replace(pattern, ' '); }, cssText);
} }
// change a selector like 'div' to 'name div' // change a selector like 'div' to 'name div'
@ -369,8 +361,7 @@ export class ShadowCss {
private _makeScopeMatcher(scopeSelector: string): RegExp { private _makeScopeMatcher(scopeSelector: string): RegExp {
const lre = /\[/g; const lre = /\[/g;
const rre = /\]/g; const rre = /\]/g;
scopeSelector = StringWrapper.replaceAll(scopeSelector, lre, '\\['); scopeSelector = scopeSelector.replace(lre, '\\[').replace(rre, '\\]');
scopeSelector = StringWrapper.replaceAll(scopeSelector, rre, '\\]');
return new RegExp('^(' + scopeSelector + ')' + _selectorReSuffix, 'm'); return new RegExp('^(' + scopeSelector + ')' + _selectorReSuffix, 'm');
} }
@ -387,8 +378,8 @@ export class ShadowCss {
_polyfillHostRe.lastIndex = 0; _polyfillHostRe.lastIndex = 0;
if (_polyfillHostRe.test(selector)) { if (_polyfillHostRe.test(selector)) {
const replaceBy = this.strictStyling ? `[${hostSelector}]` : scopeSelector; const replaceBy = this.strictStyling ? `[${hostSelector}]` : scopeSelector;
selector = StringWrapper.replace(selector, _polyfillHostNoCombinator, replaceBy); return selector.replace(_polyfillHostNoCombinator, replaceBy)
return StringWrapper.replaceAll(selector, _polyfillHostRe, replaceBy + ' '); .replace(_polyfillHostRe, replaceBy + ' ');
} else { } else {
return scopeSelector + ' ' + selector; return scopeSelector + ' ' + selector;
} }
@ -404,9 +395,9 @@ export class ShadowCss {
const attrName = '[' + scopeSelector + ']'; const attrName = '[' + scopeSelector + ']';
const _scopeSelectorPart = (p: string) => { const _scopeSelectorPart = (p: string) => {
var scopedP = p.trim(); let scopedP = p.trim();
if (scopedP.length == 0) { if (!scopedP) {
return ''; return '';
} }
@ -480,7 +471,7 @@ const _colonHostContextRe = /:host-context/gim;
const _commentRe = /\/\*\s*[\s\S]*?\*\//g; const _commentRe = /\/\*\s*[\s\S]*?\*\//g;
function stripComments(input: string): string { function stripComments(input: string): string {
return StringWrapper.replaceAllMapped(input, _commentRe, (_: any /** TODO #9100 */) => ''); return input.replace(_commentRe, '');
} }
// all comments except inline source mapping // all comments except inline source mapping
@ -504,15 +495,14 @@ export class CssRule {
export function processRules(input: string, ruleCallback: Function): string { export function processRules(input: string, ruleCallback: Function): string {
const inputWithEscapedBlocks = escapeBlocks(input); const inputWithEscapedBlocks = escapeBlocks(input);
let nextBlockIndex = 0; let nextBlockIndex = 0;
return StringWrapper.replaceAllMapped( return inputWithEscapedBlocks.escapedString.replace(_ruleRe, function(...m: string[]) {
inputWithEscapedBlocks.escapedString, _ruleRe, function(m: any /** TODO #9100 */) {
const selector = m[2]; const selector = m[2];
let content = ''; let content = '';
let suffix = m[4]; let suffix = m[4];
let contentPrefix = ''; let contentPrefix = '';
if (isPresent(m[4]) && m[4].startsWith('{' + BLOCK_PLACEHOLDER)) { if (suffix && suffix.startsWith('{' + BLOCK_PLACEHOLDER)) {
content = inputWithEscapedBlocks.blocks[nextBlockIndex++]; content = inputWithEscapedBlocks.blocks[nextBlockIndex++];
suffix = m[4].substring(BLOCK_PLACEHOLDER.length + 1); suffix = suffix.substring(BLOCK_PLACEHOLDER.length + 1);
contentPrefix = '{'; contentPrefix = '{';
} }
const rule = ruleCallback(new CssRule(selector, content)); const rule = ruleCallback(new CssRule(selector, content));
@ -525,11 +515,11 @@ class StringWithEscapedBlocks {
} }
function escapeBlocks(input: string): StringWithEscapedBlocks { function escapeBlocks(input: string): StringWithEscapedBlocks {
const inputParts = StringWrapper.split(input, _curlyRe); const inputParts = input.split(_curlyRe);
const resultParts: any[] /** TODO #9100 */ = []; const resultParts: string[] = [];
const escapedBlocks: any[] /** TODO #9100 */ = []; const escapedBlocks: string[] = [];
let bracketCount = 0; let bracketCount = 0;
let currentBlockParts: any[] /** TODO #9100 */ = []; let currentBlockParts: string[] = [];
for (let partIndex = 0; partIndex < inputParts.length; partIndex++) { for (let partIndex = 0; partIndex < inputParts.length; partIndex++) {
const part = inputParts[partIndex]; const part = inputParts[partIndex];
if (part == CLOSE_CURLY) { if (part == CLOSE_CURLY) {

1
modules/@angular/compiler/test/shadow_css_spec.ts
View File

@ -7,7 +7,6 @@
*/ */
import {CssRule, ShadowCss, processRules} from '@angular/compiler/src/shadow_css'; import {CssRule, ShadowCss, processRules} from '@angular/compiler/src/shadow_css';
import {describe, expect, it} from '@angular/core/testing/testing_internal';
import {normalizeCSS} from '@angular/platform-browser/testing/browser_util'; import {normalizeCSS} from '@angular/platform-browser/testing/browser_util';
export function main() { export function main() {