[ESLint] Warn about static z-index

[weronikaolejniczak]

Summary

• added a rule that warns about static z-index

Note

This PR was co-authored with Gemini 3 Pro.

Why are we making this change?

Resolves #9230

It was raised as a suggestion on an internal meeting. If people do not reuse euiTheme tokens it's hard to assure the correct hierarchy.

Screenshots #

Impact to users

🟢 No impact. Just a dev warning.

QA

• Kibana testing branch prints warnings about static z-index
• Kibana testing branch CI checks pass
• unit tests are passing

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 7b8869b
• Documentation website
• Storybook

History

• 💚 Build #2115 succeeded fe9080c
• 💚 Build #2065 succeeded 66ef4bd
• 💚 Build #2063 succeeded 6782d45

cc @weronikaolejniczak

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 7b8869b

History

• 💚 Build #5352 succeeded fe9080c
• 💚 Build #5316 succeeded 66ef4bd
• 💔 Build #5314 failed 6782d45

cc @weronikaolejniczak

[acstll]

Tested in Kibana, ran tests locally and it's working nicely, as expected. Added a comment about 2 uses cases I found that hopefully we can also cover. Let me know what you think. Thanks for tackling this one!

[acstll]

while testing in Kibana, I found 2 use cases that are not covered by the rule, the most common one being "nested" style objects, the other are arrays — would that be too tricky to implement?

I tried reproducing these locally, adding these:

    {
      // Invalid: Variable with static value used in css prop (object style, nested)
      filename: 'test.tsx',
      code: dedent`
        import React from 'react';
        import { css } from '@emotion/react';

        const myCss = css({ container: zIndex: 100 }});

        function TestComponent() {
          return <div css={myCss}>test</div>
        }`,
      languageOptions,
      errors: [{ messageId: 'noStaticZIndexSpecificDeclaredVariable' }],
    },
    {
      // Invalid: css array, one with static z-index
      filename: 'test.tsx',
      code: dedent`
            import { css } from '@emotion/react';

            function TestComponent() {
                return <div css={[someStyle, css({ zIndex: 9 })]}>test</div>
            }
        `,
      languageOptions,
      errors: [{ messageId: 'noStaticZIndexSpecific' }],
    },

[weronikaolejniczak]

Incredible find, thank you, Arturo 🙏🏻 and for adding the test cases, I'll cover these

[acstll]

[non-blocking] I would avoid assignments inside conditions mostly for readability (TIL there's even a rule for that: no-cond-assign 😀)

[weronikaolejniczak]

I agree, thank you for catching this!

[weronikaolejniczak]

Suggested change

	- Add a `no-static-z-index` rule
	- Added `no-static-z-index` rule