[Stylelint] Add typing to Stylelint rules (opensearch-project#4392)

* Add typing to Stylelint rules Signed-off-by: Matt Provost <[email protected]> * Extract get color property parent into function Signed-off-by: Matt Provost <[email protected]> * Optchain instead of unwrapping source file Signed-off-by: Matt Provost <[email protected]> --------- Signed-off-by: Matt Provost <[email protected]> Co-authored-by: Josh Romero <[email protected]>
manasvinibs · Jun 28, 2023 · d95f642 · d95f642
1 parent dcdc68d
commit d95f642
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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,15 +41,19 @@ const ruleFunction = (
 
     const isAutoFixing = Boolean(context.fix);
 
-    postcssRoot.walkRules((rule: any) => {
+    postcssRoot.walkRules((rule) => {
       const selectorRule = getRuleFromConfig(rules, rule.selector);
       if (!selectorRule) {
         return;
       }
 
       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
@@ -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;
+};