fix(ShadowCss): support quoted attribute values

fixes #6085
This commit is contained in:
Victor Berchet 2016-09-30 13:20:48 -07:00 committed by Chuck Jazdzewski
parent a121136fae
commit 83d94b7504
2 changed files with 15 additions and 6 deletions

View File

@ -174,7 +174,7 @@ export class ShadowCss {
private _insertPolyfillDirectivesInCssText(cssText: string): string {
// Difference with webcomponents.js: does not handle comments
return cssText.replace(
_cssContentNextSelectorRe, function(...m: string[]) { return m[1] + '{'; });
_cssContentNextSelectorRe, function(...m: string[]) { return m[2] + '{'; });
}
/*
@ -196,7 +196,7 @@ export class ShadowCss {
// Difference with webcomponents.js: does not handle comments
return cssText.replace(_cssContentRuleRe, (...m: string[]) => {
const rule = m[0].replace(m[1], '').replace(m[2], '');
return m[3] + rule;
return m[4] + rule;
});
}
@ -242,7 +242,7 @@ export class ShadowCss {
let m: RegExpExecArray;
_cssContentUnscopedRuleRe.lastIndex = 0;
while ((m = _cssContentUnscopedRuleRe.exec(cssText)) !== null) {
const rule = m[0].replace(m[2], '').replace(m[1], m[3]);
const rule = m[0].replace(m[2], '').replace(m[1], m[4]);
r += rule + '\n\n';
}
return r;
@ -458,10 +458,10 @@ export class ShadowCss {
}
}
const _cssContentNextSelectorRe =
/polyfill-next-selector[^}]*content:[\s]*?['"](.*?)['"][;\s]*}([^{]*?){/gim;
const _cssContentRuleRe = /(polyfill-rule)[^}]*(content:[\s]*['"](.*?)['"])[;\s]*[^}]*}/gim;
/polyfill-next-selector[^}]*content:[\s]*?(['"])(.*?)\1[;\s]*}([^{]*?){/gim;
const _cssContentRuleRe = /(polyfill-rule)[^}]*(content:[\s]*(['"])(.*?)\3)[;\s]*[^}]*}/gim;
const _cssContentUnscopedRuleRe =
/(polyfill-unscoped-rule)[^}]*(content:[\s]*['"](.*?)['"])[;\s]*[^}]*}/gim;
/(polyfill-unscoped-rule)[^}]*(content:[\s]*(['"])(.*?)\3)[;\s]*[^}]*}/gim;
const _polyfillHost = '-shadowcsshost';
// note: :host-context pre-processed to -shadowcsshostcontext.
const _polyfillHostContext = '-shadowcsscontext';

View File

@ -128,6 +128,9 @@ export function main() {
css = s('polyfill-next-selector {content: "x > y"} z {}', 'a');
expect(css).toEqual('x[a] > y[a]{}');
css = s(`polyfill-next-selector {content: 'button[priority="1"]'} z {}`, 'a');
expect(css).toEqual('button[priority="1"][a] {}');
});
it('should support polyfill-unscoped-rule', () => {
@ -136,6 +139,9 @@ export function main() {
css = s('polyfill-unscoped-rule {content: "#menu > .bar";color: blue;}', 'a');
expect(css).toContain('#menu > .bar {;color:blue;}');
css = s(`polyfill-unscoped-rule {content: 'button[priority="1"]'}`, 'a');
expect(css).toContain('button[priority="1"] {}');
});
it('should support multiple instances polyfill-unscoped-rule', () => {
@ -153,6 +159,9 @@ export function main() {
css = s('polyfill-rule {content: ":host.foo .bar";color:blue;}', 'a', 'a-host');
expect(css).toEqual('.foo[a-host] .bar[a] {;color:blue;}');
css = s(`polyfill-rule {content: 'button[priority="1"]'}`, 'a', 'a-host');
expect(css).toEqual('button[priority="1"][a] {}');
});
it('should handle ::shadow', () => {