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

package/dist/es2019/rules/use-correct-field/index.js

@@ -0,0 +1,153 @@
+import { isNodeOfType } from 'eslint-codemod-utils';
+import { createLintRule } from '../utils/create-rule';
+const specialFieldsByImport = {
+  '@atlaskit/checkbox': {
+    component: 'Checkbox',
+    field: 'CheckboxField',
+    local: undefined
+  },
+  '@atlaskit/range': {
+    component: 'Range',
+    field: 'RangeField',
+    local: undefined
+  },
+  '@atlaskit/toggle': {
+    component: 'Toggle',
+    field: 'CheckboxField',
+    local: undefined
+  }
+};
+export const useCheckboxFieldMessage = 'Convert Field to CheckboxField';
+export const useRangeFieldMessage = 'Convert Field to RangeField';
+const rule = createLintRule({
+  meta: {
+    name: 'use-correct-field',
+    type: 'suggestion',
+    fixable: 'code',
+    hasSuggestions: true,
+    docs: {
+      description: 'Ensure makers use appropriate field component for their respective form elements.',
+      recommended: true,
+      severity: 'warn'
+    },
+    messages: {
+      useCheckboxField: 'Checkbox components should use the `CheckboxField` component',
+      useRangeField: 'Range components should use the `RangeField` component',
+      useCheckboxFieldForToggle: 'Toggle components should use the `CheckboxField` component'
+    }
+  },
+  create(context) {
+    let fieldImport;
+    const allPackages = [];
+    return {
+      ImportDeclaration(node) {
+        const source = node.source.value;
+        if (typeof source !== 'string') {
+          return;
+        }
+        if (!node.specifiers.length) {
+          return;
+        }
+        const defaultImport = node.specifiers.filter(spec => isNodeOfType(spec, 'ImportDefaultSpecifier'));
+        if (source in specialFieldsByImport) {
+          allPackages.push(node);
+          // set local to local value
+          if (defaultImport.length && isNodeOfType(defaultImport[0], 'ImportDefaultSpecifier') && isNodeOfType(defaultImport[0].local, 'Identifier')) {
+            specialFieldsByImport[source].local = defaultImport[0].local.name;
+          }
+        }
+        if ('@atlaskit/form' !== source) {
+          return;
+        }
+        const namedImport = node.specifiers.filter(spec => isNodeOfType(spec, 'ImportSpecifier'));
+        if (namedImport.length && namedImport[0].type === 'ImportSpecifier' && namedImport[0].imported.name === 'Field') {
+          fieldImport = namedImport[0].local;
+        }
+      },
+      JSXElement(node) {
+        if (!isNodeOfType(node, 'JSXElement')) {
+          return;
+        }
+        if (!isNodeOfType(node.openingElement.name, 'JSXIdentifier')) {
+          return;
+        }
+        const name = node.openingElement.name.name;
+
+        // if it's not a field import, skip
+        if (!fieldImport || name !== fieldImport.name) {
+          return;
+        }
+
+        // If no imports are for the inputs that have special fields, exit early
+        if (allPackages.every(n => typeof n.source.value !== 'string' || !Object.keys(specialFieldsByImport).includes(n.source.value))) {
+          return;
+        }
+        const fieldRenderProp = node.children.find(c => isNodeOfType(c, 'JSXExpressionContainer'));
+        if (!fieldRenderProp) {
+          return;
+        }
+        // I'm not early exiting because it doesn't work with ts for some reason
+        if (isNodeOfType(fieldRenderProp, 'JSXExpressionContainer')) {
+          if (!isNodeOfType(fieldRenderProp.expression, 'ArrowFunctionExpression')) {
+            return;
+          }
+          const q = [fieldRenderProp.expression.body];
+          let found;
+          while (q.length > 0 && !found) {
+            const child = q.pop();
+            if (!isNodeOfType(child, 'JSXElement') || !isNodeOfType(child.openingElement.name, 'JSXIdentifier')) {
+              continue;
+            }
+            const elementName = child.openingElement.name.name;
+            for (const importName in specialFieldsByImport) {
+              // if this child is one of the found component names
+              // then break out of the while loop and use the found object
+              const localName = specialFieldsByImport[importName].local;
+              if (localName === elementName) {
+                found = specialFieldsByImport[importName].component;
+                break;
+              }
+            }
+          }
+          if (!found) {
+            return;
+          }
+
+          // if checkbox is inside of the field's render prop
+          if (found === 'Checkbox' || found === 'Toggle') {
+            context.report({
+              node: node,
+              messageId: found === 'Checkbox' ? 'useCheckboxField' : 'useCheckboxFieldForToggle',
+              suggest: [{
+                desc: useCheckboxFieldMessage,
+                fix(fixer) {
+                  const fixes = [];
+                  fixes.push(fixer.insertTextBefore(fieldImport, 'CheckboxField, '));
+                  fixes.push(fixer.replaceText(node.openingElement.name, 'CheckboxField'));
+                  node.closingElement && fixes.push(fixer.replaceText(node.closingElement.name, 'CheckboxField'));
+                  return fixes;
+                }
+              }]
+            });
+          } else if (found === 'Range') {
+            context.report({
+              node: node,
+              messageId: 'useRangeField',
+              suggest: [{
+                desc: useRangeFieldMessage,
+                fix(fixer) {
+                  const fixes = [];
+                  fixes.push(fixer.insertTextBefore(fieldImport, 'RangeField, '));
+                  fixes.push(fixer.replaceText(node.openingElement.name, 'RangeField'));
+                  node.closingElement && fixes.push(fixer.replaceText(node.closingElement.name, 'RangeField'));
+                  return fixes;
+                }
+              }]
+            });
+          }
+        }
+      }
+    };
+  }
+});
+export default rule;

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::8fb6e53ac7d9be7b9252dd64ec022d26>>
  * @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',
