fix: #461

False positives with `border` and `divide` by `no-contradicting-classname` rule

Author: francoismassart

src/rules/no-contradicting-classname.spec.ts

@@ -57,7 +57,7 @@ ruleTester.run(RULE_NAME, noContradictingClassname, {
     `<p class="to-[2.5px] to-transparent">Issue 271</p>`,
     `<p class="![width:_0] [height:_0]">Issue 269</p>`,
     `<p class="bg-[size:20px_20px] bg-[position:right_16px_center]">Issue 321</p>`,
-    // `<p class="divide-red-800 border-blue-500">Issue 461</p>`,
+    `<p class="divide-red-800 border-blue-500">Issue 461</p>`,
   ].map((testedNgCode) => ({
     code: testedNgCode,
     languageOptions: withAngularParser,
@@ -79,6 +79,13 @@ ruleTester.run(RULE_NAME, noContradictingClassname, {
       ],
       languageOptions: withAngularParser,
     },
+    {
+      code: `ctl(\`lg:w-full lg:w-1/2\`);`,
+      errors: [
+        suggest("lg:w-full", `ctl(\`lg:w-full\`);`, ["lg:w-1/2"]),
+        suggest("lg:w-1/2", `ctl(\`lg:w-1/2\`);`, ["lg:w-full"]),
+      ],
+    },
     {
       code: `ctl(\`w-[\${width}] block flex h-[\${height}] rounded\`);`,
       errors: [

src/rules/no-contradicting-classname.ts

@@ -85,12 +85,16 @@ const getCompiledGroup = (
     }
 
     const flattenedSelectors = flattenNestingWorker(cssRule);
-    const hasValidSelector = flattenedSelectors.some(
-      // Ignore rules that only have pseudo selectors (e.g. `::before`, `::after`)
-      (selector) => !selector.includes("::"),
+    const hasExoticSelector = flattenedSelectors.some(
+      // Detect complex selectors
+      // examples:
+      // `no-marker` → will include `::before`, `::after`
+      // `space-x-0` → will include `:where(.space-x-0 > :not(:last-child))`)
+      (selector) => selector.includes("::") || selector.includes(" "),
     );
 
-    if (!hasValidSelector) {
+    if (hasExoticSelector) {
+      // Ignore the complex selectors, we focus on `.single-simple-class-names`
       cssPropertiesCache.set(fullClassName, undefined);
       continue;
     }