Avoid mangling rules inside @Keyframes

.gitignore

@@ -1,4 +1,5 @@
 node_modules/
 npm-debug.log
-
-todo.md
+.history/
+.vscode/
+todo.md

index.js

@@ -7,6 +7,40 @@ require('string.prototype.repeat');
 
 var CSS_ESCAPED_TAB = '\\9';
 
+
+function increaseSpecifityOfRule(rule, opts) {
+	rule.selectors = rule.selectors.map(function(selector) {
+		// Apply it to the selector itself if the selector is a `root` level component
+		// `html:not(#\\9):not(#\\9):not(#\\9)`
+		if(
+			selector === 'html' ||
+			selector === ':root' ||
+			selector === ':host' ||
+			selector === opts.stackableRoot
+		) {
+			return selector + opts.stackableRoot.repeat(opts.repeat);
+		}
+
+		// Otherwise just make it a descendant (this is what will happen most of the time)
+		// `:not(#\\9):not(#\\9):not(#\\9) .foo`
+		return opts.stackableRoot.repeat(opts.repeat) + ' ' + selector;
+	});
+
+	if(opts.overrideIds) {
+		if(
+			// If an id is in there somewhere
+			(new RegExp('#(?!' + escapeStringRegexp(CSS_ESCAPED_TAB) + ')')).test(rule.selector) ||
+			// Or it is an attribute selector with an id
+			(/\[id/).test(rule.selector)
+		) {
+			rule.walkDecls(function(decl) {
+				decl.important = true;
+			});
+		}
+	}
+}
+
+
 // Plugin that adds `:not(#\\9)` selectors to the front of the rule thus increasing specificity
 module.exports = postcss.plugin('postcss-increase-specificity', function(options) {
 	var defaults = {
@@ -22,36 +56,13 @@ module.exports = postcss.plugin('postcss-increase-specificity', function(options
 
 	return function(css) {
 		css.walkRules(function(rule) {
-			rule.selectors = rule.selectors.map(function(selector) {
-				// Apply it to the selector itself if the selector is a `root` level component
-				// `html:not(#\\9):not(#\\9):not(#\\9)`
-				if(
-					selector === 'html' ||
-					selector === ':root' ||
-					selector === ':host' ||
-					selector === opts.stackableRoot
-				) {
-					return selector + opts.stackableRoot.repeat(opts.repeat);
-				}
-
-				// Otherwise just make it a descendant (this is what will happen most of the time)
-				// `:not(#\\9):not(#\\9):not(#\\9) .foo`
-				return opts.stackableRoot.repeat(opts.repeat) + ' ' + selector;
-			});
+			// Avoid adding additional selectors (stackableRoot) to descendant rules of @keyframe {}
+			// i.e. `from`, `to`, or `{number}%`
+			var isInsideKeyframes = rule.parent.type === 'atrule' && rule.parent.name === 'keyframes';
 
-			if(opts.overrideIds) {
-				if(
-					// If an id is in there somewhere
-					(new RegExp('#(?!' + escapeStringRegexp(CSS_ESCAPED_TAB) + ')')).test(rule.selector) ||
-					// Or it is an attribute selector with an id
-					(/\[id/).test(rule.selector)
-				) {
-					rule.walkDecls(function(decl) {
-						decl.important = true;
-					});
-				}
+			if(!isInsideKeyframes) {
+				increaseSpecifityOfRule(rule, opts);
 			}
 		});
-
 	};
 });

package.json

@@ -16,7 +16,8 @@
   },
   "main": "index.js",
   "scripts": {
-    "test": "mocha"
+    "test": "mocha",
+    "mocha": "mocha"
   },
   "dependencies": {
     "escape-string-regexp": "^1.0.5",

test/fixtures/keyframes.css

@@ -0,0 +1,6 @@
+@keyframes custom-animation {
+  from { opacity: 0; }
+  50% { opacity: 0.5; }
+  60%, 70% {opacity: 0.7; }
+  to { opacity: 1; }
+}

test/fixtures/keyframes.expected.css

@@ -0,0 +1,6 @@
+@keyframes custom-animation {
+  from { opacity: 0; }
+  50% { opacity: 0.5; }
+  60%, 70% {opacity: 0.7; }
+  to { opacity: 1; }
+}

test/test.js

@@ -115,4 +115,8 @@ describe('postcss-increase-specificity', function() {
 			}
 		);
 	});
+
+	it('should not change the descendant rules of @keyframes', function() {
+		return testPlugin('./test/fixtures/keyframes.css', './test/fixtures/keyframes.expected.css');
+	});
 });