GreenPolyProducts/polymer
5
0
Fork 0
mirror of https://github.com/Polymer/polymer.git synced 2025-02-25 18:55:30 -06:00
Code Issues Packages Projects Releases Wiki Activity

Only allow styles inside templates and inside <link rel="import" type="css">.

Browse Source
This commit is contained in:
Steven Orvell 2017-02-27 16:54:09 -08:00
parent 208bae2d08
commit 81ebd801e8
4 changed files with 47 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/mixins/element-mixin.html
View File

@ -307,8 +307,8 @@ Polymer.ElementMixin = Polymer.dedupingMixin(function(base) {
*/
function finalizeTemplate(proto, template, is, ext) {
// support `include="module-name"`
let cssText = Polymer.StyleGather.cssFromElement(template);
cssText += Polymer.StyleGather.cssFromModuleImports(is);
let cssText = Polymer.StyleGather.cssFromTemplate(template) +
Polymer.StyleGather.cssFromModuleImports(is);
if (cssText) {
let style = document.createElement('style');
style.textContent = cssText;

81
src/utils/style-gather.html
View File

@ -12,7 +12,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
(function() {
'use strict';
let MODULE_STYLES_SELECTOR = 'style, link[rel=import][type~=css], template';
let MODULE_STYLE_LINK_SELECTOR = 'link[rel=import][type~=css]';
let INCLUDE_ATTR = 'include';
function importModule(moduleId) {
@ -42,8 +42,16 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
// styles that apply to the document.
cssFromModule(moduleId, warnIfNotFound) {
let m = importModule(moduleId);
if (m && !m._cssText) {
m._cssText = this.cssFromElement(m);
if (m && m._cssText === undefined) {
let cssText = '';
let t$ = m.querySelectorAll('template');
// include css from any templates in the module
for (let i=0; i < t$.length; i++) {
cssText += this.cssFromTemplate(t$[i]);
}
// module imports: <link rel="import" type="css">
cssText += this.cssFromModuleImports(moduleId);
m._cssText = cssText || null;
}
if (!m && warnIfNotFound) {
console.warn('Could not find style data in module named', moduleId);
@ -52,54 +60,41 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
},
// support lots of ways to discover css...
cssFromElement(element) {
cssFromTemplate(template) {
let cssText = '';
// if element is a template, get content from its .content
let content = element.content || element;
let e$ = content.querySelectorAll(MODULE_STYLES_SELECTOR);
for (let i=0, e; i < e$.length; i++) {
e = e$[i];
// look inside templates for elements
if (e.localName === 'template') {
cssText += this.cssFromElement(e);
} else {
// style elements inside dom-modules will apply to the main document
// we don't want this, so we remove them here.
if (e.localName === 'style') {
let include = e.getAttribute(INCLUDE_ATTR);
// now support module refs on 'styling' elements
if (include) {
cssText += this.cssFromModules(include, true);
}
// get style element applied to main doc via HTMLImports polyfill
e = e.__appliedElement || e;
e.parentNode.removeChild(e);
cssText += Polymer.ResolveUrl.resolveCss(e.textContent, element.ownerDocument);
} else if (e.localName === 'link' &&
e.getAttribute('type') === 'css' && e.import) {
cssText += this.cssFromImportTypeCss(e.import);
}
let e$ = template.content.querySelectorAll('style');
for (let i=0; i < e$.length; i++) {
let e = e$[i];
// support style sharing by allowing styles to "include"
// other dom-modules that contain styling
let include = e.getAttribute(INCLUDE_ATTR);
if (include) {
cssText += this.cssFromModules(include, true);
}
e.parentNode.removeChild(e);
cssText +=
Polymer.ResolveUrl.resolveCss(e.textContent, template.ownerDocument);
}
return cssText;
},
cssFromImportTypeCss(importDoc) {
// NOTE: polyfill affordance.
// under the HTMLImports polyfill, there will be no 'body',
// but the import pseudo-doc can be used directly.
let container = importDoc.body ? importDoc.body : importDoc;
return Polymer.ResolveUrl.resolveCss(container.textContent, importDoc);
},
cssFromModuleImports(moduleId) {
let m = importModule(moduleId);
let cssText = '';
if (m) {
let p$ = m.querySelectorAll('link[type=css]');
for (let i=0, p; i < p$.length; i++) {
p = p$[i];
if (p.import) {
cssText += this.cssFromImportTypeCss(p.import);
}
let m = importModule(moduleId);
if (!m) {
return cssText;
}
let p$ = m.querySelectorAll(MODULE_STYLE_LINK_SELECTOR);
for (let i=0; i < p$.length; i++) {
let p = p$[i];
if (p.import) {
let importDoc = p.import;
// NOTE: polyfill affordance.
// under the HTMLImports polyfill, there will be no 'body',
// but the import pseudo-doc can be used directly.
let container = importDoc.body ? importDoc.body : importDoc;
cssText +=
Polymer.ResolveUrl.resolveCss(container.textContent, importDoc);
}
}
return cssText;

5
test/unit/styling-import-shared-styles.html
View File

@ -1,4 +1,9 @@
<dom-module id="shared-styles">
<style>
:host {
border: 4px solid tomato;
}
</style>
<link rel="import" type="css" href="styling-import1.css">
<link rel="import" type="css" href="styling-import2.css">
<template>

2
test/unit/styling-import.html
View File

@ -68,6 +68,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
assertComputed(el.$.one, '1px');
assertComputed(el.$.two, '2px');
assertComputed(el.$.three, '3px');
assertComputed(el, '0px', 'style outside template not ignored');
document.body.removeChild(el);
});
@ -79,6 +80,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
assertComputed(el.$.one, '1px');
assertComputed(el.$.two, '2px');
assertComputed(el.$.three, '3px');
assertComputed(el, '0px', 'style outside template not ignored');
document.body.removeChild(el);
});