@atlaskit/eslint-plugin-design-system/dist/esm/rules/enforce-inline-styles-in-select/index.js

The essential plugin for use with the Atlassian Design System.

import { isNodeOfType } from 'eslint-codemod-utils';
import { createLintRule } from '../utils/create-lint-rule';
import { isImportFromPackage } from '../utils/is-import-from-package';
import { checkStylesObject } from './utils';
var SELECT_PACKAGE = '@atlaskit/select';
var rule = createLintRule({
  meta: {
    name: 'enforce-inline-styles-in-select',
    docs: {
      description: 'Disallow unsupported CSS selectors in styles prop for @atlaskit/select and require inline styles only',
      recommended: false,
      severity: 'error'
    },
    messages: {
      noPseudoClass: "This selector '{{pseudo}}' is not allowed in styles for @atlaskit/select. Please use the `components` API in select with `xcss` props.",
      noVariableStyles: 'Variable-defined styles are not allowed for @atlaskit/select. Please use inline styles object or the `components` API with `xcss` props.'
    }
  },
  create: function create(context) {
    // Track imports of @atlaskit/select
    var atlaskitSelectImports = new Set();
    return {
      ImportDeclaration: function ImportDeclaration(node) {
        if (!isImportFromPackage(node.source.value, SELECT_PACKAGE)) {
          return;
        }
        node.specifiers.forEach(function (spec) {
          if (isNodeOfType(spec, 'ImportDefaultSpecifier')) {
            atlaskitSelectImports.add(spec.local.name);
          }
        });
      },
      JSXElement: function JSXElement(node) {
        if (!isNodeOfType(node, 'JSXElement')) {
          return;
        }

        // Check if this is a Select component from @atlaskit/select
        if (isNodeOfType(node.openingElement.name, 'JSXIdentifier') && atlaskitSelectImports.has(node.openingElement.name.name)) {
          // Look for styles prop
          var stylesAttr = node.openingElement.attributes.find(function (attr) {
            return isNodeOfType(attr, 'JSXAttribute') && isNodeOfType(attr.name, 'JSXIdentifier') && attr.name.name === 'styles';
          });
          if (stylesAttr && isNodeOfType(stylesAttr, 'JSXAttribute') && stylesAttr.value) {
            if (isNodeOfType(stylesAttr.value, 'JSXExpressionContainer')) {
              var expression = stylesAttr.value.expression;

              // Check if it's an inline object expression
              if (isNodeOfType(expression, 'ObjectExpression')) {
                // This is an inline styles object - check for unsupported selectors
                checkStylesObject(node, expression, context);
              } else if (isNodeOfType(expression, 'Identifier')) {
                // This is a variable reference - not allowed
                context.report({
                  node: expression,
                  messageId: 'noVariableStyles'
                });
              } else {
                // Any other expression type (function calls, member expressions, etc.) - not allowed
                context.report({
                  node: expression,
                  messageId: 'noVariableStyles'
                });
              }
            }
          }
        }
      }
    };
  }
});
export default rule;