Skip to content

Conversation

@kapral18
Copy link
Contributor

@kapral18 kapral18 commented Oct 10, 2025

Closes #9076

Summary

Fixes false positive warnings in the @elastic/eui/no-css-color ESLint rule that incorrectly flagged valid CSS keywords as literal color values.

Problem

The rule was triggering warnings for CSS declarations like:

  • border: none
  • border: 0
  • color: inherit
  • background: transparent

These are valid, theme-agnostic CSS keywords that shouldn't require EUI theme colors.

Root Cause

When parsing CSS like border: none, the cssstyle package fills in default values per CSS spec:

module.exports.initialValues = new Map([
  ["border-width", "medium"],
  ["border-style", "none"],
  ["border-color", "currentcolor"]
]);

The rule was checking if (Boolean(style.borderColor)) which returned true for "currentcolor", even though it's a CSS keyword, not an actual color literal.

Solution

Added a whitelist of CSS keywords that should be allowed:

  • currentcolor - Inherits the computed color value
  • transparent - Fully transparent color
  • inherit - Inherits from parent
  • initial - CSS initial value
  • unset - Removes property
  • revert - Reverts to browser default
  • revert-layer - Reverts to cascade layer

These keywords are:

  • ✅ Semantically correct (not actual "colors")
  • ✅ Theme-agnostic (work in light/dark modes)
  • ✅ Part of CSS specification

Testing

Test Coverage

  • ✅ Added 9 new test cases for CSS keywords
  • ✅ All 119 tests passing
  • ✅ Verified in Kibana codebase

Before Fix (False Positives) in Kibana

// ❌ Incorrectly flagged
badge: css`
  border: none;  // Warning: Avoid using a literal CSS color value, use an EUI theme color instead [@elastic/eui/no-css-color]
`;

After Fix

// ✅ No warning
badge: css`
  border: none;  // CSS keyword - allowed
`;

// ⚠️ Still correctly flags actual colors
badge: css`
  border: 1px solid red;  // Avoid using a literal CSS color value, use an EUI theme color instead [@elastic/eui/no-css-color]
`

The no-css-color rule was incorrectly flagging CSS keywords like 'currentcolor',
'transparent', and 'inherit' as literal color values. These keywords are
semantically valid and theme-agnostic, unlike actual color literals.

This fix adds a whitelist of allowed CSS keywords that won't trigger the rule:
- currentcolor
- transparent
- inherit
- initial
- unset
- revert
- revert-layer

The rule still correctly flags actual color literals like hex codes, named
colors (red, blue), and rgb/rgba/hsl/hsla values.

Fixes false positives for common CSS patterns like 'border: none' and
'background: transparent' which were being flagged due to cssstyle package
filling in default color values during CSS parsing.
@kapral18 kapral18 requested a review from a team as a code owner October 10, 2025 21:49
@elasticmachine
Copy link
Collaborator

💚 Build Succeeded

@elasticmachine
Copy link
Collaborator

💚 Build Succeeded

@weronikaolejniczak weronikaolejniczak self-requested a review October 14, 2025 08:54
Copy link
Contributor

@weronikaolejniczak weronikaolejniczak left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tests are passing (we don't run them in CI 😬 soon...), the code changes look clean and I like the comments above the test cases (makes it immediately clear what the test is about). Thank you for contributing, @kapral18! 💪🏻

Image

@weronikaolejniczak weronikaolejniczak merged commit 5bb011c into elastic:main Oct 14, 2025
5 checks passed
acstll added a commit to elastic/kibana that referenced this pull request Oct 23, 2025
- `@elastic/eui`: `v107.0.0` ⏩ `v107.0.1`
- `@elastic/eslint-plugin-eui`: `v2.4.0` ⏩ `v2.5.0`

[Questions? Please see our Kibana upgrade
FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams)

---

## Changes

Related to elastic/eui#9100

- Updated snapshot f90ae29
- Added missing `aria-label` for `EuiBetaBadge`
  - [Reporting] 6d10edd
  - [ML] ce58009
- Added new translation key, ran `node scripts/i18n_check` — is there
anything else that should be done in this regard?

## Package updates

### `@elastic/eui`
[`v107.0.1`](https://github.com/elastic/eui/releases/v107.0.1)

**Bug fixes**

- Fixed `prismjs` theme in `EuiCodeBlock` to improve highlighting for
the `yaml` language ([#9089](elastic/eui#9089))
- Fixed a visual bug on `EuiTable` where the border for rows in dark
mode wasn't applied correctly
([#9115](elastic/eui#9115))

**Dependency updates**

- Updated `@elastic/prismjs-esql` to v1.1.2
([#9102](elastic/eui#9102))

**Accessibility**

- Fixed incorrect role attribute on `EuiIcon` and `EuiBetaBadge`
([#9100](elastic/eui#9100))
- Make `EuiBasicTable` respect user's reduced motion setting by not
animating when in loading state.
([#9095](elastic/eui#9095))

### `@elastic/eslint-plugin-eui`
[`v2.5.0`](https://github.com/elastic/eui/blob/main/packages/eslint-plugin/changelogs/CHANGELOG_2025.md#v250)

- Added new `accessible-interactive-element` rule.
([#9093](elastic/eui#9093))
- Added new `tooltip-focusable-anchor` rule.
([#9051](elastic/eui#9051))
- Excluded `EuiButtonEmpty` from the `no-unnamed-interactive-element`
rule. ([#9046](elastic/eui#9046))

**Bug fixes**

- Fixed `no-css-color` rule to allow CSS keywords like `currentcolor`,
`transparent`, and `inherit`
([#9092](elastic/eui#9092))

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
@kapral18 kapral18 deleted the fix/eslint-plugin/fix-no-css-color-misfire branch November 18, 2025 16:08
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[ESLint plugin] no-css-color rule misfires

3 participants