kibana/packages/kbn-eslint-plugin-css

---
id: kibSharedUXEslintPluginCSS
slug: /kibana-dev-docs/shared-ux/packages/kbn-eslint-plugin-css
title: '@kbn/eslint-plugin-design-tokens'
description: Custom ESLint rules to guardrails for using eui in the Kibana repository
date: 2024-11-19
tags: ['kibana', 'dev', 'contributor', 'shared_ux', 'eslint', 'eui']
---

# Summary

`@kbn/eslint-plugin-css` is an ESLint plugin providing custom ESLint rules to help setup guardrails for using eui in the Kibana repo especially around styling.

The aim of this package is to help engineers to modify EUI components in a much complaint way.

If a rule does not behave as you expect or you have an idea of how these rules can be improved, please reach out to the Shared UX team.

# Rules

## `@kbn/css/no_css_color`

This rule warns engineers to not use literal css color in the codebase, particularly for CSS properties that apply color to 
either the html element or text nodes, but rather urge users to defer to using the color tokens provided by EUI.

This rule kicks in on the following JSXAttributes; `style`, `className` and `css` and supports various approaches to providing styling declarations.

### Example

The following code:

```
// Filename: /x-pack/plugins/observability_solution/observability/public/my_component.tsx

import React from 'react';
import { EuiText } from '@elastic/eui';

function MyComponent() {
    return (
        <EuiText style={{ color: 'red' }}>You know, for search</EuiText>
    )
}
```

```
// Filename: /x-pack/plugins/observability_solution/observability/public/my_component.tsx

import React from 'react';
import { EuiText } from '@elastic/eui';

function MyComponent() {

    const style = {
        color: 'red'
    }

    return (
        <EuiText style={{ color: style.color }}>You know, for search</EuiText>
    )
}
```

```
// Filename: /x-pack/plugins/observability_solution/observability/public/my_component.tsx

import React from 'react';
import { EuiText } from '@elastic/eui';

function MyComponent() {
    const colorValue = '#dd4040';

    return (
        <EuiText style={{ color: colorValue }}>You know, for search</EuiText>
    )
}
```

will all raise an eslint report with an appropriate message of severity that matches the configuration of the rule, further more all the examples above
will also match for when the attribute in question is `css`. The `css` attribute will also raise a report the following cases below;

```
// Filename: /x-pack/plugins/observability_solution/observability/public/my_component.tsx

import React from 'react';
import { css } from '@emotion/css';
import { EuiText } from '@elastic/eui';

function MyComponent() {
    return (
        <EuiText css={css`color: '#dd4040' `}>You know, for search</EuiText>
    )
}
```

```
// Filename: /x-pack/plugins/observability_solution/observability/public/my_component.tsx

import React from 'react';
import { EuiText } from '@elastic/eui';

function MyComponent() {
    return (
        <EuiText css={() => ({ color: '#dd4040' })}>You know, for search</EuiText>
    )
}
```

A special case is also covered for the `className` attribute, where the rule will also raise a report for the following case below;


```
// Filename: /x-pack/plugins/observability_solution/observability/public/my_component.tsx

import React from 'react';
import { css } from '@emotion/css';
import { EuiText } from '@elastic/eui';

function MyComponent() {
    return (
        <EuiText className={css`color: '#dd4040'`}>You know, for search</EuiText>
    )
}
```

it's worth pointing out that although the examples provided are specific to EUI components, this rule applies to all JSX elements.

## `@kbn/css/prefer_css_attributes_for_eui_components`

This rule warns engineers to use the `css` attribute for EUI components instead of the `style` attribute.