add test for keyframes

css-modules · Oct 31, 2024 · 308e6ca · 308e6ca
1 parent 776792e
commit 308e6ca
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 1 deletion.
diff --git a/src/index.js b/src/index.js
@@ -555,7 +555,8 @@ module.exports = (options = {}) => {
               } else if (
                 atRule.params &&
                 !globalMode &&
-                !localAliasMap.has(atRule.params)
+                !localAliasMap.has(atRule.params) &&
+                !hasIgnoreComment(atRule)
               ) {
                 atRule.params = ":local(" + atRule.params + ")";
               }

diff --git a/test/index.test.js b/test/index.test.js
@@ -1077,6 +1077,44 @@ const tests = [
              &:disabled { animation-name: :local(localAnimation); }
             }`,
   },
+  {
+    name: "verify ignore comment doesn't affect subsequent rules",
+    options: { mode: "pure" },
+    input: `/* cssmodules-pure-ignore */
+            .global { color: blue; }
+            .local { color: red; }`,
+    expected: `/* cssmodules-pure-ignore */
+            .global { color: blue; }
+            :local(.local) { color: red; }`,
+  },
+  {
+    name: "handle ignore comments in media queries",
+    options: { mode: "pure" },
+    input: `@media screen {
+              /* cssmodules-pure-ignore */
+              .global { color: blue; }
+              .local { color: red; }
+            }`,
+    expected: `@media screen {
+              /* cssmodules-pure-ignore */
+              .global { color: blue; }
+              :local(.local) { color: red; }
+            }`,
+  },
+  {
+    name: "handle ignore comments with keyframes",
+    options: { mode: "pure" },
+    input: `/* cssmodules-pure-ignore */
+            @keyframes global-fade {
+              from { opacity: 0; }
+              to { opacity: 1; }
+            }`,
+    expected: `/* cssmodules-pure-ignore */
+            @keyframes global-fade {
+              from { opacity: 0; }
+              to { opacity: 1; }
+            }`,
+  },
   {
     name: "handle negative animation-delay in animation shorthand",
     input: ".foo { animation: 1s -500ms; }",