@@ -51,6 +52,7 @@ export default {
     '@atlaskit/design-system/no-utility-icons': 'warn',
     '@atlaskit/design-system/prefer-primitives': 'warn',
     '@atlaskit/design-system/use-button-group-label': 'warn',
+    '@atlaskit/design-system/use-correct-field': 'warn',
     '@atlaskit/design-system/use-cx-function-in-xcss': 'error',
     '@atlaskit/design-system/use-datetime-picker-calendar-button': 'warn',
     '@atlaskit/design-system/use-drawer-label': 'warn',

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::b727e6e2b1813b88da0df6ff6083be3c>>
  * @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',
@@ -50,6 +51,7 @@ export default {
     '@atlaskit/design-system/no-utility-icons': 'warn',
     '@atlaskit/design-system/prefer-primitives': 'warn',
     '@atlaskit/design-system/use-button-group-label': 'warn',
+    '@atlaskit/design-system/use-correct-field': 'warn',
     '@atlaskit/design-system/use-cx-function-in-xcss': 'error',
     '@atlaskit/design-system/use-datetime-picker-calendar-button': 'warn',
     '@atlaskit/design-system/use-drawer-label': 'warn',

package/dist/esm/presets/recommended-flat.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::10f372e16c048db9bfb1bc36cf48421c>>
+ * @codegen <<SignedSource::af48ffd75d906d008c5701554187b606>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -38,6 +38,7 @@ export default {
     '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': 'error',
     '@atlaskit/design-system/no-utility-icons': 'warn',
     '@atlaskit/design-system/use-button-group-label': 'warn',
+    '@atlaskit/design-system/use-correct-field': 'warn',
     '@atlaskit/design-system/use-cx-function-in-xcss': 'error',
     '@atlaskit/design-system/use-datetime-picker-calendar-button': 'warn',
     '@atlaskit/design-system/use-drawer-label': 'warn',

package/dist/esm/presets/recommended.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::608f46f9cc8653226152a8edc34849d6>>
+ * @codegen <<SignedSource::96e803ae8ae873736bab690b2af62bed>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -37,6 +37,7 @@ export default {
     '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': 'error',
     '@atlaskit/design-system/no-utility-icons': 'warn',
     '@atlaskit/design-system/use-button-group-label': 'warn',
+    '@atlaskit/design-system/use-correct-field': 'warn',
     '@atlaskit/design-system/use-cx-function-in-xcss': 'error',
     '@atlaskit/design-system/use-datetime-picker-calendar-button': 'warn',
     '@atlaskit/design-system/use-drawer-label': 'warn',

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::3c4282c17de41bbfb755836f00326036>>
  * @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';
@@ -47,6 +48,7 @@ import noUnsupportedDragAndDropLibraries from './no-unsupported-drag-and-drop-li
 import noUtilityIcons from './no-utility-icons';
 import preferPrimitives from './prefer-primitives';
 import useButtonGroupLabel from './use-button-group-label';
+import useCorrectField from './use-correct-field';
 import useCxFunctionInXcss from './use-cx-function-in-xcss';
 import useDatetimePickerCalendarButton from './use-datetime-picker-calendar-button';
 import useDrawerLabel from './use-drawer-label';
@@ -68,6 +70,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,
@@ -111,6 +114,7 @@ export var rules = {
   'no-utility-icons': noUtilityIcons,
   'prefer-primitives': preferPrimitives,
   'use-button-group-label': useButtonGroupLabel,
+  'use-correct-field': useCorrectField,
   'use-cx-function-in-xcss': useCxFunctionInXcss,
   'use-datetime-picker-calendar-button': useDatetimePickerCalendarButton,
   'use-drawer-label': useDrawerLabel,

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

@@ -52,18 +52,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.
@@ -95,7 +98,8 @@ var 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.\n\n```\nconst disabledStyles = css({ opacity: 0.5 });\n\n<div css={isDisabled && disabledStyles} />\n```\n"
     }
@@ -113,13 +117,16 @@ var rule = 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/esm/rules/no-utility-icons/checks.js

@@ -4,7 +4,6 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 import { isNodeOfType } from 'eslint-codemod-utils';
 var specialCases = {
-  '@atlaskit/icon/utility/cross': '@atlaskit/icon/core/close',
   '@atlaskit/icon/utility/migration/cross--editor-close': '@atlaskit/icon/core/migration/close--editor-close'
 };
 var iconPropsinNewButton = ['icon', 'iconBefore', 'iconAfter'];