@atlaskit/eslint-plugin-design-system 13.17.2 → 13.17.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 13.17.3
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 13.17.2
 
 ### Patch Changes

package/README.md

@@ -50,6 +50,7 @@ module.exports = {
 | Rule                                                                                                                                                             | Description                                                                                                                                                                                                                                                                                                         | Recommended | Fixable | Suggestions |
 | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | ------- | ----------- |
 | <a href="./packages/design-system/eslint-plugin/src/rules/consistent-css-prop-usage/README.md">consistent-css-prop-usage</a>                                     | Ensures consistency with `css` and `xcss` prop usages                                                                                                                                                                                                                                                               | Yes         | Yes     |             |
+| <a href="./packages/design-system/eslint-plugin/src/rules/enforce-inline-styles-in-select/README.md">enforce-inline-styles-in-select</a>                         | Disallow unsupported CSS selectors in styles prop for @atlaskit/select and require inline styles only                                                                                                                                                                                                               |             |         |             |
 | <a href="./packages/design-system/eslint-plugin/src/rules/ensure-design-token-usage/README.md">ensure-design-token-usage</a>                                     | Enforces usage of design tokens rather than hard-coded values.                                                                                                                                                                                                                                                      | Yes         | Yes     | Yes         |
 | <a href="./packages/design-system/eslint-plugin/src/rules/ensure-design-token-usage-preview/README.md">ensure-design-token-usage/preview</a>                     | Enforces usage of pre-release design tokens rather than hard-coded values.                                                                                                                                                                                                                                          |             | Yes     | Yes         |
 | <a href="./packages/design-system/eslint-plugin/src/rules/ensure-icon-color/README.md">ensure-icon-color</a>                                                     | Enforces that upcoming icon components have a color prop set, to enable a migration of the default value.                                                                                                                                                                                                           |             |         |             |

package/dist/cjs/presets/all-flat.codegen.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::5ceb45b21744434ca96a850461a3c574>>
+ * @codegen <<SignedSource::a8f7f6388f0499adc9db0228b7426aee>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = exports.default = {
@@ -14,6 +14,7 @@ var _default = exports.default = {
   plugins: {},
   rules: {
     '@atlaskit/design-system/consistent-css-prop-usage': 'error',
+    '@atlaskit/design-system/enforce-inline-styles-in-select': 'error',
     '@atlaskit/design-system/ensure-design-token-usage': 'error',
     '@atlaskit/design-system/ensure-design-token-usage/preview': 'warn',
     '@atlaskit/design-system/ensure-icon-color': 'error',

package/dist/cjs/presets/all.codegen.js

@@ -6,13 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::b96d8bb5115de6e0a230feef152a1365>>
+ * @codegen <<SignedSource::aaf4f1ee2f2db236ebed7b77de426181>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = exports.default = {
   plugins: ['@atlaskit/design-system'],
   rules: {
     '@atlaskit/design-system/consistent-css-prop-usage': 'error',
+    '@atlaskit/design-system/enforce-inline-styles-in-select': 'error',
     '@atlaskit/design-system/ensure-design-token-usage': 'error',
     '@atlaskit/design-system/ensure-design-token-usage/preview': 'warn',
     '@atlaskit/design-system/ensure-icon-color': 'error',

package/dist/cjs/rules/enforce-inline-styles-in-select/index.js

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+var _createRule = require("../utils/create-rule");
+var _utils = require("./utils");
+var rule = (0, _createRule.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 (node.source.value !== '@atlaskit/select') {
+          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;

package/dist/cjs/rules/enforce-inline-styles-in-select/utils.js

@@ -0,0 +1,231 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.checkStylesObject = checkStylesObject;
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+var unsupportedSelectors = [':',
+// pseudo-classes/elements
+'[',
+// attribute selectors
+'>',
+// child combinator
+'+',
+// adjacent sibling combinator
+'~',
+// general sibling combinator
+' ',
+// descendant combinator
+'*',
+// universal selector
+'#',
+// ID selector
+'.',
+// class selector
+'@',
+// at-rules
+'&',
+// parent selector
+'|',
+// namespace separator
+'^',
+// starts with
+'$',
+// ends with
+'=' // equals
+];
+function checkForPseudoClasses(node, objectExpression, context) {
+  if (!(0, _eslintCodemodUtils.isNodeOfType)(objectExpression, 'ObjectExpression')) {
+    return;
+  }
+  objectExpression.properties.forEach(function (prop) {
+    if ((0, _eslintCodemodUtils.isNodeOfType)(prop, 'Property')) {
+      // Check if property key is a pseudo-class
+      var keyValue = null;
+      if ((0, _eslintCodemodUtils.isNodeOfType)(prop.key, 'Literal')) {
+        keyValue = prop.key.value;
+      } else if ((0, _eslintCodemodUtils.isNodeOfType)(prop.key, 'Identifier')) {
+        keyValue = prop.key.name;
+      }
+      if (keyValue && typeof keyValue === 'string' && unsupportedSelectors.some(function (selector) {
+        return keyValue.includes(selector);
+      })) {
+        context.report({
+          node: prop.key,
+          messageId: 'noPseudoClass',
+          data: {
+            pseudo: keyValue
+          }
+        });
+      }
+
+      // Recursively check nested objects (for function return values)
+      if ((0, _eslintCodemodUtils.isNodeOfType)(prop.value, 'ArrowFunctionExpression') || (0, _eslintCodemodUtils.isNodeOfType)(prop.value, 'FunctionExpression')) {
+        // Check the function body for returned object expressions
+        var body = prop.value.body;
+        if ((0, _eslintCodemodUtils.isNodeOfType)(body, 'ObjectExpression')) {
+          checkForPseudoClasses(node, body, context);
+        } else if ((0, _eslintCodemodUtils.isNodeOfType)(body, 'BlockStatement')) {
+          // Look for return statements
+          body.body.forEach(function (stmt) {
+            if ((0, _eslintCodemodUtils.isNodeOfType)(stmt, 'ReturnStatement') && stmt.argument && (0, _eslintCodemodUtils.isNodeOfType)(stmt.argument, 'ObjectExpression')) {
+              checkForPseudoClasses(node, stmt.argument, context);
+            }
+          });
+        }
+      } else if ((0, _eslintCodemodUtils.isNodeOfType)(prop.value, 'ObjectExpression')) {
+        checkForPseudoClasses(node, prop.value, context);
+      }
+    } else if ((0, _eslintCodemodUtils.isNodeOfType)(prop, 'SpreadElement')) {
+      // Handle spread elements like ...styles or ...conditionalStyles
+      checkSpreadElement(node, prop, context);
+    }
+  });
+}
+function checkSpreadElement(node, spreadElement, context) {
+  if (!(0, _eslintCodemodUtils.isNodeOfType)(spreadElement, 'SpreadElement')) {
+    return;
+  }
+  var argument = spreadElement.argument;
+
+  // Handle direct identifier (e.g., ...styles)
+  if ((0, _eslintCodemodUtils.isNodeOfType)(argument, 'Identifier')) {
+    var scope = context.getScope();
+    var variable = null;
+    var currentScope = scope;
+
+    // Search through scope chain
+    while (currentScope && !variable) {
+      variable = currentScope.variables.find(function (v) {
+        return v.name === argument.name;
+      });
+      currentScope = currentScope.upper;
+    }
+    if (variable && variable.defs.length > 0) {
+      var def = variable.defs[0];
+      if ((0, _eslintCodemodUtils.isNodeOfType)(def.node, 'VariableDeclarator') && def.node.init) {
+        if ((0, _eslintCodemodUtils.isNodeOfType)(def.node.init, 'ObjectExpression')) {
+          checkForPseudoClasses(node, def.node.init, context);
+        }
+      }
+    }
+  }
+  // Handle conditional expressions (e.g., ...(condition ? { ':hover': ... } : undefined))
+  else if ((0, _eslintCodemodUtils.isNodeOfType)(argument, 'ConditionalExpression')) {
+    // Check both consequent and alternate
+    if ((0, _eslintCodemodUtils.isNodeOfType)(argument.consequent, 'ObjectExpression')) {
+      checkForPseudoClasses(node, argument.consequent, context);
+    }
+    if (argument.alternate && (0, _eslintCodemodUtils.isNodeOfType)(argument.alternate, 'ObjectExpression')) {
+      checkForPseudoClasses(node, argument.alternate, context);
+    }
+  }
+  // Handle logical expressions (e.g., ...condition && { ':hover': ... })
+  else if ((0, _eslintCodemodUtils.isNodeOfType)(argument, 'LogicalExpression')) {
+    if ((0, _eslintCodemodUtils.isNodeOfType)(argument.right, 'ObjectExpression')) {
+      checkForPseudoClasses(node, argument.right, context);
+    }
+    if ((0, _eslintCodemodUtils.isNodeOfType)(argument.left, 'ObjectExpression')) {
+      checkForPseudoClasses(node, argument.left, context);
+    }
+  }
+  // Handle direct object expressions (e.g., ...{ ':hover': ... })
+  else if ((0, _eslintCodemodUtils.isNodeOfType)(argument, 'ObjectExpression')) {
+    checkForPseudoClasses(node, argument, context);
+  }
+}
+function checkStylesObject(node, stylesValue, context) {
+  if (!stylesValue) {
+    return;
+  }
+  if ((0, _eslintCodemodUtils.isNodeOfType)(stylesValue, 'ObjectExpression')) {
+    stylesValue.properties.forEach(function (prop) {
+      if (!(0, _eslintCodemodUtils.isNodeOfType)(prop, 'Property') || !prop.value || !(0, _eslintCodemodUtils.isNodeOfType)(prop.value, 'ArrowFunctionExpression') && !(0, _eslintCodemodUtils.isNodeOfType)(prop.value, 'FunctionExpression')) {
+        return;
+      }
+      var body = prop.value.body;
+      if ((0, _eslintCodemodUtils.isNodeOfType)(body, 'ObjectExpression')) {
+        checkForPseudoClasses(node, body, context);
+      } else if ((0, _eslintCodemodUtils.isNodeOfType)(body, 'BlockStatement')) {
+        var visitor = {
+          ReturnStatement: function ReturnStatement(returnStmt) {
+            if (returnStmt.argument && (0, _eslintCodemodUtils.isNodeOfType)(returnStmt.argument, 'ObjectExpression')) {
+              checkForPseudoClasses(node, returnStmt.argument, context);
+            }
+          },
+          AssignmentExpression: function AssignmentExpression(assignExpr) {
+            // Handle cases like styles[':hover'] = { ... }
+            var left = assignExpr.left;
+            if (!(0, _eslintCodemodUtils.isNodeOfType)(left, 'MemberExpression')) {
+              return;
+            }
+            var property = left.property;
+            if (!(0, _eslintCodemodUtils.isNodeOfType)(property, 'Literal')) {
+              return;
+            }
+            var value = property.value;
+            if (typeof value !== 'string') {
+              return;
+            }
+            if (unsupportedSelectors.some(function (selector) {
+              return value.includes(selector);
+            })) {
+              context.report({
+                node: property,
+                messageId: 'noPseudoClass',
+                data: {
+                  pseudo: value
+                }
+              });
+            }
+          }
+        };
+        body.body.forEach(function (stmt) {
+          if ((0, _eslintCodemodUtils.isNodeOfType)(stmt, 'ReturnStatement')) {
+            visitor.ReturnStatement(stmt);
+          } else if ((0, _eslintCodemodUtils.isNodeOfType)(stmt, 'ExpressionStatement') && (0, _eslintCodemodUtils.isNodeOfType)(stmt.expression, 'AssignmentExpression')) {
+            visitor.AssignmentExpression(stmt.expression);
+          } else if ((0, _eslintCodemodUtils.isNodeOfType)(stmt, 'IfStatement')) {
+            var checkBlock = function checkBlock(block) {
+              if ((0, _eslintCodemodUtils.isNodeOfType)(block, 'BlockStatement')) {
+                block.body.forEach(function (innerStmt) {
+                  if ((0, _eslintCodemodUtils.isNodeOfType)(innerStmt, 'ExpressionStatement') && (0, _eslintCodemodUtils.isNodeOfType)(innerStmt.expression, 'AssignmentExpression')) {
+                    visitor.AssignmentExpression(innerStmt.expression);
+                  }
+                });
+              } else if ((0, _eslintCodemodUtils.isNodeOfType)(block, 'ExpressionStatement') && (0, _eslintCodemodUtils.isNodeOfType)(block.expression, 'AssignmentExpression')) {
+                visitor.AssignmentExpression(block.expression);
+              }
+            };
+            if (stmt.consequent) {
+              checkBlock(stmt.consequent);
+            }
+            if (stmt.alternate) {
+              checkBlock(stmt.alternate);
+            }
+          }
+        });
+      }
+    });
+  } else if ((0, _eslintCodemodUtils.isNodeOfType)(stylesValue, 'Identifier')) {
+    // track the variable
+    var scope = context.getScope();
+    var variable = null;
+    var currentScope = scope;
+
+    // Search through scope chain
+    while (currentScope && !variable) {
+      variable = currentScope.variables.find(function (v) {
+        return v.name === stylesValue.name;
+      });
+      currentScope = currentScope.upper;
+    }
+    if (variable && variable.defs.length > 0) {
+      var def = variable.defs[0];
+      if ((0, _eslintCodemodUtils.isNodeOfType)(def.node, 'VariableDeclarator') && def.node.init) {
+        checkStylesObject(node, def.node.init, context);
+      }
+    }
+  }
+}

package/dist/cjs/rules/index.codegen.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.rules = void 0;
 var _consistentCssPropUsage = _interopRequireDefault(require("./consistent-css-prop-usage"));
+var _enforceInlineStylesInSelect = _interopRequireDefault(require("./enforce-inline-styles-in-select"));
 var _ensureDesignTokenUsage = _interopRequireDefault(require("./ensure-design-token-usage"));
 var _ensureDesignTokenUsagePreview = _interopRequireDefault(require("./ensure-design-token-usage-preview"));
 var _ensureIconColor = _interopRequireDefault(require("./ensure-icon-color"));
@@ -70,12 +71,13 @@ var _useTokensTypography = _interopRequireDefault(require("./use-tokens-typograp
 var _useVisuallyHidden = _interopRequireDefault(require("./use-visually-hidden"));
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::3de5d5b44aa01faabdb840bc7fb43d04>>
+ * @codegen <<SignedSource::c3ee5646fc648d2510a70195a04d7fe9>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
 var rules = exports.rules = {
   'consistent-css-prop-usage': _consistentCssPropUsage.default,
+  'enforce-inline-styles-in-select': _enforceInlineStylesInSelect.default,
   'ensure-design-token-usage': _ensureDesignTokenUsage.default,
   'ensure-design-token-usage/preview': _ensureDesignTokenUsagePreview.default,
   'ensure-icon-color': _ensureIconColor.default,

package/dist/cjs/rules/no-nested-styles/index.js

@@ -58,18 +58,21 @@ var getKeyValue = function getKeyValue(node, context) {
   }
   return '';
 };
-var isWidthMediaQuery = function isWidthMediaQuery(rawSelector) {
-  var selectors = parseSelector(rawSelector);
-  if (selectors[0].startsWith('@')) {
-    // If the selector includes a min-width/max-width query, return false - the primitives media object should be used instead:
-    // https://staging.atlassian.design/components/primitives/responsive/breakpoints/examples
-    // Otherwise return true, non-width queries are acceptable
-    return selectors.some(function (selector) {
-      return selector.includes('min-width') || selector.includes('max-width');
-    });
-  }
-  return false;
-};
+
+// const isWidthMediaQuery = (rawSelector: string): boolean => {
+// 	const selectors = parseSelector(rawSelector);
+
+// 	if (selectors[0].startsWith('@')) {
+// 		// If the selector includes a min-width/max-width query, return false - the primitives media object should be used instead:
+// 		// https://staging.atlassian.design/components/primitives/responsive/breakpoints/examples
+// 		// Otherwise return true, non-width queries are acceptable
+// 		return selectors.some(
+// 			(selector) => selector.includes('min-width') || selector.includes('max-width'),
+// 		);
+// 	}
+// 	return false;
+// };
+
 var isAllowedNestedSelector = function isAllowedNestedSelector(rawSelector) {
   if (rawSelector.trim() === '&') {
     // This can be written without the nest.
@@ -101,7 +104,8 @@ var rule = (0, _createRule.createLintRule)({
       severity: 'error'
     },
     messages: {
-      noWidthQueries: 'Media queries that target min-width or max-width are not allowed. Use the media object provided by the Atlassian Design System instead. https://staging.atlassian.design/components/primitives/responsive/breakpoints/examples',
+      // noWidthQueries:
+      // 	'Media queries that target min-width or max-width are not allowed. Use the media object provided by the Atlassian Design System instead. https://staging.atlassian.design/components/primitives/responsive/breakpoints/examples',
       noNestedStyles: 'Nested styles are not allowed as they can change unexpectedly when child markup changes and result in duplicates when extracting to CSS.',
       noDirectNestedStyles: "Styles applied with data attributes are not allowed, split them into discrete CSS declarations and apply them conditionally with JavaScript.\n\n```\nconst disabledStyles = css({ opacity: 0.5 });\n\n<div css={isDisabled && disabledStyles} />\n```\n"
     }
@@ -119,13 +123,16 @@ var rule = (0, _createRule.createLintRule)({
           });
           return;
         }
-        if (isWidthMediaQuery(getKeyValue(node.key, context))) {
-          context.report({
-            node: node,
-            messageId: 'noWidthQueries'
-          });
-          return;
-        }
+
+        // if (isWidthMediaQuery(getKeyValue(node.key as Rule.Node, context))) {
+        // 	context.report({
+        // 		node,
+        // 		messageId: 'noWidthQueries',
+        // 	});
+
+        // 	return;
+        // }
+
         if (!isAllowedNestedSelector(getKeyValue(node.key, context))) {
           context.report({
             node: node,

package/dist/es2019/presets/all-flat.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::5ceb45b21744434ca96a850461a3c574>>
+ * @codegen <<SignedSource::a8f7f6388f0499adc9db0228b7426aee>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -9,6 +9,7 @@ export default {
   plugins: {},
   rules: {
     '@atlaskit/design-system/consistent-css-prop-usage': 'error',
+    '@atlaskit/design-system/enforce-inline-styles-in-select': 'error',
     '@atlaskit/design-system/ensure-design-token-usage': 'error',
     '@atlaskit/design-system/ensure-design-token-usage/preview': 'warn',
     '@atlaskit/design-system/ensure-icon-color': 'error',

package/dist/es2019/presets/all.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::b96d8bb5115de6e0a230feef152a1365>>
+ * @codegen <<SignedSource::aaf4f1ee2f2db236ebed7b77de426181>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -8,6 +8,7 @@ export default {
   plugins: ['@atlaskit/design-system'],
   rules: {
     '@atlaskit/design-system/consistent-css-prop-usage': 'error',
+    '@atlaskit/design-system/enforce-inline-styles-in-select': 'error',
     '@atlaskit/design-system/ensure-design-token-usage': 'error',
     '@atlaskit/design-system/ensure-design-token-usage/preview': 'warn',
     '@atlaskit/design-system/ensure-icon-color': 'error',

package/dist/es2019/rules/enforce-inline-styles-in-select/index.js

@@ -0,0 +1,68 @@
+import { isNodeOfType } from 'eslint-codemod-utils';
+import { createLintRule } from '../utils/create-rule';
+import { checkStylesObject } from './utils';
+const 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(context) {
+    // Track imports of @atlaskit/select
+    const atlaskitSelectImports = new Set();
+    return {
+      ImportDeclaration(node) {
+        if (node.source.value !== '@atlaskit/select') {
+          return;
+        }
+        node.specifiers.forEach(spec => {
+          if (isNodeOfType(spec, 'ImportDefaultSpecifier')) {
+            atlaskitSelectImports.add(spec.local.name);
+          }
+        });
+      },
+      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
+          const stylesAttr = node.openingElement.attributes.find(attr => isNodeOfType(attr, 'JSXAttribute') && isNodeOfType(attr.name, 'JSXIdentifier') && attr.name.name === 'styles');
+          if (stylesAttr && isNodeOfType(stylesAttr, 'JSXAttribute') && stylesAttr.value) {
+            if (isNodeOfType(stylesAttr.value, 'JSXExpressionContainer')) {
+              const 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;