Adds setting to skip style incudes and url rewriting

Polymer · Oct 17, 2018 · 4fcacaa · 4fcacaa
1 parent 4af44c8
commit 4fcacaa
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 25 deletions.
diff --git a/lib/mixins/element-mixin.js b/lib/mixins/element-mixin.js
@@ -16,6 +16,7 @@ import { pathFromUrl, resolveCss, resolveUrl } from '../utils/resolve-url.js';
 import { DomModule } from '../elements/dom-module.js';
 import { PropertyEffects } from './property-effects.js';
 import { PropertiesMixin } from './properties-mixin.js';
+import { skipStyleIncludesAndUrls } from '../utils/settings.js';
 
 /**
  * Current Polymer version in Semver notation.
@@ -252,31 +253,33 @@ export const ElementMixin = dedupingMixin(base => {
    * @private
    */
   function processElementStyles(klass, template, is, baseURI) {
-    const templateStyles = template.content.querySelectorAll('style');
-    const stylesWithImports = stylesFromTemplate(template);
-    // insert styles from <link rel="import" type="css"> at the top of the template
-    const linkedStyles = stylesFromModuleImports(is);
-    const firstTemplateChild = template.content.firstElementChild;
-    for (let idx = 0; idx < linkedStyles.length; idx++) {
-      let s = linkedStyles[idx];
-      s.textContent = klass._processStyleText(s.textContent, baseURI);
-      template.content.insertBefore(s, firstTemplateChild);
-    }
-    // keep track of the last "concrete" style in the template we have encountered
-    let templateStyleIndex = 0;
-    // ensure all gathered styles are actually in this template.
-    for (let i = 0; i < stylesWithImports.length; i++) {
-      let s = stylesWithImports[i];
-      let templateStyle = templateStyles[templateStyleIndex];
-      // if the style is not in this template, it's been "included" and
-      // we put a clone of it in the template before the style that included it
-      if (templateStyle !== s) {
-        s = s.cloneNode(true);
-        templateStyle.parentNode.insertBefore(s, templateStyle);
-      } else {
-        templateStyleIndex++;
+    if (!skipStyleIncludesAndUrls) {
+      const templateStyles = template.content.querySelectorAll('style');
+      const stylesWithImports = stylesFromTemplate(template);
+      // insert styles from <link rel="import" type="css"> at the top of the template
+      const linkedStyles = stylesFromModuleImports(is);
+      const firstTemplateChild = template.content.firstElementChild;
+      for (let idx = 0; idx < linkedStyles.length; idx++) {
+        let s = linkedStyles[idx];
+        s.textContent = klass._processStyleText(s.textContent, baseURI);
+        template.content.insertBefore(s, firstTemplateChild);
+      }
+      // keep track of the last "concrete" style in the template we have encountered
+      let templateStyleIndex = 0;
+      // ensure all gathered styles are actually in this template.
+      for (let i = 0; i < stylesWithImports.length; i++) {
+        let s = stylesWithImports[i];
+        let templateStyle = templateStyles[templateStyleIndex];
+        // if the style is not in this template, it's been "included" and
+        // we put a clone of it in the template before the style that included it
+        if (templateStyle !== s) {
+          s = s.cloneNode(true);
+          templateStyle.parentNode.insertBefore(s, templateStyle);
+        } else {
+          templateStyleIndex++;
+        }
+        s.textContent = klass._processStyleText(s.textContent, baseURI);
       }
-      s.textContent = klass._processStyleText(s.textContent, baseURI);
     }
     if (window.ShadyCSS) {
       window.ShadyCSS.prepareTemplate(template, is);

diff --git a/lib/utils/settings.js b/lib/utils/settings.js
@@ -113,10 +113,30 @@ export let allowTemplateFromDomModule = false;
 /**
  * Sets `lookupTemplateFromDomModule` globally for all elements
  *
- * @param {boolean} allowDomModule enable or disable template lookup 
+ * @param {boolean} allowDomModule enable or disable template lookup
  *   globally
  * @return {void}
  */
 export const setAllowTemplateFromDomModule = function(allowDomModule) {
   allowTemplateFromDomModule = allowDomModule;
 };
+
+/**
+ * Setting to skip processing style includes and re-writing urls in css styles.
+ * Normally "included" styles are pulled into the element and all urls in styles
+ * are re-written to be relative to the containing script url.
+ * If no includes or relative urls are used in styles, these steps can be
+ * skipped as an optimization.
+ */
+export let skipStyleIncludesAndUrls = false;
+
+/**
+ * Sets `setSkipRewriteStyleUrls` globally for all elements
+ *
+ * @param {boolean} skipIncludesAndUrls enable or disable skipping style
+ * includes and url rewriting
+ * @return {void}
+ */
+export const setSkipStyleIncludesAndUrls = function(skipIncludesAndUrls) {
+  skipStyleIncludesAndUrls = skipIncludesAndUrls;
+};