Merge pull request #24 from Polymer/shady-unscoped-fix

Fix shady-unscoped styles and add tests

CHANGELOG.md

@@ -1,5 +1,8 @@
 # Change Log
 
+## Unreleased
+- Fix `shady-unscoped` style imports and add tests
+
 ## [0.6.0] - 2018-09-17
 * Add support for Polymer v1 `var(--foo, --bar)` => `var(--foo,var(--bar))` transform
 

index.js

@@ -159,6 +159,7 @@ function inlineStyleIncludes(style, useNativeShadow) {
     includedStyles.forEach((ism) => {
       // do not inline styles that need to be unscoped in ShadyDOM
       if (!useNativeShadow && isUnscopedStyle(ism)) {
+        leftover.push(id);
         return;
       }
       // this style may also have includes
@@ -584,7 +585,7 @@ async function polymerCssBuild(paths, options = {}) {
       consumed.forEach((c) => dom5.remove(c));
       dom5.setTextContent(finalStyle, text.join(''));
       const oldInclude = getAttributeArray(finalStyle, 'include');
-      const newInclude = oldInclude.concat(includes).join(' ');
+      const newInclude = Array.from(new Set(oldInclude.concat(includes))).join(' ');
       if (newInclude) {
         dom5.setAttribute(finalStyle, 'include', newInclude);
       }

package.json

@@ -23,7 +23,7 @@
     "rollup": "^0.65.2",
     "rollup-plugin-node-resolve": "^3.4.0",
     "wct-browser-legacy": "^1.0.1",
-    "web-component-tester": "^6.7.1"
+    "web-component-tester": "^6.9.0"
   },
   "dependencies": {
     "command-line-args": "^5.0.2",

tests/app/index.html

@@ -20,6 +20,7 @@
 <link rel="import" href="x-app.html">
 <link rel="import" href="cr-bug.html">
 <link rel="import" href="polymer-1-vars.html">
+<link rel="import" href="shady-unscoped.html">
 
 <custom-style>
   <style is="custom-style" include="shared-style">
@@ -48,6 +49,7 @@
 </dom-module>
 
 <inline-element></inline-element>
+<shady-unscoped></shady-unscoped>
 
 <script>
   const hrefParts = window.location.href.split('/');
@@ -128,6 +130,23 @@
       assert(!(template.hasAttribute('css-build') ^ shouldHaveMarkedTemplate), `dom-module template should ${shouldHaveMarkedTemplate ? 'not ' : ''}have css-build attribute`);
     });
 
+    test('shady-unscoped', function() {
+      const el = Polymer.dom(document).querySelector('shady-unscoped');
+      assert(el.isConnected, 'shady-unscoped element must be in document to apply styling');
+      const root = el.shadyRoot || el.shadowRoot;
+      const div = Polymer.dom(root).querySelector('div');
+      assertComputed(div, '10px');
+      assertComputed(div, 'rgb(255, 0, 255)', 'background-color');
+      if (buildType === 'shady') {
+        const testEl = document.createElement('div');
+        testEl.setAttribute('unscoped', '');
+        testEl.classList.add('included');
+        document.body.appendChild(testEl);
+        assertComputed(testEl, '10px');
+        assertComputed(testEl, 'rgb(255, 0, 255)', 'background-color');
+      }
+    });
+
     if (polymerVersion === 'polymer2') {
       suite('class elements', function() {
         suiteSetup(function() {

tests/app/shady-unscoped.html

@@ -0,0 +1,29 @@
+<!--
+@license
+Copyright (c) 2018 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
+-->
+<dom-module id="unscoped-include">
+  <template>
+    <style shady-unscoped>
+      .included {
+        background-color: rgb(255, 0, 255);
+      }
+      [unscoped] {
+        border: 10px dotted rgb(123, 123, 123);
+      }
+    </style>
+  </template>
+</dom-module>
+<dom-module id="shady-unscoped">
+  <template>
+    <style include="unscoped-include"></style>
+    <div unscoped class="included"></div>
+    <slot></slot>
+  </template>
+  <script>Polymer({is: 'shady-unscoped' });</script>
+</dom-module>

tests/prepare-tests.sh

@@ -23,7 +23,7 @@ build(){
 
   cp -rv tests/app/* "tests/${outputDir}/"
 
-  bin/polymer-css-build --polymer-version=${version} ${shady} ${noInline} --file tests/${outputDir}/index.html tests/${outputDir}/x-app.html tests/${outputDir}/x-app-dom-module.html tests/${outputDir}/x-app-definition.js tests/${outputDir}/x-component.html tests/${outputDir}/shared/shared-style.html tests/${outputDir}/x-nested-apply.html tests/${outputDir}/cr-bug.html tests/${outputDir}/class-element.js tests/${outputDir}/polymer-1-vars.html
+  bin/polymer-css-build --polymer-version=${version} ${shady} ${noInline} --file tests/${outputDir}/index.html tests/${outputDir}/x-app.html tests/${outputDir}/x-app-dom-module.html tests/${outputDir}/x-app-definition.js tests/${outputDir}/x-component.html tests/${outputDir}/shared/shared-style.html tests/${outputDir}/x-nested-apply.html tests/${outputDir}/cr-bug.html tests/${outputDir}/class-element.js tests/${outputDir}/polymer-1-vars.html tests/${outputDir}/shady-unscoped.html
 
   (cd tests/${outputDir}; npx bower install polymer#${version} web-component-tester)
 }