@hero-design/snowflake-guard 1.0.14 → 1.2.0

package/README.md

@@ -10,9 +10,18 @@
 cp .env.example .env
 ```
 
-2. Install snowflake-guard[Dev] [app](https://github.com/apps/hero-design-snowflake-guard-dev) to a repository that you wish to run the app on.
+2. Set up [internal-tool-integrations service](https://github.com/Thinkei/internal-tool-integrations) for the bot to store report.
 
-3. Start the app.
+- Replace `DB_HOST` with the host of the internal-tool-integrations service.
+- Use the same `SNOWFLAKE_GUARD_SECRET` as the one in the internal-tool-integrations service.
+
+In case you don't want to store snowflake report, comment out the `saving report` section in `src/index.ts`.
+
+3. Install snowflake-guard[Dev] [app](https://github.com/apps/hero-design-snowflake-guard-dev) to a repository that you wish to run the app on.
+
+4. Start `internal-tool-integrations` service.
+
+5. Start the bot.
 
 ```sh
 # Install dependencies
@@ -21,7 +30,7 @@ yarn install
 # Run the bot
 yarn start
 ```
-4. Open or update a pull request to trigger webhook events.
+6. Open or update a pull request to trigger webhook events.
 
 ## Note
 

package/lib/src/__tests__/parseSource.spec.js

@@ -32,11 +32,124 @@ describe('parseSource', () => {
     it('reports correct snowflakes', () => {
         const source = fs.readFileSync('./src/__mocks__/sourceSample.tsx', 'utf-8');
         expect((0, parseSource_1.default)(source)).toEqual({
+            approvedLocs: [55, 65, 64],
             classNameLocs: [44, 42, 43],
-            styleLocs: [54, 47, 49, 50, 51, 52, 53],
-            sxLocs: [63, 58, 59, 60, 61, 62],
+            styleLocs: [54, 67, 47, 49, 50, 51, 52, 53],
             styledComponentLocs: [6, 10, 15],
-            approvedLocs: [55, 65, 64],
+            sxLocs: [63, 58, 59, 60, 61, 62],
+            violatingAttributes: [
+                {
+                    attributeName: 'padding',
+                    attributeValue: '20',
+                    componentName: 'Button.Link',
+                    inlineStyleProps: 'style',
+                    loc: 54,
+                },
+                {
+                    attributeName: 'padding',
+                    attributeValue: '20',
+                    componentName: 'Button.Link',
+                    inlineStyleProps: 'sx',
+                    loc: 63,
+                },
+                {
+                    attributeName: 'padding',
+                    attributeValue: '20',
+                    componentName: 'Button.Link',
+                    inlineStyleProps: 'style',
+                    loc: 67,
+                },
+                {
+                    attributeName: 'backgroundColor',
+                    attributeValue: "'red'",
+                    componentName: 'Button.Link',
+                    inlineStyleProps: 'style',
+                    loc: 67,
+                },
+                {
+                    attributeName: 'width',
+                    attributeValue: '200',
+                    componentName: 'Empty',
+                    inlineStyleProps: 'style',
+                    loc: 47,
+                },
+                {
+                    attributeName: 'width',
+                    attributeValue: '200',
+                    componentName: 'Card.Header',
+                    inlineStyleProps: 'style',
+                    loc: 49,
+                },
+                {
+                    attributeName: 'padding',
+                    attributeValue: '30',
+                    componentName: 'Button',
+                    inlineStyleProps: 'style',
+                    loc: 50,
+                },
+                {
+                    attributeName: 'padding',
+                    attributeValue: '30',
+                    componentName: 'Button',
+                    inlineStyleProps: 'style',
+                    loc: 51,
+                    additionalProps: [
+                        {
+                            propName: 'variant',
+                            propValue: '"text"',
+                        },
+                    ],
+                },
+                {
+                    attributeName: 'padding',
+                    attributeValue: '30',
+                    componentName: 'Button',
+                    inlineStyleProps: 'style',
+                    loc: 52,
+                },
+                {
+                    attributeName: 'padding',
+                    attributeValue: '30',
+                    componentName: 'Button',
+                    inlineStyleProps: 'style',
+                    loc: 53,
+                },
+                {
+                    attributeName: 'mt',
+                    attributeValue: '10',
+                    componentName: 'Badge.Count',
+                    inlineStyleProps: 'sx',
+                    loc: 58,
+                },
+                {
+                    attributeName: 'pt',
+                    attributeValue: '10',
+                    componentName: 'Badge',
+                    inlineStyleProps: 'sx',
+                    loc: 59,
+                },
+                {
+                    attributeName: 'pt',
+                    attributeValue: '10',
+                    componentName: 'Badge',
+                    inlineStyleProps: 'sx',
+                    loc: 60,
+                },
+                {
+                    attributeName: 'pt',
+                    attributeValue: '10',
+                    componentName: 'Badge',
+                    inlineStyleProps: 'sx',
+                    loc: 61,
+                },
+                {
+                    attributeName: 'pt',
+                    attributeValue: '10',
+                    componentName: 'Badge',
+                    inlineStyleProps: 'sx',
+                    loc: 62,
+                },
+            ],
         });
     });
 });

package/lib/src/parseSource.d.ts

@@ -1,8 +1,17 @@
+import type { CompoundComponentName } from './reports/types';
+import { InlineStyleProps } from './reports/reportInlineStyle';
 declare const parseSource: (source: string) => {
     classNameLocs: number[];
     styleLocs: number[];
     sxLocs: number[];
     styledComponentLocs: number[];
     approvedLocs: number[];
+    violatingAttributes: {
+        attributeName: string;
+        attributeValue: string | null;
+        inlineStyleProps: InlineStyleProps;
+        componentName: CompoundComponentName;
+        loc: number | undefined;
+    }[];
 };
 export default parseSource;

package/lib/src/parseSource.js

@@ -40,6 +40,7 @@ const parseSource = (source) => {
     let classNameLocs = [];
     let styleLocs = [];
     let sxLocs = [];
+    let violatingAttributes = [];
     const approvedCmtLocs = [];
     const approvedClassnameLocs = [];
     const ast = recast.parse(source, { parser: tsParser });
@@ -96,6 +97,12 @@ const parseSource = (source) => {
         if (hasStyledComponentsImport) {
             styledComponentLocs = (0, reportStyledComponents_1.default)(ast, componentList, styledAliasName).filter(isNotApprovedSnowflakes);
         }
+        violatingAttributes = customPropLocs.violatingAttributes.filter((report) => {
+            if (report.loc) {
+                return !approvedCmtLocs.includes(report.loc);
+            }
+            return true;
+        });
     }
     return {
         classNameLocs,
@@ -103,6 +110,7 @@ const parseSource = (source) => {
         sxLocs,
         styledComponentLocs,
         approvedLocs: [...approvedCmtLocs, ...approvedClassnameLocs],
+        violatingAttributes,
     };
 };
 exports.default = parseSource;

package/lib/src/reports/__tests__/reportInlineStyle.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/src/reports/__tests__/reportInlineStyle.spec.js

@@ -0,0 +1,133 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const recast = __importStar(require("recast"));
+const reportInlineStyle_1 = __importDefault(require("../reportInlineStyle"));
+const constants_1 = require("../constants");
+const tsParser = __importStar(require("../../parsers/typescript"));
+describe('reportInlineStyle', () => {
+    it('should return line numbers and violating attributes for inline styles that violate the ruleset', () => {
+        const code = `
+    const MyComponent = () => (
+      <Card style={{
+              color: 'red',
+              backgroundColor: 'blue'
+            }}
+            sx={{
+              padding: 10,
+              backgroundColor: 'blue'
+            }}
+            variant="primary"
+            intent="success"
+/>
+    );
+  `;
+        // Step 1: Parse the code to generate the AST
+        const ast = recast.parse(code, { parser: tsParser });
+        const attributes = [];
+        // Step 2: Traverse the AST to extract relevant JSXAttributes (style and sx)
+        recast.visit(ast, {
+            visitJSXAttribute(path) {
+                const { node } = path;
+                attributes.push(node);
+                this.traverse(path);
+            },
+        });
+        const componentName = 'Card';
+        // Mock the RULESET_MAP and SX_RULESET_MAP for this test
+        constants_1.RULESET_MAP.Card = ['color', 'backgroundColor'];
+        constants_1.SX_RULESET_MAP.Card = ['padding', 'backgroundColor'];
+        // Step 3: Run the function with the dynamically extracted attributes
+        const result = (0, reportInlineStyle_1.default)(ast, attributes, componentName);
+        expect(result.additionalProps).toMatchObject([
+            {
+                propValue: '"primary"',
+                propName: 'variant',
+            },
+        ]);
+        expect(result.locs.style).toEqual([3]);
+        expect(result.locs.sx).toEqual([7]);
+        expect(result.violatingAttributes).toEqual([
+            {
+                attributeName: 'color',
+                attributeValue: "'red'",
+                componentName: 'Card',
+                inlineStyleProps: 'style',
+                loc: 3,
+            },
+            {
+                attributeName: 'backgroundColor',
+                attributeValue: "'blue'",
+                componentName: 'Card',
+                inlineStyleProps: 'style',
+                loc: 3,
+            },
+            {
+                attributeName: 'padding',
+                attributeValue: '10',
+                componentName: 'Card',
+                inlineStyleProps: 'sx',
+                loc: 7,
+            },
+            {
+                attributeName: 'backgroundColor',
+                attributeValue: "'blue'",
+                componentName: 'Card',
+                inlineStyleProps: 'sx',
+                loc: 7,
+            },
+        ]);
+    });
+    it('should return empty arrays when no violations are found', () => {
+        const code = `
+      const MyComponent = () => (
+        <Card style={{ margin: '10px' }} sx={{ margin: 5 }} />
+      );
+    `;
+        // Step 1: Parse the code to generate the AST
+        const ast = recast.parse(code, { parser: tsParser });
+        const attributes = [];
+        // Step 2: Traverse the AST to extract relevant JSXAttributes (style and sx)
+        recast.visit(ast, {
+            visitJSXAttribute(path) {
+                const { node } = path;
+                attributes.push(node);
+                this.traverse(path);
+            },
+        });
+        const componentName = 'Card';
+        // Mock the RULESET_MAP and SX_RULESET_MAP for this test
+        constants_1.RULESET_MAP.Card = ['color'];
+        constants_1.SX_RULESET_MAP.Card = ['padding'];
+        const result = (0, reportInlineStyle_1.default)(ast, attributes, componentName);
+        expect(result.locs.style).toEqual([]);
+        expect(result.locs.sx).toEqual([]);
+        expect(result.violatingAttributes).toEqual([]);
+        expect(result.violatingAttributes).toEqual([]);
+    });
+});

package/lib/src/reports/reportCustomStyleProperties.d.ts

@@ -1,10 +1,19 @@
 import * as recast from 'recast';
-import type { ComponentName } from './types';
+import { AdditionalProp, InlineStyleProps } from './reportInlineStyle';
+import type { ComponentName, CompoundComponentName } from './types';
 declare const reportCustomProperties: (ast: recast.types.ASTNode, componentList: {
     [k: string]: "Alert" | "Badge" | "Banner" | "Breadcrumb" | "Button" | "Card" | "Carousel" | "Chart" | "Checkbox" | "Chip" | "Collapse" | "Comment" | "ContextPanel" | "DatePicker" | "Divider" | "Dropdown" | "Empty" | "File" | "Filters" | "Form" | "Grid" | "Icon" | "InPageNavigation" | "Input" | "MediaQuery" | "Menu" | "Modal" | "Notification" | "PageHeader" | "Pagination" | "Portal" | "Portlet" | "Progress" | "Radio" | "Rate" | "Result" | "Select" | "SelectButton" | "SideBar" | "Slider" | "Spinner" | "Statistic" | "Steps" | "Switch" | "Table" | "Tabs" | "Tag" | "TagInput" | "TimePicker" | "Timeline" | "Tooltip" | "Typography" | "Widget";
 }) => {
     className: number[];
     style: number[];
     sx: number[];
+    violatingAttributes: {
+        attributeName: string;
+        attributeValue: string | null;
+        inlineStyleProps: InlineStyleProps;
+        componentName: CompoundComponentName;
+        loc: number | undefined;
+        additionalProps?: AdditionalProp[];
+    }[];
 };
 export default reportCustomProperties;

package/lib/src/reports/reportCustomStyleProperties.js

@@ -29,11 +29,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const recast = __importStar(require("recast"));
 const reportClassName_1 = __importDefault(require("./reportClassName"));
 const reportInlineStyle_1 = __importDefault(require("./reportInlineStyle"));
+const mapViolatingAttributesAndAdditionalProps = (violatingAttributes, additionalProps) => {
+    return violatingAttributes.map((violatingAttribute) => (Object.assign(Object.assign({}, violatingAttribute), (additionalProps && additionalProps.length ? { additionalProps } : {}))));
+};
 const reportCustomProperties = (ast, componentList) => {
-    const locs = {
+    const report = {
         className: [],
         style: [],
         sx: [],
+        violatingAttributes: [],
     };
     const localComponentList = Object.keys(componentList);
     recast.visit(ast, {
@@ -44,10 +48,17 @@ const reportCustomProperties = (ast, componentList) => {
                 localComponentList.includes(path.value.name.name)) {
                 const attributes = path.value
                     .attributes;
-                const styleObjectLocs = (0, reportInlineStyle_1.default)(ast, attributes, componentList[path.value.name.name]);
-                locs.className = [...locs.className, ...(0, reportClassName_1.default)(attributes)];
-                locs.style = [...locs.style, ...styleObjectLocs.style];
-                locs.sx = [...locs.sx, ...styleObjectLocs.sx];
+                const { locs: styleObjectLocs, violatingAttributes, additionalProps, } = (0, reportInlineStyle_1.default)(ast, attributes, componentList[path.value.name.name]);
+                report.className = [
+                    ...report.className,
+                    ...(0, reportClassName_1.default)(attributes),
+                ];
+                report.style = [...report.style, ...styleObjectLocs.style];
+                report.sx = [...report.sx, ...styleObjectLocs.sx];
+                report.violatingAttributes = [
+                    ...report.violatingAttributes,
+                    ...mapViolatingAttributesAndAdditionalProps(violatingAttributes, additionalProps),
+                ];
             }
             // Case 2: Custom compound component, e.g. <Card.Header />
             if (path.value.name.type === 'JSXMemberExpression' &&
@@ -58,10 +69,17 @@ const reportCustomProperties = (ast, componentList) => {
                 ].join('.');
                 const attributes = path.value
                     .attributes;
-                const styleObjectLocs = (0, reportInlineStyle_1.default)(ast, attributes, compoundComponentName);
-                locs.className = [...locs.className, ...(0, reportClassName_1.default)(attributes)];
-                locs.style = [...locs.style, ...styleObjectLocs.style];
-                locs.sx = [...locs.sx, ...styleObjectLocs.sx];
+                const { locs: styleObjectLocs, violatingAttributes, additionalProps, } = (0, reportInlineStyle_1.default)(ast, attributes, compoundComponentName);
+                report.className = [
+                    ...report.className,
+                    ...(0, reportClassName_1.default)(attributes),
+                ];
+                report.style = [...report.style, ...styleObjectLocs.style];
+                report.sx = [...report.sx, ...styleObjectLocs.sx];
+                report.violatingAttributes = [
+                    ...report.violatingAttributes,
+                    ...mapViolatingAttributesAndAdditionalProps(violatingAttributes, additionalProps),
+                ];
             }
         },
         // Case 3: Custom compound component with spead operator. e.g. const { Header } = Card, then <Header />
@@ -90,13 +108,17 @@ const reportCustomProperties = (ast, componentList) => {
                                     openPath.value.name.name,
                                 ].join('.');
                                 const { attributes } = openPath.value;
-                                const styleObjectLocs = (0, reportInlineStyle_1.default)(ast, attributes, compoundComponentName);
-                                locs.className = [
-                                    ...locs.className,
+                                const { locs: styleObjectLocs, violatingAttributes, additionalProps, } = (0, reportInlineStyle_1.default)(ast, attributes, compoundComponentName);
+                                report.className = [
+                                    ...report.className,
                                     ...(0, reportClassName_1.default)(attributes),
                                 ];
-                                locs.style = [...locs.style, ...styleObjectLocs.style];
-                                locs.sx = [...locs.sx, ...styleObjectLocs.sx];
+                                report.style = [...report.style, ...styleObjectLocs.style];
+                                report.sx = [...report.sx, ...styleObjectLocs.sx];
+                                report.violatingAttributes = [
+                                    ...report.violatingAttributes,
+                                    ...mapViolatingAttributesAndAdditionalProps(violatingAttributes, additionalProps),
+                                ];
                             }
                         },
                     });
@@ -104,6 +126,6 @@ const reportCustomProperties = (ast, componentList) => {
             }
         },
     });
-    return locs;
+    return report;
 };
 exports.default = reportCustomProperties;

package/lib/src/reports/reportInlineStyle.d.ts

@@ -1,7 +1,25 @@
 import * as recast from 'recast';
 import type { CompoundComponentName } from './types';
+export type InlineStyleProps = 'style' | 'sx';
+export declare const INLINE_STYLE_PROPERTIES: string[];
+export declare const ADDITIONAL_PROPERTIES: string[];
+export type ViolatingAttribute = {
+    attributeName: string;
+    attributeValue: string | null;
+    inlineStyleProps: InlineStyleProps;
+    componentName: CompoundComponentName;
+    loc: number | undefined;
+};
+export type AdditionalProp = {
+    propName: string;
+    propValue: string | null;
+};
 declare const reportInlineStyle: (ast: recast.types.ASTNode, attributes: recast.types.namedTypes.JSXAttribute[], componentName: CompoundComponentName) => {
-    style: number[];
-    sx: number[];
+    locs: {
+        style: number[];
+        sx: number[];
+    };
+    violatingAttributes: ViolatingAttribute[];
+    additionalProps: AdditionalProp[];
 };
 export default reportInlineStyle;

package/lib/src/reports/reportInlineStyle.js

@@ -23,35 +23,80 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.ADDITIONAL_PROPERTIES = exports.INLINE_STYLE_PROPERTIES = void 0;
 const recast = __importStar(require("recast"));
 const constants_1 = require("./constants");
 const BLACKLIST_PROPERTIES = {
     style: constants_1.RULESET_MAP,
     sx: constants_1.SX_RULESET_MAP,
 };
-const INLINE_STYLE_PROPERTIES = ['style', 'sx'];
+exports.INLINE_STYLE_PROPERTIES = ['style', 'sx'];
+exports.ADDITIONAL_PROPERTIES = ['variant']; // Add any additional props you want to track
+const addViolatingAttribute = (prop, styleObjName, componentName, loc, violatingAttributes) => {
+    if (prop.key.type !== 'Identifier') {
+        return;
+    }
+    violatingAttributes.push({
+        attributeName: prop.key.name,
+        attributeValue: recast.print(prop.value).code,
+        inlineStyleProps: styleObjName,
+        componentName,
+        loc,
+    });
+};
+const getPropValue = (attr) => {
+    var _a;
+    if (!attr.value) {
+        return ''; // Handle case where value is missing
+    }
+    if (typeof attr.value === 'string') {
+        return attr.value; // Directly return string value
+    }
+    if (((_a = attr.value) === null || _a === void 0 ? void 0 : _a.type) === 'JSXExpressionContainer') {
+        return recast.print(attr.value.expression).code;
+    }
+    // Use recast to print the expression if it's not a simple string
+    return recast.print(attr.value).code;
+};
 const reportInlineStyle = (ast, attributes, componentName) => {
     const locs = {
         style: [],
         sx: [],
     };
+    const violatingAttributes = [];
+    const additionalProps = [];
     let hasCustomStyle = false;
     let styleObjName;
     attributes.forEach((attr) => {
         var _a;
-        if (attr.type === 'JSXAttribute' &&
-            typeof attr.name.name === 'string' &&
-            INLINE_STYLE_PROPERTIES.includes(attr.name.name) &&
-            ((_a = attr.value) === null || _a === void 0 ? void 0 : _a.type) === 'JSXExpressionContainer') {
+        if (attr.type !== 'JSXAttribute') {
+            return;
+        }
+        if (typeof attr.name.name !== 'string') {
+            return;
+        }
+        if (exports.ADDITIONAL_PROPERTIES.includes(attr.name.name)) {
+            // Handle expression container like `style={{ ... }}`
+            additionalProps.push({
+                propName: attr.name.name,
+                propValue: getPropValue(attr), // Print expression as string
+            });
+        }
+        if (((_a = attr.value) === null || _a === void 0 ? void 0 : _a.type) !== 'JSXExpressionContainer') {
+            return;
+        }
+        if (exports.INLINE_STYLE_PROPERTIES.includes(attr.name.name)) {
             styleObjName = attr.name.name;
             const { expression } = attr.value;
             if (expression.type === 'ObjectExpression') {
                 expression.properties.forEach((prop) => {
+                    var _a;
                     // Case 1: Use direct object, e.g. <Card style={{ color: 'red' }} />
                     if (prop.type === 'ObjectProperty' &&
                         prop.key.type === 'Identifier' &&
                         BLACKLIST_PROPERTIES[styleObjName][componentName].includes(prop.key.name)) {
                         hasCustomStyle = true;
+                        addViolatingAttribute(prop, styleObjName, componentName, (_a = attr.loc) === null || _a === void 0 ? void 0 : _a.start.line, violatingAttributes);
                     }
                     // Case 2: Use spread operator, e.g. <Card style={{ ...customStyle }} />
                     if (prop.type === 'SpreadElement' &&
@@ -67,10 +112,12 @@ const reportInlineStyle = (ast, attributes, componentName) => {
                                     declaration.id.name === variableName &&
                                     ((_a = declaration.init) === null || _a === void 0 ? void 0 : _a.type) === 'ObjectExpression') {
                                     declaration.init.properties.forEach((deProp) => {
+                                        var _a;
                                         if (deProp.type === 'ObjectProperty' &&
                                             deProp.key.type === 'Identifier' &&
                                             BLACKLIST_PROPERTIES[styleObjName][componentName].includes(deProp.key.name)) {
                                             hasCustomStyle = true;
+                                            addViolatingAttribute(deProp, styleObjName, componentName, (_a = attr.loc) === null || _a === void 0 ? void 0 : _a.start.line, violatingAttributes);
                                         }
                                     });
                                 }
@@ -99,10 +146,12 @@ const reportInlineStyle = (ast, attributes, componentName) => {
                                             deProp.key.name === propName &&
                                             deProp.value.type === 'ObjectExpression') {
                                             deProp.value.properties.forEach((p) => {
+                                                var _a;
                                                 if (p.type === 'ObjectProperty' &&
                                                     p.key.type === 'Identifier' &&
                                                     BLACKLIST_PROPERTIES[styleObjName][componentName].includes(p.key.name)) {
                                                     hasCustomStyle = true;
+                                                    addViolatingAttribute(p, styleObjName, componentName, (_a = attr.loc) === null || _a === void 0 ? void 0 : _a.start.line, violatingAttributes);
                                                 }
                                             });
                                         }
@@ -126,10 +175,12 @@ const reportInlineStyle = (ast, attributes, componentName) => {
                             declaration.id.name === variableName &&
                             ((_a = declaration.init) === null || _a === void 0 ? void 0 : _a.type) === 'ObjectExpression') {
                             declaration.init.properties.forEach((prop) => {
+                                var _a;
                                 if (prop.type === 'ObjectProperty' &&
                                     prop.key.type === 'Identifier' &&
                                     BLACKLIST_PROPERTIES[styleObjName][componentName].includes(prop.key.name)) {
                                     hasCustomStyle = true;
+                                    addViolatingAttribute(prop, styleObjName, componentName, (_a = attr.loc) === null || _a === void 0 ? void 0 : _a.start.line, violatingAttributes);
                                 }
                             });
                         }
@@ -157,10 +208,12 @@ const reportInlineStyle = (ast, attributes, componentName) => {
                                     prop.key.name === propName &&
                                     prop.value.type === 'ObjectExpression') {
                                     prop.value.properties.forEach((p) => {
+                                        var _a;
                                         if (p.type === 'ObjectProperty' &&
                                             p.key.type === 'Identifier' &&
                                             BLACKLIST_PROPERTIES[styleObjName][componentName].includes(p.key.name)) {
                                             hasCustomStyle = true;
+                                            addViolatingAttribute(p, styleObjName, componentName, (_a = attr.loc) === null || _a === void 0 ? void 0 : _a.start.line, violatingAttributes);
                                         }
                                     });
                                 }
@@ -174,6 +227,6 @@ const reportInlineStyle = (ast, attributes, componentName) => {
             }
         }
     });
-    return locs;
+    return { locs, violatingAttributes, additionalProps };
 };
 exports.default = reportInlineStyle;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/snowflake-guard",
-  "version": "1.0.14",
+  "version": "1.2.0",
   "description": "A hero-design bot detecting snowflake usage",
   "author": "Hau Dao",
   "license": "ISC",
@@ -18,7 +18,9 @@
   "scripts": {
     "build": "tsc",
     "start": "yarn build && probot run ./lib/src/index.js",
+    "type-check": "tsc --noEmit",
     "test": "jest --passWithNoTests",
+    "lint": "eslint src",
     "deploy": "netlify deploy --site snowflake-guard.netlify.app --prod --auth $NETLIFY_AUTH_TOKEN",
     "publish:npm": "yarn publish --access public"
   },
@@ -34,6 +36,7 @@
     "@types/jest": "^29.0.0",
     "@types/node": "^18.0.0",
     "config-tsconfig": "8.42.4",
+    "eslint": "^8.56.0",
     "eslint-config-hd": "8.42.4",
     "jest": "^29.0.0",
     "nock": "^13.0.5",