From d95f642bd151f8789aa5d3a6359a1f7d2bbc0684 Mon Sep 17 00:00:00 2001
From: Matt Provost <provomat@amazon.com>
Date: Wed, 28 Jun 2023 14:58:08 -0700
Subject: [PATCH] [Stylelint] Add typing to Stylelint rules (#4392)

* Add typing to Stylelint rules

Signed-off-by: Matt Provost <provomat@amazon.com>

* Extract get color property parent into function

Signed-off-by: Matt Provost <provomat@amazon.com>

* Optchain instead of unwrapping source file

Signed-off-by: Matt Provost <provomat@amazon.com>

---------

Signed-off-by: Matt Provost <provomat@amazon.com>
Co-authored-by: Josh Romero <rmerqg@amazon.com>
---
 .../osd-stylelint-plugin-stylelint/package.json     |  1 +
 .../src/rules/no_custom_colors/index.ts             | 13 +++++++------
 .../rules/no_modifying_global_selectors/index.ts    | 12 ++++++++----
 .../src/utils/is_color_property.ts                  | 10 ++++++++++
 4 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/packages/osd-stylelint-plugin-stylelint/package.json b/packages/osd-stylelint-plugin-stylelint/package.json
index 2d2a6e661d5d..49947331fb59 100644
--- a/packages/osd-stylelint-plugin-stylelint/package.json
+++ b/packages/osd-stylelint-plugin-stylelint/package.json
@@ -13,6 +13,7 @@
     "devOnly": true
   },
   "peerDependencies": {
+    "postcss": "^8.4.12",
     "stylelint": "^14.5.2"
   },
   "devDependencies": {
diff --git a/packages/osd-stylelint-plugin-stylelint/src/rules/no_custom_colors/index.ts b/packages/osd-stylelint-plugin-stylelint/src/rules/no_custom_colors/index.ts
index 249b87074949..9a8fab66c509 100644
--- a/packages/osd-stylelint-plugin-stylelint/src/rules/no_custom_colors/index.ts
+++ b/packages/osd-stylelint-plugin-stylelint/src/rules/no_custom_colors/index.ts
@@ -17,7 +17,7 @@ import {
   getUntrackedMessage,
   getNotCompliantMessage,
   getRulesFromConfig,
-  isColorProperty,
+  getColorPropertyParent,
   isValidOptions,
   ValueBasedConfig,
 } from '../../utils';
@@ -32,12 +32,12 @@ const messages = ruleMessages(ruleName, {
   expected: (message) => `${message}`,
 });
 
-const ruleFunction = (
+const ruleFunction: stylelint.Rule = (
   primaryOption: Record<string, any>,
   secondaryOptionObject: Record<string, any>,
   context
 ) => {
-  return (postcssRoot: any, postcssResult: any) => {
+  return (postcssRoot, postcssResult) => {
     const validOptions = isValidOptions(postcssResult, ruleName, primaryOption);
     if (!validOptions) {
       return;
@@ -47,15 +47,16 @@ const ruleFunction = (
 
     const isAutoFixing = Boolean(context.fix);
 
-    postcssRoot.walkDecls((decl: any) => {
-      if (!isColorProperty(decl.prop)) {
+    postcssRoot.walkDecls((decl) => {
+      const parent = getColorPropertyParent(decl);
+      if (!parent) {
         return;
       }
 
       let shouldReport = false;
 
       const nodeInfo = {
-        selector: decl.parent.selector,
+        selector: parent.selector,
         prop: decl.prop,
         value: decl.value,
       };
diff --git a/packages/osd-stylelint-plugin-stylelint/src/rules/no_modifying_global_selectors/index.ts b/packages/osd-stylelint-plugin-stylelint/src/rules/no_modifying_global_selectors/index.ts
index f2b07a7c8d8b..d58e7819688f 100644
--- a/packages/osd-stylelint-plugin-stylelint/src/rules/no_modifying_global_selectors/index.ts
+++ b/packages/osd-stylelint-plugin-stylelint/src/rules/no_modifying_global_selectors/index.ts
@@ -26,12 +26,12 @@ const messages = ruleMessages(ruleName, {
   expected: (message) => `${message}`,
 });
 
-const ruleFunction = (
+const ruleFunction: stylelint.Rule = (
   primaryOption: Record<string, any>,
   secondaryOptionObject: Record<string, any>,
   context
 ) => {
-  return (postcssRoot: any, postcssResult: any) => {
+  return (postcssRoot, postcssResult) => {
     const validOptions = isValidOptions(postcssResult, ruleName, primaryOption);
     if (!validOptions) {
       return;
@@ -41,7 +41,7 @@ const ruleFunction = (
 
     const isAutoFixing = Boolean(context.fix);
 
-    postcssRoot.walkRules((rule: any) => {
+    postcssRoot.walkRules((rule) => {
       const selectorRule = getRuleFromConfig(rules, rule.selector);
       if (!selectorRule) {
         return;
@@ -49,7 +49,11 @@ const ruleFunction = (
 
       let shouldReport = false;
 
-      const file = postcssRoot.source.input.file;
+      const file = postcssRoot.source?.input.file;
+      if (!file) {
+        return;
+      }
+
       const approvedFiles = selectorRule.approved;
 
       const reportInfo = {
diff --git a/packages/osd-stylelint-plugin-stylelint/src/utils/is_color_property.ts b/packages/osd-stylelint-plugin-stylelint/src/utils/is_color_property.ts
index d52cb43cfc32..ef7ad9118f81 100644
--- a/packages/osd-stylelint-plugin-stylelint/src/utils/is_color_property.ts
+++ b/packages/osd-stylelint-plugin-stylelint/src/utils/is_color_property.ts
@@ -9,6 +9,8 @@
  * GitHub history for details.
  */
 
+import { Rule, Declaration } from 'postcss';
+
 const COLOR_PROPERTIES = [
   'all',
   'animation',
@@ -58,3 +60,11 @@ const COLOR_PROPERTIES = [
 export const isColorProperty = (prop: string) => {
   return COLOR_PROPERTIES.includes(prop);
 };
+
+export const getColorPropertyParent = (decl: Declaration) => {
+  if (!isColorProperty(decl.prop)) {
+    return undefined;
+  }
+
+  return decl.parent as Rule;
+};