@hero-design/snowflake-guard 1.2.3 → 1.2.4-alpha.1

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

@@ -0,0 +1,38 @@
+import * as recast from 'recast';
+import { InlineStyleProps, ViolatingAttribute } from './reportInlineStyle';
+import type { CompoundMobileComponentName, MobileComponentName } from './types';
+export declare const getNonApprovedInlineLocs: (reportedLocs: {
+    style?: number;
+    barStyle?: number;
+    containerStyle?: number;
+    textStyle?: number;
+}, violatingAttributes: ViolatingAttribute[], approvedCmts: {
+    loc: number;
+    comment: string;
+}[], elementLoc: number) => {
+    reportedLocs: {
+        style?: number | undefined;
+        barStyle?: number | undefined;
+        containerStyle?: number | undefined;
+        textStyle?: number | undefined;
+    };
+    noneApprovedAttributes: ViolatingAttribute[];
+};
+declare const reportCustomProperties: (ast: recast.types.ASTNode, componentList: {
+    [k: string]: "Accordion" | "Alert" | "Attachment" | "Avatar" | "Badge" | "BottomNavigation" | "BottomSheet" | "Box" | "Button" | "Calendar" | "Carousel" | "Card" | "Chip" | "Collapse" | "Checkbox" | "ContentNavigator" | "DatePicker" | "Divider" | "Drawer" | "Empty" | "Error" | "FAB" | "HeroDesignProvider" | "MapPin" | "Icon" | "Image" | "List" | "PinInput" | "Progress" | "Slider" | "Spinner" | "Swipeable" | "Radio" | "SectionHeading" | "Select" | "Skeleton" | "Success" | "Switch" | "Tabs" | "Tag" | "TextInput" | "TimePicker" | "Toast" | "Toolbar" | "Typography" | "Rate" | "RefreshControl" | "RichTextEditor" | "PageControl" | "Portal" | "ScrollViewWithFAB" | "SectionListWithFAB" | "FlatListWithFAB" | "Search" | "FloatingIsland";
+}, commentList: {
+    styleCmts: {
+        loc: number;
+        comment: string;
+    }[];
+}) => {
+    style: number[];
+    violatingAttributes: {
+        attributeName: string;
+        attributeValue: string | null;
+        inlineStyleProps: InlineStyleProps;
+        componentName: CompoundMobileComponentName;
+        loc: number | undefined;
+    }[];
+};
+export default reportCustomProperties;

package/lib/src/reports/mobile/reportCustomStyleProperties.js

