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

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

@@ -0,0 +1,217 @@
+import { isNodeOfType } from 'eslint-codemod-utils';
+const 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 (!isNodeOfType(objectExpression, 'ObjectExpression')) {
+    return;
+  }
+  objectExpression.properties.forEach(prop => {
+    if (isNodeOfType(prop, 'Property')) {
+      // Check if property key is a pseudo-class
+      let keyValue = null;
+      if (isNodeOfType(prop.key, 'Literal')) {
+        keyValue = prop.key.value;
+      } else if (isNodeOfType(prop.key, 'Identifier')) {
+        keyValue = prop.key.name;
+      }
+      if (keyValue && typeof keyValue === 'string' && unsupportedSelectors.some(selector => keyValue.includes(selector))) {
+        context.report({
+          node: prop.key,
+          messageId: 'noPseudoClass',
+          data: {
+            pseudo: keyValue
+          }
+        });
+      }
+
+      // Recursively check nested objects (for function return values)
+      if (isNodeOfType(prop.value, 'ArrowFunctionExpression') || isNodeOfType(prop.value, 'FunctionExpression')) {
+        // Check the function body for returned object expressions
+        const body = prop.value.body;
+        if (isNodeOfType(body, 'ObjectExpression')) {
+          checkForPseudoClasses(node, body, context);
+        } else if (isNodeOfType(body, 'BlockStatement')) {
+          // Look for return statements
+          body.body.forEach(stmt => {
+            if (isNodeOfType(stmt, 'ReturnStatement') && stmt.argument && isNodeOfType(stmt.argument, 'ObjectExpression')) {
+              checkForPseudoClasses(node, stmt.argument, context);
+            }
+          });
+        }
+      } else if (isNodeOfType(prop.value, 'ObjectExpression')) {
+        checkForPseudoClasses(node, prop.value, context);
+      }
+    } else if (isNodeOfType(prop, 'SpreadElement')) {
+      // Handle spread elements like ...styles or ...conditionalStyles
+      checkSpreadElement(node, prop, context);
+    }
+  });
+}
+function checkSpreadElement(node, spreadElement, context) {
+  if (!isNodeOfType(spreadElement, 'SpreadElement')) {
+    return;
+  }
+  const argument = spreadElement.argument;
+
+  // Handle direct identifier (e.g., ...styles)
+  if (isNodeOfType(argument, 'Identifier')) {
+    const scope = context.getScope();
+    let variable = null;
+    let currentScope = scope;
+
+    // Search through scope chain
+    while (currentScope && !variable) {
+      variable = currentScope.variables.find(v => v.name === argument.name);
+      currentScope = currentScope.upper;
+    }
+    if (variable && variable.defs.length > 0) {
+      const def = variable.defs[0];
+      if (isNodeOfType(def.node, 'VariableDeclarator') && def.node.init) {
+        if (isNodeOfType(def.node.init, 'ObjectExpression')) {
+          checkForPseudoClasses(node, def.node.init, context);
+        }
+      }
+    }
+  }
+  // Handle conditional expressions (e.g., ...(condition ? { ':hover': ... } : undefined))
+  else if (isNodeOfType(argument, 'ConditionalExpression')) {
+    // Check both consequent and alternate
+    if (isNodeOfType(argument.consequent, 'ObjectExpression')) {
+      checkForPseudoClasses(node, argument.consequent, context);
+    }
+    if (argument.alternate && isNodeOfType(argument.alternate, 'ObjectExpression')) {
+      checkForPseudoClasses(node, argument.alternate, context);
+    }
+  }
+  // Handle logical expressions (e.g., ...condition && { ':hover': ... })
+  else if (isNodeOfType(argument, 'LogicalExpression')) {
+    if (isNodeOfType(argument.right, 'ObjectExpression')) {
+      checkForPseudoClasses(node, argument.right, context);
+    }
+    if (isNodeOfType(argument.left, 'ObjectExpression')) {
+      checkForPseudoClasses(node, argument.left, context);
+    }
+  }
+  // Handle direct object expressions (e.g., ...{ ':hover': ... })
+  else if (isNodeOfType(argument, 'ObjectExpression')) {
+    checkForPseudoClasses(node, argument, context);
+  }
+}
+export function checkStylesObject(node, stylesValue, context) {
+  if (!stylesValue) {
+    return;
+  }
+  if (isNodeOfType(stylesValue, 'ObjectExpression')) {
+    stylesValue.properties.forEach(prop => {
+      if (!isNodeOfType(prop, 'Property') || !prop.value || !isNodeOfType(prop.value, 'ArrowFunctionExpression') && !isNodeOfType(prop.value, 'FunctionExpression')) {
+        return;
+      }
+      const body = prop.value.body;
+      if (isNodeOfType(body, 'ObjectExpression')) {
+        checkForPseudoClasses(node, body, context);
+      } else if (isNodeOfType(body, 'BlockStatement')) {
+        const visitor = {
+          ReturnStatement(returnStmt) {
+            if (returnStmt.argument && isNodeOfType(returnStmt.argument, 'ObjectExpression')) {
+              checkForPseudoClasses(node, returnStmt.argument, context);
+            }
+          },
+          AssignmentExpression(assignExpr) {
+            // Handle cases like styles[':hover'] = { ... }
+            const left = assignExpr.left;
+            if (!isNodeOfType(left, 'MemberExpression')) {
+              return;
+            }
+            const property = left.property;
+            if (!isNodeOfType(property, 'Literal')) {
+              return;
+            }
+            const value = property.value;
+            if (typeof value !== 'string') {
+              return;
+            }
+            if (unsupportedSelectors.some(selector => value.includes(selector))) {
+              context.report({
+                node: property,
+                messageId: 'noPseudoClass',
+                data: {
+                  pseudo: value
+                }
+              });
+            }
+          }
+        };
+        body.body.forEach(stmt => {
+          if (isNodeOfType(stmt, 'ReturnStatement')) {
+            visitor.ReturnStatement(stmt);
+          } else if (isNodeOfType(stmt, 'ExpressionStatement') && isNodeOfType(stmt.expression, 'AssignmentExpression')) {
+            visitor.AssignmentExpression(stmt.expression);
+          } else if (isNodeOfType(stmt, 'IfStatement')) {
+            const checkBlock = block => {
+              if (isNodeOfType(block, 'BlockStatement')) {
+                block.body.forEach(innerStmt => {
+                  if (isNodeOfType(innerStmt, 'ExpressionStatement') && isNodeOfType(innerStmt.expression, 'AssignmentExpression')) {
+                    visitor.AssignmentExpression(innerStmt.expression);
+                  }
+                });
+              } else if (isNodeOfType(block, 'ExpressionStatement') && isNodeOfType(block.expression, 'AssignmentExpression')) {
+                visitor.AssignmentExpression(block.expression);
+              }
+            };
+            if (stmt.consequent) {
+              checkBlock(stmt.consequent);
+            }
+            if (stmt.alternate) {
+              checkBlock(stmt.alternate);
+            }
+          }
+        });
+      }
+    });
+  } else if (isNodeOfType(stylesValue, 'Identifier')) {
+    // track the variable
+    const scope = context.getScope();
+    let variable = null;
+    let currentScope = scope;
+
+    // Search through scope chain
+    while (currentScope && !variable) {
+      variable = currentScope.variables.find(v => v.name === stylesValue.name);
+      currentScope = currentScope.upper;
+    }
+    if (variable && variable.defs.length > 0) {
+      const def = variable.defs[0];
+      if (isNodeOfType(def.node, 'VariableDeclarator') && def.node.init) {
+        checkStylesObject(node, def.node.init, context);
+      }
+    }
+  }
+}

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

