From 901d9861c901572a806e80a904ef9898ef562477 Mon Sep 17 00:00:00 2001
From: Alexander Akait <4567934+alexander-akait@users.noreply.github.com>
Date: Tue, 23 May 2023 19:43:07 +0300
Subject: [PATCH] fix: do not localize `animation-name` property with var and
 env functions

---
 src/index.js       |  7 +++++++
 test/index.test.js | 20 ++++++++++++++++++++
 2 files changed, 27 insertions(+)

diff --git a/src/index.js b/src/index.js
index 459a55d..142c9fd 100644
--- a/src/index.js
+++ b/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())
diff --git a/test/index.test.js b/test/index.test.js
index 193e6f5..f08f916 100644
--- a/test/index.test.js
+++ b/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; }",