feat: similified reduce-annotations Eslint v9 (#250)

* feat: similified AST based reduce-annotations Eslint v9

Author: riteshiitbbs007

packages/eslint-plugin-slds/src/config/rule-messages.yml

@@ -118,3 +118,10 @@ enforce-component-hook-naming-convention:
   messages:
     replace: "Replace the deprecated {{oldValue}} component styling hook with {{suggestedMatch}}."
 
+reduce-annotations:
+  description: "Remove your annotations and update your code."
+  url: "https://developer.salesforce.com/docs/platform/slds-linter/guide/reference-rules.html#reduce-annotations"
+  type: "problem"
+  messages:
+    removeAnnotation: "Remove this annotation and update the code to SLDS best practices. For help, file an issue at https://github.com/salesforce-ux/slds-linter/"
+

packages/eslint-plugin-slds/src/index.ts

@@ -13,6 +13,7 @@ import noUnsupportedHooksSlds2 from './rules/v9/no-unsupported-hooks-slds2';
 import noSldsVarWithoutFallback from './rules/v9/no-slds-var-without-fallback';
 import noSldsNamespaceForCustomHooks from './rules/v9/no-slds-namespace-for-custom-hooks';
 import enforceComponentHookNamingConvention from './rules/v9/enforce-component-hook-naming-convention';
+import reduceAnnotations from './rules/v9/reduce-annotations';
 import noSldsPrivateVar from './rules/v9/no-slds-private-var';
 
 
@@ -33,6 +34,7 @@ const rules = {
   "no-slds-var-without-fallback": noSldsVarWithoutFallback,
   "no-slds-namespace-for-custom-hooks": noSldsNamespaceForCustomHooks,
   "enforce-component-hook-naming-convention": enforceComponentHookNamingConvention,
+  "reduce-annotations": reduceAnnotations,
   "no-slds-private-var": noSldsPrivateVar
 };
 
@@ -89,6 +91,7 @@ Object.assign(plugin.configs, {
         "@salesforce-ux/slds/no-slds-var-without-fallback": "warn",
         "@salesforce-ux/slds/no-slds-namespace-for-custom-hooks": "warn",
         "@salesforce-ux/slds/enforce-component-hook-naming-convention": "error",
+        "@salesforce-ux/slds/reduce-annotations": "warn",
         "@salesforce-ux/slds/no-slds-private-var": "warn"
       }
     }

packages/eslint-plugin-slds/src/rules/v9/reduce-annotations.ts

@@ -0,0 +1,49 @@
+import { Rule } from 'eslint';
+import ruleMessages from '../../config/rule-messages.yml';
+
+const ruleConfig = ruleMessages['reduce-annotations'];
+const { type, description, url, messages } = ruleConfig;
+
+// SLDS validator annotations to detect and flag for removal
+const SLDS_ANNOTATIONS = [
+  "@sldsValidatorIgnoreNextLine", 
+  "@sldsValidatorAllow", 
+  "@sldsValidatorIgnore"
+];
+
+export default {
+  meta: {
+    type,
+    docs: {
+      description,
+      recommended: true,
+      url,
+    },
+    messages,
+  },
+  
+  create(context) {
+    return {
+      StyleSheet(node) {
+        const sourceCode = context.sourceCode;
+        
+        let comments = (sourceCode as any)?.comments || [];
+
+        comments.forEach(comment => {
+          const commentContent = comment.value.trim();
+          
+          const matchingAnnotation = SLDS_ANNOTATIONS.find(annotation => 
+            commentContent.startsWith(annotation)
+          );
+          
+          if (matchingAnnotation) {
+            context.report({
+              node: comment,
+              messageId: 'removeAnnotation'
+            });
+          }
+        });
+      },
+    };
+  },
+} as Rule.RuleModule;

packages/eslint-plugin-slds/test/rules/reduce-annotations.test.js

@@ -0,0 +1,164 @@
+const rule = require('../../src/rules/v9/reduce-annotations').default;
+const { RuleTester } = require('eslint');
+
+let cssPlugin;
+try {
+  cssPlugin = require('@eslint/css').default || require('@eslint/css');
+} catch (e) {
+  cssPlugin = require('@eslint/css');
+}
+
+const ruleTester = new RuleTester({
+  plugins: {
+    css: cssPlugin,
+  },
+  language: 'css/css',
+});
+
+ruleTester.run('reduce-annotations', rule, {
+  valid: [
+    {
+      code: `
+        .valid-class {
+          color: green;
+        }
+      `,
+      filename: 'test.css',
+    },
+    {
+      code: `
+        /* Regular comment */
+        .my-other-class {
+          background: orange;
+        }
+      `,
+      filename: 'test.css',
+    },
+    {
+      code: `
+        /* stylelint-disable */
+        .example-class {
+          color: red;
+        }
+      `,
+      filename: 'test.css',
+    },
+    {
+      code: `
+        /* Some other comment */
+        /* Not an annotation */
+        .another-class {
+          margin: 10px;
+        }
+      `,
+      filename: 'test.css',
+    },
+  ],
+
+  invalid: [
+    // @sldsValidatorAllow annotation
+    {
+      code: `
+        /* @sldsValidatorAllow */
+        .my-class {
+          color: red;
+        }
+      `,
+      filename: 'test.css',
+      errors: [{
+        messageId: 'removeAnnotation'
+      }]
+    },
+    
+    // @sldsValidatorIgnore annotation
+    {
+      code: `
+        /* @sldsValidatorIgnore */
+        .another-class {
+          background: blue;
+        }
+      `,
+      filename: 'test.css',
+      errors: [{
+        messageId: 'removeAnnotation'
+      }]
+    },
+
+    // @sldsValidatorIgnoreNextLine annotation
+    {
+      code: `
+        /* @sldsValidatorIgnoreNextLine */
+        .another-class {
+          background: blue;
+        }
+      `,
+      filename: 'test.css',
+      errors: [{
+        messageId: 'removeAnnotation'
+      }]
+    },
+
+    // Multiple annotations in same file
+    {
+      code: `
+        /* @sldsValidatorAllow */
+        /* @sldsValidatorIgnore */
+        .valid-class {
+          color: yellow;
+        }
+      `,
+      filename: 'test.css',
+      errors: [
+        {
+          messageId: 'removeAnnotation'
+        },
+        {
+          messageId: 'removeAnnotation'
+        }
+      ]
+    },
+
+    // Annotation with additional text
+    {
+      code: `
+        /* @sldsValidatorAllow some extra text */
+        .test-class {
+          padding: 5px;
+        }
+      `,
+      filename: 'test.css',
+      errors: [{
+        messageId: 'removeAnnotation'
+      }]
+    },
+
+    // Mixed valid and invalid comments
+    {
+      code: `
+        /* Regular comment */
+        /* @sldsValidatorIgnoreNextLine */
+        .mixed-example {
+          border: 1px solid red;
+        }
+      `,
+      filename: 'test.css',
+      errors: [{
+        messageId: 'removeAnnotation'
+      }]
+    },
+
+    // Single-line comment style
+    {
+      code: `
+        /* @sldsValidatorIgnore */
+        .single-line-annotation {
+          width: 100%;
+        }
+      `,
+      filename: 'test.css',
+      errors: [{
+        messageId: 'removeAnnotation'
+      }]
+    }
+  ]
+});

packages/stylelint-plugin-slds/stylelint.rules.internal.json

@@ -11,12 +11,5 @@
         {
             "severity": "warning"
         }
-    ],
-    "slds/reduce-annotations": [
-        true,
-        {
-            "severity": "warning"
-        }
     ]
-
 }

packages/stylelint-plugin-slds/stylelint.rules.json

@@ -4,11 +4,5 @@
         {
             "severity": "warning"
         }
-    ],
-    "slds/reduce-annotations": [
-        true,
-        {
-            "severity": "warning"
-        }
     ]
 }