add global for animations

css-modules · Oct 30, 2024 · 6c3a86b · 6c3a86b
1 parent f1c05a5
commit 6c3a86b
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 3 deletions.
diff --git a/src/index.js b/src/index.js
@@ -328,6 +328,17 @@ function localizeDeclarationValues(localize, declaration, context) {
       return false;
     }
 
+    // replace `animation-name: global(example)` with `animation-name: example`
+    if (
+      node.type === "function" &&
+      node.value.toLowerCase() === "global" &&
+      /animation(-name)$/i.test(declaration.prop) &&
+      node.nodes.length === 1
+    ) {
+      Object.assign(node, node.nodes[0]);
+      return;
+    }
+
     if (
       node.type === "word" &&
       specialKeywords.includes(node.value.toLowerCase())
@@ -414,9 +425,13 @@ function localizeDeclaration(declaration, context) {
         parsedAnimationKeywords = {};
 
         return;
-      }
-      // Do not handle nested functions
-      else if (node.type === "function") {
+      } else if (node.type === "function") {
+        // replace `animation: global(example)` with `animation-name: example`
+        if (node.value.toLowerCase() === "global" && node.nodes.length === 1) {
+          Object.assign(node, node.nodes[0]);
+          return false;
+        }
+        // Do not handle nested functions
         return false;
       }
       // Ignore all except word

diff --git a/test/index.test.js b/test/index.test.js
@@ -179,6 +179,21 @@ const tests = [
     input: ".foo { animation-name: env(bar); }",
     expected: ":local(.foo) { animation-name: env(bar); }",
   },
+  {
+    name: "not localize animation-name in an global function",
+    input: ".foo { animation-name: global(bar); }",
+    expected: ":local(.foo) { animation-name: bar; }",
+  },
+  {
+    name: "not localize animation in an global function",
+    input: ".foo { animation: global(bar); }",
+    expected: ":local(.foo) { animation: bar; }",
+  },
+  {
+    name: "not localize a certain animation in an global function",
+    input: ".foo { animation: global(bar), foo; }",
+    expected: ":local(.foo) { animation: bar, :local(foo); }",
+  },
   {
     name: "not localize animation-name in an env function #2",
     input: ".foo { animation-name: eNv(bar); }",