@hero-design/snowflake-guard 1.0.7-alpha0

package/src/reports/reportClassName.ts

@@ -0,0 +1,20 @@
+import { types } from 'recast';
+
+const reportClassName = (attributes: types.namedTypes.JSXAttribute[]) => {
+  const locs: number[] = [];
+
+  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;
+};
+
+export default reportClassName;

package/src/reports/reportCustomStyleProperties.ts

@@ -0,0 +1,125 @@
+import * as recast from 'recast';
+import reportClassName from './reportClassName';
+import reportInlineStyle from './reportInlineStyle';
+import type { ComponentName, CompoundComponentName } from './types';
+
+const reportCustomProperties = (
+  ast: recast.types.ASTNode,
+  componentList: { [k: string]: ComponentName }
+) => {
+  const locs: {
+    className: number[];
+    style: number[];
+    sx: number[];
+  } = {
+    className: [],
+    style: [],
+    sx: [],
+  };
+  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 as recast.types.namedTypes.JSXAttribute[];
+        const styleObjectLocs = reportInlineStyle(
+          ast,
+          attributes,
+          componentList[path.value.name.name] as CompoundComponentName
+        );
+
+        locs.className = [...locs.className, ...reportClassName(attributes)];
+        locs.style = [...locs.style, ...styleObjectLocs.style];
+        locs.sx = [...locs.sx, ...styleObjectLocs.sx];
+      }
+
+      // 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('.') as CompoundComponentName;
+        const attributes = path.value
+          .attributes as recast.types.namedTypes.JSXAttribute[];
+        const styleObjectLocs = reportInlineStyle(
+          ast,
+          attributes,
+          compoundComponentName
+        );
+
+        locs.className = [...locs.className, ...reportClassName(attributes)];
+        locs.style = [...locs.style, ...styleObjectLocs.style];
+        locs.sx = [...locs.sx, ...styleObjectLocs.sx];
+      }
+    },
+
+    // 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] as recast.types.namedTypes.VariableDeclarator;
+      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 is string => 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('.') as CompoundComponentName;
+                const { attributes } = openPath.value;
+                const styleObjectLocs = reportInlineStyle(
+                  ast,
+                  attributes,
+                  compoundComponentName
+                );
+
+                locs.className = [
+                  ...locs.className,
+                  ...reportClassName(attributes),
+                ];
+                locs.style = [...locs.style, ...styleObjectLocs.style];
+                locs.sx = [...locs.sx, ...styleObjectLocs.sx];
+              }
+            },
+          });
+        }
+      }
+    },
+  });
+
+  return locs;
+};
+
+export default reportCustomProperties;

package/src/reports/reportInlineStyle.ts

