@atlaskit/eslint-plugin-design-system 4.0.0 → 4.2.0

package/dist/cjs/rules/use-visually-hidden/index.js

@@ -0,0 +1,194 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _isNode = require("../utils/is-node");
+
+var _fixJsx = _interopRequireDefault(require("./fix-jsx"));
+
+var _fixVanilla = _interopRequireDefault(require("./fix-vanilla"));
+
+var _utils = require("./utils");
+
+/* eslint-disable @atlaskit/design-system/use-visually-hidden */
+var THEME_IMPORT_NAMES = ['visuallyHidden', 'assistive'];
+var rule = {
+  meta: {
+    type: 'suggestion',
+    fixable: 'code',
+    docs: {
+      description: 'Suggest usage of the `@atlaskit/visually-hidden` component instead of either the `@atlaskit/theme` mixins or just something the user has rolled themselves.',
+      recommended: true
+    },
+    messages: {
+      noDeprecatedUsage: 'Using the export `{{local}}` from `{{import}}` as a mixin is discouraged. Please use `@atlaskit/visually-hidden` instead.',
+      noDeprecated: 'The export `{{local}}` from `{{import}}` is deprecated. Please use `@atlaskit/visually-hidden` instead.',
+      suggestion: 'This CSS closely matches the implementation of a visually hidden element. You should consider using the `@atlaskit/visually-hidden` component instead.'
+    }
+  },
+  create: function create(context) {
+    var source = context.getSourceCode();
+    return {
+      ImportDeclaration: function ImportDeclaration(node) {
+        var isThemeNode = node.source.value === '@atlaskit/theme' || node.source.value === '@atlaskit/theme/constants';
+
+        if (!isThemeNode) {
+          return;
+        }
+
+        var visuallyHiddenOrAssistive = node.specifiers.filter(function (specifier) {
+          return specifier.type === 'ImportSpecifier';
+        }).find(function (specifier) {
+          return THEME_IMPORT_NAMES.includes(specifier.imported.name);
+        });
+
+        if (!visuallyHiddenOrAssistive) {
+          return;
+        }
+
+        context.getDeclaredVariables(visuallyHiddenOrAssistive).forEach(function (someNode) {
+          someNode.references.map(function (innerNode) {
+            return innerNode.identifier;
+          }).forEach(function (idNode) {
+            // @ts-ignore JSX is not typed correctly in eslint
+            if ((idNode === null || idNode === void 0 ? void 0 : idNode.parent.type) === 'JSXExpressionContainer') {
+              context.report({
+                node: idNode.parent,
+                messageId: 'noDeprecatedUsage',
+                data: {
+                  import: "".concat(node.source.value),
+                  local: visuallyHiddenOrAssistive.local.name
+                },
+                fix: (0, _fixJsx.default)(source, idNode)
+              }); // this is either a styled usage OR mixin usage in a styled usage
+            } else if (idNode.parent.type === 'CallExpression') {
+              if ((0, _isNode.isStyledObjectNode)(idNode.parent) || (0, _isNode.isStyledTemplateNode)(idNode.parent)) {
+                context.report({
+                  node: idNode.parent,
+                  messageId: 'noDeprecatedUsage',
+                  data: {
+                    import: "".concat(node.source.value),
+                    local: visuallyHiddenOrAssistive.local.name
+                  },
+                  fix: (0, _fixVanilla.default)(source, idNode.parent)
+                });
+              }
+
+              if (idNode.parent.callee === idNode) {
+                context.report({
+                  node: idNode.parent,
+                  messageId: 'noDeprecatedUsage',
+                  data: {
+                    import: "".concat(node.source.value),
+                    local: visuallyHiddenOrAssistive.local.name
+                  },
+                  fix: (0, _fixVanilla.default)(source, (0, _isNode.getClosestNodeOfType)(idNode.parent, 'TaggedTemplateExpression'))
+                });
+              }
+            }
+          });
+        });
+        return context.report({
+          node: visuallyHiddenOrAssistive,
+          messageId: 'noDeprecated',
+          data: {
+            import: "".concat(node.source.value),
+            local: visuallyHiddenOrAssistive.local.name
+          }
+        });
+      },
+      CallExpression: function CallExpression(node) {
+        var _node$arguments$;
+
+        if (node.type !== 'CallExpression') {
+          return;
+        }
+
+        if (!(node.callee.type === 'MemberExpression' || node.callee.type === 'Identifier')) {
+          return;
+        }
+
+        var isStyled = (0, _isNode.isStyledObjectNode)(node);
+
+        if (node.callee.type === 'MemberExpression' && node.callee.object.type === 'Identifier' && node.callee.object.name !== 'styled') {
+          return;
+        }
+
+        if (node.callee.type === 'Identifier' && node.callee.name !== 'css') {
+          return;
+        } // This is an object style (probably)
+
+
+        if (node.arguments && ((_node$arguments$ = node.arguments[0]) === null || _node$arguments$ === void 0 ? void 0 : _node$arguments$.type) === 'ObjectExpression') {
+          var matchingScore = (0, _utils.getObjectLikeness)(node.arguments[0]);
+
+          if (matchingScore > 0.8) {
+            return context.report({
+              node: node.parent,
+              messageId: 'suggestion',
+              fix: isStyled ? (0, _fixVanilla.default)(source, node) : undefined
+            });
+          }
+        }
+
+        return null;
+      },
+      ObjectExpression: function ObjectExpression(node) {
+        if (node.parent.type === 'CallExpression') {
+          return;
+        }
+
+        var matchingScore = (0, _utils.getObjectLikeness)(node);
+
+        if (matchingScore > 0.8) {
+          return context.report({
+            node: node,
+            messageId: 'suggestion'
+          });
+        }
+      },
+      'TaggedTemplateExpression[tag.name="css"],TaggedTemplateExpression[tag.object.name="styled"]': function TaggedTemplateExpressionTagNameCssTaggedTemplateExpressionTagObjectNameStyled(node) {
+        if (node.type !== 'TaggedTemplateExpression') {
+          return;
+        }
+
+        var templateString = node.quasi.quasis.map(function (q) {
+          return q.value.raw;
+        }).join('');
+        var styleEntries = (0, _utils.makeTemplateLiteralIntoEntries)(templateString);
+
+        if (!styleEntries) {
+          return;
+        }
+
+        var count = (0, _utils.countMatchingKeyValues)(styleEntries.map(function (_ref) {
+          var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
+              key = _ref2[0],
+              value = _ref2[1];
+
+          return {
+            key: key,
+            value: value
+          };
+        }));
+
+        if (count > 0.8) {
+          return context.report({
+            node: node,
+            messageId: 'suggestion',
+            fix: node.tag.type !== 'Identifier' ? (0, _fixVanilla.default)(source, node) : undefined
+          });
+        }
+      }
+    };
+  }
+};
+var _default = rule;
+exports.default = _default;

package/dist/cjs/rules/use-visually-hidden/utils.js

@@ -0,0 +1,91 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.makeTemplateLiteralIntoEntries = exports.getObjectLikeness = exports.getFirstImport = exports.countMatchingKeyValues = void 0;
+// eslint-disable-next-line import/no-unresolved
+// eslint-disable-next-line @atlaskit/design-system/use-visually-hidden
+var referenceObject = {
+  width: '1px',
+  height: '1px',
+  padding: '0',
+  position: 'absolute',
+  border: '0',
+  clip: 'rect(1px, 1px, 1px, 1px)',
+  overflow: 'hidden',
+  whiteSpace: 'nowrap'
+};
+
+/**
+ * Returns the first import in the esprima AST.
+ */
+var getFirstImport = function getFirstImport(source) {
+  return source.ast.body.find(function (node) {
+    return node.type === 'ImportDeclaration';
+  });
+};
+/**
+ * Takes a template literal and returns [key, value] array of the css properties
+ */
+
+
+exports.getFirstImport = getFirstImport;
+
+var makeTemplateLiteralIntoEntries = function makeTemplateLiteralIntoEntries(templateString) {
+  return templateString.replace(/\n/g, '').split(/;|{|}/).filter(function (el) {
+    return !el.match(/\@/);
+  }).map(function (el) {
+    return el.trim().split(':').map(function (e) {
+      return e.trim();
+    });
+  });
+};
+/**
+ * Given a node, translate the node into css key-value pairs and
+ * compare the output to the reference styles required to make a
+ * visually hidden element.
+ *
+ * @returns {number} A fraction between 0-1 depending on the object's likeness.
+ */
+
+
+exports.makeTemplateLiteralIntoEntries = makeTemplateLiteralIntoEntries;
+
+var getObjectLikeness = function getObjectLikeness(node) {
+  var styleEntries = node.properties.map(function (_ref) {
+    var type = _ref.type,
+        key = _ref.key,
+        value = _ref.value;
+
+    if (type === 'Property' && key.type === 'Identifier') {
+      return {
+        key: key.name,
+        value: value.type === 'Literal' && value.value
+      };
+    }
+
+    return null;
+  }).filter(function (node) {
+    return Boolean(node);
+  });
+  return countMatchingKeyValues(styleEntries);
+};
+
+exports.getObjectLikeness = getObjectLikeness;
+
+var countMatchingKeyValues = function countMatchingKeyValues(styleEntries) {
+  var matchingStyleEntries = styleEntries.filter(function (entry) {
+    return entry.key in referenceObject;
+  });
+
+  if (styleEntries.length < 5) {
+    return 0;
+  }
+
+  return matchingStyleEntries.reduce(function (acc, curr) {
+    return acc + (referenceObject[curr === null || curr === void 0 ? void 0 : curr.key] === (curr === null || curr === void 0 ? void 0 : curr.value) ? 1.5 : 0.75);
+  }, 0) / styleEntries.length;
+};
+
+exports.countMatchingKeyValues = countMatchingKeyValues;

