fix: inappropriate modification of steps() function arguments (#6)

Author: Vladislav Shkodin

index.js

@@ -204,6 +204,12 @@ function localizeDeclNode(node, context) {
   return node;
 }
 
+function isWordAFunctionArgument(wordNode, functionNode) {
+  return functionNode
+    ? functionNode.nodes.some(functionNodeChild => functionNodeChild.sourceIndex === wordNode.sourceIndex)
+    : false
+}
+
 function localizeAnimationShorthandDeclValues(decl, context) {
   const validIdent = /^-?[_a-z][_a-z0-9-]*$/i;
 
@@ -244,13 +250,19 @@ function localizeAnimationShorthandDeclValues(decl, context) {
 
   const didParseAnimationName = false;
   let parsedAnimationKeywords = {};
+  let stepsFunctionNode = null;
   const valueNodes = valueParser(decl.value).walk((node) => {
     /* If div-token appeared (represents as comma ','), a possibility of an animation-keywords should be reflesh. */
     if (node.type === 'div') {
       parsedAnimationKeywords = {};
     }
+    if (node.type === 'function' && node.value.toLowerCase() === 'steps') {
+      stepsFunctionNode = node;
+    }
     const value =
-      node.type === 'word' ? node.value.toLowerCase() : null;
+      node.type === 'word' && !isWordAFunctionArgument(node, stepsFunctionNode)
+        ? node.value.toLowerCase()
+        : null;
 
     let shouldParseAnimationName = false;
 

test.js

@@ -198,6 +198,23 @@ const tests = [
     expected:
       ':local(.foo) { animation: :local(slide-right) 300ms forwards ease-out, :local(fade-in) 300ms forwards ease-out; }'
   },
+  {
+    should:
+      'not treat "start" and "end" keywords in steps() function as identifiers',
+    input: [
+      '.foo { animation: spin 1s steps(12, end) infinite; }',
+      '.foo { animation: spin 1s STEPS(12, start) infinite; }',
+      '.foo { animation: spin 1s steps(12, END) infinite; }',
+      '.foo { animation: spin 1s steps(12, START) infinite; }',
+    ].join('\n'),
+    expected:
+      [
+        ':local(.foo) { animation: :local(spin) 1s steps(12, end) infinite; }',
+        ':local(.foo) { animation: :local(spin) 1s STEPS(12, start) infinite; }',
+        ':local(.foo) { animation: :local(spin) 1s steps(12, END) infinite; }',
+        ':local(.foo) { animation: :local(spin) 1s steps(12, START) infinite; }'
+      ].join('\n'),
+  },
   {
     should: 'handle animations with custom timing functions',
     input: