@atlaskit/eslint-plugin-design-system 9.7.0 → 10.0.0

package/dist/esm/common/token-maps.partial.js

@@ -0,0 +1,42 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::30c84f908843af1f250860b6f3deeea0>>
+ * @codegenId spacing
+ * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen-token-maps
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::55622b91aca9b3afac4bce440f222b71>>
+ */
+export var positiveSpaceMap = {
+  '0px': 'space.0',
+  '2px': 'space.025',
+  '4px': 'space.050',
+  '6px': 'space.075',
+  '8px': 'space.100',
+  '12px': 'space.150',
+  '16px': 'space.200',
+  '20px': 'space.250',
+  '24px': 'space.300',
+  '32px': 'space.400',
+  '40px': 'space.500',
+  '48px': 'space.600',
+  '64px': 'space.800',
+  '80px': 'space.1000'
+};
+export var negativeSpaceMap = {
+  '-2px': 'space.negative.025',
+  '-4px': 'space.negative.050',
+  '-6px': 'space.negative.075',
+  '-8px': 'space.negative.100',
+  '-12px': 'space.negative.150',
+  '-16px': 'space.negative.200',
+  '-20px': 'space.negative.250',
+  '-24px': 'space.negative.300',
+  '-32px': 'space.negative.400'
+};
+export var allSpaceMap = _objectSpread(_objectSpread({}, positiveSpaceMap), negativeSpaceMap);
+
+/**
+ * @codegenEnd
+ */

