@atlaskit/eslint-plugin-design-system 14.0.0 → 14.1.0

package/dist/es2019/rules/no-readonly-or-disabled-inputs/index.js

@@ -0,0 +1,112 @@
+import { isNodeOfType } from 'eslint-codemod-utils';
+import { JSXElement } from '../../ast-nodes/jsx-element';
+import { createLintRule } from '../utils/create-rule';
+export const AFFECTED_HTML_ELEMENTS = ['input', 'textarea'];
+export const AFFECTED_ATLASKIT_PACKAGES = {
+  '@atlaskit/textarea': ['default'],
+  '@atlaskit/textfield': ['default']
+};
+export const UNWANTED_HTML_ATTRIBUTES = ['disabled', 'readonly'];
+export const UNWANTED_ATLASKIT_ATTRIBUTES = ['isDisabled', 'isReadOnly'];
+const hasUnwantedAttributes = (node, type) => {
+  const attrNames = type === 'html' ? UNWANTED_HTML_ATTRIBUTES : UNWANTED_ATLASKIT_ATTRIBUTES;
+  const unwantedAttrs = node.openingElement.attributes.filter(attr => isNodeOfType(attr, 'JSXAttribute')).map(attr => String(attr.name.name)).filter(attrName => attrNames.includes(attrName));
+  return unwantedAttrs;
+};
+const rule = createLintRule({
+  meta: {
+    name: 'no-readonly-or-disabled-inputs',
+    type: 'problem',
+    docs: {
+      description: 'Inputs should almost always be interactive. Disabled and read-only inputs can usually be replaced by a more user-friendly design pattern.',
+      recommended: true,
+      severity: 'warn'
+    },
+    messages: {
+      noDisabled: 'Inputs should almost always be interactive. Instead of disabling an input, consider removing it altogether, as it cannot be used anyway. Disabled inputs are much less accessible than a well labeled and described input with clear error, valid, and/or helper messages.',
+      noReadOnly: 'Inputs should almost always be interactive. Instead of making an input read-only, consider making it normal text. Read-only inputs do the same thing as normal text but appear as interactive elements and add themselves to the tab-order, which can be confusing for users.'
+    }
+  },
+  create(context) {
+    const localComponentNames = [];
+    return {
+      ImportDeclaration(node) {
+        const source = node.source.value;
+        if (typeof source !== 'string') {
+          return;
+        }
+
+        // Ignore non-atlaskit input packages
+        if (!Object.keys(AFFECTED_ATLASKIT_PACKAGES).includes(source)) {
+          return;
+        }
+        if (!node.specifiers.length) {
+          return;
+        }
+        const defaultImport = node.specifiers.filter(spec => spec.type === 'ImportDefaultSpecifier');
+        const namedImport = node.specifiers.filter(spec => spec.type === 'ImportSpecifier');
+        const importNames = AFFECTED_ATLASKIT_PACKAGES[source];
+        const usesDefaultImport = importNames.includes('default');
+        const possibleNamedImports = importNames.filter(importName => importName !== 'default');
+        if (usesDefaultImport && defaultImport.length && defaultImport[0].local) {
+          localComponentNames.push(defaultImport[0].local.name);
+          // or if popup and using a named import
+        } else if (possibleNamedImports.length >= 1 && namedImport.length) {
+          namedImport.forEach(imp => {
+            if (imp.type === 'ImportSpecifier' && 'name' in imp.imported && possibleNamedImports.includes(imp.imported.name)) {
+              localComponentNames.push(imp.local.name);
+            }
+          });
+        }
+      },
+      JSXElement(node) {
+        if (!isNodeOfType(node, 'JSXElement')) {
+          return false;
+        }
+        const elName = JSXElement.getName(node);
+        if (!elName) {
+          return false;
+        }
+
+        // If it is one of the affected native HTML elements
+        if (AFFECTED_HTML_ELEMENTS.includes(elName)) {
+          const unwantedAttributes = hasUnwantedAttributes(node, 'html');
+          if (unwantedAttributes.includes('disabled')) {
+            return context.report({
+              node: node.openingElement,
+              messageId: 'noDisabled'
+            });
+          } else if (unwantedAttributes.includes('readonly')) {
+            return context.report({
+              node: node.openingElement,
+              messageId: 'noReadOnly'
+            });
+          }
+          // Else, it is a React component
+        } else {
+          // if none of the affected packages is imported, return
+          if (localComponentNames.length === 0) {
+            return;
+          }
+          // if component name is not in the list, exit
+          if (!isNodeOfType(node.openingElement.name, 'JSXIdentifier') || !localComponentNames.includes(node.openingElement.name.name)) {
+            return;
+          }
+          const unwantedAttributes = hasUnwantedAttributes(node, 'atlaskit');
+          if (unwantedAttributes.includes('isDisabled')) {
+            return context.report({
+              node: node.openingElement,
+              messageId: 'noDisabled'
+            });
+          } else if (unwantedAttributes.includes('isReadOnly')) {
+            return context.report({
+              node: node.openingElement,
+              messageId: 'noReadOnly'
+            });
+          }
+        }
+      }
+    };
+  }
+});
+export default rule;

