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

…ions
css-modules · May 23, 2023 · 901d986 · 901d986
1 parent 36e67d5
commit 901d986
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 0 deletions.
diff --git 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
@@ -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; }",