Non-destructive @keyframes rule transformation.

Previously, the transformer did not disambiguate selectors in `@media`
blocks and keyframes in `@keyframes` blocks. Now, the transformer can
safely transform `@keyframes` blocks. Before a selector is transformed,
if the selector has a parent, it is checked. If the checked parent is a
`@keyframes` rule, the selector transformation is skipped.

Element-specific `@keyframes` are suffixed with the scoped element name.
For example, `@keyframes foo` in an element scoped with `x-el-0` will by
transformed to `@keyframes foo-x-el-0`. References to that animation in
the element's local styles will be updated as well.

Author: Chris Joel

src/lib/css-parse.html

@@ -73,6 +73,8 @@
             node.type = this.types.MEDIA_RULE;
           } else if (s.match(this._rx.keyframesRule)) {
             node.type = this.types.KEYFRAMES_RULE;
+            node.keyframesName =
+                node.selector.split(this._rx.multipleSpaces).pop();
           }
         } else {
           if (s.indexOf(this.VAR_START) === 0) {

src/lib/style-properties.html

@@ -179,6 +179,20 @@
         rule.cssText = output;
       },
 
+      // Apply keyframe transformations to the cssText of a given rule. The
+      // 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 output = rule.cssText;
+        if (this.rx.ANIMATION_MATCH.test(output)) {
+          for (var keyframe in keyframeTransforms) {
+            var transform = keyframeTransforms[keyframe];
+            output = transform(output);
+          }
+        }
+        rule.cssText = output;
+      },
+
       // Test if the rules in these styles matches the given `element` and if so,
       // collect any custom properties into `props`.
       propertyDataFromStyles: function(styles, element) {
@@ -254,15 +268,39 @@
           hostSelector;
         var hostRx = new RegExp(this.rx.HOST_PREFIX + rxHostSelector +
           this.rx.HOST_SUFFIX);
+        var keyframeTransforms = {};
+
         return styleTransformer.elementStyles(element, function(rule) {
           self.applyProperties(rule, properties);
-          if (rule.cssText && !nativeShadow) {
-            self._scopeSelector(rule, hostRx, hostSelector,
-              element._scopeCssViaAttr, scopeSelector);
+          self.applyKeyframeTransforms(rule, keyframeTransforms);
+          if (!nativeShadow) {
+            // If the rule is a keyframe selector, we put a transformation in
+            // the keyframeTransforms map so that it can be applied to other
+            // rules in the future. We use an anonymous function for the
+            // transformer so that we can avoid creating a new RegExp for every
+            // call to `applyKeyframeTransforms`.
+            if (Polymer.StyleUtil.isKeyframesSelector(rule)) {
+              var keyframesNameRx = new RegExp(rule.parent.keyframesName, 'g');
+              self._scopeKeyframes(rule.parent, scopeSelector);
+              keyframeTransforms[rule.parent.keyframesName] = function(cssText) {
+                return cssText.replace(
+                    keyframesNameRx, rule.parent.transformedKeyframesName);
+              };
+            } else if (rule.cssText) {
+              self._scopeSelector(rule, hostRx, hostSelector,
+                element._scopeCssViaAttr, scopeSelector);
+            }
           }
         });
       },
 
+      // Transforms `@keyframes` names to be unique for the current host.
+      // Example: @keyframes foo-anim -> @keyframes foo-anim-x-foo-0
+      _scopeKeyframes: function(rule, scopeId) {
+        rule.transformedKeyframesName = rule.keyframesName + '-' + scopeId;
+        rule.selector = '@keyframes  ' + rule.transformedKeyframesName;
+      },
+
       // Strategy: x scope shim a selector e.g. to scope `.x-foo-42` (via classes):
       // non-host selector: .a.x-foo -> .x-foo-42 .a.x-foo
       // host selector: x-foo.wide -> x-foo.x-foo-42.wide
@@ -357,6 +395,7 @@
         // var(--a, fallback-literal(with-one-nested-parentheses))
         VAR_MATCH: /(^|\W+)var\([\s]*([^,)]*)[\s]*,?[\s]*((?:[^,)]*)|(?:[^;]*\([^;)]*\)))[\s]*?\)/gi,
         VAR_CAPTURE: /\([\s]*(--[^,\s)]*)(?:,[\s]*(--[^,\s)]*))?(?:\)|,)/gi,
+        ANIMATION_MATCH: /animation|animation-name/g,
         IS_VAR: /^--/,
         BRACKETED: /\{[^}]*\}/g,
         HOST_PREFIX: '(?:^|[^.#[:])',

src/lib/style-transformer.html

@@ -148,8 +148,12 @@
       // transforms a css rule to a scoped rule.
       _transformRule: function(rule, transformer, scope, hostScope) {
         var p$ = rule.selector.split(COMPLEX_SELECTOR_SEP);
-        for (var i=0, l=p$.length, p; (i<l) && (p=p$[i]); i++) {
-          p$[i] = transformer.call(this, p, scope, hostScope);
+        // we want to skip transformation of rules that appear in keyframes,
+        // because they are keyframe selectors, not element selectors.
+        if (!Polymer.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);
+          }
         }
         // NOTE: save transformedSelector for subsequent matching of elements
         // against selectors (e.g. when calculating style properties)

src/lib/style-util.html

@@ -44,15 +44,22 @@
         return style.__cssRules;
       },
 
+      // Tests if a rule is a keyframes selector, which looks almost exactly
+      // like a normal selector but is not (it has nothing to do with scoping
+      // for example).
+      isKeyframesSelector: function(rule) {
+        return rule.parent &&
+            rule.parent.type === Polymer.StyleUtil.ruleTypes.KEYFRAMES_RULE;
+      },
+
       forEachStyleRule: function(node, callback) {
         if (!node) {
           return;
         }
         var skipRules = false;
         if (node.type === this.ruleTypes.STYLE_RULE) {
           callback(node);
-        } else if (node.type === this.ruleTypes.KEYFRAMES_RULE ||
-            node.type === this.ruleTypes.MIXIN_RULE) {
+        } else if (node.type === this.ruleTypes.MIXIN_RULE) {
           skipRules = true;
         }
         var r$ = node.rules;