package/dist/esm/index.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::11fe367c1ab4107f7418a84fa435cc23>>
+ * @codegen <<SignedSource::a1bb0f17560603fa4895326b1d50744e>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import all from './presets/all.codegen';

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::5a5b0ed8cf86631274d7d30df4199e5d>>
+ * @codegen <<SignedSource::0be7639a95bf4c9bbfe00154d8193477>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 export default {
@@ -19,7 +19,8 @@ export default {
     '@atlaskit/design-system/no-empty-styled-expression': 'warn',
     '@atlaskit/design-system/no-exported-css': 'warn',
     '@atlaskit/design-system/no-exported-keyframes': 'warn',
-    '@atlaskit/design-system/no-html-button-element': 'warn',
+    '@atlaskit/design-system/no-html-anchor': 'warn',
+    '@atlaskit/design-system/no-html-button': 'warn',
     '@atlaskit/design-system/no-invalid-css-map': 'error',
     '@atlaskit/design-system/no-keyframes-tagged-template-expression': 'error',
     '@atlaskit/design-system/no-margin': '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::af55c21605e3b8ee7836cb8950a9f713>>
+ * @codegen <<SignedSource::73a3666b244b58cc221eebcda071161d>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 export default {

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::5e5b4678175cdf8209b7e2443bc4abb4>>
+ * @codegen <<SignedSource::9b934590b0ff7880e962fa4dd73bdb0b>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import consistentCssPropUsage from './consistent-css-prop-usage';
@@ -16,7 +16,8 @@ import noDirectUseOfWebPlatformDragAndDrop from './no-direct-use-of-web-platform
 import noEmptyStyledExpression from './no-empty-styled-expression';
 import noExportedCss from './no-exported-css';
 import noExportedKeyframes from './no-exported-keyframes';
-import noHtmlButtonElement from './no-html-button-element';
+import noHtmlAnchor from './no-html-anchor';
+import noHtmlButton from './no-html-button';
 import noInvalidCssMap from './no-invalid-css-map';
 import noKeyframesTaggedTemplateExpression from './no-keyframes-tagged-template-expression';
 import noMargin from './no-margin';
@@ -52,7 +53,8 @@ export default {
   'no-empty-styled-expression': noEmptyStyledExpression,
   'no-exported-css': noExportedCss,
   'no-exported-keyframes': noExportedKeyframes,
-  'no-html-button-element': noHtmlButtonElement,
+  'no-html-anchor': noHtmlAnchor,
+  'no-html-button': noHtmlButton,
   'no-invalid-css-map': noInvalidCssMap,
   'no-keyframes-tagged-template-expression': noKeyframesTaggedTemplateExpression,
   'no-margin': noMargin,

package/dist/esm/rules/no-html-anchor/index.js

@@ -0,0 +1,33 @@
+import { createLintRule } from '../utils/create-rule';
+import { JSXElement as _JSXElement, StyledComponent } from './node-types';
+var rule = createLintRule({
+  meta: {
+    name: 'no-html-anchor',
+    type: 'suggestion',
+    docs: {
+      description: 'Discourage direct usage of HTML anchor elements in favor of Atlassian Design System link components.',
+      recommended: false,
+      severity: 'warn'
+    },
+    messages: {
+      noHtmlAnchor: "This <{{ name }}> should be replaced with a link component from the Atlassian Design System, such as the \"Link\" or \"LinkButton\" component when suitable. For custom links use the \"Anchor\" primitive. ADS links include event tracking, automatic router configuration, ensure accessible implementations, and provide access to ADS styling features like design tokens."
+    }
+  },
+  create: function create(context) {
+    return {
+      // transforms styled.<anchor>(...) usages
+      CallExpression: function CallExpression(node) {
+        StyledComponent.lint(node, {
+          context: context
+        });
+      },
+      // transforms <anchor css={...}> usages
+      JSXElement: function JSXElement(node) {
+        _JSXElement.lint(node, {
+          context: context
+        });
+      }
+    };
+  }
+});
+export default rule;

package/dist/esm/rules/no-html-anchor/node-types/index.js

@@ -0,0 +1,2 @@
+export { StyledComponent } from './styled-component';
+export { JSXElement } from './jsx-element';

package/dist/esm/rules/no-html-anchor/node-types/jsx-element/index.js

@@ -0,0 +1,19 @@
+/* eslint-disable @repo/internal/react/require-jsdoc */
+
+import * as ast from '../../../../ast-nodes';
+import { isSupportedForLint } from '../supported';
+export var JSXElement = {
+  lint: function lint(node, _ref) {
+    var context = _ref.context;
+    if (!isSupportedForLint(node)) {
+      return;
+    }
+    context.report({
+      node: node.openingElement,
+      messageId: 'noHtmlAnchor',
+      data: {
+        name: ast.JSXElement.getName(node)
+      }
+    });
+  }
+};

package/dist/esm/rules/no-html-anchor/node-types/styled-component/get-styled-component-call.js

@@ -0,0 +1,42 @@
+import { closestOfType, isNodeOfType } from 'eslint-codemod-utils';
+
+/**
+ * Returns a styled component
+ */
+
+export var getStyledComponentCall = function getStyledComponentCall(node) {
+  // halts unless we are dealing with a styled component
+  if (!isStyledCallExpression(node)) {
+    return;
+  }
+  // halts if the component is being exported directly
+  if (closestOfType(node, 'ExportNamedDeclaration')) {
+    return;
+  }
+  var styledComponentVariableRef = node.parent;
+  // halts if the styled component is not assigned to a variable immediately
+  if (!isNodeOfType(styledComponentVariableRef, 'VariableDeclarator')) {
+    return;
+  }
+  return styledComponentVariableRef;
+};
+
+/**
+ * Some verbose precondition checks but all it does is check
+ * a call expression is of form `styled.a` or `styled2.a`
+ */
+var isStyledCallExpression = function isStyledCallExpression(call) {
+  if (!isNodeOfType(call, 'CallExpression')) {
+    return false;
+  }
+  if (!isNodeOfType(call.callee, 'MemberExpression')) {
+    return false;
+  }
+  if (!isNodeOfType(call.callee.object, 'Identifier') || !isNodeOfType(call.callee.property, 'Identifier')) {
+    return false;
+  }
+  if (/^styled2?$/.test(call.callee.object.name)) {
+    return true;
+  }
+  return false;
+};

package/dist/esm/rules/no-html-anchor/node-types/styled-component/index.js

@@ -0,0 +1,31 @@
+/* eslint-disable @repo/internal/react/require-jsdoc */
+
+import { isNodeOfType } from 'eslint-codemod-utils';
+import { getJsxElementByName } from '../../utils/get-jsx-element-by-name';
+import { isSupportedForLint } from '../supported';
+import { getStyledComponentCall } from './get-styled-component-call';
+export var StyledComponent = {
+  lint: function lint(node, _ref) {
+    var _getJsxElementByName;
+    var context = _ref.context;
+    if (!isNodeOfType(node, 'CallExpression') || !isNodeOfType(node.callee, 'MemberExpression') || !isNodeOfType(node.callee.object, 'Identifier') || !isNodeOfType(node.callee.property, 'Identifier')) {
+      return;
+    }
+    var styles = getStyledComponentCall(node);
+    var elementName = node.callee.property.name;
+    if (!styles || !isNodeOfType(styles.id, 'Identifier')) {
+      return;
+    }
+    var jsxElement = (_getJsxElementByName = getJsxElementByName(styles.id.name, context.getScope())) === null || _getJsxElementByName === void 0 ? void 0 : _getJsxElementByName.parent;
+    if (jsxElement && !isSupportedForLint(jsxElement, elementName)) {
+      return;
+    }
+    context.report({
+      node: styles,
+      messageId: 'noHtmlAnchor',
+      data: {
+        name: node.callee.property.name
+      }
+    });
+  }
+};

package/dist/esm/rules/no-html-anchor/node-types/supported.js

@@ -0,0 +1,57 @@
+import { isNodeOfType } from 'eslint-codemod-utils';
+import * as ast from '../../../ast-nodes';
+var supportedElements = [{
+  name: 'a'
+}];
+
+/**
+ * Determines if the given JSX element is a supported element to lint with this rule.
+ */
+export function isSupportedForLint(jsxNode, elementName) {
+  if (!isNodeOfType(jsxNode, 'JSXElement')) {
+    return false;
+  }
+
+  // Allow passing in the element name because the jsxNode doesn't
+  // represent the element name with styled components
+  var elName = elementName || ast.JSXElement.getName(jsxNode);
+  if (!elName) {
+    return false;
+  }
+
+  // Only check native HTML elements, not components
+  if (elName[0] !== elName[0].toLowerCase()) {
+    return false;
+  }
+  var supportedElement = supportedElements.find(function (_ref) {
+    var name = _ref.name;
+    return name === elName;
+  });
+  if (!supportedElement) {
+    supportedElement = supportedElements.find(function (_ref2) {
+      var name = _ref2.name;
+      return name === '*';
+    });
+  }
+  if (!supportedElement) {
+    return false;
+  }
+
+  // Check if the element has any attributes that are not supported
+  var attributes = ast.JSXElement.getAttributes(jsxNode);
+  if (supportedElement.attributes && !supportedElement.attributes.every(function (_ref3) {
+    var name = _ref3.name,
+      values = _ref3.values;
+    return attributes.some(function (attribute) {
+      if (attribute.type === 'JSXSpreadAttribute') {
+        return false;
+      }
+      var isMatchingName = attribute.name.name === name;
+      var isMatchingValues = values && attribute.value && attribute.value.type === 'Literal' && typeof attribute.value.value === 'string' && (values === null || values === void 0 ? void 0 : values.includes(attribute.value.value));
+      return isMatchingName && isMatchingValues;
+    });
+  })) {
+    return false;
+  }
+  return true;
+}

package/dist/esm/rules/no-html-anchor/utils/get-jsx-element-by-name.js

@@ -0,0 +1,47 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { isNodeOfType } from 'eslint-codemod-utils';
+
+/**
+ * Given a component name finds its JSX usage
+ */
+export var getJsxElementByName = function getJsxElementByName(componentName, scope) {
+  var _variableDeclaration$;
+  var variableDeclaration = scope.variables.find(function (v) {
+    return v.name === componentName;
+  });
+  if (!variableDeclaration) {
+    return;
+  }
+
+  // length here should be exactly 2 to indicate only two references:
+  // one being the variable declaration itself
+  // second being the JSX call site
+  // we might consider handling multiple local JSX call sites in the future
+  // but "this is good enough for now"™️
+  if (variableDeclaration.references.length !== 2) {
+    return;
+  }
+  var jsxUsage = (_variableDeclaration$ = variableDeclaration.references[1]) === null || _variableDeclaration$ === void 0 ? void 0 : _variableDeclaration$.identifier;
+  var _variableDeclaration$2 = variableDeclaration.references.map(function (ref) {
+      return ref === null || ref === void 0 ? void 0 : ref.identifier;
+    }),
+    _variableDeclaration$3 = _slicedToArray(_variableDeclaration$2, 2),
+    firstIdentifier = _variableDeclaration$3[0],
+    secondIdentifier = _variableDeclaration$3[1];
+  // Check if the first reference is a JSXOpeningElement and the second is not or vice versa
+  if (isNodeOfType(firstIdentifier, 'JSXIdentifier') && !isNodeOfType(secondIdentifier, 'JSXIdentifier')) {
+    jsxUsage = firstIdentifier;
+  } else if (isNodeOfType(secondIdentifier, 'JSXIdentifier') && !isNodeOfType(firstIdentifier, 'JSXIdentifier')) {
+    jsxUsage = secondIdentifier;
+  } else {
+    return;
+  }
+  if (!isNodeOfType(jsxUsage, 'JSXIdentifier')) {
+    return;
+  }
+  var jsxOpeningElement = jsxUsage.parent;
+  if (!isNodeOfType(jsxOpeningElement, 'JSXOpeningElement')) {
+    return;
+  }
+  return jsxOpeningElement;
+};

package/dist/esm/rules/no-html-button/index.js

@@ -0,0 +1,33 @@
+import { createLintRule } from '../utils/create-rule';
+import { JSXElement as _JSXElement, StyledComponent } from './node-types';
+var rule = createLintRule({
+  meta: {
+    name: 'no-html-button',
+    type: 'suggestion',
+    docs: {
+      description: 'Discourage direct usage of HTML button elements in favor of Atlassian Design System button components.',
+      recommended: false,
+      severity: 'warn'
+    },
+    messages: {
+      noHtmlButton: "This {{ name }} should be replaced with a button component from the Atlassian Design System, such as the \"Button\" component when suitable. For custom buttons use the \"Pressable\" primitive. ADS buttons include event tracking, ensure accessible implementations, and provide access to ADS styling features like design tokens."
+    }
+  },
+  create: function create(context) {
+    return {
+      // transforms styled.<button>(...) usages
+      CallExpression: function CallExpression(node) {
+        StyledComponent.lint(node, {
+          context: context
+        });
+      },
+      // transforms <button css={...}> usages
+      JSXElement: function JSXElement(node) {
+        _JSXElement.lint(node, {
+          context: context
+        });
+      }
+    };
+  }
+});
+export default rule;

package/dist/esm/rules/no-html-button/node-types/index.js

@@ -0,0 +1,2 @@
+export { StyledComponent } from './styled-component';
+export { JSXElement } from './jsx-element';

package/dist/esm/rules/no-html-button/node-types/jsx-element/index.js

@@ -0,0 +1,19 @@
+/* eslint-disable @repo/internal/react/require-jsdoc */
+
+import * as ast from '../../../../ast-nodes';
+import { isSupportedForLint } from '../supported';
+export var JSXElement = {
+  lint: function lint(node, _ref) {
+    var context = _ref.context;
+    if (!isSupportedForLint(node)) {
+      return;
+    }
+    context.report({
+      node: node.openingElement,
+      messageId: 'noHtmlButton',
+      data: {
+        name: ast.JSXElement.getName(node)
+      }
+    });
+  }
+};

package/dist/esm/rules/no-html-button/node-types/styled-component/get-styled-component-call.js

@@ -0,0 +1,42 @@
+import { closestOfType, isNodeOfType } from 'eslint-codemod-utils';
+
+/**
+ * Returns a styled component
+ */
+
+export var getStyledComponentCall = function getStyledComponentCall(node) {
+  // halts unless we are dealing with a styled component
+  if (!isStyledCallExpression(node)) {
+    return;
+  }
+  // halts if the component is being exported directly
+  if (closestOfType(node, 'ExportNamedDeclaration')) {
+    return;
+  }
+  var styledComponentVariableRef = node.parent;
+  // halts if the styled component is not assigned to a variable immediately
+  if (!isNodeOfType(styledComponentVariableRef, 'VariableDeclarator')) {
+    return;
+  }
+  return styledComponentVariableRef;
+};
+
+/**
+ * Some verbose precondition checks but all it does is check
+ * a call expression is of form `styled.button` or `styled2.button`
+ */
+var isStyledCallExpression = function isStyledCallExpression(call) {
+  if (!isNodeOfType(call, 'CallExpression')) {
+    return false;
+  }
+  if (!isNodeOfType(call.callee, 'MemberExpression')) {
+    return false;
+  }
+  if (!isNodeOfType(call.callee.object, 'Identifier') || !isNodeOfType(call.callee.property, 'Identifier')) {
+    return false;
+  }
+  if (/^styled2?$/.test(call.callee.object.name)) {
+    return true;
+  }
+  return false;
+};

package/dist/esm/rules/no-html-button/node-types/styled-component/index.js

@@ -0,0 +1,31 @@
+/* eslint-disable @repo/internal/react/require-jsdoc */
+
+import { isNodeOfType } from 'eslint-codemod-utils';
+import { getJsxElementByName } from '../../utils/get-jsx-element-by-name';
+import { isSupportedForLint } from '../supported';
+import { getStyledComponentCall } from './get-styled-component-call';
+export var StyledComponent = {
+  lint: function lint(node, _ref) {
+    var _getJsxElementByName;
+    var context = _ref.context;
+    if (!isNodeOfType(node, 'CallExpression') || !isNodeOfType(node.callee, 'MemberExpression') || !isNodeOfType(node.callee.object, 'Identifier') || !isNodeOfType(node.callee.property, 'Identifier')) {
+      return;
+    }
+    var styles = getStyledComponentCall(node);
+    var elementName = node.callee.property.name;
+    if (!styles || !isNodeOfType(styles.id, 'Identifier')) {
+      return;
+    }
+    var jsxElement = (_getJsxElementByName = getJsxElementByName(styles.id.name, context.getScope())) === null || _getJsxElementByName === void 0 ? void 0 : _getJsxElementByName.parent;
+    if (jsxElement && !isSupportedForLint(jsxElement, elementName)) {
+      return;
+    }
+    context.report({
+      node: styles,
+      messageId: 'noHtmlButton',
+      data: {
+        name: node.callee.property.name
+      }
+    });
+  }
+};

package/dist/esm/rules/no-html-button/node-types/supported.js

@@ -0,0 +1,70 @@
+import { isNodeOfType } from 'eslint-codemod-utils';
+import * as ast from '../../../ast-nodes';
+var supportedElements = [{
+  name: 'button'
+}, {
+  name: 'input',
+  attributes: [{
+    name: 'type',
+    // Values from https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role#best_practices
+    values: ['submit', 'reset', 'button', 'image']
+  }]
+}, {
+  name: '*',
+  attributes: [{
+    name: 'role',
+    values: ['button']
+  }]
+}];
+
+/**
+ * Determines if the given JSX element is a supported element to lint with this rule.
+ */
+export function isSupportedForLint(jsxNode, elementName) {
+  if (!isNodeOfType(jsxNode, 'JSXElement')) {
+    return false;
+  }
+
+  // Allow passing in the element name because the jsxNode doesn't
+  // represent the element name with styled components
+  var elName = elementName || ast.JSXElement.getName(jsxNode);
+  if (!elName) {
+    return false;
+  }
+
+  // Only check native HTML elements, not components
+  if (elName[0] !== elName[0].toLowerCase()) {
+    return false;
+  }
+  var supportedElement = supportedElements.find(function (_ref) {
+    var name = _ref.name;
+    return name === elName;
+  });
+  if (!supportedElement) {
+    supportedElement = supportedElements.find(function (_ref2) {
+      var name = _ref2.name;
+      return name === '*';
+    });
+  }
+  if (!supportedElement) {
+    return false;
+  }
+
+  // Check if the element has any attributes that are not supported
+  var attributes = ast.JSXElement.getAttributes(jsxNode);
+  if (supportedElement.attributes && !supportedElement.attributes.every(function (_ref3) {
+    var name = _ref3.name,
+      values = _ref3.values;
+    return attributes.some(function (attribute) {
+      if (attribute.type === 'JSXSpreadAttribute') {
+        return false;
+      }
+      var isMatchingName = attribute.name.name === name;
+      var isMatchingValues = values && attribute.value && attribute.value.type === 'Literal' && typeof attribute.value.value === 'string' && (values === null || values === void 0 ? void 0 : values.includes(attribute.value.value));
+      return isMatchingName && isMatchingValues;
+    });
+  })) {
+    return false;
+  }
+  return true;
+}

package/dist/esm/rules/no-html-button/utils/get-jsx-element-by-name.js

@@ -0,0 +1,47 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { isNodeOfType } from 'eslint-codemod-utils';
+
+/**
+ * Given a component name finds its JSX usage
+ */
+export var getJsxElementByName = function getJsxElementByName(componentName, scope) {
+  var _variableDeclaration$;
+  var variableDeclaration = scope.variables.find(function (v) {
+    return v.name === componentName;
+  });
+  if (!variableDeclaration) {
+    return;
+  }
+
+  // length here should be exactly 2 to indicate only two references:
+  // one being the variable declaration itself
+  // second being the JSX call site
+  // we might consider handling multiple local JSX call sites in the future
+  // but "this is good enough for now"™️
+  if (variableDeclaration.references.length !== 2) {
+    return;
+  }
+  var jsxUsage = (_variableDeclaration$ = variableDeclaration.references[1]) === null || _variableDeclaration$ === void 0 ? void 0 : _variableDeclaration$.identifier;
+  var _variableDeclaration$2 = variableDeclaration.references.map(function (ref) {
+      return ref === null || ref === void 0 ? void 0 : ref.identifier;
+    }),
+    _variableDeclaration$3 = _slicedToArray(_variableDeclaration$2, 2),
+    firstIdentifier = _variableDeclaration$3[0],
+    secondIdentifier = _variableDeclaration$3[1];
+  // Check if the first reference is a JSXOpeningElement and the second is not or vice versa
+  if (isNodeOfType(firstIdentifier, 'JSXIdentifier') && !isNodeOfType(secondIdentifier, 'JSXIdentifier')) {
+    jsxUsage = firstIdentifier;
+  } else if (isNodeOfType(secondIdentifier, 'JSXIdentifier') && !isNodeOfType(firstIdentifier, 'JSXIdentifier')) {
+    jsxUsage = secondIdentifier;
+  } else {
+    return;
+  }
+  if (!isNodeOfType(jsxUsage, 'JSXIdentifier')) {
+    return;
+  }
+  var jsxOpeningElement = jsxUsage.parent;
+  if (!isNodeOfType(jsxOpeningElement, 'JSXOpeningElement')) {
+    return;
+  }
+  return jsxOpeningElement;
+};

package/dist/types/common/token-maps.partial.d.ts

@@ -0,0 +1,65 @@
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::30c84f908843af1f250860b6f3deeea0>>
+ * @codegenId spacing
+ * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen-token-maps
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::55622b91aca9b3afac4bce440f222b71>>
+ */
+export declare const positiveSpaceMap: {
+    '0px': string;
+    '2px': string;
+    '4px': string;
+    '6px': string;
+    '8px': string;
+    '12px': string;
+    '16px': string;
+    '20px': string;
+    '24px': string;
+    '32px': string;
+    '40px': string;
+    '48px': string;
+    '64px': string;
+    '80px': string;
+};
+export type Space = keyof typeof positiveSpaceMap;
+export declare const negativeSpaceMap: {
+    '-2px': string;
+    '-4px': string;
+    '-6px': string;
+    '-8px': string;
+    '-12px': string;
+    '-16px': string;
+    '-20px': string;
+    '-24px': string;
+    '-32px': string;
+};
+export type NegativeSpace = keyof typeof negativeSpaceMap;
+export declare const allSpaceMap: {
+    '-2px': string;
+    '-4px': string;
+    '-6px': string;
+    '-8px': string;
+    '-12px': string;
+    '-16px': string;
+    '-20px': string;
+    '-24px': string;
+    '-32px': string;
+    '0px': string;
+    '2px': string;
+    '4px': string;
+    '6px': string;
+    '8px': string;
+    '12px': string;
+    '16px': string;
+    '20px': string;
+    '24px': string;
+    '32px': string;
+    '40px': string;
+    '48px': string;
+    '64px': string;
+    '80px': string;
+};
+export type AllSpace = keyof typeof allSpaceMap;
+/**
+ * @codegenEnd
+ */