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

Fixes #3837.

Browse Source 
Enable support for obtaining styles via `<link rel="import" type="css">` inside an element `dom-module`.
This commit is contained in:
Steven Orvell 2017-02-27 15:29:14 -08:00
parent c8fd3f6a3e
commit f555412856
6 changed files with 133 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -308,6 +308,7 @@ 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);
if (cssText) {
let style = document.createElement('style');
style.textContent = cssText;

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

@ -75,11 +75,30 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
e = e.__appliedElement || e;
e.parentNode.removeChild(e);
cssText += Polymer.ResolveUrl.resolveCss(e.textContent, element.ownerDocument);
// it's an import, assume this is a text file of css content.
// TODO(sorvell): plan is to deprecate this way to get styles;
// remember to add deprecation warning when this is done.
} else if (e.import && e.import.body) {
cssText += Polymer.ResolveUrl.resolveCss(e.import.body.textContent, e.import);
} else if (e.localName === 'link' &&
e.getAttribute('type') === 'css' && e.import) {
cssText += this.cssFromImportTypeCss(e.import);
}
}
}
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);
}
}
}

11
test/unit/styling-import-shared-styles.html Normal file
View File

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

90
test/unit/styling-import.html Normal file
View File

@ -0,0 +1,90 @@
<!doctype html>
<!--
@license
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<meta charset="utf-8">
<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../../web-component-tester/browser.js"></script>
<link rel="import" href="../../polymer.html">
<link rel="import" href="styling-import-shared-styles.html">
</head>
<body>
<dom-module id="x-include-module">
<template>
<style include="shared-styles"></style>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
</template>
<script>
HTMLImports.whenReady(function() {
Polymer({ is: 'x-include-module'})
});
</script>
</dom-module>
<dom-module id="x-include-import">
<link rel="import" type="css" href="styling-import1.css">
<link rel="import" type="css" href="styling-import2.css">
<template>
<style>
#three {
border: 3px solid tomato;
}
</style>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
</template>
<script>
HTMLImports.whenReady(function() {
Polymer({ is: 'x-include-import'})
});
</script>
</dom-module>
<script>
suite('style-imports', function() {
function assertComputed(element, value) {
var computed = getComputedStyle(element);
assert.equal(computed['border-top-width'], value, 'computed style incorrect');
}
test('styles included via link rel="import" type="css"', function() {
var el = document.createElement('x-include-import');
document.body.appendChild(el);
Polymer.flush();
assertComputed(el.$.one, '1px');
assertComputed(el.$.two, '2px');
assertComputed(el.$.three, '3px');
document.body.removeChild(el);
});
test('styles included via include that loads via link rel="import" type="css"', function() {
var el = document.createElement('x-include-module');
document.body.appendChild(el);
Polymer.flush();
assertComputed(el.$.one, '1px');
assertComputed(el.$.two, '2px');
assertComputed(el.$.three, '3px');
document.body.removeChild(el);
});
});
</script>
</body>
</html>

3
test/unit/styling-import1.css Normal file
View File

@ -0,0 +1,3 @@
#one {
border: 1px solid orange;
}

4
test/unit/styling-import2.css Normal file
View File

@ -0,0 +1,4 @@
#two {
display: block;
border: 2px solid brown;
}