[ESLint] Warn about static z-index

packages/eslint-plugin/changelogs/upcoming/9236.md

@@ -0,0 +1 @@
+- Added `no-static-z-index` rule

packages/eslint-plugin/src/index.ts

@@ -7,54 +7,56 @@
  */
 
 
+import { AccessibleInteractiveElements } from './rules/a11y/accessible_interactive_element';
+import { CallOutAnnounceOnMount } from './rules/a11y/callout_announce_on_mount';
+import { ConsistentIsInvalidProps } from './rules/a11y/consistent_is_invalid_props';
 import { HrefOnClick } from './rules/href_or_on_click';
-import { NoRestrictedEuiImports } from './rules/no_restricted_eui_imports';
 import { NoCssColor } from './rules/no_css_color';
-
+import { NoRestrictedEuiImports } from './rules/no_restricted_eui_imports';
+import { NoStaticZIndex } from './rules/no_static_z_index';
+import { NoUnnamedInteractiveElement } from './rules/a11y/no_unnamed_interactive_element';
+import { NoUnnamedRadioGroup } from './rules/a11y/no_unnamed_radio_group';
+import { PreferEuiIconTip } from './rules/a11y/prefer_eui_icon_tip';
 import { RequireAriaLabelForModals } from './rules/a11y/require_aria_label_for_modals';
-import { ConsistentIsInvalidProps } from './rules/a11y/consistent_is_invalid_props';
+import { RequireTableCaption } from './rules/a11y/require_table_caption';
 import { ScreenReaderOutputDisabledTooltip } from './rules/a11y/sr_output_disabled_tooltip';
-import { PreferEuiIconTip } from './rules/a11y/prefer_eui_icon_tip';
-import { NoUnnamedRadioGroup } from './rules/a11y/no_unnamed_radio_group';
-import { NoUnnamedInteractiveElement } from './rules/a11y/no_unnamed_interactive_element';
 import { TooltipFocusableAnchor } from './rules/a11y/tooltip_focusable_anchor';
