@hero-design/eslint-plugin 9.2.4-test-auto-workflow.2 → 9.2.4

package/CHANGELOG.md

@@ -1,22 +1,12 @@
 # @hero-design/eslint-plugin
 
-## 9.2.4-test-auto-workflow.2
+## 9.2.4
 
 ### Patch Changes
 
-- test
+- [#5230](https://github.com/Thinkei/hero-design/pull/5230) [`866862f`](https://github.com/Thinkei/hero-design/commit/866862fa2b9f814ee8abd4ca9ee6f75c06587716) Thanks [@tqdungit](https://github.com/tqdungit)! - [ANG-5494] Add allowClassNames option to banning-snowflake-approve-comment rule
 
-## 9.2.4-test-auto-workflow.1
-
-### Patch Changes
-
-- test
-
-## 9.2.4-test-auto-workflow.0
-
-### Patch Changes
-
-- bump version
+- [#5233](https://github.com/Thinkei/hero-design/pull/5233) [`95838f9`](https://github.com/Thinkei/hero-design/commit/95838f9bd37ba5ec1c64e379a0cb87531e3fd102) Thanks [@phthhieu](https://github.com/phthhieu)! - Resolve Dependabot vulnerabilities
 
 ## 9.2.3
 

package/docs/rules/banning-snowflake-approve-comment.md

@@ -36,7 +36,69 @@ function fetchUserData() {
 const config = { apiKey: process.env.API_KEY };
 ```
 
+## Options
+
+The rule accepts an optional configuration object:
+
+```json
+{
+  "rules": {
+    "@hero-design/banning-snowflake-approve-comment": [
+      "error",
+      { "allowClassNames": ["rr-mark", "abc"] }
+    ]
+  }
+}
+```
+
+### `allowClassNames` (default: `[]`)
+
+An array of classnames pre-approved for non-CSS usage. When `allowClassNames` is configured, the rule reads the `className` value from the adjacent JSX element and checks it against the list. If all classnames pass, the `@snowflake-guard/approved-classname` comment is allowed to be committed.
+
+This is useful for classnames that are known to be non-CSS (e.g. analytics markers, third-party library identifiers) and are permanently allowed across your project.
+
+**In ESLint config:**
+
+```json
+{
+  "rules": {
+    "@hero-design/banning-snowflake-approve-comment": [
+      "error",
+      { "allowClassNames": ["rr-mark", "abc"] }
+    ]
+  }
+}
+```
+
+**In code** — place `@snowflake-guard/approved-classname` above or inside the element. The classname does **not** need to be written in the comment — the rule reads it from the `className` prop directly:
+
+```jsx
+// ✅ allowed — rr-mark is in allowClassNames, comment above element
+// @snowflake-guard/approved-classname
+<Button className="rr-mark" />
+
+// ✅ allowed — comment inside element (between attributes)
+<Button
+  // @snowflake-guard/approved-classname
+  className="rr-mark"
+/>
+
+// ✅ allowed — all classnames are in allowClassNames
+// @snowflake-guard/approved-classname
+<Button className="rr-mark abc" />
+
+// ❌ error — custom-style is not in allowClassNames
+// @snowflake-guard/approved-classname
+<Button className="custom-style" />
+
+// ❌ error — one classname is not in allowClassNames
+// @snowflake-guard/approved-classname
+<Button className="rr-mark custom-style" />
+
+// ❌ error — allowClassNames only affects approved-classname, not other patterns
+// @snowflake-guard/approved-inline-style
+```
+
 ## When To Use It
 
 Use this rule to prevent Snowflake Guard approval comments from being committed to the repository. If you need Snowflake Guard approval, please contact the Andromeda team directly.
-

package/lib/rules/banning-snowflake-approve-comment.js

@@ -8,23 +8,113 @@ module.exports = {
     messages: {
       noSnowflakeGuard:
         'Comments including @snowflake-guard/ are not allowed. Please contact Andromeda team for the approval.',
+      classNameNotAllowed:
+        '"{{ classNames }}" is not in allowClassNames. Add it to allowClassNames in your ESLint config or contact Andromeda team for approval.',
     },
-    schema: [],
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          allowClassNames: {
+            type: 'array',
+            items: { type: 'string' },
+            uniqueItems: true,
+            default: [],
+          },
+        },
+        additionalProperties: false,
+      },
+    ],
   },
   create(context) {
+    const allowClassNames = (context.options[0] || {}).allowClassNames || [];
+    const sourceCode = context.getSourceCode();
+
+    // Comments approved via allowClassNames — collected in JSXOpeningElement
+    const approvedComments = new Set();
+    // Comments with classnames not in allowClassNames — maps comment → rejected classnames
+    const rejectedComments = new Map();
+
+    const getClassNameValue = (attr) => {
+      if (attr.value.type === 'Literal') return String(attr.value.value);
+      if (
+        attr.value.type === 'JSXExpressionContainer' &&
+        attr.value.expression.type === 'Literal'
+      )
+        return String(attr.value.expression.value);
+      return null;
+    };
+
     return {
-      Program() {
-        const sourceCode = context.getSourceCode();
+      JSXOpeningElement(node) {
+        const classNameAttr = node.attributes.find(
+          (attr) =>
+            attr.type === 'JSXAttribute' && attr.name.name === 'className'
+        );
+        if (!classNameAttr || !classNameAttr.value) return;
+
+        const value = getClassNameValue(classNameAttr);
+        if (value === null) return;
+
+        // Also check {/* @snowflake-guard/approved-classname */} JSX siblings
+        const jsxSiblingComments = [];
+        const parentElement = node.parent.parent;
+        if (parentElement && parentElement.type === 'JSXElement') {
+          const siblings = parentElement.children;
+          const myIndex = siblings.indexOf(node.parent);
+          for (let i = myIndex - 1; i >= 0; i--) {
+            const sib = siblings[i];
+            if (sib.type === 'JSXExpressionContainer') {
+              jsxSiblingComments.push(...sourceCode.getCommentsInside(sib));
+              break;
+            }
+            if (sib.type !== 'JSXText') break;
+          }
+        }
+
+        const approvalComment = [
+          ...sourceCode.getCommentsBefore(node),
+          ...sourceCode.getCommentsBefore(classNameAttr),
+          ...jsxSiblingComments,
+        ].find((c) =>
+          c.value.trim().startsWith('@snowflake-guard/approved-classname')
+        );
+        if (!approvalComment) return;
+
+        const classNames = value.trim().split(/\s+/);
+        const rejectedClassNames = classNames.filter(
+          (cn) => !allowClassNames.includes(cn)
+        );
+
+        if (rejectedClassNames.length === 0) {
+          approvedComments.add(approvalComment);
+        } else {
+          rejectedComments.set(approvalComment, rejectedClassNames);
+        }
+      },
+
+      'Program:exit'() {
         const comments = sourceCode.getAllComments();
 
         comments.forEach((comment) => {
           // Check if the comment includes @snowflake-guard/
-          if (comment.value.includes('@snowflake-guard/')) {
+          if (!comment.value.includes('@snowflake-guard/')) return;
+          if (approvedComments.has(comment)) return;
+
+          const rejectedClassNames = rejectedComments.get(comment);
+          if (rejectedClassNames) {
             context.report({
               node: comment,
-              messageId: 'noSnowflakeGuard',
+              messageId: 'classNameNotAllowed',
+              data: { classNames: rejectedClassNames.join(', ') },
             });
+            return;
           }
+
+          context.report({
+            node: comment,
+            messageId: 'noSnowflakeGuard',
+          });
         });
       },
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/eslint-plugin",
-  "version": "9.2.4-test-auto-workflow.2",
+  "version": "9.2.4",
   "description": "Hero Design's eslint plugin",
   "keywords": [
     "eslint",
@@ -24,11 +24,11 @@
   "devDependencies": {
     "@eslint/eslintrc": "^3.1.0",
     "@eslint/js": "^9.8.0",
-    "eslint": "^8.56.0",
+    "eslint": "^8.57.0",
     "eslint-plugin-eslint-plugin": "^5.0.0",
     "eslint-plugin-node": "^11.1.0",
-    "jest": "^29.2.1",
-    "prettier-config-hd": "8.42.5-test-auto-workflow.2"
+    "jest": "^29.7.0",
+    "prettier-config-hd": "8.42.4"
   },
   "engines": {
     "node": "^20.0.0 || ^22.0.0"

package/tests/lib/rules/banning-snowflake-approve-comment.js

@@ -1,46 +1,209 @@
 const { RuleTester } = require('eslint');
 const rule = require('../../../lib/rules/banning-snowflake-approve-comment');
 
+const parserOptions = {
+  ecmaVersion: 6,
+  sourceType: 'module',
+  ecmaFeatures: { jsx: true },
+};
+
 const ruleTester = new RuleTester();
 
-// Define valid and invalid test cases
+const ERROR_MESSAGE =
+  'Comments including @snowflake-guard/ are not allowed. Please contact Andromeda team for the approval.';
+
+const classNameErrorMessage = (classNames) =>
+  `"${classNames}" is not in allowClassNames. Add it to allowClassNames in your ESLint config or contact Andromeda team for approval.`;
+
 ruleTester.run('no-snowflake-guard', rule, {
-  // Valid cases (should not trigger the rule)
   valid: [
-    '// A normal comment without snowflake-guard',
-    '// Another valid comment',
-    '/* @no-snowflake-guard */',
-    'console.log("no issues here");',
+    // Non-snowflake comments — always allowed
+    { code: '// A normal comment without snowflake-guard', parserOptions },
+    { code: '// Another valid comment', parserOptions },
+    { code: '/* @no-snowflake-guard */', parserOptions },
+    { code: 'console.log("no issues here");', parserOptions },
+
+    // Scenario 1: 1 HD component, 1 class (valid)
+    {
+      code: [
+        '// @snowflake-guard/approved-classname',
+        '<Button className="rr-mark" />',
+      ].join('\n'),
+      options: [{ allowClassNames: ['rr-mark'] }],
+      parserOptions,
+    },
+    // Scenario 1: comment inside the element (between attributes)
+    {
+      code: [
+        '<Button',
+        '  // @snowflake-guard/approved-classname',
+        '  className="rr-mark"',
+        '/>',
+      ].join('\n'),
+      options: [{ allowClassNames: ['rr-mark'] }],
+      parserOptions,
+    },
+    // Scenario 1: className expression container form
+    {
+      code: [
+        '// @snowflake-guard/approved-classname',
+        "<Button className={'rr-mark'} />",
+      ].join('\n'),
+      options: [{ allowClassNames: ['rr-mark'] }],
+      parserOptions,
+    },
+    // Scenario 1: multi-line JSX with className not on first line
+    {
+      code: [
+        '// @snowflake-guard/approved-classname',
+        '<Typography.Text',
+        '  intent="body"',
+        '  className="rr-mark"',
+        '>text</Typography.Text>',
+      ].join('\n'),
+      options: [{ allowClassNames: ['rr-mark'] }],
+      parserOptions,
+    },
+
+    // Scenario 2: 1 HD component, many classes (all valid)
+    {
+      code: [
+        '// @snowflake-guard/approved-classname',
+        '<Button className="rr-mark abc" />',
+      ].join('\n'),
+      options: [{ allowClassNames: ['rr-mark', 'abc'] }],
+      parserOptions,
+    },
+    // Scenario 2: all valid within a larger allowClassNames list
+    {
+      code: [
+        '// @snowflake-guard/approved-classname',
+        '<Button className="rr-mark abc" />',
+      ].join('\n'),
+      options: [{ allowClassNames: ['rr-mark', 'abc', 'other'] }],
+      parserOptions,
+    },
+
+    // Scenario 1: {/* */} JSX expression comment as preceding sibling
+    {
+      code: [
+        '<Card>',
+        '  {/* @snowflake-guard/approved-classname */}',
+        '  <Card.Content className="rr-mark" />',
+        '</Card>',
+      ].join('\n'),
+      options: [{ allowClassNames: ['rr-mark'] }],
+      parserOptions,
+    },
+
+    // Scenario 6: multiple HD components, many classes (all valid)
+    {
+      code: [
+        '<>',
+        '  <Button',
+        '    // @snowflake-guard/approved-classname',
+        '    className="rr-mark"',
+        '  />',
+        '  <Typography.Text',
+        '    // @snowflake-guard/approved-classname',
+        '    className="rr-mark abc"',
+        '  />',
+        '</>',
+      ].join('\n'),
+      options: [{ allowClassNames: ['rr-mark', 'abc'] }],
+      parserOptions,
+    },
   ],
 
-  // Invalid cases (should trigger the rule)
   invalid: [
+    // Scenario 3: 1 HD component, 1 class (invalid)
     {
-      code: '// @snowflake-guard/none-css-classname', // Triggers the rule
-      errors: [
-        {
-          message:
-            'Comments including @snowflake-guard/ are not allowed. Please contact Andromeda team for the approval.',
-        },
-      ],
+      code: [
+        '// @snowflake-guard/approved-classname',
+        '<Button className="custom-style" />',
+      ].join('\n'),
+      options: [{ allowClassNames: ['rr-mark'] }],
+      parserOptions,
+      errors: [{ message: classNameErrorMessage('custom-style') }],
     },
+
+    // Scenario 4: 1 HD component, many classes (all invalid)
     {
-      code: '// @snowflake-guard/another-pattern', // Triggers the rule
+      code: [
+        '// @snowflake-guard/approved-classname',
+        '<Button className="custom-style another-class" />',
+      ].join('\n'),
+      options: [{ allowClassNames: ['rr-mark'] }],
+      parserOptions,
       errors: [
-        {
-          message:
-            'Comments including @snowflake-guard/ are not allowed. Please contact Andromeda team for the approval.',
-        },
+        { message: classNameErrorMessage('custom-style, another-class') },
       ],
     },
+
+    // Scenario 5: 1 HD component, many classes (valid + invalid)
     {
-      code: '/* @snowflake-guard/custom-pattern */', // Triggers the rule for block comments
-      errors: [
-        {
-          message:
-            'Comments including @snowflake-guard/ are not allowed. Please contact Andromeda team for the approval.',
-        },
-      ],
+      code: [
+        '// @snowflake-guard/approved-classname',
+        '<Button className="rr-mark custom-style" />',
+      ].join('\n'),
+      options: [{ allowClassNames: ['rr-mark'] }],
+      parserOptions,
+      errors: [{ message: classNameErrorMessage('custom-style') }],
+    },
+
+    // Scenario 7: multiple HD components, many classes (valid + invalid)
+    // only the invalid component's comment is reported
+    {
+      code: [
+        '<>',
+        '  <Button',
+        '    // @snowflake-guard/approved-classname',
+        '    className="rr-mark"',
+        '  />',
+        '  <Typography.Text',
+        '    // @snowflake-guard/approved-classname',
+        '    className="custom-style"',
+        '  />',
+        '</>',
+      ].join('\n'),
+      options: [{ allowClassNames: ['rr-mark'] }],
+      parserOptions,
+      errors: [{ message: classNameErrorMessage('custom-style') }],
+    },
+
+    // Other @snowflake-guard/ patterns — always banned regardless of allowClassNames
+    {
+      code: '// @snowflake-guard/none-css-classname',
+      parserOptions,
+      errors: [{ message: ERROR_MESSAGE }],
+    },
+    {
+      code: '/* @snowflake-guard/custom-pattern */',
+      parserOptions,
+      errors: [{ message: ERROR_MESSAGE }],
+    },
+    {
+      code: '// @snowflake-guard/approved-inline-style',
+      options: [{ allowClassNames: ['rr-mark'] }],
+      parserOptions,
+      errors: [{ message: ERROR_MESSAGE }],
+    },
+
+    // approved-classname with no allowClassNames configured
+    {
+      code: [
+        '// @snowflake-guard/approved-classname',
+        '<Button className="rr-mark" />',
+      ].join('\n'),
+      parserOptions,
+      errors: [{ message: classNameErrorMessage('rr-mark') }],
+    },
+    // approved-classname with no adjacent JSX element
+    {
+      code: '// @snowflake-guard/approved-classname',
+      options: [{ allowClassNames: ['rr-mark'] }],
+      parserOptions,
+      errors: [{ message: ERROR_MESSAGE }],
     },
   ],
 });