package/dist/cjs/rules/utils/get-import-node-by-source.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getImportedNodeBySource = void 0;
+
+/* eslint-disable import/no-unresolved */
+
+/**
+ * @param {SourceCode} source The eslint source
+ * @param {string} path The path specified to find
+ * @returns {ImportDeclaration}
+ */
+var getImportedNodeBySource = function getImportedNodeBySource(source, path) {
+  return source.ast.body.filter(function (node) {
+    return node.type === 'ImportDeclaration';
+  }).find(function (node) {
+    return node.source.value === path;
+  });
+};
+
+exports.getImportedNodeBySource = getImportedNodeBySource;

package/dist/cjs/rules/utils/is-color.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isHardCodedColor = exports.includesHardCodedColor = exports.isLegacyNamedColor = exports.isLegacyColor = void 0;
+exports.isLegacyNamedColor = exports.isLegacyColor = exports.isHardCodedColor = exports.includesHardCodedColor = void 0;
 var namedColors = ['black', 'silver', 'gray', 'white', 'maroon', 'red', 'purple', 'fuchsia', 'green', 'lime', 'olive', 'yellow', 'navy', 'blue', 'teal', 'aqua', 'orange', 'aliceblue', 'antiquewhite', 'aquamarine', 'azure', 'beige', 'bisque', 'blanchedalmond', 'blueviolet', 'brown', 'burlywood', 'cadetblue', 'chartreuse', 'chocolate', 'coral', 'cornflowerblue', 'cornsilk', 'crimson', 'cyan', 'darkblue', 'darkcyan', 'darkgoldenrod', 'darkgray', 'darkgreen', 'darkgrey', 'darkkhaki', 'darkmagenta', 'darkolivegreen', 'darkorange', 'darkorchid', 'darkred', 'darksalmon', 'darkseagreen', 'darkslateblue', 'darkslategray', 'darkslategrey', 'darkturquoise', 'darkviolet', 'deeppink', 'deepskyblue', 'dimgray', 'dimgrey', 'dodgerblue', 'firebrick', 'floralwhite', 'forestgreen', 'gainsboro', 'ghostwhite', 'gold', 'goldenrod', 'greenyellow', 'grey', 'honeydew', 'hotpink', 'indianred', 'indigo', 'ivory', 'khaki', 'lavender', 'lavenderblush', 'lawngreen', 'lemonchiffon', 'lightblue', 'lightcoral', 'lightcyan', 'lightgoldenrodyellow', 'lightgray', 'lightgreen', 'lightgrey', 'lightpink', 'lightsalmon', 'lightseagreen', 'lightskyblue', 'lightslategray', 'lightslategrey', 'lightsteelblue', 'lightyellow', 'limegreen', 'linen', 'magenta', 'mediumaquamarine', 'mediumblue', 'mediumorchid', 'mediumpurple', 'mediumseagreen', 'mediumslateblue', 'mediumspringgreen', 'mediumturquoise', 'mediumvioletred', 'midnightblue', 'mintcream', 'mistyrose', 'moccasin', 'navajowhite', 'oldlace', 'olivedrab', 'orangered', 'orchid', 'palegoldenrod', 'palegreen', 'paleturquoise', 'palevioletred', 'papayawhip', 'peachpuff', 'peru', 'pink', 'plum', 'powderblue', 'rosybrown', 'royalblue', 'saddlebrown', 'salmon', 'sandybrown', 'seagreen', 'seashell', 'sienna', 'skyblue', 'slateblue', 'slategray', 'slategrey', 'snow', 'springgreen', 'steelblue', 'tan', 'thistle', 'tomato', 'turquoise', 'violet', 'wheat', 'whitesmoke', 'yellowgreen', 'rebeccapurple'];
 var legacyColors = ['R50', 'R75', 'R100', 'R200', 'R300', 'R400', 'R500', 'Y50', 'Y75', 'Y100', 'Y200', 'Y300', 'Y400', 'Y500', 'G50', 'G75', 'G100', 'G200', 'G300', 'G400', 'G500', 'B50', 'B75', 'B100', 'B200', 'B300', 'B400', 'B500', 'P50', 'P75', 'P100', 'P200', 'P300', 'P400', 'P500', 'T50', 'T75', 'T100', 'T200', 'T300', 'T400', 'T500', 'N0', 'N10', 'N20', 'N30', 'N40', 'N50', 'N60', 'N70', 'N80', 'N90', 'N100', 'N200', 'N300', 'N400', 'N500', 'N600', 'N700', 'N800', 'N900', 'N10A', 'N20A', 'N30A', 'N40A', 'N50A', 'N60A', 'N70A', 'N80A', 'N90A', 'N100A', 'N200A', 'N300A', 'N400A', 'N500A', 'N600A', 'N700A', 'N800A', 'DN900', 'DN800', 'DN700', 'DN600', 'DN500', 'DN400', 'DN300', 'DN200', 'DN100', 'DN90', 'DN80', 'DN70', 'DN60', 'DN50', 'DN40', 'DN30', 'DN20', 'DN10', 'DN0', 'DN800A', 'DN700A', 'DN600A', 'DN500A', 'DN400A', 'DN300A', 'DN200A', 'DN100A', 'DN90A', 'DN80A', 'DN70A', 'DN60A', 'DN50A', 'DN40A', 'DN30A', 'DN20A', 'DN10A'];
 var legacyColorMixins = ['background', 'backgroundActive', 'backgroundHover', 'backgroundOnLayer', 'text', 'textHover', 'textActive', 'subtleText', 'placeholderText', 'heading', 'subtleHeading', 'codeBlock', 'link', 'linkHover', 'linkActive', 'linkOutline', 'primary', 'blue', 'teal', 'purple', 'red', 'yellow', 'green', 'skeleton'];