@@ -1,9 +1,10 @@
 /**
  * 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
  */
 import consistentCssPropUsage from './consistent-css-prop-usage';
+import enforceInlineStylesInSelect from './enforce-inline-styles-in-select';
 import ensureDesignTokenUsage from './ensure-design-token-usage';
 import ensureDesignTokenUsagePreview from './ensure-design-token-usage-preview';
 import ensureIconColor from './ensure-icon-color';
@@ -68,6 +69,7 @@ import useTokensTypography from './use-tokens-typography';
 import useVisuallyHidden from './use-visually-hidden';
 export const rules = {
   'consistent-css-prop-usage': consistentCssPropUsage,
+  'enforce-inline-styles-in-select': enforceInlineStylesInSelect,
   'ensure-design-token-usage': ensureDesignTokenUsage,
   'ensure-design-token-usage/preview': ensureDesignTokenUsagePreview,
   'ensure-icon-color': ensureIconColor,

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

@@ -50,16 +50,21 @@ const getKeyValue = (node, context) => {
   }
   return '';
 };
-const isWidthMediaQuery = rawSelector => {
-  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;
-};
+
+// 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;
+// };
+
 const isAllowedNestedSelector = rawSelector => {
   if (rawSelector.trim() === '&') {
     // This can be written without the nest.
@@ -87,7 +92,8 @@ const rule = 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.
 
@@ -112,13 +118,16 @@ const disabledStyles = css({ opacity: 0.5 });
           });
           return;
         }
