test: add tests for named groups in every rule

Author: francoismassart

tests/lib/rules/arbitrary-values.js

@@ -532,6 +532,14 @@ ruleTester.run("arbitrary-values", rule, {
       `,
       options: config,
     },
+    {
+      code: `
+      <div class="group/edit:stroke-[green]">
+        support named group/peer syntax
+      </div>
+      `,
+      options: config,
+    },
   ],
 
   invalid: [

tests/lib/rules/classnames-order.js

@@ -936,5 +936,10 @@ ruleTester.run("classnames-order", rule, {
       filename: "test.vue",
       parser: require.resolve("vue-eslint-parser"),
     },
+    {
+      code: `<div class="block group/edit:stroke-0">support named group/peer syntax</div>`,
+      output: `<div class="group/edit:stroke-0 block">support named group/peer syntax</div>`,
+      errors: errors,
+    },
   ],
 });

tests/lib/rules/enforces-negative-arbitrary-values.js

@@ -136,5 +136,9 @@ ruleTester.run("enforces-negative-arbitrary-values", rule, {
       filename: "test.vue",
       parser: require.resolve("vue-eslint-parser"),
     },
+    {
+      code: `<div class="group/edit:-inset-[1px] group/edit:top-[-1px]">support named group/peer syntax</div>`,
+      errors: generateErrors("group/edit:-inset-[1px]"),
+    },
   ],
 });

tests/lib/rules/enforces-shorthand.js

@@ -105,6 +105,13 @@ ruleTester.run("shorthands", rule, {
       `,
       options: skipClassAttributeOptions,
     },
+    {
+      code: `
+      <div class="group/name:rounded-r-full rounded-l-full">
+        support named group/peer syntax
+      </div>
+      `,
+    },
   ],
 
   invalid: [
@@ -581,5 +588,18 @@ ruleTester.run("shorthands", rule, {
       filename: "test.vue",
       parser: require.resolve("vue-eslint-parser"),
     },
+    {
+      code: `
+      <div class="group/name:rounded-r-full group/name:rounded-l-full">
+        support named group/peer syntax
+      </div>
+      `,
+      output: `
+      <div class="group/name:rounded-full">
+        support named group/peer syntax
+      </div>
+      `,
+      errors: [generateError(["group/name:rounded-r-full", "group/name:rounded-l-full"], "group/name:rounded-full")],
+    },
   ],
 });

tests/lib/rules/migration-from-tailwind-2.js

@@ -113,6 +113,19 @@ ruleTester.run("migration-from-tailwind-2", rule, {
         },
       ],
     },
+    {
+      code: `<div class="group/name:overflow-ellipsis">support named group/peer syntax</div>`,
+      output: `<div class="group/name:text-ellipsis">support named group/peer syntax</div>`,
+      errors: [
+        {
+          messageId: "classnameChanged",
+          data: {
+            deprecated: "group/name:overflow-ellipsis",
+            updated: "group/name:text-ellipsis",
+          },
+        },
+      ],
+    },
     {
       code: `<div class="flex-grow-0">flex-grow/shrink</div>`,
       output: `<div class="grow-0">flex-grow/shrink</div>`,

tests/lib/rules/no-arbitrary-value.js

@@ -70,6 +70,10 @@ ruleTester.run("no-arbitrary-value", rule, {
       code: `<div class="w-[10px]">Arbitrary width!</div>`,
       errors: generateErrors("w-[10px]"),
     },
+    {
+      code: `<div class="group/name:w-[10px]">Arbitrary width in named group!</div>`,
+      errors: generateErrors("group/name:w-[10px]"),
+    },
     {
       code: `<div className={\`w-[10px]\`}>Arbitrary width!</div>`,
       errors: generateErrors("w-[10px]"),

tests/lib/rules/no-contradicting-classname.js

@@ -192,6 +192,12 @@ ruleTester.run("no-contradicting-classname", rule, {
         Legit transform-none
       </div>`,
     },
+    {
+      code: `
+      <div class="group/name:scale-75 scale-50">
+        named group
+      </div>`,
+    },
     {
       code: `
       <div class="snap-mandatory snap-x">
@@ -681,6 +687,13 @@ ruleTester.run("no-contradicting-classname", rule, {
       filename: "test.vue",
       parser: require.resolve("vue-eslint-parser"),
     },
+    {
+      code: `
+      <div class="group/name:scale-75 group/name:scale-50">
+        named group
+      </div>`,
+      errors: generateErrors(["group/name:scale-75 group/name:scale-50"]),
+    },
     // {
     //   code: `
     //   <div class="scale-75 transform-none">