@@ -0,0 +1,155 @@
+"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 });
+exports.getNonApprovedInlineLocs = void 0;
+const recast = __importStar(require("recast"));
+const reportInlineStyle_1 = __importDefault(require("./reportInlineStyle"));
+const mapViolatingAttributesAndAdditionalProps = (violatingAttributes) => {
+    return violatingAttributes.map((violatingAttribute) => (Object.assign({}, violatingAttribute)));
+};
+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 nonApprovedBarStyleAttributes = violatingAttributes.filter((attr) => attr.loc === reportedLocs.barStyle &&
+            !approvedCmtAttrNames.includes(attr.attributeName.toLowerCase()));
+        const nonApprovedContainerStyleAttributes = violatingAttributes.filter((attr) => attr.loc === reportedLocs.containerStyle &&
+            !approvedCmtAttrNames.includes(attr.attributeName.toLowerCase()));
+        const nonApprovedTextStyleAttributes = violatingAttributes.filter((attr) => attr.loc === reportedLocs.textStyle &&
+            !approvedCmtAttrNames.includes(attr.attributeName.toLowerCase()));
+        if (noneApprovedStyleAttributes.length > 0) {
+            return {
+                reportedLocs,
+                noneApprovedAttributes: [
+                    ...noneApprovedStyleAttributes,
+                    ...nonApprovedBarStyleAttributes,
+                    ...nonApprovedContainerStyleAttributes,
+                    ...nonApprovedTextStyleAttributes,
+                ],
+            };
+        }
+        return { reportedLocs: {}, noneApprovedAttributes: [] };
+    }
+    return { reportedLocs, noneApprovedAttributes: violatingAttributes };
+};
+exports.getNonApprovedInlineLocs = getNonApprovedInlineLocs;
+const reportCustomProperties = (ast, componentList, commentList) => {
+    const report = {
+        style: [],
+        violatingAttributes: [],
+    };
+    const localComponentList = Object.keys(componentList);
+    recast.visit(ast, {
+        visitJSXOpeningElement(path) {
+            this.traverse(path);
+            // Case 1: Custom default component, e.g. <Card />
+            if (path.value.name.type === 'JSXIdentifier' &&
+                localComponentList.includes(path.value.name.name)) {
+                const attributes = path.value
+                    .attributes;
+                const { locs: styleObjectLocs, violatingAttributes } = (0, reportInlineStyle_1.default)(ast, attributes, componentList[path.value.name.name]);
+                const { reportedLocs, noneApprovedAttributes } = (0, exports.getNonApprovedInlineLocs)(styleObjectLocs, violatingAttributes, commentList.styleCmts, path.value.loc.start.line);
+                if (reportedLocs.style) {
+                    report.style.push(reportedLocs.style);
+                }
+                report.violatingAttributes = [
+                    ...report.violatingAttributes,
+                    ...mapViolatingAttributesAndAdditionalProps(noneApprovedAttributes),
+                ];
+            }
+            // Case 2: Custom compound component, e.g. <Card.Header />
+            if (path.value.name.type === 'JSXMemberExpression' &&
+                localComponentList.includes(path.value.name.object.name)) {
+                const compoundComponentName = [
+                    componentList[path.value.name.object.name],
+                    path.value.name.property.name,
+                ].join('.');
+                const attributes = path.value
+                    .attributes;
+                const { locs: styleObjectLocs, violatingAttributes } = (0, reportInlineStyle_1.default)(ast, attributes, compoundComponentName);
+                const { reportedLocs, noneApprovedAttributes } = (0, exports.getNonApprovedInlineLocs)(styleObjectLocs, violatingAttributes, commentList.styleCmts, path.value.loc.start.line);
+                if (reportedLocs.style) {
+                    report.style.push(reportedLocs.style);
+                }
+                report.violatingAttributes = [
+                    ...report.violatingAttributes,
+                    ...mapViolatingAttributesAndAdditionalProps(noneApprovedAttributes),
+                ];
+            }
+        },
+        // Case 3: Custom compound component with spead operator. e.g. const { Header } = Card, then <Header />
+        visitVariableDeclaration(path) {
+            this.traverse(path);
+            const declaration = path.value
+                .declarations[0];
+            if (declaration.init &&
+                declaration.init.type === 'Identifier' &&
+                localComponentList.includes(declaration.init.name)) {
+                const componentName = declaration.init.name;
+                const { id } = declaration;
+                if (id.type === 'ObjectPattern') {
+                    const compoundComponentNames = id.properties
+                        .map((prop) => prop.type === 'ObjectProperty' && prop.key.type === 'Identifier'
+                        ? prop.key.name
+                        : null)
+                        .filter((name) => name !== null);
+                    recast.visit(ast, {
+                        visitJSXOpeningElement(openPath) {
+                            this.traverse(openPath);
+                            if (openPath.value.name.type === 'JSXIdentifier' &&
+                                compoundComponentNames.includes(openPath.value.name.name)) {
+                                const compoundComponentName = [
+                                    componentList[componentName],
+                                    openPath.value.name.name,
+                                ].join('.');
+                                const { attributes } = openPath.value;
+                                const { locs: styleObjectLocs, violatingAttributes } = (0, reportInlineStyle_1.default)(ast, attributes, compoundComponentName);
+                                const { reportedLocs, noneApprovedAttributes } = (0, exports.getNonApprovedInlineLocs)(styleObjectLocs, violatingAttributes, commentList.styleCmts, openPath.value.loc.start.line);
+                                if (reportedLocs.style) {
+                                    report.style.push(reportedLocs.style);
+                                }
+                                report.violatingAttributes = [
+                                    ...report.violatingAttributes,
+                                    ...mapViolatingAttributesAndAdditionalProps(noneApprovedAttributes),
+                                ];
+                            }
+                        },
+                    });
+                }
+            }
+        },
+    });
+    return report;
+};
+exports.default = reportCustomProperties;

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