-        if (isWidthMediaQuery(getKeyValue(node.key, context))) {
-          context.report({
-            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,

package/dist/esm/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/esm/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/esm/rules/enforce-inline-styles-in-select/index.js

@@ -0,0 +1,70 @@
+import { isNodeOfType } from 'eslint-codemod-utils';
+import { createLintRule } from '../utils/create-rule';
+import { checkStylesObject } from './utils';
+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 (node.source.value !== '@atlaskit/select') {
+          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;

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

@@ -0,0 +1,225 @@
+import { isNodeOfType } from '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 (!isNodeOfType(objectExpression, 'ObjectExpression')) {
+    return;
+  }
+  objectExpression.properties.forEach(function (prop) {
+    if (isNodeOfType(prop, 'Property')) {
+      // Check if property key is a pseudo-class
+      var keyValue = null;
+      if (isNodeOfType(prop.key, 'Literal')) {
+        keyValue = prop.key.value;
+      } else if (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 (isNodeOfType(prop.value, 'ArrowFunctionExpression') || isNodeOfType(prop.value, 'FunctionExpression')) {
+        // Check the function body for returned object expressions
+        var body = prop.value.body;
+        if (isNodeOfType(body, 'ObjectExpression')) {
+          checkForPseudoClasses(node, body, context);
+        } else if (isNodeOfType(body, 'BlockStatement')) {
+          // Look for return statements
+          body.body.forEach(function (stmt) {
+            if (isNodeOfType(stmt, 'ReturnStatement') && stmt.argument && isNodeOfType(stmt.argument, 'ObjectExpression')) {
+              checkForPseudoClasses(node, stmt.argument, context);
+            }
+          });
+        }
+      } else if (isNodeOfType(prop.value, 'ObjectExpression')) {
+        checkForPseudoClasses(node, prop.value, context);
+      }
+    } else if (isNodeOfType(prop, 'SpreadElement')) {
+      // Handle spread elements like ...styles or ...conditionalStyles
+      checkSpreadElement(node, prop, context);
+    }
+  });
+}
+function checkSpreadElement(node, spreadElement, context) {
+  if (!isNodeOfType(spreadElement, 'SpreadElement')) {
+    return;
+  }
+  var argument = spreadElement.argument;
+
+  // Handle direct identifier (e.g., ...styles)
+  if (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 (isNodeOfType(def.node, 'VariableDeclarator') && def.node.init) {
+        if (isNodeOfType(def.node.init, 'ObjectExpression')) {
+          checkForPseudoClasses(node, def.node.init, context);
+        }
+      }
+    }
+  }
+  // Handle conditional expressions (e.g., ...(condition ? { ':hover': ... } : undefined))
+  else if (isNodeOfType(argument, 'ConditionalExpression')) {
+    // Check both consequent and alternate
+    if (isNodeOfType(argument.consequent, 'ObjectExpression')) {
+      checkForPseudoClasses(node, argument.consequent, context);
+    }
+    if (argument.alternate && isNodeOfType(argument.alternate, 'ObjectExpression')) {
+      checkForPseudoClasses(node, argument.alternate, context);
+    }
+  }
+  // Handle logical expressions (e.g., ...condition && { ':hover': ... })
+  else if (isNodeOfType(argument, 'LogicalExpression')) {
+    if (isNodeOfType(argument.right, 'ObjectExpression')) {
+      checkForPseudoClasses(node, argument.right, context);
+    }
+    if (isNodeOfType(argument.left, 'ObjectExpression')) {
+      checkForPseudoClasses(node, argument.left, context);
+    }
+  }
+  // Handle direct object expressions (e.g., ...{ ':hover': ... })
+  else if (isNodeOfType(argument, 'ObjectExpression')) {
+    checkForPseudoClasses(node, argument, context);
+  }
+}
+export function checkStylesObject(node, stylesValue, context) {
+  if (!stylesValue) {
+    return;
+  }
+  if (isNodeOfType(stylesValue, 'ObjectExpression')) {
+    stylesValue.properties.forEach(function (prop) {
+      if (!isNodeOfType(prop, 'Property') || !prop.value || !isNodeOfType(prop.value, 'ArrowFunctionExpression') && !isNodeOfType(prop.value, 'FunctionExpression')) {
+        return;
+      }
+      var body = prop.value.body;
+      if (isNodeOfType(body, 'ObjectExpression')) {
+        checkForPseudoClasses(node, body, context);
+      } else if (isNodeOfType(body, 'BlockStatement')) {
+        var visitor = {
+          ReturnStatement: function ReturnStatement(returnStmt) {
+            if (returnStmt.argument && isNodeOfType(returnStmt.argument, 'ObjectExpression')) {
+              checkForPseudoClasses(node, returnStmt.argument, context);
+            }
+          },
+          AssignmentExpression: function AssignmentExpression(assignExpr) {
+            // Handle cases like styles[':hover'] = { ... }
+            var left = assignExpr.left;
+            if (!isNodeOfType(left, 'MemberExpression')) {
+              return;
+            }
+            var property = left.property;
+            if (!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 (isNodeOfType(stmt, 'ReturnStatement')) {
+            visitor.ReturnStatement(stmt);
+          } else if (isNodeOfType(stmt, 'ExpressionStatement') && isNodeOfType(stmt.expression, 'AssignmentExpression')) {
+            visitor.AssignmentExpression(stmt.expression);
+          } else if (isNodeOfType(stmt, 'IfStatement')) {
+            var checkBlock = function checkBlock(block) {
+              if (isNodeOfType(block, 'BlockStatement')) {
+                block.body.forEach(function (innerStmt) {
+                  if (isNodeOfType(innerStmt, 'ExpressionStatement') && isNodeOfType(innerStmt.expression, 'AssignmentExpression')) {
+                    visitor.AssignmentExpression(innerStmt.expression);
+                  }
+                });
+              } else if (isNodeOfType(block, 'ExpressionStatement') && isNodeOfType(block.expression, 'AssignmentExpression')) {
+                visitor.AssignmentExpression(block.expression);
+              }
+            };
+            if (stmt.consequent) {
+              checkBlock(stmt.consequent);
+            }
+            if (stmt.alternate) {
+              checkBlock(stmt.alternate);
+            }
+          }
+        });
+      }
+    });
+  } else if (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 (isNodeOfType(def.node, 'VariableDeclarator') && def.node.init) {
+        checkStylesObject(node, def.node.init, context);
+      }
+    }
+  }
+}

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

@@ -1,9 +1,10 @@
 /**
  * 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
  */
 import consistentCssPropUsage from './consistent-css-prop-usage';
+import enforceInlineStylesInSelect from './enforce-inline-styles-in-select';
 import ensureDesignTokenUsage from './ensure-design-token-usage';
 import ensureDesignTokenUsagePreview from './ensure-design-token-usage-preview';
 import ensureIconColor from './ensure-icon-color';
@@ -68,6 +69,7 @@ import useTokensTypography from './use-tokens-typography';
 import useVisuallyHidden from './use-visually-hidden';
 export var rules = {
   'consistent-css-prop-usage': consistentCssPropUsage,
+  'enforce-inline-styles-in-select': enforceInlineStylesInSelect,
   'ensure-design-token-usage': ensureDesignTokenUsage,
   'ensure-design-token-usage/preview': ensureDesignTokenUsagePreview,
   'ensure-icon-color': ensureIconColor,