animation-name with dash (-)

ampproject · Sep 18, 2020 · 86fa6dc · 86fa6dc
1 parent bb2bcbb
commit 86fa6dc
Showing 1 changed file with 5 additions and 3 deletions.
diff --git a/build-system/eslint-rules/jss-animation-name.js b/build-system/eslint-rules/jss-animation-name.js
@@ -39,7 +39,9 @@ module.exports = function (context) {
       }
       // Could be {key: val} identifier or {'key': val} string
       const keyName = node.key.name || node.key.value;
-      if (keyName !== 'animationName' && keyName !== 'animation') {
+      const isKeyAnimationName =
+        keyName === 'animationName' || keyName === 'animation-name';
+      if (!isKeyAnimationName && keyName !== 'animation') {
         return;
       }
       if (typeof node.value.value !== 'string') {
@@ -54,13 +56,13 @@ module.exports = function (context) {
         return;
       }
       if (
-        (keyName === 'animationName' && !/^\$/.test(node.value.value)) ||
+        (isKeyAnimationName && !/^\$/.test(node.value.value)) ||
         (keyName === 'animation' && !/(^| )\$/.test(node.value.value))
       ) {
         context.report({
           node: node.value,
           message: `The animation name in property ${keyName} should start with $${
-            keyName === 'animationName' ? ` (e.g. $${node.value.value})` : ''
+            isKeyAnimationName ? ` (e.g. $${node.value.value})` : ''
           }.\nThis scopes it to a @keyframes rule present in this module.`,
         });
       }