Correct handling of animation names

Author: jacobp100

index.js

@@ -182,21 +182,95 @@ function localizeDeclValue(valueNode, context) {
   return newValueNode;
 }
 
-function localizeDecl(decl, context) {
-  var valuesNode = Tokenizer.parseValues(decl.value);
-  var localizeName = /animation(-name)?$/.test(decl.prop);
+function localizeAnimationShorthandDeclValueNodes(nodes, context) {
+  var validIdent = validIdent = /^-?[_a-z][_a-z0-9-]*$/i;
+
+  var animationKeywords = {
+    'alternate': 1,
+    'alternate-reverse': 1,
+    'backwards': 1,
+    'both': 1,
+    'ease': 1,
+    'ease-in': 1,
+    'ease-in-out': 1,
+    'ease-out': 1,
+    'forwards': 1,
+    'infinite': 1,
+    'linear': 1,
+    'none': 2,
+    'normal': 1,
+    'paused': 1,
+    'reverse': 1,
+    'running': 1,
+    'step-end': 1,
+    'step-start': 1,
+  };
+
+  var didParseAnimationName = false;
+  var parsedAnimationKeywords = {};
+  return nodes.map(function(valueNode) {
+    var value = valueNode.type === 'item'
+      ? valueNode.name.toLowerCase()
+      : null;
+
+    var shouldParseAnimationName = false;
+
+    if (!didParseAnimationName && value && validIdent.test(value)) {
+      if (value in animationKeywords) {
+        parsedAnimationKeywords[value] = (value in parsedAnimationKeywords)
+          ? (parsedAnimationKeywords[value] + 1)
+          : 0;
+
+        shouldParseAnimationName = (parsedAnimationKeywords[value] >= animationKeywords[value]);
+      } else {
+        shouldParseAnimationName = true;
+      }
+    }
+
+    var subContext = {
+      options: context.options,
+      global: context.global,
+      localizeNextItem: shouldParseAnimationName && !context.global
+    };
+    return localizeDeclNode(valueNode, subContext);
+  });
+}
+
+function localizeAnimationShorthandDeclValues(valuesNode, decl, context) {
+  var newValuesNode = Object.create(valuesNode);
+  newValuesNode.nodes = valuesNode.nodes.map(function(valueNode, index) {
+    var newValueNode = Object.create(valueNode);
+    newValueNode.nodes = localizeAnimationShorthandDeclValueNodes(valueNode.nodes, context);
+    return newValueNode;
+  });
+  decl.value = Tokenizer.stringifyValues(newValuesNode);
+}
+
+function localizeDeclValues(localize, valuesNode, decl, context) {
   var newValuesNode = Object.create(valuesNode);
   newValuesNode.nodes = valuesNode.nodes.map(function(valueNode) {
     var subContext = {
       options: context.options,
       global: context.global,
-      localizeNextItem: localizeName && !context.global
+      localizeNextItem: localize && !context.global
     };
     return localizeDeclValue(valueNode, subContext);
   });
   decl.value = Tokenizer.stringifyValues(newValuesNode);
 }
 
+function localizeDecl(decl, context) {
+  var valuesNode = Tokenizer.parseValues(decl.value);
+
+  var isAnimation = /animation?$/.test(decl.prop);
+  if (isAnimation) return localizeAnimationShorthandDeclValues(valuesNode, decl, context);
+
+  var isAnimationName = /animation(-name)?$/.test(decl.prop);
+  if (isAnimationName) return localizeDeclValues(true, valuesNode, decl, context);
+
+  return localizeDeclValues(false, valuesNode, decl, context);
+}
+
 module.exports = postcss.plugin('postcss-modules-local-by-default', function (options) {
   if (typeof options !== 'object') {
     options = {}; // If options is undefined or not an object the plugin fails

test.js

@@ -174,6 +174,26 @@ var tests = [
     input: '.foo { animation: foo, bar 5s linear 2s infinite alternate, barfoo 1s; }',
     expected: ':local(.foo) { animation: :local(foo), :local(bar) 5s linear 2s infinite alternate, :local(barfoo) 1s; }'
   },
+  {
+    should: 'handle animations where the first value is not the animation name',
+    input: '.foo { animation: 1s foo; }',
+    expected: ':local(.foo) { animation: 1s :local(foo); }'
+  },
+  {
+    should: 'handle animations where the first value is not the animation name whilst also using keywords',
+    input: '.foo { animation: 1s normal ease-out infinite foo; }',
+    expected: ':local(.foo) { animation: 1s normal ease-out infinite :local(foo); }'
+  },
+  {
+    should: 'handle animations with custom timing functions',
+    input: '.foo { animation: 1s normal cubic-bezier(0.25, 0.5, 0.5. 0.75) foo; }',
+    expected: ':local(.foo) { animation: 1s normal cubic-bezier(0.25, 0.5, 0.5. 0.75) :local(foo); }'
+  },
+  {
+    should: 'handle animations whose names are keywords',
+    input: '.foo { animation: 1s infinite infinite; }',
+    expected: ':local(.foo) { animation: 1s infinite :local(infinite); }'
+  },
   {
     should: 'default to global when mode provided',
     input: '.foo {}',