Don't use is="" with custom-style

googlearchive · Sep 26, 2016 · 2db6e47 · 2db6e47
1 parent cab8854
commit 2db6e47
Show file tree

Hide file tree

Showing 4 changed files with 96 additions and 0 deletions.
diff --git a/src/all-passes.ts b/src/all-passes.ts
@@ -14,6 +14,7 @@
 
 // This file imports all passes, causing them to be registered.
 
+import './html/custom-style-no-is';
 import './html/move-style-into-template';
 import './css/at-apply-not-function';
 import './css/var-statement-prop-fallback';
diff --git a/src/html/custom-style-no-is.ts b/src/html/custom-style-no-is.ts
@@ -0,0 +1,62 @@
+/**
+ * @license
+ * Copyright (c) 2016 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
+ */
+
+import * as dom5 from 'dom5';
+import * as parse5 from 'parse5';
+import {ParsedHtmlDocument} from 'polymer-analyzer/lib/html/html-document';
+import * as stripIndent from 'strip-indent';
+
+import {registry} from '../registry';
+
+import {HtmlUpgradePass} from './html-pass';
+
+const p = dom5.predicates;
+
+class CustomStyleDoesntUseIs extends HtmlUpgradePass {
+  code = 'custom-style-no-is';
+  description = stripIndent(`
+      Transforms:
+
+          <style is="custom-style">...</style>
+
+      Into:
+
+          <custom-style>
+            <style>...</style>
+          </custom-style>
+      
+      Because Polymer v2 is dropping support for is="" for the time being.
+  `);
+  constructor() { super(); }
+
+  upgrade(document: ParsedHtmlDocument) {
+    const isBadCustomStyle =
+        p.AND(p.hasTagName('style'), p.hasAttrValue('is', 'custom-style'));
+    for (const style of dom5.nodeWalkAll(document.ast, isBadCustomStyle)) {
+      const customStyle =
+          parse5.treeAdapters.default.createElement('custom-style', '', []);
+      dom5.replace(style, customStyle);
+      dom5.append(customStyle, style);
+
+      dom5.removeAttribute(style, 'is');
+      const include = dom5.getAttribute(style, 'include');
+      if (include != null) {
+        dom5.setAttribute(customStyle, 'include', include);
+        dom5.removeAttribute(style, 'include');
+      }
+    }
+  }
+}
+
+registry.register(new CustomStyleDoesntUseIs());
diff --git a/src/test/fixtures/custom-style-no-is/after/index.html b/src/test/fixtures/custom-style-no-is/after/index.html
@@ -0,0 +1,17 @@
+<head><custom-style><style>
+  body {
+    color: var(--clown-nose, #440000);
+  }
+</style></custom-style>
+
+<custom-style include="foo"><style>
+  body {
+    color: var(--clown-nose, #440000);
+  }
+</style></custom-style>
+
+<!-- 
+  Output is messy, will be fixed by 
+  https://github.com/Polymer/polymer-analyzer/pull/316
+ -->
+</head><body></body>
diff --git a/src/test/fixtures/custom-style-no-is/before/index.html b/src/test/fixtures/custom-style-no-is/before/index.html
@@ -0,0 +1,16 @@
+<style is="custom-style">
+  body {
+    color: var(--clown-nose, #440000);
+  }
+</style>
+
+<style is="custom-style" include="foo">
+  body {
+    color: var(--clown-nose, #440000);
+  }
+</style>
+
+<!-- 
+  Output is messy, will be fixed by 
+  https://github.com/Polymer/polymer-analyzer/pull/316
+ -->