feat: no Plural inside Trans

README.md

@@ -106,3 +106,4 @@ Alternatively, add `lingui` to the plugins section, and configure the rules you
 - [no-unlocalized-strings](docs/rules/no-unlocalized-strings.md)
 - [text-restrictions](docs/rules/text-restrictions.md)
 - [consistent-plural-format](docs/rules/consistent-plural-format.md)
+- [no-plural-inside-trans](docs/rules/no-plural-inside-trans.md)

docs/rules/no-plural-inside-trans.md

@@ -0,0 +1,19 @@
+# no-plural-inside-trans
+
+Check that no `Plural` components are inside `Trans` components.
+
+## Examples
+
+### ❌ Incorrect
+
+```jsx
+<Trans>
+  You have <Plural value={count} one="# unread message" other="# unread messages" />.
+</Trans>
+```
+
+### ✅ Correct
+
+```jsx
+<Plural value={count} one="You have # unread message." other="You have # unread messages." />
+```

src/index.ts

@@ -6,6 +6,7 @@ import * as tCallInFunctionRule from './rules/t-call-in-function'
 import * as textRestrictionsRule from './rules/text-restrictions'
 import * as noTransInsideTransRule from './rules/no-trans-inside-trans'
 import * as consistentPluralFormatRule from './rules/consistent-plural-format'
+import * as noPluralInsideTransRule from './rules/no-plural-inside-trans'
 
 import { ESLint, Linter } from 'eslint'
 import { FlatConfig, RuleModule } from '@typescript-eslint/utils/ts-eslint'
@@ -19,6 +20,7 @@ const rules = {
   [textRestrictionsRule.name]: textRestrictionsRule.rule,
   [noTransInsideTransRule.name]: noTransInsideTransRule.rule,
   [consistentPluralFormatRule.name]: consistentPluralFormatRule.rule,
+  [noPluralInsideTransRule.name]: noPluralInsideTransRule.rule,
 }
 
 type RuleKey = keyof typeof rules

src/rules/no-plural-inside-trans.ts

@@ -0,0 +1,32 @@
+import { TSESTree } from '@typescript-eslint/utils'
+import { createRule } from '../create-rule'
+import { LinguiTransQuery, LinguiPluralComponentQuery } from '../helpers'
+
+export const name = 'no-plural-inside-trans'
+export const rule = createRule({
+  name,
+  meta: {
+    docs: {
+      description: 'disallow Plural components inside Trans components',
+      recommended: 'error',
+    },
+    messages: {
+      default: 'Avoid using Plural component inside Trans component.',
+    },
+    schema: [],
+    type: 'problem' as const,
+  },
+
+  defaultOptions: [],
+
+  create: function (context) {
+    return {
+      [`${LinguiTransQuery} ${LinguiPluralComponentQuery}`](node: TSESTree.JSXElement) {
+        context.report({
+          node: node,
+          messageId: 'default',
+        })
+      },
+    }
+  },
+})

tests/src/rules/no-plural-inside-trans.test.ts

@@ -0,0 +1,31 @@
+import { rule, name } from '../../../src/rules/no-plural-inside-trans'
+import { RuleTester } from '@typescript-eslint/rule-tester'
+
+describe('', () => {})
+
+const ruleTester = new RuleTester({
+  languageOptions: {
+    parserOptions: {
+      ecmaFeatures: {
+        jsx: true,
+      },
+    },
+  },
+})
+
+ruleTester.run(name, rule, {
+  valid: [
+    {
+      code: '<Trans>Hello</Trans>',
+    },
+    {
+      code: '<Plural value={count} one="You have # unread message." other="You have # unread messages." />',
+    },
+  ],
+  invalid: [
+    {
+      code: '<Trans>You have <Plural value={count} one="# unread message" other="# unread messages" />.</Trans>',
+      errors: [{ messageId: 'default' }],
+    },
+  ],
+})