@@ -0,0 +1,221 @@
+import * as recast from 'recast';
+import { RULESET_MAP, SX_RULESET_MAP } from './constants';
+import type { CompoundComponentName } from './types';
+
+type InlineStyleProps = 'style' | 'sx';
+
+const BLACKLIST_PROPERTIES = {
+  style: RULESET_MAP,
+  sx: SX_RULESET_MAP,
+};
+
+const INLINE_STYLE_PROPERTIES = ['style', 'sx'];
+
+const reportInlineStyle = (
+  ast: recast.types.ASTNode,
+  attributes: recast.types.namedTypes.JSXAttribute[],
+  componentName: CompoundComponentName
+) => {
+  const locs: { style: number[]; sx: number[] } = {
+    style: [],
+    sx: [],
+  };
+
+  let hasCustomStyle = false;
+  let styleObjName: InlineStyleProps;
+
+  attributes.forEach((attr) => {
+    if (
+      attr.type === 'JSXAttribute' &&
+      typeof attr.name.name === 'string' &&
+      INLINE_STYLE_PROPERTIES.includes(attr.name.name) &&
+      attr.value?.type === 'JSXExpressionContainer'
+    ) {
+      styleObjName = attr.name.name as InlineStyleProps;
+
+      const { expression } = attr.value;
+
+      if (expression.type === 'ObjectExpression') {
+        expression.properties.forEach((prop) => {
+          // 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;
+          }
+
+          // 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) {
+                this.traverse(path);
+
+                const declaration = path.value
+                  .declarations[0] as recast.types.namedTypes.VariableDeclarator;
+
+                if (
+                  declaration.id.type === 'Identifier' &&
+                  declaration.id.name === variableName &&
+                  declaration.init?.type === 'ObjectExpression'
+                ) {
+                  declaration.init.properties.forEach((deProp) => {
+                    if (
+                      deProp.type === 'ObjectProperty' &&
+                      deProp.key.type === 'Identifier' &&
+                      BLACKLIST_PROPERTIES[styleObjName][
+                        componentName
+                      ].includes(deProp.key.name)
+                    ) {
+                      hasCustomStyle = true;
+                    }
+                  });
+                }
+              },
+            });
+          }
+
+          // 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) {
+                this.traverse(path);
+
+                const declaration = path.value
+                  .declarations[0] as recast.types.namedTypes.VariableDeclarator;
+
+                if (
+                  declaration.id.type === 'Identifier' &&
+                  declaration.id.name === variableName &&
+                  declaration.init?.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) => {
+                        if (
+                          p.type === 'ObjectProperty' &&
+                          p.key.type === 'Identifier' &&
+                          BLACKLIST_PROPERTIES[styleObjName][
+                            componentName
+                          ].includes(p.key.name)
+                        ) {
+                          hasCustomStyle = true;
+                        }
+                      });
+                    }
+                  });
+                }
+              },
+            });
+          }
+        });
+      }
+
+      // Case 4: Use variable, e.g. <Card style={customStyle} />
+      if (expression.type === 'Identifier') {
+        const variableName = expression.name;
+        recast.visit(ast, {
+          visitVariableDeclaration(path) {
+            this.traverse(path);
+
+            const declaration = path.value
+              .declarations[0] as recast.types.namedTypes.VariableDeclarator;
+
+            if (
+              declaration.id.type === 'Identifier' &&
+              declaration.id.name === variableName &&
+              declaration.init?.type === 'ObjectExpression'
+            ) {
+              declaration.init.properties.forEach((prop) => {
+                if (
+                  prop.type === 'ObjectProperty' &&
+                  prop.key.type === 'Identifier' &&
+                  BLACKLIST_PROPERTIES[styleObjName][componentName].includes(
+                    prop.key.name
+                  )
+                ) {
+                  hasCustomStyle = true;
+                }
+              });
+            }
+          },
+        });
+      }
+
+      // 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) {
+            this.traverse(path);
+
+            const declaration = path.value
+              .declarations[0] as recast.types.namedTypes.VariableDeclarator;
+
+            if (
+              declaration.id.type === 'Identifier' &&
+              declaration.id.name === objectName &&
+              declaration.init?.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) => {
+                    if (
+                      p.type === 'ObjectProperty' &&
+                      p.key.type === 'Identifier' &&
+                      BLACKLIST_PROPERTIES[styleObjName][
+                        componentName
+                      ].includes(p.key.name)
+                    ) {
+                      hasCustomStyle = true;
+                    }
+                  });
+                }
+              });
+            }
+          },
+        });
+      }
+
+      if (hasCustomStyle && attr.loc) {
+        locs[styleObjName].push(attr.loc.start.line);
+      }
+    }
+  });
+
+  return locs;
+};
+
+export default reportInlineStyle;

package/src/reports/reportStyledComponents.ts

@@ -0,0 +1,109 @@
+import * as recast from 'recast';
+import type { ComponentName } from './types';
+
+const reportStyledComponents = (
+  ast: recast.types.ASTNode,
+  componentList: { [k: string]: ComponentName },
+  styledAliasName: string
+) => {
+  const locs: number[] = [];
+  const localComponentList = Object.keys(componentList);
+
+  recast.visit(ast, {
+    visitVariableDeclaration(path) {
+      this.traverse(path);
+
+      const declaration = path.value
+        .declarations[0] as recast.types.namedTypes.VariableDeclarator;
+
+      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 is string => name !== null);
+
+          recast.visit(ast, {
+            visitVariableDeclaration(spreadPath) {
+              this.traverse(spreadPath);
+
+              const spreadDeclaration = spreadPath.value
+                .declarations[0] as recast.types.namedTypes.VariableDeclarator;
+
+              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;
+};
+
+export default reportStyledComponents;

package/src/reports/types.ts

@@ -0,0 +1,5 @@
+import { HD_COMPONENTS, RULESET_MAP } from './constants';
+
+export type ComponentName = typeof HD_COMPONENTS[number];
+
+export type CompoundComponentName = keyof typeof RULESET_MAP;

package/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "extends": "config-tsconfig/base.json",
+  "compilerOptions": {
+    "module": "commonjs",
+    "outDir": "./lib",
+    "noImplicitReturns": true,
+    "pretty": false,
+    "skipLibCheck": true,
+    "typeRoots": ["./node_modules/@types/*"],
+    "types": ["jest"]
+  },
+  "include": ["src", "netlify"],
+  "exclude": ["node_modules", "src/__mocks__/**/*"],
+  "compileOnSave": false
+}