@@ -0,0 +1,21 @@
+import * as recast from 'recast';
+import type { CompoundMobileComponentName } from './types';
+export type InlineStyleProps = 'style' | 'barStyle' | 'containerStyle' | 'textStyle';
+export declare const INLINE_STYLE_PROPERTIES: string[];
+export type ViolatingAttribute = {
+    attributeName: string;
+    attributeValue: string | null;
+    inlineStyleProps: InlineStyleProps;
+    componentName: CompoundMobileComponentName;
+    loc: number | undefined;
+};
+declare const reportInlineStyle: (ast: recast.types.ASTNode, attributes: recast.types.namedTypes.JSXAttribute[], componentName: CompoundMobileComponentName) => {
+    locs: {
+        style?: number | undefined;
+        barStyle?: number | undefined;
+        containerStyle?: number | undefined;
+        textStyle?: number | undefined;
+    };
+    violatingAttributes: ViolatingAttribute[];
+};
+export default reportInlineStyle;

package/lib/src/reports/mobile/reportInlineStyle.js

@@ -0,0 +1,214 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.INLINE_STYLE_PROPERTIES = void 0;
+const recast = __importStar(require("recast"));
+const constants_1 = require("./constants");
+const BLACKLIST_PROPERTIES = {
+    style: constants_1.MOBILE_RULESET_MAP,
+    barStyle: constants_1.BAR_STYLE_RULESET_MAP,
+    containerStyle: constants_1.CONTAINER_STYLE_RULESET_MAP,
+    textStyle: constants_1.TEXT_STYLE_RULESET_MAP,
+};
+exports.INLINE_STYLE_PROPERTIES = [
+    'style',
+    'barStyle',
+    'containerStyle',
+    'textStyle',
+];
+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 reportInlineStyle = (ast, attributes, componentName) => {
+    const locs = {};
+    const violatingAttributes = [];
+    let hasCustomStyle = false;
+    let styleObjName;
+    attributes.forEach((attr) => {
+        var _a;
+        if (attr.type !== 'JSXAttribute') {
+            return;
+        }
+        if (typeof attr.name.name !== 'string') {
+            return;
+        }
+        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 PROHIBITED_PROPERTIES = BLACKLIST_PROPERTIES[styleObjName][componentName];
+            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' &&
+                        PROHIBITED_PROPERTIES.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' &&
+                        prop.argument.type === 'Identifier') {
+                        const variableName = prop.argument.name;
+                        recast.visit(ast, {
+                            visitVariableDeclaration(path) {
+                                var _a;
+                                this.traverse(path);
+                                const declaration = path.value
+                                    .declarations[0];
+                                if (declaration.id.type === 'Identifier' &&
+                                    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' &&
+                                            PROHIBITED_PROPERTIES.includes(deProp.key.name)) {
+                                            hasCustomStyle = true;
+                                            addViolatingAttribute(deProp, styleObjName, componentName, (_a = attr.loc) === null || _a === void 0 ? void 0 : _a.start.line, violatingAttributes);
+                                        }
+                                    });
+                                }
+                            },
+                        });
+                    }
+                    // Case 3: Use spread operator with variable's property, e.g. <Card style={{ ...customStyle.tileCard }} />
+                    if (prop.type === 'SpreadElement' &&
+                        prop.argument.type === 'MemberExpression' &&
+                        prop.argument.object.type === 'Identifier' &&
+                        prop.argument.property.type === 'Identifier') {
+                        const variableName = prop.argument.object.name;
+                        const propName = prop.argument.property.name;
+                        recast.visit(ast, {
+                            visitVariableDeclaration(path) {
+                                var _a;
+                                this.traverse(path);
+                                const declaration = path.value
+                                    .declarations[0];
+                                if (declaration.id.type === 'Identifier' &&
+                                    declaration.id.name === variableName &&
+                                    ((_a = declaration.init) === null || _a === void 0 ? void 0 : _a.type) === 'ObjectExpression') {
+                                    declaration.init.properties.forEach((deProp) => {
+                                        if (deProp.type === 'ObjectProperty' &&
+                                            deProp.key.type === 'Identifier' &&
+                                            deProp.key.name === propName &&
+                                            deProp.value.type === 'ObjectExpression') {
+                                            deProp.value.properties.forEach((p) => {
+                                                var _a;
+                                                if (p.type === 'ObjectProperty' &&
+                                                    p.key.type === 'Identifier' &&
+                                                    PROHIBITED_PROPERTIES.includes(p.key.name)) {
+                                                    hasCustomStyle = true;
+                                                    addViolatingAttribute(p, styleObjName, componentName, (_a = attr.loc) === null || _a === void 0 ? void 0 : _a.start.line, violatingAttributes);
+                                                }
+                                            });
+                                        }
+                                    });
+                                }
+                            },
+                        });
+                    }
+                });
+            }
+            // Case 4: Use variable, e.g. <Card style={customStyle} />
+            if (expression.type === 'Identifier') {
+                const variableName = expression.name;
+                recast.visit(ast, {
+                    visitVariableDeclaration(path) {
+                        var _a;
+                        this.traverse(path);
+                        const declaration = path.value
+                            .declarations[0];
+                        if (declaration.id.type === 'Identifier' &&
+                            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' &&
+                                    PROHIBITED_PROPERTIES.includes(prop.key.name)) {
+                                    hasCustomStyle = true;
+                                    addViolatingAttribute(prop, styleObjName, componentName, (_a = attr.loc) === null || _a === void 0 ? void 0 : _a.start.line, violatingAttributes);
+                                }
+                            });
+                        }
+                    },
+                });
+            }
+            // Case 5: Use variable's property, e.g. <Card style={customStyle.tileCard} />
+            if (expression.type === 'MemberExpression' &&
+                expression.object.type === 'Identifier' &&
+                expression.property.type === 'Identifier') {
+                const objectName = expression.object.name;
+                const propName = expression.property.name;
+                recast.visit(ast, {
+                    visitVariableDeclaration(path) {
+                        var _a;
+                        this.traverse(path);
+                        const declaration = path.value
+                            .declarations[0];
+                        if (declaration.id.type === 'Identifier' &&
+                            declaration.id.name === objectName &&
+                            ((_a = declaration.init) === null || _a === void 0 ? void 0 : _a.type) === 'ObjectExpression') {
+                            declaration.init.properties.forEach((prop) => {
+                                if (prop.type === 'ObjectProperty' &&
+                                    prop.key.type === 'Identifier' &&
+                                    prop.key.name === propName &&
+                                    prop.value.type === 'ObjectExpression') {
+                                    prop.value.properties.forEach((p) => {
+                                        var _a;
+                                        if (p.type === 'ObjectProperty' &&
+                                            p.key.type === 'Identifier' &&
+                                            PROHIBITED_PROPERTIES.includes(p.key.name)) {
+                                            hasCustomStyle = true;
+                                            addViolatingAttribute(p, styleObjName, componentName, (_a = attr.loc) === null || _a === void 0 ? void 0 : _a.start.line, violatingAttributes);
+                                        }
+                                    });
+                                }
+                            });
+                        }
+                    },
+                });
+            }
+            if (hasCustomStyle && attr.loc) {
+                locs[styleObjName] = attr.loc.start.line;
+            }
+        }
+    });
+    return { locs, violatingAttributes };
+};
+exports.default = reportInlineStyle;

