feat(enforce-logical-properties): add ignore option (#383)

Author: schoero

docs/rules/enforce-logical-properties.md

@@ -58,6 +58,17 @@ The rule reports physical classes and auto-fixes them to their logical equivalen
 
 <br/>
 
+### `ignore`
+
+List of regex patterns for classes that should not report logical property suggestions.
+
+This can be useful for classes that intentionally use physical directions.
+
+**Type**: `string[]`
+**Default**: `[]`
+
+<br/>
+
 <details>
   <summary>Common options</summary>
 

src/rules/enforce-logical-properties.test.ts

@@ -244,6 +244,47 @@ describe.runIf(getTailwindCSSVersion().major >= 4)(enforceLogicalProperties.name
     );
   });
 
+  it("should ignore configured classes", () => {
+    lint(
+      enforceLogicalProperties,
+      {
+        invalid: [
+          {
+            angular: `<img class="pl-4 pr-4" />`,
+            angularOutput: `<img class="ps-4 pr-4" />`,
+            html: `<img class="pl-4 pr-4" />`,
+            htmlOutput: `<img class="ps-4 pr-4" />`,
+            jsx: `() => <img class="pl-4 pr-4" />`,
+            jsxOutput: `() => <img class="ps-4 pr-4" />`,
+            svelte: `<img class="pl-4 pr-4" />`,
+            svelteOutput: `<img class="ps-4 pr-4" />`,
+            vue: `<template><img class="pl-4 pr-4" /></template>`,
+            vueOutput: `<template><img class="ps-4 pr-4" /></template>`,
+
+            errors: 1,
+
+            options: [{
+              ignore: ["^pr-"]
+            }]
+          }
+        ],
+        valid: [
+          {
+            angular: `<img class="pl-4 pr-4" />`,
+            html: `<img class="pl-4 pr-4" />`,
+            jsx: `() => <img class="pl-4 pr-4" />`,
+            svelte: `<img class="pl-4 pr-4" />`,
+            vue: `<template><img class="pl-4 pr-4" /></template>`,
+
+            options: [{
+              ignore: ["^pl-", "^pr-"]
+            }]
+          }
+        ]
+      }
+    );
+  });
+
   it.each(testCases)(`should report "%s"`, (input, output) => {
     lint(
       enforceLogicalProperties,

src/rules/enforce-logical-properties.ts

@@ -1,8 +1,11 @@
+import { array, description, optional, pipe, strictObject, string } from "valibot";
+
 import { createGetDissectedClasses, getDissectedClasses } from "better-tailwindcss:tailwindcss/dissect-classes.js";
 import { createGetUnknownClasses, getUnknownClasses } from "better-tailwindcss:tailwindcss/unknown-classes.js";
 import { buildClass } from "better-tailwindcss:utils/class.js";
 import { async } from "better-tailwindcss:utils/context.js";
 import { lintClasses } from "better-tailwindcss:utils/lint.js";
+import { getCachedRegex } from "better-tailwindcss:utils/regex.js";
 import { createRule } from "better-tailwindcss:utils/rule.js";
 import { replacePlaceholders, splitClasses } from "better-tailwindcss:utils/utils.js";
 
@@ -18,6 +21,18 @@ export const enforceLogicalProperties = createRule({
   name: "enforce-logical-properties",
   recommended: false,
 
+  schema: strictObject({
+    ignore: optional(
+      pipe(
+        array(
+          string()
+        ),
+        description("A list of regular expression patterns for classes that should be ignored by the rule.")
+      ),
+      []
+    )
+  }),
+
   messages: {
     multiple: "Physical class detected. Replace \"{{ className }}\" with logical classes \"{{fix}}\".",
     single: "Physical class detected. Replace \"{{ className }}\" with logical class \"{{fix}}\"."
@@ -96,6 +111,9 @@ const mappings = [
 
 
 function lintLiterals(ctx: Context<typeof enforceLogicalProperties>, literals: Literal[]) {
+  const { ignore } = ctx.options;
+  const ignoredClassRegexes = ignore.map(ignoredClass => getCachedRegex(ignoredClass));
+
   for(const literal of literals){
     const classes = splitClasses(literal.content);
 
@@ -114,6 +132,10 @@ function lintLiterals(ctx: Context<typeof enforceLogicalProperties>, literals: L
     const { unknownClasses } = getUnknownClasses(async(ctx), possibleFixes);
 
     lintClasses(ctx, literal, className => {
+      if(ignoredClassRegexes.some(ignoredClassRegex => ignoredClassRegex.test(className))){
+        return;
+      }
+
       const dissectedClass = dissectedClasses[className];
 
       if(!dissectedClass){