@elastic/eslint-plugin-eui 0.0.3 → 0.1.0

package/lib/cjs/rules/no_restricted_eui_imports.js

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NoRestrictedEuiImports = void 0;
+var _micromatch = _interopRequireDefault(require("micromatch"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/*
+ * 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 DEFAULT_RESTRICTED_IMPORT_OPTIONS = [{
+  patterns: ['@elastic/eui/dist/eui_theme_*\\.json'],
+  message: 'For client-side, please use `useEuiTheme` instead. Direct JSON token imports will be removed as per the EUI Deprecation schedule: https://github.com/elastic/eui/issues/1469.'
+}];
+const NoRestrictedEuiImports = exports.NoRestrictedEuiImports = {
+  create(context) {
+    const userOptions = context.options || [];
+    const options = [...DEFAULT_RESTRICTED_IMPORT_OPTIONS, ...userOptions];
+    return {
+      ImportDeclaration(node) {
+        options.forEach(({
+          patterns,
+          message
+        }) => {
+          if (_micromatch.default.isMatch(node.source.value, patterns)) {
+            context.report({
+              loc: node.source.loc,
+              // @ts-expect-error @typescript-eslint types expect `messageId` here but `message` is also allowed in eslint API
+              message
+            });
+          }
+        });
+      }
+    };
+  },
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'Discourage the use of deprecated EUI imports.'
+    },
+    schema: [{
+      type: 'object',
+      properties: {
+        patterns: {
+          type: 'array',
+          items: {
+            type: 'string'
+          }
+        },
+        message: {
+          type: 'string'
+        }
+      },
+      additionalProperties: false
+    }],
+    messages: {}
+  },
+  defaultOptions: []
+};

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

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

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

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

package/lib/cjs/rules/prefer_css_attribute_for_eui_components.js

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PreferCSSAttributeForEuiComponents = 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 PreferCSSAttributeForEuiComponents = exports.PreferCSSAttributeForEuiComponents = _utils.ESLintUtils.RuleCreator.withoutDocs({
+  create(context) {
+    const isNamedEuiComponentRegex = /^Eui[A-Z]*/;
+    return {
+      JSXOpeningElement(node) {
+        if (node.name.type === 'JSXIdentifier' && isNamedEuiComponentRegex.test(node.name.name)) {
+          let styleAttrNode;
+          if (styleAttrNode = node.attributes.filter(attr => attr.type === 'JSXAttribute').find(attr => attr.name.name === 'style')) {
+            context.report({
+              node: styleAttrNode?.parent,
+              messageId: 'preferCSSAttributeForEuiComponents',
+              fix(fixer) {
+                const cssAttr = node.attributes.find(attr => attr.type === 'JSXAttribute' && attr.name.name === 'css');
+                if (cssAttr) {
+                  return null;
+                }
+                return fixer.replaceTextRange(styleAttrNode?.name?.range, 'css');
+              }
+            });
+          }
+        }
+      }
+    };
+  },
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'Prefer the JSX css attribute for EUI components'
+    },
+    messages: {
+      preferCSSAttributeForEuiComponents: 'Prefer the css attribute for EUI components'
+    },
+    fixable: 'code',
+    schema: []
+  },
+  defaultOptions: []
+});

package/lib/cjs/utils/resolve_member_expression_root.d.ts

@@ -0,0 +1,3 @@
+import { TSESTree } from '@typescript-eslint/typescript-estree';
+export declare const resolveMemberExpressionRoot: (node: TSESTree.MemberExpression) => TSESTree.Identifier;
+//# sourceMappingURL=resolve_member_expression_root.d.ts.map

package/lib/cjs/utils/resolve_member_expression_root.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolve_member_expression_root.d.ts","sourceRoot":"","sources":["../../../src/utils/resolve_member_expression_root.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,sCAAsC,CAAC;AAEhE,eAAO,MAAM,2BAA2B,SAChC,QAAQ,CAAC,gBAAgB,KAC9B,QAAQ,CAAC,UAMX,CAAC"}

package/lib/cjs/utils/resolve_member_expression_root.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.resolveMemberExpressionRoot = void 0;
+const resolveMemberExpressionRoot = node => {
+  if (node.object.type === 'MemberExpression') {
+    return resolveMemberExpressionRoot(node.object);
+  }
+  return node.object;
+};
+exports.resolveMemberExpressionRoot = resolveMemberExpressionRoot;

package/lib/esm/index.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/esm/index.js

