@elastic/eslint-plugin-eui 0.0.2 → 0.1.0

package/README.md

@@ -4,8 +4,8 @@ This package contains an eslint plugin that enforces some default rules for usin
 
 ## Setup
 
-1. install `@elastic/eslint-plugin-eui` as a dev dependency
-2. extend `plugin:@elastic/eui/recommended` in your eslint config
+1. Install `@elastic/eslint-plugin-eui` as a dev dependency.
+2. Extend `plugin:@elastic/eui/recommended` in your ESLint config.
 
 ## Rules
 
@@ -13,13 +13,149 @@ This package contains an eslint plugin that enforces some default rules for usin
 
 `<EuiButton />` should either be a button or a link, for a11y purposes. When given an `href` the button behaves as a link, otherwise an `onClick` handler is expected and it will behave as a button.
 
-In some cases it makes sense to disable this rule locally, such as when <kbd>cmd</kbd>+click should open the link in a new tab, but a standard click should use the `history.pushState()` API to change the URL without triggering a full page load.
+In some cases it makes sense to disable this rule locally, such as when <kbd>cmd</kbd> + click should open the link in a new tab, but a standard click should use the `history.pushState()` API to change the URL without triggering a full page load.
 
-## Publishing
+### `@elastic/eui/no-restricted-eui-imports`
+
+At times, we deprecate features that may need more highlighting and/or that are not possible to annotate with JSDoc `@deprecated`, e.g. JSON token imports: `@elastic/eui/dist/eui_theme_*.json` (for context: https://github.com/elastic/kibana/issues/199715#json-tokens).
+
+We don't use `no-restricted-imports` because ESLint doesn't allow multiple error levels at once and it may conflict with the consumer's existing ESLint configuration for that rule. We need to assure that our rule will produce a warning (as a recommendation).
+
+All deprecations still must follow our [deprecation process](../../wiki/eui-team-processes/deprecations.md).
+
+### `@elastic/eui/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:
+
+```tsx
+// 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>
+    )
+}
+```
+
+```tsx
+// 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>
+    )
+}
+```
+
+```tsx
+// 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;
+
+```tsx
+// Filename: /x-pack/plugins/observability_solution/observability/public/my_component.tsx
 
-This package is published separately from the rest of EUI, as required by eslint. The code is not transpiled, so make sure to use `require()` statements rather than `import`, and once the code is updated run:
+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>
+    )
+}
+```
+
+```tsx
+// 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;
+
+
+```tsx
+// 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.
+
+### `@elastic/eui/prefer-css-attributes-for-eui-components`
+
+This rule warns about the use of `style` attribute and encourages to replace it with `css` attribute. Using the `css` attribute ensures better integration with Emotion's styling capabilities.
+
+#### Example
+
+The following code:
+
+```jsx
+<EuiCode style={{ color: '#dd4040' }}>This is a test</EuiCode>
+```
+
+will raise an ESLint report and suggest replacing the `style` attribute with `css`:
+
+```jsx
+<EuiCode css={{ color: '#dd4040' }}>This is a test</EuiCode>
+```
+
+## Testing
+
+### Against an existing package
+
+To test the local changes to the plugin, you must:
+
+1. Run `yarn pack` in the directory.
+2. In your project's `package.json`, point `@elastic/eslint-plugin-eui` to `file:/path/to/package.tgz`.
+3. Install dependencies: `yarn kbn bootstrap --no-validate`.
+
+## Publishing
 
-1. `npm version patch|minor|major`
-2. commit version bump
-3. `npm publish` in this directory 
-4. push the version bump upstream
+Refer to the [wiki](../../wiki/eui-team-processes/releasing-versions.md) for instructions on how to release this package.

package/lib/cjs/index.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.d.ts.map

package/lib/cjs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":""}

package/{index.js → lib/cjs/index.js}

@@ -1,3 +1,9 @@
+"use strict";
+
+var _href_or_on_click = require("./rules/href_or_on_click");
+var _no_restricted_eui_imports = require("./rules/no_restricted_eui_imports");
+var _no_css_color = require("./rules/no_css_color");
+var _prefer_css_attribute_for_eui_components = require("./rules/prefer_css_attribute_for_eui_components");
 /*
  * Licensed to Elasticsearch B.V. under one or more contributor
  * license agreements. See the NOTICE file distributed with
@@ -17,16 +23,23 @@
  * under the License.
  */
 
-module.exports = {
+const config = {
   rules: {
-    'href-or-on-click': require('./rules/href_or_on_click'),
+    'href-or-on-click': _href_or_on_click.HrefOnClick,
+    'no-restricted-eui-imports': _no_restricted_eui_imports.NoRestrictedEuiImports,
+    'no-css-color': _no_css_color.NoCssColor,
+    'prefer-css-attributes-for-eui-components': _prefer_css_attribute_for_eui_components.PreferCSSAttributeForEuiComponents
   },
   configs: {
     recommended: {
       plugins: ['@elastic/eslint-plugin-eui'],
       rules: {
-        '@elastic/eui/href-or-on-click': 'error',
-      },
-    },
-  },
+        '@elastic/eui/href-or-on-click': 'warn',
+        '@elastic/eui/no-restricted-eui-imports': 'warn',
+        '@elastic/eui/no-css-color': 'warn',
+        '@elastic/eui/prefer-css-attributes-for-eui-components': 'warn'
+      }
+    }
+  }
 };
+module.exports = config;

package/lib/cjs/rules/href_or_on_click.d.ts

@@ -0,0 +1,3 @@
+import { ESLintUtils } from '@typescript-eslint/utils';
+export declare const HrefOnClick: ESLintUtils.RuleModule<"hrefOrOnClick", [], unknown, ESLintUtils.RuleListener>;
+//# sourceMappingURL=href_or_on_click.d.ts.map

package/lib/cjs/rules/href_or_on_click.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"href_or_on_click.d.ts","sourceRoot":"","sources":["../../../src/rules/href_or_on_click.ts"],"names":[],"mappings":"AAmBA,OAAO,EAAY,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAIjE,eAAO,MAAM,WAAW,gFA8CtB,CAAC"}

package/lib/cjs/rules/href_or_on_click.js

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HrefOnClick = void 0;
+var _utils = require("@typescript-eslint/utils");
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+const componentNames = ['EuiButton', 'EuiButtonEmpty', 'EuiLink', 'EuiBadge'];
+const HrefOnClick = exports.HrefOnClick = _utils.ESLintUtils.RuleCreator.withoutDocs({
+  create(context) {
+    return {
+      JSXOpeningElement(node) {
+        // Ensure node name is one of the valid component names
+        if (node.name.type !== 'JSXIdentifier' || !componentNames.includes(node.name.name)) {
+          return;
+        }
+
+        // Check if the node has both `href` and `onClick` attributes
+        const hasHref = node.attributes.some(attr => attr.type === 'JSXAttribute' && attr.name.name === 'href');
+        const hasOnClick = node.attributes.some(attr => attr.type === 'JSXAttribute' && attr.name.name === 'onClick');
+
+        // Report an issue if both attributes are present
+        if (hasHref && hasOnClick) {
+          context.report({
+            node,
+            messageId: 'hrefOrOnClick',
+            data: {
+              name: node.name.name
+            }
+          });
+        }
+      }
+    };
+  },
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'Discourage supplying both `href` and `onClick` to certain EUI components.'
+    },
+    schema: [],
+    messages: {
+      hrefOrOnClick: '<{{name}}> supplied with both `href` and `onClick`; is this intentional? (Valid use cases include programmatic navigation via `onClick` while preserving "Open in new tab" style functionality via `href`.)'
+    }
+  },
+  defaultOptions: []
+});

package/lib/cjs/rules/no_css_color.d.ts

@@ -0,0 +1,3 @@
+import { ESLintUtils } from '@typescript-eslint/utils';
+export declare const NoCssColor: ESLintUtils.RuleModule<"noCssColor" | "noCssColorSpecific" | "noCSSColorSpecificDeclaredVariable", [], unknown, ESLintUtils.RuleListener>;
+//# sourceMappingURL=no_css_color.d.ts.map

package/lib/cjs/rules/no_css_color.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"no_css_color.d.ts","sourceRoot":"","sources":["../../../src/rules/no_css_color.ts"],"names":[],"mappings":"AAUA,OAAO,EAAY,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAyNjE,eAAO,MAAM,UAAU,2IAsRrB,CAAC"}

package/lib/cjs/rules/no_css_color.js

@@ -0,0 +1,329 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NoCssColor = void 0;
+var _cssstyle = require("cssstyle");
+var _utils = require("@typescript-eslint/utils");
+var _resolve_member_expression_root = require("../utils/resolve_member_expression_root");
+/*
+ * 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".
+ */
+
+/**
+ * @description List of superset css properties that can apply color to html box element elements and text nodes, leveraging the
+ * css style package allows us to directly singly check for these properties even if the actual declaration was written using the shorthand form
+ */
+const propertiesSupportingCssColor = ['color', 'background', 'border'];
+
+/**
+ * @description Builds off the existing color definition to match css declarations that can apply color to
+ * html elements and text nodes for string declarations
+ */
+const htmlElementColorDeclarationRegex = RegExp(String.raw`(${propertiesSupportingCssColor.join('|')})`);
+const checkPropertySpecifiesInvalidCSSColor = ([property, value]) => {
+  if (!property || !value) return false;
+  const style = new _cssstyle.CSSStyleDeclaration();
+
+  // @ts-expect-error the types for this packages specifies an index signature of number, alongside other valid CSS properties
+  style[property.trim()] = typeof value === 'string' ? value.trim() : value;
+  const anchor = propertiesSupportingCssColor.find(resolvedProperty => property.includes(resolvedProperty));
+  if (!anchor) return false;
+
+  // build the resolved color property to check if the value is a string after parsing the style declaration
+  const resolvedColorProperty = anchor === 'color' ? 'color' : anchor + 'Color';
+
+  // in trying to keep this rule simple, it's enough if we get a value back, because if it was an identifier we would have been able to set a value within this invocation
+  // @ts-expect-error the types for this packages specifics an index signature of number, alongside other valid CSS properties
+  return Boolean(style[resolvedColorProperty]);
+};
+
+/**
+ * @description method to inspect values of interest found on an object
+ */
+const raiseReportIfPropertyHasInvalidCssColor = (context, propertyNode, messageToReport) => {
+  let didReport = false;
+  if (propertyNode.key.type === 'Identifier' && !htmlElementColorDeclarationRegex.test(propertyNode.key.name)) {
+    return didReport;
+  }
+  if (propertyNode.value.type === 'Literal') {
+    if (didReport = checkPropertySpecifiesInvalidCSSColor([
+    // @ts-expect-error the key name is present in this scenario
+    propertyNode.key.name, propertyNode.value.value])) {
+      context.report(messageToReport);
+    }
+  } else if (propertyNode.value.type === 'Identifier') {
+    const identifierDeclaration = context.sourceCode.getScope(propertyNode).variables.find(variable => variable.name === propertyNode.value.name);
+    const identifierDeclarationInit = (identifierDeclaration?.defs[0].node).init;
+    if (identifierDeclarationInit?.type === 'Literal' && checkPropertySpecifiesInvalidCSSColor([
+    // @ts-expect-error the key name is present in this scenario
+    propertyNode.key.name, identifierDeclarationInit.value])) {
+      context.report({
+        loc: propertyNode.value.loc,
+        messageId: 'noCSSColorSpecificDeclaredVariable',
+        data: {
+          // @ts-expect-error the key name is always present else this code will not execute
+          property: String(propertyNode.key.name),
+          line: String(propertyNode.value.loc.start.line),
+          variableName: propertyNode.value.name
+        }
+      });
+      didReport = true;
+    }
+  } else if (propertyNode.value.type === 'MemberExpression') {
+    // @ts-expect-error we ignore the case where this node could be a private identifier
+    const MemberExpressionLeafName = propertyNode.value.property.name;
+    const memberExpressionRootName = (0, _resolve_member_expression_root.resolveMemberExpressionRoot)(propertyNode.value).name;
+    const expressionRootDeclaration = context.sourceCode.getScope(propertyNode).variables.find(variable => variable.name === memberExpressionRootName);
+    const expressionRootDeclarationInit = (expressionRootDeclaration?.defs[0].node).init;
+    if (expressionRootDeclarationInit?.type === 'ObjectExpression') {
+      expressionRootDeclarationInit.properties.forEach(property => {
+        // This is a naive approach expecting the value to be at depth 1, we should actually be traversing the object to the same depth as the expression
+        if (property.type === 'Property' && property.key.type === 'Identifier' && property.key?.name === MemberExpressionLeafName) {
+          raiseReportIfPropertyHasInvalidCssColor(context, property, {
+            loc: propertyNode.value.loc,
+            messageId: 'noCSSColorSpecificDeclaredVariable',
+            data: {
+              // @ts-expect-error the key name is always present else this code will not execute
+              property: String(propertyNode.key.name),
+              line: String(propertyNode.value.loc.start.line),
+              variableName: memberExpressionRootName
+            }
+          });
+        }
+      });
+    } else if (expressionRootDeclarationInit?.type === 'CallExpression') {
+      // TODO: if this object was returned from invoking a function the best we can do is probably validate that the method invoked is one that returns an euitheme object
+    }
+  }
+  return didReport;
+};
+
+/**
+ *
+ * @description style object declaration have a depth of 1, this function handles the properties of the object
+ */
+const handleObjectProperties = (context, propertyParentNode, property, reportMessage) => {
+  if (property.type === 'Property') {
+    raiseReportIfPropertyHasInvalidCssColor(context, property, reportMessage);
+  } else if (property.type === 'SpreadElement') {
+    const spreadElementIdentifierName = property.argument.name;
+    const spreadElementDeclaration = context.sourceCode.getScope(propertyParentNode.value.expression).references.find(ref => ref.identifier.name === spreadElementIdentifierName)?.resolved;
+    if (!spreadElementDeclaration) {
+      return;
+    }
+    reportMessage = {
+      loc: propertyParentNode.loc,
+      messageId: 'noCSSColorSpecificDeclaredVariable',
+      data: {
+        // @ts-expect-error the key name is always present else this code will not execute
+        property: String(property.argument.name),
+        variableName: spreadElementIdentifierName,
+        line: String(property.loc.start.line)
+      }
+    };
+    const spreadElementDeclarationNode = 'init' in spreadElementDeclaration.defs[0].node ? spreadElementDeclaration.defs[0].node.init : undefined;
+
+    // evaluate only statically defined declarations, other possibilities like callExpressions in this context complicate things
+    if (spreadElementDeclarationNode?.type === 'ObjectExpression') {
+      spreadElementDeclarationNode.properties.forEach(spreadProperty => {
+        handleObjectProperties(context, propertyParentNode, spreadProperty, reportMessage);
+      });
+    }
+  }
+};
+const NoCssColor = exports.NoCssColor = _utils.ESLintUtils.RuleCreator.withoutDocs({
+  create(context) {
+    return {
+      // accounts for instances where declarations are created using the template tagged css function
+      TaggedTemplateExpression(node) {
+        if (node.tag.type !== 'Identifier' || node.tag.type === 'Identifier' && node.tag.name !== 'css') {
+          return;
+        }
+        for (let i = 0; i < node.quasi.quasis.length; i++) {
+          const declarationTemplateNode = node.quasi.quasis[i];
+          if (htmlElementColorDeclarationRegex.test(declarationTemplateNode.value.raw)) {
+            const cssText = declarationTemplateNode.value.raw.replace(/(\{|\}|\\n)/g, '').trim();
+            cssText.split(';').forEach(declaration => {
+              if (declaration.length > 0 && checkPropertySpecifiesInvalidCSSColor(declaration.split(':'))) {
+                context.report({
+                  node: declarationTemplateNode,
+                  messageId: 'noCssColor'
+                });
+              }
+            });
+          }
+        }
+      },
+      JSXAttribute(node) {
+        if (!(node.name.name === 'style' || node.name.name === 'css')) {
+          return;
+        }
+
+        /**
+         * @description Accounts for instances where a variable is used to define a style object
+         *
+         * @example
+         * const codeStyle = { color: '#dd4040' };
+         * <EuiCode style={codeStyle}>This is an example</EuiCode>
+         *
+         * @example
+         * const codeStyle = { color: '#dd4040' };
+         * <EuiCode css={codeStyle}>This is an example</EuiCode>
+         *
+         * @example
+         * const codeStyle = css({ color: '#dd4040' });
+         * <EuiCode css={codeStyle}>This is an example</EuiCode>
+         */
+        if (node.value?.type === 'JSXExpressionContainer' && node.value.expression.type === 'Identifier') {
+          const styleVariableName = node.value.expression.name;
+          const nodeScope = context.sourceCode.getScope(node.value.expression);
+          const variableDeclarationMatches = nodeScope.references.find(ref => ref.identifier.name === styleVariableName)?.resolved;
+          let variableInitializationNode;
+          if (variableInitializationNode = variableDeclarationMatches?.defs?.[0]?.node && 'init' in variableDeclarationMatches.defs[0].node && variableDeclarationMatches.defs[0].node.init) {
+            if (variableInitializationNode.type === 'ObjectExpression') {
+              variableInitializationNode.properties.forEach(property => {
+                handleObjectProperties(context, node, property, {
+                  loc: property.loc,
+                  messageId: 'noCSSColorSpecificDeclaredVariable',
+                  data: {
+                    property: property.type === 'SpreadElement' ? String(property.argument.name) : String(property.key.name),
+                    variableName: styleVariableName,
+                    line: String(property.loc.start.line)
+                  }
+                });
+              });
+            } else if (variableInitializationNode.type === 'CallExpression' && variableInitializationNode.callee.name === 'css') {
+              const cssFunctionArgument = variableInitializationNode.arguments[0];
+              if (cssFunctionArgument.type === 'ObjectExpression') {
+                cssFunctionArgument.properties.forEach(property => {
+                  handleObjectProperties(context, node, property, {
+                    loc: node.loc,
+                    messageId: 'noCSSColorSpecificDeclaredVariable',
+                    data: {
+                      property: property.type === 'SpreadElement' ? String(property.argument.name) : String(property.key.name),
+                      variableName: styleVariableName,
+                      line: String(property.loc.start.line)
+                    }
+                  });
+                });
+              }
+            }
+          }
+          return;
+        }
+
+        /**
+         *
+         * @description Accounts for instances where a style object is inlined in the JSX attribute
+         *
+         * @example
+         * <EuiCode style={{ color: '#dd4040' }}>This is an example</EuiCode>
+         *
+         * @example
+         * <EuiCode css={{ color: '#dd4040' }}>This is an example</EuiCode>
+         *
+         * @example
+         * const styleRules = { color: '#dd4040' };
+         * <EuiCode style={{ color: styleRules.color }}>This is an example</EuiCode>
+         *
+         * @example
+         * const styleRules = { color: '#dd4040' };
+         * <EuiCode css={{ color: styleRules.color }}>This is an example</EuiCode>
+         */
+        if (node.value?.type === 'JSXExpressionContainer' && node.value.expression.type === 'ObjectExpression') {
+          const declarationPropertiesNode = node.value.expression.properties;
+          declarationPropertiesNode?.forEach(property => {
+            handleObjectProperties(context, node, property, {
+              loc: property.loc,
+              messageId: 'noCssColorSpecific',
+              data: {
+                property: property.type === 'SpreadElement' ?
+                // @ts-expect-error the key name is always present else this code will not execute
+                String(property.argument.name) :
+                // @ts-expect-error the key name is always present else this code will not execute
+                String(property.key.name)
+              }
+            });
+          });
+          return;
+        }
+        if (node.name.name === 'css' && node.value?.type === 'JSXExpressionContainer') {
+          /**
+           * @example
+           * <EuiCode css={`{ color: '#dd4040' }`}>This is an example</EuiCode>
+           */
+          if (node.value.expression.type === 'TemplateLiteral') {
+            for (let i = 0; i < node.value.expression.quasis.length; i++) {
+              const declarationTemplateNode = node.value.expression.quasis[i];
+              if (htmlElementColorDeclarationRegex.test(declarationTemplateNode.value.raw)) {
+                const cssText = declarationTemplateNode.value.raw.replace(/(\{|\}|\\n)/g, '').trim();
+                cssText.split(';').forEach(declaration => {
+                  if (declaration.length > 0 && checkPropertySpecifiesInvalidCSSColor(declaration.split(':'))) {
+                    context.report({
+                      node: declarationTemplateNode,
+                      messageId: 'noCssColor'
+                    });
+                  }
+                });
+              }
+            }
+          }
+
+          /**
+           * @example
+           * <EuiCode css={() => ({ color: '#dd4040' })}>This is an example</EuiCode>
+           */
+          if (node.value.expression.type === 'FunctionExpression' || node.value.expression.type === 'ArrowFunctionExpression') {
+            let declarationPropertiesNode = [];
+            if (node.value.expression.body.type === 'ObjectExpression') {
+              declarationPropertiesNode = node.value.expression.body.properties;
+            }
+            if (node.value.expression.body.type === 'BlockStatement') {
+              const functionReturnStatementNode = node.value.expression.body.body?.find(_node => {
+                return _node.type === 'ReturnStatement';
+              });
+              if (!functionReturnStatementNode) {
+                return;
+              }
+              declarationPropertiesNode = functionReturnStatementNode.argument?.properties.filter(property => property.type === 'Property');
+            }
+            if (!declarationPropertiesNode.length) {
+              return;
+            }
+            declarationPropertiesNode.forEach(property => {
+              handleObjectProperties(context, node, property, {
+                loc: property.loc,
+                messageId: 'noCssColorSpecific',
+                data: {
+                  // @ts-expect-error the key name is always present else this code will not execute
+                  property: property.key.name
+                }
+              });
+            });
+            return;
+          }
+        }
+      }
+    };
+  },
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'Use color definitions from eui theme as opposed to CSS color values'
+    },
+    messages: {
+      noCSSColorSpecificDeclaredVariable: 'Avoid using a literal CSS color value for "{{property}}", use an EUI theme color instead in declared variable {{variableName}} on line {{line}}',
+      noCssColorSpecific: 'Avoid using a literal CSS color value for "{{property}}", use an EUI theme color instead',
+      noCssColor: 'Avoid using a literal CSS color value, use an EUI theme color instead'
+    },
+    schema: []
+  },
+  defaultOptions: []
+});

package/lib/cjs/rules/no_restricted_eui_imports.d.ts

@@ -0,0 +1,8 @@
+import { TSESLint } from '@typescript-eslint/utils';
+type Option = {
+    patterns: string[];
+    message: string;
+};
+export declare const NoRestrictedEuiImports: TSESLint.RuleModule<never, Readonly<Option>[]>;
+export {};
+//# sourceMappingURL=no_restricted_eui_imports.d.ts.map

package/lib/cjs/rules/no_restricted_eui_imports.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"no_restricted_eui_imports.d.ts","sourceRoot":"","sources":["../../../src/rules/no_restricted_eui_imports.ts"],"names":[],"mappings":"AAoBA,OAAO,EAAY,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAE9D,KAAK,MAAM,GAAG;IACZ,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAUF,eAAO,MAAM,sBAAsB,EAAE,QAAQ,CAAC,UAAU,CAAC,KAAK,EAAE,QAAQ,CAAC,MAAM,CAAC,EAAE,CA4CjF,CAAC"}