-import { CallOutAnnounceOnMount } from './rules/a11y/callout_announce_on_mount';
-import { AccessibleInteractiveElements } from './rules/a11y/accessible_interactive_element';
-import { RequireTableCaption } from './rules/a11y/require_table_caption';
 
 const config = {
   rules: {
+    'accessible-interactive-element': AccessibleInteractiveElements,
+    'callout-announce-on-mount': CallOutAnnounceOnMount,
+    'consistent-is-invalid-props': ConsistentIsInvalidProps,
     'href-or-on-click': HrefOnClick,
-    'no-restricted-eui-imports': NoRestrictedEuiImports,
     'no-css-color': NoCssColor,
+    'no-restricted-eui-imports': NoRestrictedEuiImports,
+    'no-static-z-index': NoStaticZIndex,
+    'no-unnamed-interactive-element': NoUnnamedInteractiveElement,
+    'no-unnamed-radio-group' : NoUnnamedRadioGroup,
+    'prefer-eui-icon-tip': PreferEuiIconTip,
     'require-aria-label-for-modals': RequireAriaLabelForModals,
-    'consistent-is-invalid-props': ConsistentIsInvalidProps,
+    'require-table-caption': RequireTableCaption,
     'sr-output-disabled-tooltip': ScreenReaderOutputDisabledTooltip,
-    'prefer-eui-icon-tip': PreferEuiIconTip,
-    'no-unnamed-radio-group' : NoUnnamedRadioGroup,
-    'callout-announce-on-mount': CallOutAnnounceOnMount,
-    'no-unnamed-interactive-element': NoUnnamedInteractiveElement,
     'tooltip-focusable-anchor': TooltipFocusableAnchor,
-    'accessible-interactive-element': AccessibleInteractiveElements,
-    'require-table-caption': RequireTableCaption,
   },
   configs: {
     recommended: {
       plugins: ['@elastic/eslint-plugin-eui'],
       rules: {
+        '@elastic/eui/accessible-interactive-element': 'warn',
+        '@elastic/eui/callout-announce-on-mount': 'warn',
+        '@elastic/eui/consistent-is-invalid-props': 'warn',
         '@elastic/eui/href-or-on-click': 'warn',
-        '@elastic/eui/no-restricted-eui-imports': 'warn',
         '@elastic/eui/no-css-color': 'warn',
+        '@elastic/eui/no-restricted-eui-imports': 'warn',
+        '@elastic/eui/no-static-z-index': 'warn',
+        '@elastic/eui/no-unnamed-interactive-element': 'warn',
+        '@elastic/eui/no-unnamed-radio-group': 'warn',
+        '@elastic/eui/prefer-eui-icon-tip': 'warn',
         '@elastic/eui/require-aria-label-for-modals': 'warn',
-        '@elastic/eui/consistent-is-invalid-props': 'warn',
+        '@elastic/eui/require-table-caption': 'warn',
         '@elastic/eui/sr-output-disabled-tooltip': 'warn',
-        '@elastic/eui/prefer-eui-icon-tip': 'warn',
-        '@elastic/eui/no-unnamed-radio-group': 'warn',
-        '@elastic/eui/callout-announce-on-mount': 'warn',
-        '@elastic/eui/no-unnamed-interactive-element': 'warn',
         '@elastic/eui/tooltip-focusable-anchor': 'warn',
-        '@elastic/eui/accessible-interactive-element': 'warn',
-        '@elastic/eui/require-table-caption': 'warn',
       },
     },
   },

packages/eslint-plugin/src/rules/no_css_color.ts

@@ -10,6 +10,7 @@ import { CSSStyleDeclaration } from 'cssstyle';
 import { TSESTree, ESLintUtils } from '@typescript-eslint/utils';
 
 import { resolveMemberExpressionRoot } from '../utils/resolve_member_expression_root';
+import { getPropertyName } from '../utils/get_property_name';
 import {
   ReportDescriptor,
   RuleContext,
@@ -64,7 +65,7 @@ const checkPropertySpecifiesInvalidCSSColor = ([property, value]: string[]) => {
     'initial',
     'unset',
     'revert',
-    'revert-layer'
+    'revert-layer',
   ];
 
   const normalizedColorValue = colorValue.toLowerCase().trim();
@@ -85,18 +86,17 @@ const raiseReportIfPropertyHasInvalidCssColor = (
 ) => {
   let didReport = false;
 
-  if (
-    propertyNode.key.type === 'Identifier' &&
-    !htmlElementColorDeclarationRegex.test(propertyNode.key.name)
-  ) {
+  const propertyName = getPropertyName(propertyNode);
+
+  if (!propertyName || !htmlElementColorDeclarationRegex.test(propertyName)) {
     return didReport;
   }
 
   if (propertyNode.value.type === 'Literal') {
     if (
       (didReport = checkPropertySpecifiesInvalidCSSColor([
-        // @ts-expect-error the key name is present in this scenario
-        propertyNode.key.name,
+        propertyName,
+        // @ts-expect-error the value is present in this scenario
         propertyNode.value.value,
       ]))
     ) {
@@ -201,7 +201,10 @@ const handleObjectProperties = (
     ).name;
 
     const spreadElementDeclaration = context.sourceCode
-      .getScope((propertyParentNode!.value as TSESTree.JSXExpressionContainer).expression!)
+      .getScope(
+        (propertyParentNode!.value as TSESTree.JSXExpressionContainer)
+          .expression!
+      )
       .references.find(
         (ref: { identifier: { name: string } }) =>
           ref.identifier.name === spreadElementIdentifierName
@@ -461,7 +464,8 @@ export const NoCssColor = ESLintUtils.RuleCreator.withoutDocs({
             let declarationPropertiesNode: TSESTree.Property[] = [];
 
             if (node.value.expression.body.type === 'ObjectExpression') {
-              declarationPropertiesNode = node.value.expression.body.properties as TSESTree.Property[];
+              declarationPropertiesNode = node.value.expression.body
+                .properties as TSESTree.Property[];
             }
 
             if (node.value.expression.body.type === 'BlockStatement') {