Very basic whitelist option

Author: francoismassart

src/rules/classnames-order.ts

@@ -45,8 +45,10 @@ export const createRule = RuleCreator(urlCreator);
 const sortClassnames = (
   context: RuleContext,
   settings: PluginSettings,
+  options: RuleOptions,
   literals: Array<AtomicNode>,
 ) => {
+  console.log(options);
   for (const node of literals) {
     const { originalClassNamesValue, start, end, prefix, suffix } =
       dissectAtomicNode(node, context as unknown as GenericRuleContext);

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

@@ -47,11 +47,12 @@ ruleTester.run(RULE_NAME, noCustomClassname, {
   valid:
     // Angular / Native HTML + static text
     [
-      `<h1 class="flex">attributeVisitor with TextAttribute (single class gets skipped)</h1>`,
+      `<h1 class="whitelisted flex">attributeVisitor with TextAttribute (single class gets skipped)</h1>`,
       `<h1 class="  relative ">extra spaces</h1>`,
       `<h1 class=" relative " className=' flex'>Single + double quotes</h1>`,
     ].map((testedNgCode) => ({
       code: testedNgCode,
+      options: [{ whitelist: ["whitelisted"] }],
       languageOptions: withAngularParser,
     })),
   invalid: [

src/rules/no-custom-classname.ts

@@ -34,8 +34,9 @@ export type MessageIds =
   | "issue:unknown-classname"
   | "fix:unknown-classname:remove";
 
-// eslint-disable-next-line @typescript-eslint/no-empty-object-type
-export type RuleOptions = {};
+export type RuleOptions = {
+  whitelist: Array<string>;
+};
 
 type Options = [RuleOptions];
 
@@ -48,8 +49,11 @@ export const createRule = RuleCreator(urlCreator);
 const detectCustomClassnames = (
   context: RuleContext,
   settings: PluginSettings,
+  options: RuleOptions,
   literals: Array<AtomicNode>,
 ) => {
+  const parsedOptions: RuleOptions = options || { whitelist: [] };
+  // console.log(parsedOptions);
   for (const node of literals) {
     const { originalClassNamesValue } = dissectAtomicNode(
       node,
@@ -58,6 +62,12 @@ const detectCustomClassnames = (
     // Process the extracted classnames and report
     const { classNames } = getClassnamesFromValue(originalClassNamesValue);
     for (const className of classNames) {
+      // TODO extract base class without modifiers
+      // TODO make a set from the whitelist array
+      // TODO allow regular expressions
+      if (parsedOptions.whitelist.includes(className)) {
+        continue;
+      }
       if (!isValidClassNameWorker(settings.cssConfigPath, className)) {
         const patchedLoc = generateLocForClassname(
           node,
@@ -119,7 +129,7 @@ export const noCustomClassname = createRule<Options, MessageIds>({
         additionalProperties: false,
       },
     ],
-    defaultOptions: [{}],
+    defaultOptions: [{ whitelist: [] }],
     type: "suggestion",
   },
   /**
@@ -140,11 +150,16 @@ export const noCustomClassname = createRule<Options, MessageIds>({
       createTemplateVisitors(
         context,
         settings,
-        options,
+        options[0],
         detectCustomClassnames,
       ),
       // Script visitor is used within both JSX and Vue SFC files (inside <script> section).
-      createScriptVisitors(context, settings, options, detectCustomClassnames),
+      createScriptVisitors(
+        context,
+        settings,
+        options[0],
+        detectCustomClassnames,
+      ),
     );
   },
 });

src/utils/rule.ts

@@ -224,9 +224,11 @@ export const createScriptVisitors = <TRuleContext, TOptions>(
   lintLiterals: (
     context: TRuleContext,
     settings: PluginSettings,
+    options: TOptions,
     literals: Array<AtomicNode>,
   ) => void,
 ): RuleListener => {
+  console.log(options);
   return {
     /**
      * In JSX + inside <script> section of Vue SFC…
@@ -251,7 +253,7 @@ export const createScriptVisitors = <TRuleContext, TOptions>(
         callExpressionNode,
         0,
       );
-      lintLiterals(context, settings, literals);
+      lintLiterals(context, settings, options, literals);
     },
 
     /**
@@ -269,7 +271,7 @@ export const createScriptVisitors = <TRuleContext, TOptions>(
         jsxAttributeNode,
         0,
       );
-      lintLiterals(context, settings, literals);
+      lintLiterals(context, settings, options, literals);
     },
 
     /**
@@ -293,7 +295,7 @@ export const createScriptVisitors = <TRuleContext, TOptions>(
         taggedTemplateExpressionNode,
         0,
       );
-      lintLiterals(context, settings, literals);
+      lintLiterals(context, settings, options, literals);
     },
 
     /**
@@ -305,7 +307,7 @@ export const createScriptVisitors = <TRuleContext, TOptions>(
       const textAttributeNode = node as unknown as TextAttribute;
       if (!isValidTextAttribute(textAttributeNode, settings)) return;
       const literals = [textAttributeNode];
-      lintLiterals(context, settings, literals);
+      lintLiterals(context, settings, options, literals);
     },
   };
 };
@@ -326,6 +328,7 @@ export const createTemplateVisitors = <TRuleContext, TOptions>(
   lintLiterals: (
     context: TRuleContext,
     settings: PluginSettings,
+    options: TOptions,
     literals: Array<AtomicNode>,
   ) => void,
 ): RuleListener => {
@@ -340,7 +343,7 @@ export const createTemplateVisitors = <TRuleContext, TOptions>(
     VAttribute(node: VueAST.VAttribute) {
       if (!isValidVAttribute(node, settings)) return;
       if (node.value?.type === "VLiteral") {
-        lintLiterals(context, settings, [node.value]);
+        lintLiterals(context, settings, options, [node.value]);
       }
       // @ts-expect-error Types have no overlap.ts(2367)
       if (node.value?.type !== "VExpressionContainer") return;
@@ -389,7 +392,7 @@ export const createTemplateVisitors = <TRuleContext, TOptions>(
           break;
         }
       }
-      lintLiterals(context, settings, literals);
+      lintLiterals(context, settings, options, literals);
     },
   };
 };