package/lib/src/reports/mobile/reportStyledComponents.d.ts

@@ -0,0 +1,6 @@
+import * as recast from 'recast';
+import type { MobileComponentName } from './types';
+declare const reportStyledComponents: (ast: recast.types.ASTNode, componentList: {
+    [k: string]: "Accordion" | "Alert" | "Attachment" | "Avatar" | "Badge" | "BottomNavigation" | "BottomSheet" | "Box" | "Button" | "Calendar" | "Carousel" | "Card" | "Chip" | "Collapse" | "Checkbox" | "ContentNavigator" | "DatePicker" | "Divider" | "Drawer" | "Empty" | "Error" | "FAB" | "HeroDesignProvider" | "MapPin" | "Icon" | "Image" | "List" | "PinInput" | "Progress" | "Slider" | "Spinner" | "Swipeable" | "Radio" | "SectionHeading" | "Select" | "Skeleton" | "Success" | "Switch" | "Tabs" | "Tag" | "TextInput" | "TimePicker" | "Toast" | "Toolbar" | "Typography" | "Rate" | "RefreshControl" | "RichTextEditor" | "PageControl" | "Portal" | "ScrollViewWithFAB" | "SectionListWithFAB" | "FlatListWithFAB" | "Search" | "FloatingIsland";
+}, styledAliasName: string) => number[];
+export default reportStyledComponents;