package/dist/es2019/rules/no-unsafe-design-token-usage/index.js

@@ -4,7 +4,8 @@ import tokenDefaultValues from '@atlaskit/tokens/token-default-values';
 import { getTokenId } from '@atlaskit/tokens/token-ids';
 import tokens from '@atlaskit/tokens/token-names';
 import { createLintRule } from '../utils/create-rule';
-import { isDecendantOfStyleBlock, isDecendantOfStyleJsxAttribute } from '../utils/is-node';
+import { isDecendantOfStyleJsxAttribute } from '../utils/is-decendant-of-style-jsx-attribute';
+import { isDecendantOfStyleBlock } from '../utils/is-node';
 import { isToken } from '../utils/is-token';
 const rule = createLintRule({
   meta: {

package/dist/es2019/rules/no-unsafe-style-overrides/index.js

@@ -1,7 +1,7 @@
 import { isNodeOfType } from 'eslint-codemod-utils';
 import { getSourceCode } from '@atlaskit/eslint-utils/context-compat';
 import { createLintRule } from '../utils/create-rule';
-import { getModuleOfIdentifier } from '../utils/get-import-node-by-source';
+import { getModuleOfIdentifier } from '../utils/get-module-of-identifier';
 import { getJSXElementName } from '../utils/jsx';
 const unsafeOverrides = ['css', 'className', 'theme', 'cssFn', 'styles'];
 const rule = createLintRule({

package/dist/es2019/rules/prefer-primitives/utils.js

@@ -1,5 +1,5 @@
 import { isNodeOfType } from 'eslint-codemod-utils';
-export const validPrimitiveElements = new Set(['div', 'span', 'article', 'aside', 'dialog', 'footer', 'header', 'li', 'main', 'nav', 'ol', 'section', 'ul', 'button']);
+import { validPrimitiveElements } from './valid-primitive-elements';
 const getChildrenByType = (node, types) => {
   return node.children.filter(child => {
     return types.find(type => isNodeOfType(child, type));

package/dist/es2019/rules/prefer-primitives/valid-primitive-elements.js

@@ -0,0 +1 @@
+export const validPrimitiveElements = new Set(['div', 'span', 'article', 'aside', 'dialog', 'footer', 'header', 'li', 'main', 'nav', 'ol', 'section', 'ul', 'button']);

package/dist/es2019/rules/use-heading/index.js

@@ -1,7 +1,7 @@
 import { createLintRule } from '../utils/create-rule';
 import { errorBoundary } from '../utils/error-boundary';
 import { getConfig } from './config';
-import { NativeElements } from './transformers';
+import { NativeElements } from './transformers/native-elements';
 const docsUrl = 'https://atlassian.design/components/heading';
 const rule = createLintRule({
   meta: {

package/dist/es2019/rules/use-heading/transformers/allowed-attrs.js

@@ -0,0 +1 @@
+export const allowedAttrs = ['id', 'data-testid', 'key'];

package/dist/es2019/rules/use-heading/transformers/common.js

@@ -1,9 +1 @@
-import * as ast from '../../../ast-nodes';
-// Rename data-testid prop to testId if present
-export function updateTestIdAttributeFix(node, fixer) {
-  const testIdAttr = ast.JSXElement.getAttributeByName(node, 'data-testid');
-  if (testIdAttr) {
-    return ast.JSXAttribute.updateName(testIdAttr, 'testId', fixer);
-  }
-}
-export const allowedAttrs = ['id', 'data-testid', 'key'];
+export {};

package/dist/es2019/rules/use-heading/transformers/native-elements.js

@@ -1,8 +1,10 @@
 /* eslint-disable @repo/internal/react/require-jsdoc */
 
 import { isNodeOfType } from 'eslint-codemod-utils';
-import * as ast from '../../../ast-nodes';
-import { allowedAttrs, updateTestIdAttributeFix } from './common';
+import { JSXElement as JSXElementHelper } from '../../../ast-nodes/jsx-element';
+import { Root } from '../../../ast-nodes/root';
+import { allowedAttrs } from './allowed-attrs';
+import { updateTestIdAttributeFix } from './update-test-id-attribute-fix';
 const tagSizeMap = {
   h1: 'xlarge',
   h2: 'large',
@@ -66,7 +68,7 @@ export const NativeElements = {
         success: false
       };
     }
-    const elementName = ast.JSXElement.getName(node);
+    const elementName = JSXElementHelper.getName(node);
     if (!Object.keys(tagSizeMap).includes(elementName)) {
       return {
         success: false
@@ -86,7 +88,7 @@ export const NativeElements = {
         autoFixable: false
       };
     }
-    const siblings = ast.JSXElement.getChildren(node.parent);
+    const siblings = JSXElementHelper.getChildren(node.parent);
     if (siblings.length > 1) {
       var _siblings$0$range, _node$range, _siblings$0$range2, _node$range2;
       // Only report if element is first child element
@@ -97,7 +99,7 @@ export const NativeElements = {
         };
       }
     }
-    if (!ast.JSXElement.hasAllowedAttrsOnly(node, allowedAttrs)) {
+    if (!JSXElementHelper.hasAllowedAttrsOnly(node, allowedAttrs)) {
       return {
         success: true,
         autoFixable: false
@@ -113,14 +115,14 @@ export const NativeElements = {
   }) {
     return fixer => {
       // change to default import
-      const importFix = ast.Root.upsertDefaultImportDeclaration({
+      const importFix = Root.upsertDefaultImportDeclaration({
         module: '@atlaskit/heading',
         localName: 'Heading'
       }, context, fixer);
-      const elementName = ast.JSXElement.getName(node);
-      const elementNameFixes = ast.JSXElement.updateName(node, 'Heading', fixer);
+      const elementName = JSXElementHelper.getName(node);
+      const elementNameFixes = JSXElementHelper.updateName(node, 'Heading', fixer);
       const size = tagSizeMap[elementName];
-      const asAttributeFix = ast.JSXElement.addAttribute(node, 'size', size, fixer);
+      const asAttributeFix = JSXElementHelper.addAttribute(node, 'size', size, fixer);
       const testAttributeFix = updateTestIdAttributeFix(node, fixer);
       return [importFix, ...elementNameFixes, asAttributeFix, testAttributeFix].filter(fix => Boolean(fix)); // Some of the transformers can return arrays with undefined, so filter them out
     };

package/dist/es2019/rules/use-heading/transformers/update-test-id-attribute-fix.js

@@ -0,0 +1,10 @@
+import { JSXAttribute } from '../../../ast-nodes/jsx-attribute';
+import { JSXElement as JSXElementHelper } from '../../../ast-nodes/jsx-element';
+
+// Rename data-testid prop to testId if present
+export function updateTestIdAttributeFix(node, fixer) {
+  const testIdAttr = JSXElementHelper.getAttributeByName(node, 'data-testid');
+  if (testIdAttr) {
+    return JSXAttribute.updateName(testIdAttr, 'testId', fixer);
+  }
+}

package/dist/es2019/rules/use-href-in-link-item/get-unique-button-item-name.js

@@ -0,0 +1,16 @@
+import { hasImportOfName } from './has-import-of-name';
+export const getUniqueButtonItemName = (menuNode, importDeclarations) => {
+  // Remove menu import node from array
+  const allImportDeclarationsButMenu = importDeclarations.filter(i => i !== menuNode);
+  let currentButtonItemNameExistsOtherThanMenu = allImportDeclarationsButMenu.reduce((acc, importNode) => acc || hasImportOfName(importNode, 'ButtonItem'), false);
+  if (currentButtonItemNameExistsOtherThanMenu) {
+    let suffix = 1;
+    while (currentButtonItemNameExistsOtherThanMenu) {
+      suffix += 1;
+      currentButtonItemNameExistsOtherThanMenu = allImportDeclarationsButMenu.reduce((acc, importNode) => acc || hasImportOfName(importNode, `ButtonItem${suffix}`), false);
+    }
+    return `ButtonItem${suffix}`;
+  } else {
+    return 'ButtonItem';
+  }
+};

package/dist/es2019/rules/use-href-in-link-item/has-import-of-name.js

@@ -0,0 +1,11 @@
+export const hasImportOfName = (node, name) => {
+  return node.specifiers.some(
+  // This should not be an `any`. This is an array of `ImportSpecifier |
+  // ImportDefaultSpecifier`. For some reason, filtering this way still
+  // results in an error of `specifier.imported` doesn't exist on
+  // ImportDefaultSpecifier, which is exactly what I'm filtering for
+  specifier => {
+    var _specifier$imported;
+    return (specifier === null || specifier === void 0 ? void 0 : (_specifier$imported = specifier.imported) === null || _specifier$imported === void 0 ? void 0 : _specifier$imported.name) === name;
+  });
+};

package/dist/es2019/rules/use-href-in-link-item/index.js

@@ -2,7 +2,11 @@ import { isNodeOfType } from 'eslint-codemod-utils';
 import { getScope } from '@atlaskit/eslint-utils/context-compat';
 import { createLintRule } from '../utils/create-rule';
 import { getImportName } from '../utils/get-import-name';
-import { getUniqueButtonItemName, hasImportOfName, hrefHasInvalidValue, insertButtonItemDefaultImport, insertButtonItemImport } from './utils';
+import { getUniqueButtonItemName } from './get-unique-button-item-name';
+import { hasImportOfName } from './has-import-of-name';
+import { insertButtonItemDefaultImport } from './insert-button-item-default-import';
+import { insertButtonItemImport } from './insert-button-item-import';
+import { hrefHasInvalidValue } from './utils';
 export const hrefRequiredSuggestionText = 'Convert LinkItem to ButtonItem';
 const rule = createLintRule({
   meta: {

package/dist/es2019/rules/use-href-in-link-item/insert-button-item-default-import.js

@@ -0,0 +1 @@
+export const insertButtonItemDefaultImport = (fixer, node) => fixer.insertTextBefore(node, `import ButtonItem from '@atlaskit/menu/button-item';\n`);

package/dist/es2019/rules/use-href-in-link-item/insert-button-item-import.js

@@ -0,0 +1,4 @@
+export const insertButtonItemImport = (fixer, node, uniqueButtonItemName) => {
+  const insertedImport = uniqueButtonItemName !== 'ButtonItem' ? `, ButtonItem as ${uniqueButtonItemName}` : ', ButtonItem';
+  return fixer.insertTextAfter(node.specifiers.slice(-1)[0], insertedImport);
+};

package/dist/es2019/rules/use-href-in-link-item/utils.js

@@ -40,35 +40,4 @@ export const hrefHasInvalidValue = (scope, href) => {
     }
   }
   return false;
-};
-export const hasImportOfName = (node, name) => {
-  return node.specifiers.some(
-  // This should not be an `any`. This is an array of `ImportSpecifier |
-  // ImportDefaultSpecifier`. For some reason, filtering this way still
-  // results in an error of `specifier.imported` doesn't exist on
-  // ImportDefaultSpecifier, which is exactly what I'm filtering for
-  specifier => {
-    var _specifier$imported;
-    return (specifier === null || specifier === void 0 ? void 0 : (_specifier$imported = specifier.imported) === null || _specifier$imported === void 0 ? void 0 : _specifier$imported.name) === name;
-  });
-};
-export const insertButtonItemDefaultImport = (fixer, node) => fixer.insertTextBefore(node, `import ButtonItem from '@atlaskit/menu/button-item';\n`);
-export const getUniqueButtonItemName = (menuNode, importDeclarations) => {
-  // Remove menu import node from array
-  const allImportDeclarationsButMenu = importDeclarations.filter(i => i !== menuNode);
-  let currentButtonItemNameExistsOtherThanMenu = allImportDeclarationsButMenu.reduce((acc, importNode) => acc || hasImportOfName(importNode, 'ButtonItem'), false);
-  if (currentButtonItemNameExistsOtherThanMenu) {
-    let suffix = 1;
-    while (currentButtonItemNameExistsOtherThanMenu) {
-      suffix += 1;
-      currentButtonItemNameExistsOtherThanMenu = allImportDeclarationsButMenu.reduce((acc, importNode) => acc || hasImportOfName(importNode, `ButtonItem${suffix}`), false);
-    }
-    return `ButtonItem${suffix}`;
-  } else {
-    return 'ButtonItem';
-  }
-};
-export const insertButtonItemImport = (fixer, node, uniqueButtonItemName) => {
-  const insertedImport = uniqueButtonItemName !== 'ButtonItem' ? `, ButtonItem as ${uniqueButtonItemName}` : ', ButtonItem';
-  return fixer.insertTextAfter(node.specifiers.slice(-1)[0], insertedImport);
 };

package/dist/es2019/rules/use-latest-xcss-syntax/index.js

@@ -1,5 +1,5 @@
 import { createLintRule } from '../utils/create-rule';
-import { StyleProperty } from './transformers';
+import { StyleProperty } from './transformers/style-property';
 export const noRawSpacingValues = `Don't use non-token values in padding or margin. There is ongoing work to make this a TypeScript error. Once that happens, you will have to delete/refactor anyway. Atlassians: See https://go.atlassian.com/xcss-spacing for details.`;
 const rule = createLintRule({
   meta: {

package/dist/es2019/rules/use-latest-xcss-syntax/transformers/style-property/index.js

@@ -2,7 +2,9 @@
 
 import { isNodeOfType } from 'eslint-codemod-utils';
 import { getSourceCode } from '@atlaskit/eslint-utils/context-compat';
-import * as ast from '../../../../ast-nodes';
+import { Import } from '../../../../ast-nodes/import';
+import { ObjectEntry as ObjectEntryHelper } from '../../../../ast-nodes/object-entry';
+import { Root } from '../../../../ast-nodes/root';
 import { styleMap } from './style-map';
 import supported from './supported';
 const messageId = 'noRawSpacingValues';
@@ -33,9 +35,9 @@ export const StyleProperty = {
         ref: undefined
       };
     }
-    const importDeclarations = ast.Root.findImportsByModule(getSourceCode(context).ast.body, '@atlaskit/primitives');
+    const importDeclarations = Root.findImportsByModule(getSourceCode(context).ast.body, '@atlaskit/primitives');
     const isXcssImported = importDeclarations.some(importDeclaration => {
-      return ast.Import.containsNamedSpecifier(importDeclaration, 'xcss');
+      return Import.containsNamedSpecifier(importDeclaration, 'xcss');
     });
     if (!isXcssImported) {
       return {
@@ -68,7 +70,7 @@ export const StyleProperty = {
     }
     const {
       value: property
-    } = ast.ObjectEntry.getProperty(node);
+    } = ObjectEntryHelper.getProperty(node);
 
     // Bail if the property is not `padding`, `margin`, etc
     if (!property || !styleMap.includes(property)) {
@@ -77,7 +79,7 @@ export const StyleProperty = {
         ref: undefined
       };
     }
-    const value = ast.ObjectEntry.getValue(node);
+    const value = ObjectEntryHelper.getValue(node);
     if (typeof value !== 'string') {
       return {
         success: false,

package/dist/es2019/rules/use-latest-xcss-syntax-typography/index.js

@@ -1,7 +1,9 @@
 import { createLintRule } from '../utils/create-rule';
 import { errorBoundary } from '../utils/error-boundary';
 import { getConfig, PATTERNS } from './config';
-import { RestrictedCapitalisation, RestrictedProperty, WrappedTokenValue } from './linters';
+import { RestrictedCapitalisation } from './linters/restricted-capitalisation';
+import { RestrictedProperty } from './linters/restricted-property';
+import { WrappedTokenValue } from './linters/wrapped-token-value';
 const typescriptErrorMessage = 'There is ongoing work to make this a TypeScript error. Once that happens, you will have to delete/refactor anyway.';
 const rule = createLintRule({
   meta: {

package/dist/es2019/rules/use-primitives/index.js

@@ -1,6 +1,7 @@
 import { createLintRule } from '../utils/create-rule';
 import { getConfig, VALID_PATTERNS } from './config';
-import { CompiledStyled, EmotionCSS } from './transformers';
+import { CompiledStyled } from './transformers/compiled-styled';
+import { EmotionCSS } from './transformers/emotion-css';
 const boxDocsUrl = 'https://atlassian.design/components/primitives/box';
 const rule = createLintRule({
   meta: {

package/dist/es2019/rules/use-primitives/transformers/compiled-styled/{supported.js → attributes.js}

@@ -1,4 +1,3 @@
-export const elements = ['div'];
 export const attributes = ['css'
 // 'data-testid'
 ];

package/dist/es2019/rules/use-primitives/transformers/compiled-styled/convert-jsx-call-site.js

@@ -1,5 +1,5 @@
 import { isNodeOfType } from 'eslint-codemod-utils';
-import * as ast from '../../../../ast-nodes';
+import { JSXElement as JSXElementHelper } from '../../../../ast-nodes/jsx-element';
 
 /**
  * Transforms a JSXElement from:
@@ -20,7 +20,7 @@ export const convertJsxCallSite = (jsxElement, newStylesVariableName, fixer) =>
 
   // renames the JSX call site
   if (isNodeOfType(jsxElement, 'JSXElement')) {
-    fixes.push(...ast.JSXElement.updateName(jsxElement, 'Box', fixer));
+    fixes.push(...JSXElementHelper.updateName(jsxElement, 'Box', fixer));
   }
 
   // adds xcss prop

package/dist/es2019/rules/use-primitives/transformers/compiled-styled/elements.js

@@ -0,0 +1 @@
+export const elements = ['div'];

package/dist/es2019/rules/use-primitives/transformers/compiled-styled/find-valid-styled-component-call.js

@@ -1,5 +1,5 @@
 import { closestOfType, isNodeOfType } from 'eslint-codemod-utils';
-import * as supported from './supported';
+import { elements } from './elements';
 
 /**
  * returns a variable reference if preconditions are favourable for
@@ -41,7 +41,7 @@ const isStyledCallExpression = call => {
   if (!isNodeOfType(call.callee.object, 'Identifier') || !isNodeOfType(call.callee.property, 'Identifier')) {
     return false;
   }
-  if (/^styled2?$/.test(call.callee.object.name) && supported.elements.includes(call.callee.property.name)) {
+  if (/^styled2?$/.test(call.callee.object.name) && elements.includes(call.callee.property.name)) {
     return true;
   }
   return false;

package/dist/es2019/rules/use-primitives/transformers/compiled-styled/index.js

@@ -2,8 +2,9 @@
 
 import { isNodeOfType } from 'eslint-codemod-utils';
 import { getScope, getSourceCode } from '@atlaskit/eslint-utils/context-compat';
-import * as ast from '../../../../ast-nodes';
-import { isValidCssPropertiesToTransform } from '../../utils';
+import { JSXElement as JSXElementHelper } from '../../../../ast-nodes/jsx-element';
+import { Root } from '../../../../ast-nodes/root';
+import { isValidCssPropertiesToTransform } from '../../utils/is-valid-css-properties-to-transform';
 import { validateStyles } from '../../utils/validate-styles';
 import { convertJsxCallSite } from './convert-jsx-call-site';
 import { convertStyledComponentToXcss } from './convert-styled-component-call-to-jsx';
@@ -33,7 +34,7 @@ export const CompiledStyled = {
       node: refs.styles,
       messageId: 'preferPrimitivesBox',
       suggest: [{
-        desc: `Convert ${ast.JSXElement.getName(refs.jsxElement)} to Box`,
+        desc: `Convert ${JSXElementHelper.getName(refs.jsxElement)} to Box`,
         fix: CompiledStyled._fix(refs, context)
       }]
     });
@@ -70,7 +71,7 @@ export const CompiledStyled = {
         success: false
       };
     }
-    const importDeclaration = ast.Root.findImportsByModule(getSourceCode(context).ast.body, '@atlaskit/primitives');
+    const importDeclaration = Root.findImportsByModule(getSourceCode(context).ast.body, '@atlaskit/primitives');
 
     // If there is more than one `@atlaskit/primitives` import, then it becomes difficult to determine which import to transform
     if (importDeclaration.length > 1) {
@@ -97,7 +98,7 @@ export const CompiledStyled = {
       if (!calculatedStylesVariableName) {
         return [];
       }
-      const importFixes = ast.Root.upsertNamedImportDeclaration({
+      const importFixes = Root.upsertNamedImportDeclaration({
         module: '@atlaskit/primitives',
         specifiers: ['Box', 'xcss']
       }, context, fixer);

package/dist/es2019/rules/use-primitives/transformers/css-to-xcss.js

@@ -1,7 +1,12 @@
 import { getIdentifierInParentScope, identifier, isNodeOfType, literal } from 'eslint-codemod-utils';
 import { getScope } from '@atlaskit/eslint-utils/context-compat';
-import { allSpaceMap, positiveSpaceMap } from '../../../common/token-maps.partial';
-import { getAttributeValueIdentifier, getFunctionArgumentAtPos, getJSXAttributeByName, getVariableDefinitionValue } from '../utils';
+import { getAttributeValueIdentifier } from '../utils/get-attribute-value-identifier';
+import { getFunctionArgumentAtPos } from '../utils/get-function-argument-at-pos';
+import { getJSXAttributeByName } from '../utils/get-jsx-attribute-by-name';
+import { getVariableDefinitionValue } from '../utils/get-variable-definition-value';
+import { spaceTokenMap } from './space-token-map';
+import { spaceTokenPositiveMap } from './space-token-positive-map';
+import { supportedDimensionAttributesMap } from './supported-dimension-attributes-map';
 export const cssToXcssTransformer = (node, context, fixer) => {
   /**
    * Note: The logic here is very similar to the logic in `shouldSuggestBox`. i.e.
@@ -66,19 +71,6 @@ export const styledObjectToXcssTokens = (styles, fixer) => {
     }
   });
 };
-export const spaceTokenMap = allSpaceMap;
-export const spaceTokenPositiveMap = positiveSpaceMap;
-export const dimensionsMap = {
-  '100%': '100%'
-};
-export const supportedDimensionAttributesMap = {
-  width: dimensionsMap,
-  height: dimensionsMap,
-  minWidth: dimensionsMap,
-  minHeight: dimensionsMap,
-  maxWidth: dimensionsMap,
-  maxHeight: dimensionsMap
-};
 export const supportedStylesMap = {
   padding: spaceTokenPositiveMap,
   paddingBlock: spaceTokenPositiveMap,

package/dist/es2019/rules/use-primitives/transformers/dimensions-map.js

@@ -0,0 +1,3 @@
+export const dimensionsMap = {
+  '100%': '100%'
+};

package/dist/es2019/rules/use-primitives/transformers/emotion-css/{supported.js → attributes.js}

@@ -1,4 +1,3 @@
-export const elements = ['div'];
 export const attributes = ['css'
 // 'data-testid'
 ];

package/dist/es2019/rules/use-primitives/transformers/emotion-css/elements.js

@@ -0,0 +1 @@
+export const elements = ['div'];

package/dist/es2019/rules/use-primitives/transformers/emotion-css/index.js

@@ -2,11 +2,17 @@
 
 import { getIdentifierInParentScope, isNodeOfType } from 'eslint-codemod-utils';
 import { getScope, getSourceCode } from '@atlaskit/eslint-utils/context-compat';
-import * as ast from '../../../../ast-nodes';
-import { getVariableDefinitionValue, getVariableUsagesCount, isValidCssPropertiesToTransform } from '../../utils';
+import { FunctionCall } from '../../../../ast-nodes/function-call';
+import { JSXAttribute as JSXAttributeHelper } from '../../../../ast-nodes/jsx-attribute';
+import { JSXElement as JSXElementHelper } from '../../../../ast-nodes/jsx-element';
+import { Root } from '../../../../ast-nodes/root';
+import { getVariableDefinitionValue } from '../../utils/get-variable-definition-value';
+import { getVariableUsagesCount } from '../../utils/get-variable-usage-count';
+import { isValidCssPropertiesToTransform } from '../../utils/is-valid-css-properties-to-transform';
 import { validateStyles } from '../../utils/validate-styles';
 import { cssToXcssTransformer } from '../css-to-xcss';
-import * as supported from './supported';
+import { attributes } from './attributes';
+import { elements } from './elements';
 export const EmotionCSS = {
   lint(node, {
     context,
@@ -44,29 +50,29 @@ export const EmotionCSS = {
     if (!isNodeOfType(node, 'JSXElement')) {
       return false;
     }
-    const elementName = ast.JSXElement.getName(node);
+    const elementName = JSXElementHelper.getName(node);
     if (!elementName) {
       return false;
     }
 
     // Currently we only support `div`. This may change in future.
-    if (!supported.elements.includes(elementName)) {
+    if (!elements.includes(elementName)) {
       return false;
     }
 
     // Ignore elements that contain dangerous attributes like `id`.
-    if (!ast.JSXElement.hasAllowedAttrsOnly(node, supported.attributes)) {
+    if (!JSXElementHelper.hasAllowedAttrsOnly(node, attributes)) {
       return false;
     }
 
     // Currently we don't transform anything to `Box` unless it defines styles
-    const cssAttr = ast.JSXElement.getAttributeByName(node, 'css');
+    const cssAttr = JSXElementHelper.getAttributeByName(node, 'css');
     if (!cssAttr) {
       return false;
     }
 
     // Get `myStyles` in `css={myStyles}` as a string so we can search for the `const myStyles` VariableDefinition
-    const cssAttrValue = ast.JSXAttribute.getValue(cssAttr);
+    const cssAttrValue = JSXAttributeHelper.getValue(cssAttr);
     if ((cssAttrValue === null || cssAttrValue === void 0 ? void 0 : cssAttrValue.type) !== 'ExpressionStatement') {
       return false;
     }
@@ -82,13 +88,13 @@ export const EmotionCSS = {
     const cssVariableDefinition = getIdentifierInParentScope(getScope(context, node), cssAttrValue.value);
     const cssVariableValue = getVariableDefinitionValue(cssVariableDefinition);
     // Check if `cssVariableValue` is a function called `css()`
-    if (ast.FunctionCall.getName(cssVariableValue === null || cssVariableValue === void 0 ? void 0 : cssVariableValue.node.init) !== 'css') {
+    if (FunctionCall.getName(cssVariableValue === null || cssVariableValue === void 0 ? void 0 : cssVariableValue.node.init) !== 'css') {
       return false;
     }
     if (!(config.patterns.includes('string-style-property-fix') ? validateStyles(cssVariableValue === null || cssVariableValue === void 0 ? void 0 : cssVariableValue.node.init, config) : isValidCssPropertiesToTransform(cssVariableValue === null || cssVariableValue === void 0 ? void 0 : cssVariableValue.node.init, config))) {
       return false;
     }
-    const importDeclaration = ast.Root.findImportsByModule(getSourceCode(context).ast.body, '@atlaskit/primitives');
+    const importDeclaration = Root.findImportsByModule(getSourceCode(context).ast.body, '@atlaskit/primitives');
 
     // If there is more than one `@atlaskit/primitives` import, then it becomes difficult to determine which import to transform
     if (importDeclaration.length > 1) {
@@ -100,13 +106,13 @@ export const EmotionCSS = {
     context
   }) {
     return fixer => {
-      const importFix = ast.Root.upsertNamedImportDeclaration({
+      const importFix = Root.upsertNamedImportDeclaration({
         module: '@atlaskit/primitives',
         specifiers: ['Box', 'xcss']
       }, context, fixer);
-      const cssAttr = ast.JSXElement.getAttributeByName(node, 'css'); // Can strongly assert the type here, because we validated it exists in `check()`.
-      const attributeFix = ast.JSXAttribute.updateName(cssAttr, 'xcss', fixer);
-      const elementNameFixes = ast.JSXElement.updateName(node, 'Box', fixer);
+      const cssAttr = JSXElementHelper.getAttributeByName(node, 'css'); // Can strongly assert the type here, because we validated it exists in `check()`.
+      const attributeFix = JSXAttributeHelper.updateName(cssAttr, 'xcss', fixer);
+      const elementNameFixes = JSXElementHelper.updateName(node, 'Box', fixer);
       const cssToXcssTransform = cssToXcssTransformer(node, context, fixer);
       return [importFix, attributeFix, ...elementNameFixes, ...cssToXcssTransform].filter(fix => Boolean(fix)); // Some of the transformers can return arrays with undefined, so filter them out
     };

package/dist/es2019/rules/use-primitives/transformers/space-token-map.js

@@ -0,0 +1,2 @@
+import { allSpaceMap } from '../../../common/token-maps.partial';
+export const spaceTokenMap = allSpaceMap;

package/dist/es2019/rules/use-primitives/transformers/space-token-positive-map.js

@@ -0,0 +1,2 @@
+import { positiveSpaceMap } from '../../../common/token-maps.partial';
+export const spaceTokenPositiveMap = positiveSpaceMap;