@hero-design/snowflake-guard 1.2.0 → 1.2.2

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

@@ -32,67 +32,81 @@ 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, 67, 47, 49, 50, 51, 52, 53],
-            styledComponentLocs: [6, 10, 15],
-            sxLocs: [63, 58, 59, 60, 61, 62],
+            approvedLocs: [60, 78, 85, 92, 70, 80, 10],
+            classNameLocs: [49, 47, 48],
+            styleLocs: [59, 73, 87, 52, 54, 55, 56, 57, 58],
+            styledComponentLocs: [6, 15, 20],
+            sxLocs: [69, 94, 64, 65, 66, 67, 68],
             violatingAttributes: [
                 {
                     attributeName: 'padding',
                     attributeValue: '20',
                     componentName: 'Button.Link',
                     inlineStyleProps: 'style',
-                    loc: 54,
+                    loc: 59,
                 },
                 {
                     attributeName: 'padding',
                     attributeValue: '20',
                     componentName: 'Button.Link',
                     inlineStyleProps: 'sx',
-                    loc: 63,
+                    loc: 69,
                 },
                 {
                     attributeName: 'padding',
                     attributeValue: '20',
                     componentName: 'Button.Link',
                     inlineStyleProps: 'style',
-                    loc: 67,
+                    loc: 73,
                 },
                 {
                     attributeName: 'backgroundColor',
                     attributeValue: "'red'",
                     componentName: 'Button.Link',
                     inlineStyleProps: 'style',
-                    loc: 67,
+                    loc: 73,
+                },
+                {
+                    attributeName: 'padding',
+                    attributeValue: '20',
+                    componentName: 'Button.Link',
+                    inlineStyleProps: 'style',
+                    loc: 87,
+                },
+                {
+                    attributeName: 'backgroundColor',
+                    attributeValue: "'red'",
+                    componentName: 'Button.Link',
+                    inlineStyleProps: 'sx',
+                    loc: 94,
                 },
                 {
                     attributeName: 'width',
                     attributeValue: '200',
                     componentName: 'Empty',
                     inlineStyleProps: 'style',
-                    loc: 47,
+                    loc: 52,
                 },
                 {
                     attributeName: 'width',
                     attributeValue: '200',
                     componentName: 'Card.Header',
                     inlineStyleProps: 'style',
-                    loc: 49,
+                    loc: 54,
                 },
                 {
                     attributeName: 'padding',
                     attributeValue: '30',
                     componentName: 'Button',
                     inlineStyleProps: 'style',
-                    loc: 50,
+                    loc: 55,
                 },
                 {
                     attributeName: 'padding',
                     attributeValue: '30',
                     componentName: 'Button',
                     inlineStyleProps: 'style',
-                    loc: 51,
+                    loc: 56,
                     additionalProps: [
                         {
                             propName: 'variant',
@@ -105,49 +119,49 @@ describe('parseSource', () => {
                     attributeValue: '30',
                     componentName: 'Button',
                     inlineStyleProps: 'style',
-                    loc: 52,
+                    loc: 57,
                 },
                 {
                     attributeName: 'padding',
                     attributeValue: '30',
                     componentName: 'Button',
                     inlineStyleProps: 'style',
-                    loc: 53,
+                    loc: 58,
                 },
                 {
                     attributeName: 'mt',
                     attributeValue: '10',
                     componentName: 'Badge.Count',
                     inlineStyleProps: 'sx',
-                    loc: 58,
+                    loc: 64,
                 },
                 {
                     attributeName: 'pt',
                     attributeValue: '10',
                     componentName: 'Badge',
                     inlineStyleProps: 'sx',
-                    loc: 59,
+                    loc: 65,
                 },
                 {
                     attributeName: 'pt',
                     attributeValue: '10',
                     componentName: 'Badge',
                     inlineStyleProps: 'sx',
-                    loc: 60,
+                    loc: 66,
                 },
                 {
                     attributeName: 'pt',
                     attributeValue: '10',
                     componentName: 'Badge',
                     inlineStyleProps: 'sx',
-                    loc: 61,
+                    loc: 67,
                 },
                 {
                     attributeName: 'pt',
                     attributeValue: '10',
                     componentName: 'Badge',
                     inlineStyleProps: 'sx',
-                    loc: 62,
+                    loc: 68,
                 },
             ],
         });

package/lib/src/parseSource.js

@@ -41,8 +41,9 @@ const parseSource = (source) => {
     let styleLocs = [];
     let sxLocs = [];
     let violatingAttributes = [];
-    const approvedCmtLocs = [];
+    const approvedInlineStyleCmts = [];
     const approvedClassnameLocs = [];
+    const approvedStyledComponentLocs = [];
     const ast = recast.parse(source, { parser: tsParser });
     recast.visit(ast, {
         visitImportDeclaration(path) {
@@ -75,41 +76,52 @@ const parseSource = (source) => {
         visitComment(path) {
             this.traverse(path);
             const comment = path.value.value;
-            if (comment.toLowerCase().includes(constants_1.APPROVED_COMMENT.toLowerCase())) {
-                approvedCmtLocs.push(path.value.loc.start.line);
+            if (comment
+                .toLowerCase()
+                .includes(constants_1.APPROVED_INLINE_STYLE_COMMENT.toLowerCase())) {
+                approvedInlineStyleCmts.push({
+                    loc: path.value.loc.start.line,
+                    comment,
+                });
             }
             if (comment.toLowerCase().includes(constants_1.APPROVED_CLASSNAME_COMMENT.toLowerCase())) {
                 approvedClassnameLocs.push(path.value.loc.start.line);
             }
+            if (comment
+                .toLowerCase()
+                .includes(constants_1.APPROVED_STYLED_COMPONENTS_COMMENT.toLowerCase())) {
+                approvedStyledComponentLocs.push(path.value.loc.start.line);
+            }
         },
     });
-    const isNotApprovedSnowflakes = (loc) => !approvedCmtLocs.includes(loc);
-    const isNotApprovedClassnameSnowflakes = (loc) => !approvedClassnameLocs.includes(loc);
+    const isNotApprovedStyledComponentSnowflakes = (loc) => !approvedStyledComponentLocs.includes(loc - 1);
     if (hasHeroDesignImport) {
         // Case 1: Using className to customise components
         // Case 2: Using style object to customise components
         // Case 3: Using sx object to customise components
-        const customPropLocs = (0, reportCustomStyleProperties_1.default)(ast, componentList);
-        classNameLocs = customPropLocs.className.filter((loc) => isNotApprovedSnowflakes(loc) && isNotApprovedClassnameSnowflakes(loc));
-        styleLocs = customPropLocs.style.filter(isNotApprovedSnowflakes);
-        sxLocs = customPropLocs.sx.filter(isNotApprovedSnowflakes);
+        const customPropLocs = (0, reportCustomStyleProperties_1.default)(ast, componentList, {
+            classNameCmts: approvedClassnameLocs,
+            styleCmts: approvedInlineStyleCmts,
+        });
+        classNameLocs = customPropLocs.className;
+        styleLocs = customPropLocs.style;
+        sxLocs = customPropLocs.sx;
         // Case 4: Using styled-components to customise components
         if (hasStyledComponentsImport) {
-            styledComponentLocs = (0, reportStyledComponents_1.default)(ast, componentList, styledAliasName).filter(isNotApprovedSnowflakes);
+            styledComponentLocs = (0, reportStyledComponents_1.default)(ast, componentList, styledAliasName).filter(isNotApprovedStyledComponentSnowflakes);
         }
-        violatingAttributes = customPropLocs.violatingAttributes.filter((report) => {
-            if (report.loc) {
-                return !approvedCmtLocs.includes(report.loc);
-            }
-            return true;
-        });
+        violatingAttributes = customPropLocs.violatingAttributes;
     }
     return {
         classNameLocs,
         styleLocs,
         sxLocs,
         styledComponentLocs,
-        approvedLocs: [...approvedCmtLocs, ...approvedClassnameLocs],
+        approvedLocs: [
+            ...approvedInlineStyleCmts.map((cmt) => cmt.loc),
+            ...approvedClassnameLocs,
+            ...approvedStyledComponentLocs,
+        ],
         violatingAttributes,
     };
 };

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

@@ -70,8 +70,8 @@ describe('reportInlineStyle', () => {
                 propName: 'variant',
             },
         ]);
-        expect(result.locs.style).toEqual([3]);
-        expect(result.locs.sx).toEqual([7]);
+        expect(result.locs.style).toEqual(3);
+        expect(result.locs.sx).toEqual(7);
         expect(result.violatingAttributes).toEqual([
             {
                 attributeName: 'color',
@@ -125,8 +125,8 @@ describe('reportInlineStyle', () => {
         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.locs.style).toEqual(undefined);
+        expect(result.locs.sx).toEqual(undefined);
         expect(result.violatingAttributes).toEqual([]);
         expect(result.violatingAttributes).toEqual([]);
     });

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

@@ -215,6 +215,7 @@ declare const SX_RULESET_MAP: {
     Widget: string[];
 };
 declare const HD_COMPONENTS: readonly ["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"];
-declare const APPROVED_COMMENT = "@snowflake-guard/snowflake-approved-by-andromeda";
-declare const APPROVED_CLASSNAME_COMMENT = "@snowflake-guard/none-css-classname";
-export { HD_COMPONENTS, RULESET_MAP, SX_RULESET_MAP, APPROVED_COMMENT, APPROVED_CLASSNAME_COMMENT, };
+declare const APPROVED_INLINE_STYLE_COMMENT = "@snowflake-guard/approved-inline-style";
+declare const APPROVED_CLASSNAME_COMMENT = "@snowflake-guard/approved-classname";
+declare const APPROVED_STYLED_COMPONENTS_COMMENT = "@snowflake-guard/approved-styled-components";
+export { HD_COMPONENTS, RULESET_MAP, SX_RULESET_MAP, APPROVED_INLINE_STYLE_COMMENT, APPROVED_CLASSNAME_COMMENT, APPROVED_STYLED_COMPONENTS_COMMENT, };

package/lib/src/reports/constants.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.APPROVED_CLASSNAME_COMMENT = exports.APPROVED_COMMENT = exports.SX_RULESET_MAP = exports.RULESET_MAP = exports.HD_COMPONENTS = void 0;
+exports.APPROVED_STYLED_COMPONENTS_COMMENT = exports.APPROVED_CLASSNAME_COMMENT = exports.APPROVED_INLINE_STYLE_COMMENT = exports.SX_RULESET_MAP = exports.RULESET_MAP = exports.HD_COMPONENTS = void 0;
 const PADDING_ATTRS = [
     'padding',
     'paddingTop',
@@ -337,7 +337,6 @@ const RULESET_MAP = {
         ...SHADOW_ATTRS,
         ...WIDTH_ATTRS,
         ...HEIGHT_ATTRS,
-        ...MARGIN_ATTRS,
     ],
     'Grid.Row': [
         ...COMMON_PROHIBITED_ATTRS,
@@ -553,8 +552,8 @@ const RULESET_MAP = {
         ...HEIGHT_ATTRS,
         ...MARGIN_ATTRS,
     ],
-    Tabs: [...COMMON_PROHIBITED_ATTRS, ...SHADOW_ATTRS, ...HEIGHT_ATTRS],
-    'Tabs.Sub': [...COMMON_PROHIBITED_ATTRS, ...SHADOW_ATTRS, ...HEIGHT_ATTRS],
+    Tabs: [...COMMON_PROHIBITED_ATTRS, ...SHADOW_ATTRS],
+    'Tabs.Sub': [...COMMON_PROHIBITED_ATTRS, ...SHADOW_ATTRS],
     Tag: [
         ...COMMON_PROHIBITED_ATTRS,
         ...SHADOW_ATTRS,
@@ -692,11 +691,7 @@ const SX_RULESET_MAP = Object.assign(Object.assign({}, RULESET_MAP), { Alert: [.
         ...RULESET_MAP['Filters.Group.Filter'],
         ...COMMON_SX_PROHIBITED_ATTRS,
         ...SX_MARGIN_ATTRS,
-    ], 'Form.Field': [...RULESET_MAP['Form.Field'], ...COMMON_SX_PROHIBITED_ATTRS], Grid: [
-        ...RULESET_MAP.Grid,
-        ...COMMON_SX_PROHIBITED_ATTRS,
-        ...SX_MARGIN_ATTRS,
-    ], 'Grid.Row': [
+    ], 'Form.Field': [...RULESET_MAP['Form.Field'], ...COMMON_SX_PROHIBITED_ATTRS], Grid: [...RULESET_MAP.Grid, ...COMMON_SX_PROHIBITED_ATTRS], 'Grid.Row': [
         ...RULESET_MAP['Grid.Row'],
         ...COMMON_SX_PROHIBITED_ATTRS,
         ...SX_MARGIN_ATTRS,
@@ -854,7 +849,9 @@ const HD_COMPONENTS = [
     'Widget',
 ];
 exports.HD_COMPONENTS = HD_COMPONENTS;
-const APPROVED_COMMENT = '@snowflake-guard/snowflake-approved-by-andromeda';
-exports.APPROVED_COMMENT = APPROVED_COMMENT;
-const APPROVED_CLASSNAME_COMMENT = '@snowflake-guard/none-css-classname';
+const APPROVED_INLINE_STYLE_COMMENT = '@snowflake-guard/approved-inline-style';
+exports.APPROVED_INLINE_STYLE_COMMENT = APPROVED_INLINE_STYLE_COMMENT;
+const APPROVED_CLASSNAME_COMMENT = '@snowflake-guard/approved-classname';
 exports.APPROVED_CLASSNAME_COMMENT = APPROVED_CLASSNAME_COMMENT;
+const APPROVED_STYLED_COMPONENTS_COMMENT = '@snowflake-guard/approved-styled-components';
+exports.APPROVED_STYLED_COMPONENTS_COMMENT = APPROVED_STYLED_COMPONENTS_COMMENT;

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

@@ -1,3 +1,3 @@
 import { types } from 'recast';
-declare const reportClassName: (attributes: types.namedTypes.JSXAttribute[]) => number[];
+declare const reportClassName: (attributes: types.namedTypes.JSXAttribute[]) => number | undefined;
 export default reportClassName;

package/lib/src/reports/reportClassName.js

@@ -1,15 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const reportClassName = (attributes) => {
-    const locs = [];
-    attributes.forEach((attr) => {
-        if (attr.type === 'JSXAttribute' &&
-            attr.name.type === 'JSXIdentifier' &&
-            attr.name.name === 'className' &&
-            attr.loc) {
-            locs.push(attr.loc.start.line);
-        }
-    });
-    return locs;
+    const classNameAttr = attributes.find((attr) => attr.type === 'JSXAttribute' &&
+        attr.name.type === 'JSXIdentifier' &&
+        attr.name.name === 'className');
+    if (classNameAttr && classNameAttr.loc) {
+        return classNameAttr.loc.start.line;
+    }
+    return undefined;
 };
 exports.default = reportClassName;

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

@@ -3,6 +3,12 @@ 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";
+}, commentList: {
+    classNameCmts: number[];
+    styleCmts: {
+        loc: number;
+        comment: string;
+    }[];
 }) => {
     className: number[];
     style: number[];

package/lib/src/reports/reportCustomStyleProperties.js

@@ -32,7 +32,33 @@ 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 getNonApprovedInlineLocs = (reportedLocs, violatingAttributes, approvedCmts, elementLoc) => {
+    var _a, _b;
+    const approvedCmt = approvedCmts.find((cmt) => cmt.loc === elementLoc - 1);
+    if (approvedCmt) {
+        const approvedCmtAttrNames = (_b = (_a = approvedCmt.comment
+            .toLowerCase()
+            .replace(/\s+/g, '')
+            .split('attributes:')[1]) === null || _a === void 0 ? void 0 : _a.split(',')) !== null && _b !== void 0 ? _b : [];
+        const noneApprovedStyleAttributes = violatingAttributes.filter((attr) => attr.loc === reportedLocs.style &&
+            !approvedCmtAttrNames.includes(attr.attributeName.toLowerCase()));
+        const noneApprovedSxAttributes = violatingAttributes.filter((attr) => attr.loc === reportedLocs.sx &&
+            !approvedCmtAttrNames.includes(attr.attributeName.toLowerCase()));
+        if (noneApprovedStyleAttributes.length > 0 ||
+            noneApprovedSxAttributes.length > 0) {
+            return {
+                reportedLocs,
+                noneApprovedAttributes: [
+                    ...noneApprovedStyleAttributes,
+                    ...noneApprovedSxAttributes,
+                ],
+            };
+        }
+        return { reportedLocs: {}, noneApprovedAttributes: [] };
+    }
+    return { reportedLocs, noneApprovedAttributes: violatingAttributes };
+};
+const reportCustomProperties = (ast, componentList, commentList) => {
     const report = {
         className: [],
         style: [],
@@ -48,16 +74,22 @@ const reportCustomProperties = (ast, componentList) => {
                 localComponentList.includes(path.value.name.name)) {
                 const attributes = path.value
                     .attributes;
+                const classNameLoc = (0, reportClassName_1.default)(attributes);
+                if (classNameLoc &&
+                    !commentList.classNameCmts.includes(path.value.loc.start.line - 1)) {
+                    report.className.push(classNameLoc);
+                }
                 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];
+                const { reportedLocs, noneApprovedAttributes } = getNonApprovedInlineLocs(styleObjectLocs, violatingAttributes, commentList.styleCmts, path.value.loc.start.line);
+                if (reportedLocs.style) {
+                    report.style.push(reportedLocs.style);
+                }
+                if (reportedLocs.sx) {
+                    report.sx.push(reportedLocs.sx);
+                }
                 report.violatingAttributes = [
                     ...report.violatingAttributes,
-                    ...mapViolatingAttributesAndAdditionalProps(violatingAttributes, additionalProps),
+                    ...mapViolatingAttributesAndAdditionalProps(noneApprovedAttributes, additionalProps),
                 ];
             }
             // Case 2: Custom compound component, e.g. <Card.Header />
@@ -69,16 +101,22 @@ const reportCustomProperties = (ast, componentList) => {
                 ].join('.');
                 const attributes = path.value
                     .attributes;
+                const classNameLoc = (0, reportClassName_1.default)(attributes);
+                if (classNameLoc &&
+                    !commentList.classNameCmts.includes(path.value.loc.start.line - 1)) {
+                    report.className.push(classNameLoc);
+                }
                 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];
+                const { reportedLocs, noneApprovedAttributes } = getNonApprovedInlineLocs(styleObjectLocs, violatingAttributes, commentList.styleCmts, path.value.loc.start.line);
+                if (reportedLocs.style) {
+                    report.style.push(reportedLocs.style);
+                }
+                if (reportedLocs.sx) {
+                    report.sx.push(reportedLocs.sx);
+                }
                 report.violatingAttributes = [
                     ...report.violatingAttributes,
-                    ...mapViolatingAttributesAndAdditionalProps(violatingAttributes, additionalProps),
+                    ...mapViolatingAttributesAndAdditionalProps(noneApprovedAttributes, additionalProps),
                 ];
             }
         },
@@ -108,16 +146,22 @@ const reportCustomProperties = (ast, componentList) => {
                                     openPath.value.name.name,
                                 ].join('.');
                                 const { attributes } = openPath.value;
+                                const classNameLoc = (0, reportClassName_1.default)(attributes);
+                                if (classNameLoc &&
+                                    !commentList.classNameCmts.includes(openPath.value.loc.start.line - 1)) {
+                                    report.className.push(classNameLoc);
+                                }
                                 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];
+                                const { reportedLocs, noneApprovedAttributes } = getNonApprovedInlineLocs(styleObjectLocs, violatingAttributes, commentList.styleCmts, openPath.value.loc.start.line);
+                                if (reportedLocs.style) {
+                                    report.style.push(reportedLocs.style);
+                                }
+                                if (reportedLocs.sx) {
+                                    report.sx.push(reportedLocs.sx);
+                                }
                                 report.violatingAttributes = [
                                     ...report.violatingAttributes,
-                                    ...mapViolatingAttributesAndAdditionalProps(violatingAttributes, additionalProps),
+                                    ...mapViolatingAttributesAndAdditionalProps(noneApprovedAttributes, additionalProps),
                                 ];
                             }
                         },

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

@@ -16,8 +16,8 @@ export type AdditionalProp = {
 };
 declare const reportInlineStyle: (ast: recast.types.ASTNode, attributes: recast.types.namedTypes.JSXAttribute[], componentName: CompoundComponentName) => {
     locs: {
-        style: number[];
-        sx: number[];
+        style?: number | undefined;
+        sx?: number | undefined;
     };
     violatingAttributes: ViolatingAttribute[];
     additionalProps: AdditionalProp[];

package/lib/src/reports/reportInlineStyle.js

@@ -59,10 +59,7 @@ const getPropValue = (attr) => {
     return recast.print(attr.value).code;
 };
 const reportInlineStyle = (ast, attributes, componentName) => {
-    const locs = {
-        style: [],
-        sx: [],
-    };
+    const locs = {};
     const violatingAttributes = [];
     const additionalProps = [];
     let hasCustomStyle = false;
@@ -223,7 +220,7 @@ const reportInlineStyle = (ast, attributes, componentName) => {
                 });
             }
             if (hasCustomStyle && attr.loc) {
-                locs[styleObjName].push(attr.loc.start.line);
+                locs[styleObjName] = attr.loc.start.line;
             }
         }
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/snowflake-guard",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "description": "A hero-design bot detecting snowflake usage",
   "author": "Hau Dao",
   "license": "ISC",