package/lib/src/reports/mobile/reportStyledComponents.js

@@ -0,0 +1,95 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const recast = __importStar(require("recast"));
+const reportStyledComponents = (ast, componentList, styledAliasName) => {
+    const locs = [];
+    const localComponentList = Object.keys(componentList);
+    recast.visit(ast, {
+        visitVariableDeclaration(path) {
+            this.traverse(path);
+            const declaration = path.value
+                .declarations[0];
+            if (declaration.init &&
+                declaration.init.type === 'TaggedTemplateExpression') {
+                const { tag } = declaration.init;
+                if (tag.type === 'CallExpression' &&
+                    tag.callee.type === 'Identifier' &&
+                    tag.callee.name === styledAliasName) {
+                    const arg = tag.arguments[0];
+                    // Case 1: Custom default component, e.g. styled(Card)
+                    if (arg.type === 'Identifier' &&
+                        localComponentList.includes(arg.name) &&
+                        tag.loc) {
+                        locs.push(tag.loc.start.line);
+                    }
+                    // Case 2: Custom compound component, e.g. styled(Card.Header)
+                    if (arg.type === 'MemberExpression' &&
+                        arg.object.type === 'Identifier' &&
+                        localComponentList.includes(arg.object.name) &&
+                        tag.loc) {
+                        locs.push(tag.loc.start.line);
+                    }
+                }
+            }
+            // Case 3: Custom compound component with spead operator. e.g. const { Header } = Card, then styled(Header)
+            if (declaration.init &&
+                declaration.init.type === 'Identifier' &&
+                localComponentList.includes(declaration.init.name)) {
+                const { id } = declaration;
+                if (id.type === 'ObjectPattern') {
+                    const compoundComponentNames = id.properties
+                        .map((prop) => prop.type === 'ObjectProperty' && prop.key.type === 'Identifier'
+                        ? prop.key.name
+                        : null)
+                        .filter((name) => name !== null);
+                    recast.visit(ast, {
+                        visitVariableDeclaration(spreadPath) {
+                            this.traverse(spreadPath);
+                            const spreadDeclaration = spreadPath.value
+                                .declarations[0];
+                            if (spreadDeclaration.init &&
+                                spreadDeclaration.init.type === 'TaggedTemplateExpression') {
+                                const { tag } = spreadDeclaration.init;
+                                if (tag.type === 'CallExpression' &&
+                                    tag.callee.type === 'Identifier' &&
+                                    tag.callee.name === styledAliasName) {
+                                    const arg = tag.arguments[0];
+                                    if (arg.type === 'Identifier' &&
+                                        compoundComponentNames.includes(arg.name) &&
+                                        tag.loc) {
+                                        locs.push(tag.loc.start.line);
+                                    }
+                                }
+                            }
+                        },
+                    });
+                }
+            }
+        },
+    });
+    return locs;
+};
+exports.default = reportStyledComponents;