@@ -0,0 +1,45 @@
+"use strict";
+/*
+ * 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.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+const href_or_on_click_1 = require("./rules/href_or_on_click");
+const no_restricted_eui_imports_1 = require("./rules/no_restricted_eui_imports");
+const no_css_color_1 = require("./rules/no_css_color");
+const prefer_css_attribute_for_eui_components_1 = require("./rules/prefer_css_attribute_for_eui_components");
+const config = {
+    rules: {
+        'href-or-on-click': href_or_on_click_1.HrefOnClick,
+        'no-restricted-eui-imports': no_restricted_eui_imports_1.NoRestrictedEuiImports,
+        'no-css-color': no_css_color_1.NoCssColor,
+        'prefer-css-attributes-for-eui-components': prefer_css_attribute_for_eui_components_1.PreferCSSAttributeForEuiComponents,
+    },
+    configs: {
+        recommended: {
+            plugins: ['@elastic/eslint-plugin-eui'],
+            rules: {
+                '@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;
+//# sourceMappingURL=index.js.map

package/lib/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;GAiBG;;AAEH,+DAAuD;AACvD,iFAA2E;AAC3E,uDAAkD;AAClD,6GAAqG;AAErG,MAAM,MAAM,GAAG;IACb,KAAK,EAAE;QACL,kBAAkB,EAAE,8BAAW;QAC/B,2BAA2B,EAAE,kDAAsB;QACnD,cAAc,EAAE,yBAAU;QAC1B,0CAA0C,EACxC,4EAAkC;KACrC;IACD,OAAO,EAAE;QACP,WAAW,EAAE;YACX,OAAO,EAAE,CAAC,4BAA4B,CAAC;YACvC,KAAK,EAAE;gBACL,+BAA+B,EAAE,MAAM;gBACvC,wCAAwC,EAAE,MAAM;gBAChD,2BAA2B,EAAE,MAAM;gBACnC,uDAAuD,EAAE,MAAM;aAChE;SACF;KACF;CACF,CAAC;AAEF,MAAM,CAAC,OAAO,GAAG,MAAM,CAAC"}

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

@@ -0,0 +1,2 @@
+import { ESLintUtils } from '@typescript-eslint/utils';
+export declare const HrefOnClick: ESLintUtils.RuleModule<"hrefOrOnClick", [], unknown, ESLintUtils.RuleListener>;

package/lib/esm/rules/href_or_on_click.js

@@ -0,0 +1,61 @@
+"use strict";
+/*
+ * 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.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HrefOnClick = void 0;
+const utils_1 = require("@typescript-eslint/utils");
+const componentNames = ['EuiButton', 'EuiButtonEmpty', 'EuiLink', 'EuiBadge'];
+exports.HrefOnClick = utils_1.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: [],
+});
+//# sourceMappingURL=href_or_on_click.js.map

package/lib/esm/rules/href_or_on_click.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"href_or_on_click.js","sourceRoot":"","sources":["../../../src/rules/href_or_on_click.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;GAiBG;;;AAEH,oDAAiE;AAEjE,MAAM,cAAc,GAAG,CAAC,WAAW,EAAE,gBAAgB,EAAE,SAAS,EAAE,UAAU,CAAC,CAAC;AAEjE,QAAA,WAAW,GAAG,mBAAW,CAAC,WAAW,CAAC,WAAW,CAAC;IAC7D,MAAM,CAAC,OAAO;QACZ,OAAO;YACL,iBAAiB,CAAC,IAAgC;gBAChD,uDAAuD;gBACvD,IACE,IAAI,CAAC,IAAI,CAAC,IAAI,KAAK,eAAe;oBAClC,CAAC,cAAc,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,EACxC,CAAC;oBACD,OAAO;gBACT,CAAC;gBAED,6DAA6D;gBAC7D,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAClC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,KAAK,cAAc,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,KAAK,MAAM,CACpE,CAAC;gBACF,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CACrC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,KAAK,cAAc,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,KAAK,SAAS,CACvE,CAAC;gBAEF,iDAAiD;gBACjD,IAAI,OAAO,IAAI,UAAU,EAAE,CAAC;oBAC1B,OAAO,CAAC,MAAM,CAAC;wBACb,IAAI;wBACJ,SAAS,EAAE,eAAe;wBAC1B,IAAI,EAAE;4BACJ,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI;yBACrB;qBACF,CAAC,CAAC;gBACL,CAAC;YACH,CAAC;SACF,CAAC;IACJ,CAAC;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,SAAS;QACf,IAAI,EAAE;YACJ,WAAW,EACT,2EAA2E;SAC9E;QACD,MAAM,EAAE,EAAE;QACV,QAAQ,EAAE;YACR,aAAa,EACX,6MAA6M;SAChN;KACF;IACD,cAAc,EAAE,EAAE;CACnB,CAAC,CAAC"}

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

@@ -0,0 +1,2 @@
+import { ESLintUtils } from '@typescript-eslint/utils';
+export declare const NoCssColor: ESLintUtils.RuleModule<"noCssColor" | "noCssColorSpecific" | "noCSSColorSpecificDeclaredVariable", [], unknown, ESLintUtils.RuleListener>;

package/lib/esm/rules/no_css_color.js

@@ -0,0 +1,360 @@
+"use strict";
+/*
+ * 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".
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NoCssColor = void 0;
+const cssstyle_1 = require("cssstyle");
+const utils_1 = require("@typescript-eslint/utils");
+const resolve_member_expression_root_1 = require("../utils/resolve_member_expression_root");
+/**
+ * @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_1.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_1.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);
+            });
+        }
+    }
+};
+exports.NoCssColor = utils_1.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: [],
+});
+//# sourceMappingURL=no_css_color.js.map