fix: do not localize animation-name property with var and env functions

Author: alexander-akait

src/index.js

@@ -316,6 +316,13 @@ function localizeDeclarationValues(localize, declaration, context) {
   const valueNodes = valueParser(declaration.value);
 
   valueNodes.walk((node, index, nodes) => {
+    if (
+      node.type === "function" &&
+      (node.value.toLowerCase() === "var" || node.value.toLowerCase() === "env")
+    ) {
+      return false;
+    }
+
     if (
       node.type === "word" &&
       specialKeywords.includes(node.value.toLowerCase())

test/index.test.js

@@ -160,6 +160,26 @@ const tests = [
     input: ".foo { animation-name: bar; }",
     expected: ":local(.foo) { animation-name: :local(bar); }",
   },
+  {
+    name: "not localize animation-name in a var function",
+    input: ".foo { animation-name: var(--bar); }",
+    expected: ":local(.foo) { animation-name: var(--bar); }",
+  },
+  {
+    name: "not localize animation-name in a var function #2",
+    input: ".foo { animation-name: vAr(--bar); }",
+    expected: ":local(.foo) { animation-name: vAr(--bar); }",
+  },
+  {
+    name: "not localize animation-name in an env function",
+    input: ".foo { animation-name: env(bar); }",
+    expected: ":local(.foo) { animation-name: env(bar); }",
+  },
+  {
+    name: "not localize animation-name in an env function #2",
+    input: ".foo { animation-name: eNv(bar); }",
+    expected: ":local(.foo) { animation-name: eNv(bar); }",
+  },
   {
     name: "not localize a single animation-delay",
     input: ".foo { animation-delay: 1s; }",