package/lib/src/reports/mobile/reportToastStyle.js

@@ -0,0 +1 @@
+"use strict";

package/lib/src/reports/mobile/testUtils.d.ts

@@ -0,0 +1 @@
+export declare const parseTypeScript: (source: string) => any;

package/lib/src/reports/mobile/testUtils.js

@@ -0,0 +1,32 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseTypeScript = void 0;
+const recast = __importStar(require("recast"));
+const tsParser = __importStar(require("../../parsers/typescript"));
+const parseTypeScript = (source) => {
+    return recast.parse(source, { parser: tsParser });
+};
+exports.parseTypeScript = parseTypeScript;

package/lib/src/reports/mobile/types.d.ts

@@ -0,0 +1,3 @@
+import { HD_MOBILE_COMPONENTS, MOBILE_RULESET_MAP } from './constants';
+export type MobileComponentName = typeof HD_MOBILE_COMPONENTS[number];
+export type CompoundMobileComponentName = keyof typeof MOBILE_RULESET_MAP;

package/lib/src/reports/mobile/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -2,7 +2,7 @@ import * as recast from 'recast';
 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";
+    [k: string]: "Alert" | "Badge" | "Button" | "Carousel" | "Card" | "Chip" | "Collapse" | "Checkbox" | "DatePicker" | "Divider" | "Empty" | "Icon" | "Progress" | "Slider" | "Spinner" | "Radio" | "Select" | "Switch" | "Tabs" | "Tag" | "TimePicker" | "Typography" | "Rate" | "Portal" | "Banner" | "Breadcrumb" | "Chart" | "Comment" | "ContextPanel" | "Dropdown" | "File" | "Filters" | "Form" | "Grid" | "InPageNavigation" | "Input" | "MediaQuery" | "Menu" | "Modal" | "Notification" | "PageHeader" | "Pagination" | "Portlet" | "Result" | "SelectButton" | "SideBar" | "Statistic" | "Steps" | "Table" | "TagInput" | "Timeline" | "Tooltip" | "Widget";
 }, commentList: {
     classNameCmts: number[];
     styleCmts: {

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

@@ -1,6 +1,6 @@
 import * as recast from 'recast';
 import type { ComponentName } from './types';
 declare const reportStyledComponents: (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";
+    [k: string]: "Alert" | "Badge" | "Button" | "Carousel" | "Card" | "Chip" | "Collapse" | "Checkbox" | "DatePicker" | "Divider" | "Empty" | "Icon" | "Progress" | "Slider" | "Spinner" | "Radio" | "Select" | "Switch" | "Tabs" | "Tag" | "TimePicker" | "Typography" | "Rate" | "Portal" | "Banner" | "Breadcrumb" | "Chart" | "Comment" | "ContextPanel" | "Dropdown" | "File" | "Filters" | "Form" | "Grid" | "InPageNavigation" | "Input" | "MediaQuery" | "Menu" | "Modal" | "Notification" | "PageHeader" | "Pagination" | "Portlet" | "Result" | "SelectButton" | "SideBar" | "Statistic" | "Steps" | "Table" | "TagInput" | "Timeline" | "Tooltip" | "Widget";
 }, styledAliasName: string) => number[];
 export default reportStyledComponents;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/snowflake-guard",
-  "version": "1.2.3",
+  "version": "1.2.4-alpha.1",
   "description": "A hero-design bot detecting snowflake usage",
   "author": "Hau Dao",
   "license": "ISC",
@@ -34,7 +34,7 @@
     "@eslint/compat": "^1.1.1",
     "@eslint/eslintrc": "^3.1.0",
     "@types/jest": "^29.0.0",
-    "@types/node": "^18.0.0",
+    "@types/node": "^20.14.8",
     "config-tsconfig": "8.42.4",
     "eslint": "^8.56.0",
     "eslint-config-hd": "8.42.4",