Update PR per feedback.

 - Cache some parsing artifacts.
 - Replace `.bind` with factory pattern.
 - Fix property access where appropriate for the current scope.

Author: Chris Joel

src/lib/style-properties.html

@@ -182,13 +182,43 @@
       // keyframeTransforms object is a map of keyframe names to transformer
       // functions which take in cssText and spit out transformed cssText.
       applyKeyframeTransforms: function(rule, keyframeTransforms) {
+        var input = rule.cssText;
         var output = rule.cssText;
-        if (this.rx.ANIMATION_MATCH.test(output)) {
-          for (var keyframe in keyframeTransforms) {
-            var transform = keyframeTransforms[keyframe];
-            output = transform(output);
+
+        if (rule.hasAnimations == null) {
+          // Cache whether or not the rule has any animations to begin with:
+          rule.hasAnimations = this.rx.ANIMATION_MATCH.test(input);
+        }
+
+        // If there are no animations referenced, we can skip transforms:
+        if (rule.hasAnimations) {
+          var transform;
+          // If we haven't transformed this rule before, we iterate over all
+          // transforms:
+          if (rule.keyframeNamesToTransform == null) {
+            rule.keyframeNamesToTransform = [];
+
+            for (var keyframe in keyframeTransforms) {
+              transform = keyframeTransforms[keyframe];
+              output = transform(input);
+              // If the transform actually changed the CSS text, we cache the
+              // transform name for future use:
+              if (input !== output) {
+                input = output;
+                rule.keyframeNamesToTransform.push(keyframe);
+              }
+            }
+          } else {
+            // If we already have a list of keyframe names that apply to this
+            // rule, we apply only those keyframe name transforms:
+            for (var i = 0; i < rule.keyframeNamesToTransform.length; ++i) {
+              transform = keyframeTransforms[rule.keyframeNamesToTransform[i]];
+              input = transform(input);
+            }
+            output = input;
           }
         }
+
         rule.cssText = output;
       },
 
@@ -258,6 +288,7 @@
         return props;
       },
 
+
       transformStyles: function(element, properties, scopeSelector) {
         var self = this;
         var hostSelector = styleTransformer
@@ -278,9 +309,8 @@
                i < keyframesRules.length;
                keyframesRule = keyframesRules[++i]) {
             this._scopeKeyframes(keyframesRule, scopeSelector);
-            keyframeTransforms[keyframesRule.keyframesName] = function(rule, cssText) {
-              return cssText.replace(rule.keyframesNameRx, rule.transformedKeyframesName);
-            }.bind(this, keyframesRule);
+            keyframeTransforms[keyframesRule.keyframesName] =
+                this._keyframesRuleTransformer(keyframesRule);
           }
         }
 
@@ -297,6 +327,16 @@
         });
       },
 
+      // Generate a factory for transforming a chunk of CSS text to handle a
+      // particular scoped keyframes rule.
+      _keyframesRuleTransformer: function(keyframesRule) {
+        return function(cssText) {
+          return cssText.replace(
+              keyframesRule.keyframesNameRx,
+              keyframesRule.transformedKeyframesName);
+        };
+      },
+
       // Transforms `@keyframes` names to be unique for the current host.
       // Example: @keyframes foo-anim -> @keyframes foo-anim-x-foo-0
       _scopeKeyframes: function(rule, scopeId) {

src/lib/style-transformer.html

@@ -150,7 +150,7 @@
         var p$ = rule.selector.split(COMPLEX_SELECTOR_SEP);
         // we want to skip transformation of rules that appear in keyframes,
         // because they are keyframe selectors, not element selectors.
-        if (!Polymer.StyleUtil.isKeyframesSelector(rule)) {
+        if (!styleUtil.isKeyframesSelector(rule)) {
           for (var i=0, l=p$.length, p; (i<l) && (p=p$[i]); i++) {
             p$[i] = transformer.call(this, p, scope, hostScope);
           }

src/lib/style-util.html

@@ -52,7 +52,7 @@
       // for example).
       isKeyframesSelector: function(rule) {
         return rule.parent &&
-            rule.parent.type === Polymer.StyleUtil.ruleTypes.KEYFRAMES_RULE;
+            rule.parent.type === this.ruleTypes.KEYFRAMES_RULE;
       },
 
       forEachRule: function(node, styleRuleCallback, keyframesRuleCallback) {