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

The essential plugin for use with the Atlassian Design System.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _eslintCodemodUtils = require("eslint-codemod-utils");
var _createLintRule = require("../utils/create-lint-rule");
var _isImportFromPackage = require("../utils/is-import-from-package");
var _utils = require("./utils");
var SELECT_PACKAGE = '@atlaskit/select';
var rule = (0, _createLintRule.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 (!(0, _isImportFromPackage.isImportFromPackage)(node.source.value, SELECT_PACKAGE)) {
          return;
        }
        node.specifiers.forEach(function (spec) {
          if ((0, _eslintCodemodUtils.isNodeOfType)(spec, 'ImportDefaultSpecifier')) {
            atlaskitSelectImports.add(spec.local.name);
          }
        });
      },
      JSXElement: function JSXElement(node) {
        if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'JSXElement')) {
          return;
        }

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

              // Check if it's an inline object expression
              if ((0, _eslintCodemodUtils.isNodeOfType)(expression, 'ObjectExpression')) {
                // This is an inline styles object - check for unsupported selectors
                (0, _utils.checkStylesObject)(node, expression, context);
              } else if ((0, _eslintCodemodUtils.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'
                });
              }
            }
          }
        }
      }
    };
  }
});
var _default = exports.default = rule;