@@ -56,7 +56,8 @@ var isHardCodedColor = function isHardCodedColor(value) {
     return true;
   }
 
-  if (value.startsWith('#') && (value.length === 4 || value.length === 7 || value.length === 9)) {
+  if (value.startsWith('#') && ( // short hex, hex, or hex with alpha
+  value.length === 4 || value.length === 7 || value.length === 9)) {
     return true;
   }
 

package/dist/cjs/rules/utils/is-node.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isChildOfType = exports.isDecendantOfStyleBlock = exports.isDecendantOfStyleJsxAttribute = exports.isDecendantOfType = exports.isDecendantOfGlobalToken = void 0;
+exports.isStyledTemplateNode = exports.isStyledObjectNode = exports.isDecendantOfType = exports.isDecendantOfStyleJsxAttribute = exports.isDecendantOfStyleBlock = exports.isDecendantOfGlobalToken = exports.isChildOfType = exports.getClosestNodeOfType = void 0;
 
 var isDecendantOfGlobalToken = function isDecendantOfGlobalToken(node) {
   if (node.type === 'CallExpression' && node.callee.type === 'Identifier' && node.callee.name === 'token') {
@@ -50,6 +50,18 @@ var isDecendantOfStyleJsxAttribute = function isDecendantOfStyleJsxAttribute(nod
 
 exports.isDecendantOfStyleJsxAttribute = isDecendantOfStyleJsxAttribute;
 
+var isStyledTemplateNode = function isStyledTemplateNode(node) {
+  return (node === null || node === void 0 ? void 0 : node.type) === 'TaggedTemplateExpression' && node.tag.type === 'MemberExpression' && node.tag.object.type === 'Identifier' && node.tag.object.name === 'styled';
+};
+
+exports.isStyledTemplateNode = isStyledTemplateNode;
+
+var isStyledObjectNode = function isStyledObjectNode(node) {
+  return (node === null || node === void 0 ? void 0 : node.type) === 'CallExpression' && node.callee.type === 'MemberExpression' && node.callee.object.type === 'Identifier' && node.callee.object.name === 'styled';
+};
+
+exports.isStyledObjectNode = isStyledObjectNode;
+
 var isDecendantOfStyleBlock = function isDecendantOfStyleBlock(node) {
   if (node.type === 'VariableDeclarator') {
     if (node.id.type !== 'Identifier') {
@@ -81,7 +93,7 @@ var isDecendantOfStyleBlock = function isDecendantOfStyleBlock(node) {
     return true;
   }
 
-  if (node.type === 'TaggedTemplateExpression' && node.tag.type === 'MemberExpression' && node.tag.object.type === 'Identifier' && node.tag.object.name === 'styled') {
+  if (isStyledTemplateNode(node)) {
     return true;
   }
 
@@ -101,5 +113,23 @@ exports.isDecendantOfStyleBlock = isDecendantOfStyleBlock;
 var isChildOfType = function isChildOfType(node, type) {
   return node.parent.type === type;
 };
+/**
+ * Given a node, walk up the tree until there is no parent OR a common ancestor of the correct type is found
+ */
+
+
+exports.isChildOfType = isChildOfType;
+
+var getClosestNodeOfType = function getClosestNodeOfType(node, type) {
+  if (!node) {
+    return node;
+  }
+
+  if (node.type === type) {
+    return node;
+  }
+
+  return getClosestNodeOfType(node.parent, type);
+};
 
-exports.isChildOfType = isChildOfType;
+exports.getClosestNodeOfType = getClosestNodeOfType;

package/dist/cjs/rules/utils/remove-named-import.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.removeNamedImport = void 0;
+
+/* eslint-disable import/no-unresolved */
+
+/**
+ * @param {SourceCode} source The eslint source
+ * @param {string} path The path specified to find
+ * @returns FixerObject
+ */
+var removeNamedImport = function removeNamedImport(fixer, importNode, name) {
+  var filteredSpecifers = importNode.specifiers.filter(function (node) {
+    return node.type === 'ImportSpecifier' && node.imported.name !== name;
+  });
+
+  if (filteredSpecifers.length) {
+    return fixer.remove(importNode.specifiers.find(function (node) {
+      return node.type === 'ImportSpecifier' && node.imported.name === name;
+    }));
+  }
+
+  return fixer.remove(importNode);
+};
+
+exports.removeNamedImport = removeNamedImport;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/eslint-plugin-design-system",
-	"version": "4.0.0",
+	"version": "4.2.0",
 	"sideEffects": false
 }

package/dist/es2019/index.js

@@ -1,16 +1,24 @@
 import ensureTokenUsage from './rules/ensure-design-token-usage';
+import noDeprecatedAPIs from './rules/no-deprecated-apis';
+import noDeprecatedUsage from './rules/no-deprecated-design-token-usage';
 import noDeprecatedImports from './rules/no-deprecated-imports';
 import noUnsafeUsage from './rules/no-unsafe-design-token-usage';
+import useVisuallyHidden from './rules/use-visually-hidden';
 export const rules = {
   'ensure-design-token-usage': ensureTokenUsage,
   'no-unsafe-design-token-usage': noUnsafeUsage,
-  'no-deprecated-imports': noDeprecatedImports
+  'no-deprecated-design-token-usage': noDeprecatedUsage,
+  'no-deprecated-imports': noDeprecatedImports,
+  'no-deprecated-apis': noDeprecatedAPIs,
+  'use-visually-hidden': useVisuallyHidden
 };
 export const configs = {
   recommended: {
     plugins: ['@atlaskit/design-system'],
     rules: {
-      '@atlaskit/design-system/no-deprecated-imports': 'error'
+      '@atlaskit/design-system/no-deprecated-imports': 'error',
+      '@atlaskit/design-system/use-visually-hidden': 'error',
+      '@atlaskit/design-system/no-deprecated-apis': 'warn'
     }
   }
 };

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

@@ -24,6 +24,9 @@ const filterSuggestion = ({
 
 const rule = {
   meta: {
+    // We need to upgrade the version of ESLint.
+    // @ts-expect-error
+    hasSuggestions: true,
     docs: {
       recommended: true
     },

package/dist/es2019/rules/no-deprecated-apis/index.js

@@ -0,0 +1,72 @@
+// eslint-disable-next-line import/no-unresolved
+import { getImportedNodeBySource } from '../utils/get-import-node-by-source';
+import { getClosestNodeOfType } from '../utils/is-node';
+const unsafeOverridesConfig = {
+  cssFn: ['@atlaskit/menu', '@atlaskit/side-navigation'],
+  overrides: ['@atlaskit/drawer', '@atlaskit/menu', '@atlaskit/side-navigation']
+};
+const unsafeOverrides = ['cssFn', 'overrides'];
+const rule = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'Disallow specified APIs that have been marked as deprecated and/or discouraged.',
+      recommended: true
+    },
+    messages: {
+      noDeprecatedApis: `The prop "{{propName}}" has been deprecated. It will be removed in the next major release.`
+    }
+  },
+
+  create(context) {
+    return {
+      // find JSX atribute - find name of attribute - get source and find relevant identifiers.
+      JSXAttribute(node) {
+        var _node$name, _closesetJSXElement$n;
+
+        if (!unsafeOverrides.includes(node === null || node === void 0 ? void 0 : (_node$name = node.name) === null || _node$name === void 0 ? void 0 : _node$name.name)) {
+          return;
+        }
+
+        const source = context.getSourceCode();
+        const bannedApi = node.name.name; // traverse the tree to the nearest JSX Element and get its name
+
+        const closesetJSXElement = getClosestNodeOfType(node, 'JSXOpeningElement'); // @ts-ignore
+
+        const jsxElementName = closesetJSXElement === null || closesetJSXElement === void 0 ? void 0 : (_closesetJSXElement$n = closesetJSXElement.name) === null || _closesetJSXElement$n === void 0 ? void 0 : _closesetJSXElement$n.name;
+
+        if (!jsxElementName) {
+          return;
+        } // find an import for the path of the banned api
+
+
+        unsafeOverridesConfig[bannedApi].forEach(path => {
+          const importNode = getImportedNodeBySource(source, path);
+
+          if (!importNode) {
+            return;
+          } // find an import that matches our JSX element
+
+
+          const hasTargetNode = importNode.specifiers.some(node => node.local.name === jsxElementName);
+
+          if (!hasTargetNode) {
+            return;
+          } // if we're here the import exists and there is a valid lint error.
+
+
+          context.report({
+            node: node,
+            messageId: 'noDeprecatedApis',
+            data: {
+              propName: bannedApi
+            }
+          });
+        });
+      }
+
+    };
+  }
+
+};
+export default rule;

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

@@ -0,0 +1,58 @@
+import renameMapping from '@atlaskit/tokens/rename-mapping';
+
+const getCleanPathId = path => path.split('.').filter(el => el !== '[default]').join('.');
+
+const rule = {
+  meta: {
+    docs: {
+      recommended: true
+    },
+    fixable: 'code',
+    type: 'problem',
+    messages: {
+      tokenRenamed: 'The token "{{name}}" is deprecated in favour of "{{replacement}}".'
+    }
+  },
+
+  create(context) {
+    return {
+      'CallExpression[callee.name="token"]': node => {
+        if (node.type !== 'CallExpression') {
+          return;
+        }
+
+        if (node.arguments[0].type !== 'Literal') {
+          return;
+        }
+
+        const tokenKey = node.arguments[0].value;
+
+        if (!tokenKey) {
+          return;
+        }
+
+        if (typeof tokenKey !== 'string') {
+          return;
+        }
+
+        const migrationMeta = renameMapping.filter(t => t.state === 'deprecated').find(t => t.path === tokenKey);
+
+        if (migrationMeta) {
+          const cleanTokenKey = getCleanPathId(migrationMeta.replacement);
+          context.report({
+            messageId: 'tokenRenamed',
+            node,
+            data: {
+              name: tokenKey,
+              replacement: cleanTokenKey
+            },
+            fix: fixer => fixer.replaceText(node.arguments[0], `'${cleanTokenKey}'`)
+          });
+          return;
+        }
+      }
+    };
+  }
+
+};
+export default rule;