ES Lint rules for css-in-js declarations within Kibana

.eslintrc.js

@@ -764,7 +764,6 @@ module.exports = {
         ],
       },
     },
-
     /**
      * Jest specific rules
      */

.github/CODEOWNERS

@@ -337,6 +337,7 @@ packages/kbn-es-errors @elastic/kibana-core
 packages/kbn-es-query @elastic/kibana-data-discovery
 packages/kbn-es-types @elastic/kibana-core @elastic/obs-knowledge-team
 packages/kbn-eslint-config @elastic/kibana-operations
+packages/kbn-eslint-plugin-css @elastic/appex-sharedux
 packages/kbn-eslint-plugin-disable @elastic/kibana-operations
 packages/kbn-eslint-plugin-eslint @elastic/kibana-operations
 packages/kbn-eslint-plugin-i18n @elastic/obs-knowledge-team @elastic/kibana-operations

package.json

@@ -1451,6 +1451,7 @@
     "@kbn/es": "link:packages/kbn-es",
     "@kbn/es-archiver": "link:packages/kbn-es-archiver",
     "@kbn/eslint-config": "link:packages/kbn-eslint-config",
+    "@kbn/eslint-plugin-css": "link:packages/kbn-eslint-plugin-css",
     "@kbn/eslint-plugin-disable": "link:packages/kbn-eslint-plugin-disable",
     "@kbn/eslint-plugin-eslint": "link:packages/kbn-eslint-plugin-eslint",
     "@kbn/eslint-plugin-i18n": "link:packages/kbn-eslint-plugin-i18n",
@@ -1566,6 +1567,7 @@
     "@types/classnames": "^2.2.9",
     "@types/cli-progress": "^3.11.5",
     "@types/color": "^3.0.3",
+    "@types/cssstyle": "^2.2.4",
     "@types/cytoscape": "^3.14.0",
     "@types/d3": "^3.5.43",
     "@types/d3-array": "^2.12.1",
@@ -1714,6 +1716,7 @@
     "css-loader": "^3.4.2",
     "cssnano": "^5.1.12",
     "cssnano-preset-default": "^5.2.12",
+    "cssstyle": "^4.1.0",
     "csstype": "^3.0.2",
     "cypress": "13.15.2",
     "cypress-axe": "^1.5.0",

packages/kbn-eslint-config/.eslintrc.js

@@ -28,6 +28,7 @@ module.exports = {
     '@kbn/eslint-plugin-imports',
     '@kbn/eslint-plugin-telemetry',
     '@kbn/eslint-plugin-i18n',
+    '@kbn/eslint-plugin-css',
     'eslint-plugin-depend',
     'prettier',
   ],
@@ -332,6 +333,7 @@ module.exports = {
     '@kbn/imports/no_boundary_crossing': 'error',
     '@kbn/imports/no_group_crossing_manifests': 'error',
     '@kbn/imports/no_group_crossing_imports': 'error',
+    '@kbn/css/no_css_color': 'warn',
     'no-new-func': 'error',
     'no-implied-eval': 'error',
     'no-prototype-builtins': 'error',

packages/kbn-eslint-plugin-css/README.mdx

@@ -0,0 +1,129 @@
+---
+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. 
+

packages/kbn-eslint-plugin-css/index.ts

@@ -0,0 +1,20 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import { NoCssColor } from './src/rules/no_css_color';
+import { PreferCSSAttributeForEuiComponents } from './src/rules/prefer_css_attribute_for_eui_components';
+
+/**
+ * Custom ESLint rules, included as `'@kbn/eslint-plugin-design-tokens'` in the kibana eslint config
+ * @internal
+ */
+export const rules = {
+  no_css_color: NoCssColor,
+  prefer_css_attributes_for_eui_components: PreferCSSAttributeForEuiComponents,
+};

packages/kbn-eslint-plugin-css/jest.config.js

@@ -0,0 +1,14 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+module.exports = {
+  preset: '@kbn/test',
+  rootDir: '../..',
+  roots: ['<rootDir>/packages/kbn-eslint-plugin-css'],
+};

packages/kbn-eslint-plugin-css/kibana.jsonc

@@ -0,0 +1,6 @@
+{
+  "type": "shared-common",
+  "id": "@kbn/eslint-plugin-css",
+  "devOnly": true,
+  "owner": "@elastic/appex-sharedux"
+}

packages/kbn-eslint-plugin-css/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "@kbn/eslint-plugin-css",
+  "version": "1.0.0",
+  "private": true,
+  "license": "Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0"
+}