@atlaskit/eslint-plugin-design-system 9.2.5 → 9.3.1

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

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::d1c25758089a050334359276ede0ca3a>>
+ * @codegen <<SignedSource::eb5c94901f711e67446ba88f0630bf76>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import consistentCssPropUsage from './consistent-css-prop-usage';
@@ -28,6 +28,7 @@ import noUnsupportedDragAndDropLibraries from './no-unsupported-drag-and-drop-li
 import preferPrimitives from './prefer-primitives';
 import useButtonGroupLabel from './use-button-group-label';
 import useDrawerLabel from './use-drawer-label';
+import useHeading from './use-heading';
 import useHeadingLevelInSpotlightCard from './use-heading-level-in-spotlight-card';
 import useHrefInLinkItem from './use-href-in-link-item';
 import usePrimitives from './use-primitives';
@@ -61,6 +62,7 @@ export default {
   'prefer-primitives': preferPrimitives,
   'use-button-group-label': useButtonGroupLabel,
   'use-drawer-label': useDrawerLabel,
+  'use-heading': useHeading,
   'use-heading-level-in-spotlight-card': useHeadingLevelInSpotlightCard,
   'use-href-in-link-item': useHrefInLinkItem,
   'use-primitives': usePrimitives,

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

@@ -0,0 +1,9 @@
+const defaults = {
+  patterns: ['native-elements']
+};
+export const getConfig = overrides => {
+  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
+  // start with an empty object, then merge in the defaults, then merge in overrides.
+  // The empty object is returned, as well as modified in place
+  return Object.assign({}, defaults, overrides);
+};

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

@@ -0,0 +1,33 @@
+import { createLintRule } from '../utils/create-rule';
+import { getConfig } from './config';
+import { NativeElements } from './transformers';
+const docsUrl = 'https://atlassian.design/components/heading';
+const rule = createLintRule({
+  meta: {
+    name: 'use-heading',
+    type: 'suggestion',
+    fixable: 'code',
+    hasSuggestions: true,
+    docs: {
+      description: 'Encourage the usage of heading components.',
+      recommended: false,
+      severity: 'warn'
+    },
+    messages: {
+      preferHeading: `This element can be replaced with a "Heading" component. See ${docsUrl} for additional guidance.`
+    }
+  },
+  create(context) {
+    const config = getConfig(context.options[0]);
+    return {
+      // transforms <h1>...</h1> usages
+      'JSXElement[openingElement.name.name=/^h[0-6]$/]': node => {
+        return NativeElements.lint(node, {
+          context,
+          config
+        });
+      }
+    };
+  }
+});
+export default rule;

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

@@ -0,0 +1,9 @@
+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'];

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

@@ -0,0 +1 @@
+export { NativeElements } from './native-elements';

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

@@ -0,0 +1,89 @@
+/* eslint-disable @repo/internal/react/require-jsdoc */
+
+import { isNodeOfType } from 'eslint-codemod-utils';
+import * as ast from '../../../ast-nodes';
+import { allowedAttrs, updateTestIdAttributeFix } from './common';
+const tagSizeMap = {
+  h1: 'xlarge',
+  h2: 'large',
+  h3: 'medium',
+  h4: 'small',
+  h5: 'xsmall',
+  h6: 'xxsmall'
+};
+export const NativeElements = {
+  lint(node, {
+    context,
+    config
+  }) {
+    // Check whether all criteria needed to make a transformation are met
+    if (!NativeElements._check(node, {
+      context,
+      config
+    })) {
+      return;
+    }
+    context.report({
+      node,
+      messageId: 'preferHeading',
+      suggest: [{
+        desc: 'Convert to Heading',
+        fix: NativeElements._fix(node, {
+          context,
+          config
+        })
+      }]
+    });
+  },
+  _check(node, {
+    config
+  }) {
+    if (!config.patterns.includes('native-elements')) {
+      return false;
+    }
+    if (!isNodeOfType(node, 'JSXElement')) {
+      return false;
+    }
+    if (!node.parent) {
+      return false;
+    }
+    const elementName = ast.JSXElement.getName(node);
+    if (!Object.keys(tagSizeMap).includes(elementName)) {
+      return false;
+    }
+
+    // Element has to be first element of its siblings
+    if (!(isNodeOfType(node.parent, 'JSXElement') || isNodeOfType(node.parent, 'JSXFragment'))) {
+      return false;
+    }
+    const siblings = ast.JSXElement.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
+      if (((_siblings$0$range = siblings[0].range) === null || _siblings$0$range === void 0 ? void 0 : _siblings$0$range[0]) !== ((_node$range = node.range) === null || _node$range === void 0 ? void 0 : _node$range[0]) || ((_siblings$0$range2 = siblings[0].range) === null || _siblings$0$range2 === void 0 ? void 0 : _siblings$0$range2[1]) !== ((_node$range2 = node.range) === null || _node$range2 === void 0 ? void 0 : _node$range2[1])) {
+        return false;
+      }
+    }
+    if (!ast.JSXElement.hasAllowedAttrsOnly(node, allowedAttrs)) {
+      return false;
+    }
+    return true;
+  },
+  _fix(node, {
+    context
+  }) {
+    return fixer => {
+      // change to default import
+      const importFix = ast.Root.upsertDefaultImportDeclaration({
+        module: '@atlaskit/heading',
+        localName: 'Heading'
+      }, context, fixer);
+      const elementName = ast.JSXElement.getName(node);
+      const elementNameFixes = ast.JSXElement.updateName(node, 'Heading', fixer);
+      const size = tagSizeMap[elementName];
+      const asAttributeFix = ast.JSXElement.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-primitives/transformers/compiled-styled/index.js

@@ -8,7 +8,6 @@ import { convertJsxCallSite } from './convert-jsx-call-site';
 import { convertStyledComponentToXcss } from './convert-styled-component-call-to-jsx';
 import { findValidJsxUsageToTransform } from './find-valid-jsx-usage-to-transform';
 import { findValidStyledComponentCall } from './find-valid-styled-component-call';
-import { upsertImportDeclaration } from './upsert-import-declaration';
 export const CompiledStyled = {
   lint(node, {
     context,
@@ -97,7 +96,7 @@ export const CompiledStyled = {
       if (!calculatedStylesVariableName) {
         return [];
       }
-      const importFixes = upsertImportDeclaration({
+      const importFixes = ast.Root.upsertNamedImportDeclaration({
         module: '@atlaskit/primitives',
         specifiers: ['Box', 'xcss']
       }, context, fixer);

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

@@ -6,7 +6,6 @@ import { getVariableDefinitionValue, getVariableUsagesCount, isValidCssPropertie
 import { validateStyles } from '../../utils/validate-styles';
 import { cssToXcssTransformer } from '../css-to-xcss';
 import * as supported from './supported';
-import { upsertImportDeclaration } from './upsert-import-declaration';
 export const EmotionCSS = {
   lint(node, {
     context,
@@ -100,7 +99,7 @@ export const EmotionCSS = {
     context
   }) {
     return fixer => {
-      const importFix = upsertImportDeclaration({
+      const importFix = ast.Root.upsertNamedImportDeclaration({
         module: '@atlaskit/primitives',
         specifiers: ['Box', 'xcss']
       }, context, fixer);

package/dist/es2019/rules/use-primitives-text/transformers/emphasis-elements.js

@@ -2,7 +2,6 @@
 
 import { isNodeOfType } from 'eslint-codemod-utils';
 import * as ast from '../../../ast-nodes';
-import { upsertImportDeclaration } from '../../use-primitives/transformers/emotion-css/upsert-import-declaration';
 import { addColorInheritAttributeFix, allowedAttrs, updateTestIdAttributeFix } from './common';
 export const EmphasisElements = {
   lint(node, {
@@ -61,7 +60,7 @@ export const EmphasisElements = {
     config
   }) {
     return fixer => {
-      const importFix = upsertImportDeclaration({
+      const importFix = ast.Root.upsertNamedImportDeclaration({
         module: '@atlaskit/primitives',
         specifiers: ['Text']
       }, context, fixer);

package/dist/es2019/rules/use-primitives-text/transformers/paragraph-elements.js

@@ -2,7 +2,6 @@
 
 import { isNodeOfType } from 'eslint-codemod-utils';
 import * as ast from '../../../ast-nodes';
-import { upsertImportDeclaration } from '../../use-primitives/transformers/emotion-css/upsert-import-declaration';
 import { addColorInheritAttributeFix, allowedAttrs, updateTestIdAttributeFix } from './common';
 export const ParagraphElements = {
   lint(node, {
@@ -155,7 +154,7 @@ export const ParagraphElements = {
     config
   }) {
     return fixer => {
-      const importFix = upsertImportDeclaration({
+      const importFix = ast.Root.upsertNamedImportDeclaration({
         module: '@atlaskit/primitives',
         specifiers: ['Text']
       }, context, fixer);
@@ -175,7 +174,7 @@ export const ParagraphElements = {
       if (!isNodeOfType(node.parent, 'JSXElement') || !node.parent.closingElement) {
         return [];
       }
-      const importFix = upsertImportDeclaration({
+      const importFix = ast.Root.upsertNamedImportDeclaration({
         module: '@atlaskit/primitives',
         specifiers: ['Text', 'Stack']
       }, context, fixer);

package/dist/es2019/rules/use-primitives-text/transformers/span-elements.js

@@ -2,7 +2,6 @@
 
 import { isNodeOfType } from 'eslint-codemod-utils';
 import * as ast from '../../../ast-nodes';
-import { upsertImportDeclaration } from '../../use-primitives/transformers/emotion-css/upsert-import-declaration';
 import { addColorInheritAttributeFix, allowedAttrs, hasTextChildrenOnly, updateTestIdAttributeFix } from './common';
 export const SpanElements = {
   lint(node, {
@@ -66,7 +65,7 @@ export const SpanElements = {
     config
   }) {
     return fixer => {
-      const importFix = upsertImportDeclaration({
+      const importFix = ast.Root.upsertNamedImportDeclaration({
         module: '@atlaskit/primitives',
         specifiers: ['Text']
       }, context, fixer);

package/dist/es2019/rules/use-primitives-text/transformers/strong-elements.js

@@ -2,7 +2,6 @@
 
 import { isNodeOfType } from 'eslint-codemod-utils';
 import * as ast from '../../../ast-nodes';
-import { upsertImportDeclaration } from '../../use-primitives/transformers/emotion-css/upsert-import-declaration';
 import { addColorInheritAttributeFix, allowedAttrs, updateTestIdAttributeFix } from './common';
 export const StrongElements = {
   lint(node, {
@@ -61,7 +60,7 @@ export const StrongElements = {
     config
   }) {
     return fixer => {
-      const importFix = upsertImportDeclaration({
+      const importFix = ast.Root.upsertNamedImportDeclaration({
         module: '@atlaskit/primitives',
         specifiers: ['Text']
       }, context, fixer);

package/dist/es2019/rules/use-tokens-space/transformers/style-property/index.js

@@ -5,7 +5,6 @@ import * as ast from '../../../../ast-nodes';
 import { isStringOrNumber } from '../../utils';
 import { styleMap } from './style-map';
 import supported from './supported';
-import { upsertImportDeclaration } from './upsert-import-declaration';
 const messageId = 'noRawSpacingValues';
 export const StyleProperty = {
   lint(node, {
@@ -109,7 +108,7 @@ export const StyleProperty = {
    */
   _fix(ref, context) {
     return fixer => {
-      const importFix = upsertImportDeclaration({
+      const importFix = ast.Root.upsertNamedImportDeclaration({
         module: '@atlaskit/tokens',
         specifiers: ['token']
       }, context, fixer);

package/dist/es2019/rules/utils/create-no-tagged-template-expression-rule/index.js

@@ -2,7 +2,7 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
 
 import esquery from 'esquery';
-import { getImportSources, isEmotion, isStyledComponents } from '@atlaskit/eslint-utils/is-supported-import';
+import { getImportSources, isEmotion } from '@atlaskit/eslint-utils/is-supported-import';
 import { generate } from './generate';
 import { getTaggedTemplateExpressionOffset } from './get-tagged-template-expression-offset';
 import { toArguments } from './to-arguments';
@@ -60,11 +60,23 @@ export const createNoTaggedTemplateExpressionRule = (isUsage, messageId) => cont
             return;
           }
           const args = toArguments(source, quasi);
-          if (isStyledComponents(node.tag, references, importSources) && args.some(hasMixinInsideNestedSelector)) {
+          if (args.some(hasNestedSelectorWithMultipleArguments)) {
             /**
-             * Styled components doesn't support arrays as style object values,
-             * so we cannot autofix mixins as we cannot combine them with the other
-             * properties in the object.
+             * We don't want to autofix if we would produce an array value, for example:
+             * ```
+             * styled.div({
+             *  ':hover': [
+             *    mixin,
+             *    {
+             *      color: 'red'
+             *    }
+             *  ]
+             * })
+             * ```
+             *
+             * This should only occur if there is a mixin in a nested selector.
+             *
+             * The array syntax is only supported by emotion.
              */
             return;
           }
@@ -136,17 +148,17 @@ export const createNoTaggedTemplateExpressionRule = (isUsage, messageId) => cont
     }
   };
 };
-function hasMixinInsideNestedSelector(arg) {
+function hasNestedSelectorWithMultipleArguments(arg) {
   if (arg.type === 'literal' || arg.type === 'expression' || arg.type === 'declaration') {
     return false;
   }
-  if (arg.type === 'rule' && arg.declarations.length > 1 && arg.declarations.some(node => node.type === 'expression')) {
+  if (arg.type === 'rule' && arg.declarations.length > 1) {
     return true;
   }
   if (arg.type === 'block') {
-    return arg.blocks.some(hasMixinInsideNestedSelector);
+    return arg.blocks.some(hasNestedSelectorWithMultipleArguments);
   }
   if (arg.type === 'rule') {
-    return arg.declarations.some(hasMixinInsideNestedSelector);
+    return arg.declarations.some(hasNestedSelectorWithMultipleArguments);
   }
 }

package/dist/es2019/rules/utils/create-rule.js

@@ -1,5 +1,5 @@
 import { ESLintUtils } from '@typescript-eslint/utils';
-// eslint-disable-next-line import/no-extraneous-dependencies
+import { getCreateLintRule, getPathSafeName } from '@atlaskit/eslint-utils/create-rule';
 
 /**
  * We are moving to our own small abstraction to create a lint rule that we have the power
@@ -11,16 +11,14 @@ import { ESLintUtils } from '@typescript-eslint/utils';
  * @deprecated
  */
 export const createRule = ESLintUtils.RuleCreator(name => getRuleUrl(name));
+
 /**
  * Tiny wrapped over the ESLint rule module type that ensures
  * there is a docs link to our ESLint plugin documentation page,
  * as well as improving type support.
  */
-export const createLintRule = rule => {
-  rule.meta.docs.url = getRuleUrl(rule.meta.name);
-  return rule;
-};
+export const createLintRule = getCreateLintRule(getRuleUrl);
 function getRuleUrl(ruleName) {
-  const name = ruleName.replace('/', '-'); // If it's a nested rule, ensure the url is clean and matches codegen/gatsby
+  const name = getPathSafeName(ruleName);
   return `https://atlassian.design/components/eslint-plugin-design-system/${name}/usage`;
 }

package/dist/esm/ast-nodes/root.js

@@ -1,6 +1,7 @@
 /* eslint-disable @repo/internal/react/require-jsdoc */
 
 import { hasImportDeclaration, insertImportDeclaration, isNodeOfType } from 'eslint-codemod-utils';
+import { Import } from './import';
 // Little bit unreadable, but better than duplicating the type
 
 export var Root = {
@@ -24,5 +25,36 @@ export var Root = {
   },
   insertImport: function insertImport(root, data, fixer) {
     return fixer.insertTextBefore(root[0], "".concat(insertImportDeclaration(data.module, data.specifiers), ";\n"));
+  },
+  upsertNamedImportDeclaration: function upsertNamedImportDeclaration(_ref, context, fixer) {
+    var module = _ref.module,
+      specifiers = _ref.specifiers;
+    // Find any imports that match the packageName
+    var root = context.getSourceCode().ast.body;
+    var importDeclarations = this.findImportsByModule(root, module);
+
+    // The named import doesn't exist yet, we can just insert a whole new one
+    if (importDeclarations.length === 0) {
+      return this.insertImport(root, {
+        module: module,
+        specifiers: specifiers
+      }, fixer);
+    }
+
+    // The import exists so, modify the existing one
+    return Import.insertNamedSpecifiers(importDeclarations[0], specifiers, fixer);
+  },
+  upsertDefaultImportDeclaration: function upsertDefaultImportDeclaration(_ref2, context, fixer) {
+    var module = _ref2.module,
+      localName = _ref2.localName;
+    // Find any imports that match the packageName
+    var root = context.getSourceCode().ast.body;
+    var importDeclarations = this.findImportsByModule(root, module);
+
+    // The import already exist exist
+    if (importDeclarations.length > 0) {
+      return undefined;
+    }
+    return fixer.insertTextBefore(root[0], "import ".concat(localName, " from '").concat(module, "';\n"));
   }
 };

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::d95217b658f807294de3c81123068bf1>>
+ * @codegen <<SignedSource::2e2cf6c0ecfe1b01f3eb24caa223f09e>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 export default {
@@ -31,6 +31,7 @@ export default {
     '@atlaskit/design-system/prefer-primitives': 'warn',
     '@atlaskit/design-system/use-button-group-label': 'warn',
     '@atlaskit/design-system/use-drawer-label': 'warn',
+    '@atlaskit/design-system/use-heading': 'warn',
     '@atlaskit/design-system/use-heading-level-in-spotlight-card': 'warn',
     '@atlaskit/design-system/use-href-in-link-item': 'warn',
     '@atlaskit/design-system/use-primitives': 'warn',

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

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::d1c25758089a050334359276ede0ca3a>>
+ * @codegen <<SignedSource::eb5c94901f711e67446ba88f0630bf76>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import consistentCssPropUsage from './consistent-css-prop-usage';
@@ -28,6 +28,7 @@ import noUnsupportedDragAndDropLibraries from './no-unsupported-drag-and-drop-li
 import preferPrimitives from './prefer-primitives';
 import useButtonGroupLabel from './use-button-group-label';
 import useDrawerLabel from './use-drawer-label';
+import useHeading from './use-heading';
 import useHeadingLevelInSpotlightCard from './use-heading-level-in-spotlight-card';
 import useHrefInLinkItem from './use-href-in-link-item';
 import usePrimitives from './use-primitives';
@@ -61,6 +62,7 @@ export default {
   'prefer-primitives': preferPrimitives,
   'use-button-group-label': useButtonGroupLabel,
   'use-drawer-label': useDrawerLabel,
+  'use-heading': useHeading,
   'use-heading-level-in-spotlight-card': useHeadingLevelInSpotlightCard,
   'use-href-in-link-item': useHrefInLinkItem,
   'use-primitives': usePrimitives,

package/dist/esm/rules/use-heading/config/index.js

@@ -0,0 +1,9 @@
+var defaults = {
+  patterns: ['native-elements']
+};
+export var getConfig = function getConfig(overrides) {
+  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
+  // start with an empty object, then merge in the defaults, then merge in overrides.
+  // The empty object is returned, as well as modified in place
+  return Object.assign({}, defaults, overrides);
+};

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

@@ -0,0 +1,33 @@
+import { createLintRule } from '../utils/create-rule';
+import { getConfig } from './config';
+import { NativeElements } from './transformers';
+var docsUrl = 'https://atlassian.design/components/heading';
+var rule = createLintRule({
+  meta: {
+    name: 'use-heading',
+    type: 'suggestion',
+    fixable: 'code',
+    hasSuggestions: true,
+    docs: {
+      description: 'Encourage the usage of heading components.',
+      recommended: false,
+      severity: 'warn'
+    },
+    messages: {
+      preferHeading: "This element can be replaced with a \"Heading\" component. See ".concat(docsUrl, " for additional guidance.")
+    }
+  },
+  create: function create(context) {
+    var config = getConfig(context.options[0]);
+    return {
+      // transforms <h1>...</h1> usages
+      'JSXElement[openingElement.name.name=/^h[0-6]$/]': function JSXElementOpeningElementNameNameH06$(node) {
+        return NativeElements.lint(node, {
+          context: context,
+          config: config
+        });
+      }
+    };
+  }
+});
+export default rule;

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

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

package/dist/esm/rules/use-heading/transformers/index.js

@@ -0,0 +1 @@
+export { NativeElements } from './native-elements';

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

@@ -0,0 +1,89 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+/* eslint-disable @repo/internal/react/require-jsdoc */
+
+import { isNodeOfType } from 'eslint-codemod-utils';
+import * as ast from '../../../ast-nodes';
+import { allowedAttrs, updateTestIdAttributeFix } from './common';
+var tagSizeMap = {
+  h1: 'xlarge',
+  h2: 'large',
+  h3: 'medium',
+  h4: 'small',
+  h5: 'xsmall',
+  h6: 'xxsmall'
+};
+export var NativeElements = {
+  lint: function lint(node, _ref) {
+    var context = _ref.context,
+      config = _ref.config;
+    // Check whether all criteria needed to make a transformation are met
+    if (!NativeElements._check(node, {
+      context: context,
+      config: config
+    })) {
+      return;
+    }
+    context.report({
+      node: node,
+      messageId: 'preferHeading',
+      suggest: [{
+        desc: 'Convert to Heading',
+        fix: NativeElements._fix(node, {
+          context: context,
+          config: config
+        })
+      }]
+    });
+  },
+  _check: function _check(node, _ref2) {
+    var config = _ref2.config;
+    if (!config.patterns.includes('native-elements')) {
+      return false;
+    }
+    if (!isNodeOfType(node, 'JSXElement')) {
+      return false;
+    }
+    if (!node.parent) {
+      return false;
+    }
+    var elementName = ast.JSXElement.getName(node);
+    if (!Object.keys(tagSizeMap).includes(elementName)) {
+      return false;
+    }
+
+    // Element has to be first element of its siblings
+    if (!(isNodeOfType(node.parent, 'JSXElement') || isNodeOfType(node.parent, 'JSXFragment'))) {
+      return false;
+    }
+    var siblings = ast.JSXElement.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
+      if (((_siblings$0$range = siblings[0].range) === null || _siblings$0$range === void 0 ? void 0 : _siblings$0$range[0]) !== ((_node$range = node.range) === null || _node$range === void 0 ? void 0 : _node$range[0]) || ((_siblings$0$range2 = siblings[0].range) === null || _siblings$0$range2 === void 0 ? void 0 : _siblings$0$range2[1]) !== ((_node$range2 = node.range) === null || _node$range2 === void 0 ? void 0 : _node$range2[1])) {
+        return false;
+      }
+    }
+    if (!ast.JSXElement.hasAllowedAttrsOnly(node, allowedAttrs)) {
+      return false;
+    }
+    return true;
+  },
+  _fix: function _fix(node, _ref3) {
+    var context = _ref3.context;
+    return function (fixer) {
+      // change to default import
+      var importFix = ast.Root.upsertDefaultImportDeclaration({
+        module: '@atlaskit/heading',
+        localName: 'Heading'
+      }, context, fixer);
+      var elementName = ast.JSXElement.getName(node);
+      var elementNameFixes = ast.JSXElement.updateName(node, 'Heading', fixer);
+      var size = tagSizeMap[elementName];
+      var asAttributeFix = ast.JSXElement.addAttribute(node, 'size', size, fixer);
+      var testAttributeFix = updateTestIdAttributeFix(node, fixer);
+      return [importFix].concat(_toConsumableArray(elementNameFixes), [asAttributeFix, testAttributeFix]).filter(function (fix) {
+        return Boolean(fix);
+      }); // Some of the transformers can return arrays with undefined, so filter them out
+    };
+  }
+};

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

@@ -9,7 +9,6 @@ import { convertJsxCallSite } from './convert-jsx-call-site';
 import { convertStyledComponentToXcss } from './convert-styled-component-call-to-jsx';
 import { findValidJsxUsageToTransform } from './find-valid-jsx-usage-to-transform';
 import { findValidStyledComponentCall } from './find-valid-styled-component-call';
-import { upsertImportDeclaration } from './upsert-import-declaration';
 export var CompiledStyled = {
   lint: function lint(node, _ref) {
     var context = _ref.context,
@@ -95,7 +94,7 @@ export var CompiledStyled = {
       if (!calculatedStylesVariableName) {
         return [];
       }
-      var importFixes = upsertImportDeclaration({
+      var importFixes = ast.Root.upsertNamedImportDeclaration({
         module: '@atlaskit/primitives',
         specifiers: ['Box', 'xcss']
       }, context, fixer);

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

@@ -7,7 +7,6 @@ import { getVariableDefinitionValue, getVariableUsagesCount, isValidCssPropertie
 import { validateStyles } from '../../utils/validate-styles';
 import { cssToXcssTransformer } from '../css-to-xcss';
 import * as supported from './supported';
-import { upsertImportDeclaration } from './upsert-import-declaration';
 export var EmotionCSS = {
   lint: function lint(node, _ref) {
     var context = _ref.context,
@@ -98,7 +97,7 @@ export var EmotionCSS = {
   _fix: function _fix(node, _ref3) {
     var context = _ref3.context;
     return function (fixer) {
-      var importFix = upsertImportDeclaration({
+      var importFix = ast.Root.upsertNamedImportDeclaration({
         module: '@atlaskit/primitives',
         specifiers: ['Box', 'xcss']
       }, context, fixer);