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.

Author: Chris Joel

src/lib/style-transformer.html

@@ -147,9 +147,14 @@
 
       // transforms a css rule to a scoped rule.
       _transformRule: function(rule, transformer, scope, hostScope) {
+        var selectorCanTransform =
+          !rule.parent ||
+          rule.parent.ruleType !== Polymer.StyleUtil.ruleTypes.KEYFRAMES_RULE;
         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);
+        if (selectorCanTransform) {
+          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

@@ -51,8 +51,7 @@
         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;

test/unit/css-parse.html

@@ -116,7 +116,6 @@
       assert.equal(tree.rules.length, 4, 'unexpected number of rules');
       assert.equal(tree.rules[2].rules.length, 8, 'unexpected number of rules in keyframes');
       assert.equal(tree.rules[3].rules.length, 1, 'unexpected number of rules in @media');
-      console.log('test');
     });
 
     test('rule selectors parse', function() {