Report empty css attribute as invalid in syntax-preference rule

emotion-js · Apr 11, 2022 · 5a83933 · 5a83933
1 parent bf77e35
commit 5a83933
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 11 deletions.
diff --git a/packages/eslint-plugin/src/rules/syntax-preference.ts b/packages/eslint-plugin/src/rules/syntax-preference.ts
@@ -127,7 +127,15 @@ const createPreferredObjectVisitor = (
       return
     }
 
-    switch (node.value?.type) {
+    if (!node.value) {
+      context.report({
+        node: node,
+        messageId: 'emptyCssProp'
+      })
+      return
+    }
+
+    switch (node.value.type) {
       case AST_NODE_TYPES.Literal:
         // validating other literal types seems out of scope of this plugin
         if (typeof node.value.value !== 'string') {
@@ -188,7 +196,15 @@ const createPreferredStringVisitor = (
       return
     }
 
-    switch (node.value?.type) {
+    if (!node.value) {
+      context.report({
+        node: node,
+        messageId: 'emptyCssProp'
+      })
+      return
+    }
+
+    switch (node.value.type) {
       case AST_NODE_TYPES.Literal:
         // validating other literal types seems out of scope of this plugin
         if (typeof node.value.value !== 'string') {
@@ -211,6 +227,7 @@ type MessageId =
   | 'preferStringStyle'
   | 'preferObjectStyle'
   | 'preferWrappingWithCSS'
+  | 'emptyCssProp'
 
 type RuleContext = TSESLint.RuleContext<MessageId, RuleOptions>
 
@@ -225,7 +242,8 @@ export default createRule<RuleOptions, MessageId>({
     messages: {
       preferStringStyle: 'Styles should be written using strings.',
       preferObjectStyle: 'Styles should be written using objects.',
-      preferWrappingWithCSS: `Prefer wrapping your string styles with \`css\` call.`
+      preferWrappingWithCSS: `Prefer wrapping your string styles with \`css\` call.`,
+      emptyCssProp: `Empty \`css\` prop is not valid.`
     },
     schema: [
       {

diff --git a/packages/eslint-plugin/test/rules/jsx-import.test.ts b/packages/eslint-plugin/test/rules/jsx-import.test.ts
@@ -76,6 +76,7 @@ ruleTester.run('emotion jsx', rule, {
       code: `
         /** @jsx jsx */
         import {jsx} from '@emotion/react'
+        // it's invalid but not for this rule
         let ele = <div css />
       `
     }

diff --git a/packages/eslint-plugin/test/rules/syntax-preference.test.ts b/packages/eslint-plugin/test/rules/syntax-preference.test.ts
@@ -57,10 +57,6 @@ ruleTester.run('syntax-preference (string)', rule, {
     {
       code: `css(cls, css\`color: hotpink;\`)`,
       options: ['string']
-    },
-    {
-      code: `const Foo = () => <div css />`,
-      options: ['string']
     }
   ],
 
@@ -138,6 +134,16 @@ ruleTester.run('syntax-preference (string)', rule, {
           type: AST_NODE_TYPES.ObjectExpression
         }
       ]
+    },
+    {
+      code: `const Foo = () => <div css />`,
+      options: ['string'],
+      errors: [
+        {
+          messageId: 'emptyCssProp',
+          type: AST_NODE_TYPES.JSXAttribute
+        }
+      ]
     }
   ]
 })
@@ -164,10 +170,6 @@ ruleTester.run('syntax-preference (object)', rule, {
     {
       code: `const Foo = () => <div css={css({ color: 'hotpink' })} />`,
       options: ['object']
-    },
-    {
-      code: `const Foo = () => <div css />`,
-      options: ['object']
     }
   ],
 
@@ -249,6 +251,16 @@ ruleTester.run('syntax-preference (object)', rule, {
           type: AST_NODE_TYPES.TaggedTemplateExpression
         }
       ]
+    },
+    {
+      code: `const Foo = () => <div css />`,
+      options: ['object'],
+      errors: [
+        {
+          messageId: 'emptyCssProp',
+          type: AST_NODE_TYPES.JSXAttribute
+        }
+      ]
     }
   ]
 })