@atlaskit/eslint-plugin-design-system 8.38.0 → 9.1.0

package/dist/es2019/rules/use-tokens-typography/transformers/style-object.js

@@ -2,9 +2,9 @@
 
 import { isNodeOfType } from 'eslint-codemod-utils';
 import { Object as ASTObject, ObjectEntry, Root } from '../../../ast-nodes';
-import { getValueForPropertyNode, insertTokensImport, normaliseValue } from '../../ensure-design-token-usage/utils';
+import { getValueForPropertyNode, normaliseValue } from '../../ensure-design-token-usage/utils';
 import { isDecendantOfGlobalToken, isDecendantOfStyleBlock, isDecendantOfType } from '../../utils/is-node';
-import { convertPropertyNodeToStringableNode, defaultFontWeight, findFontFamilyValueForToken, findFontWeightTokenForValue, findTypographyTokenForValues, fontWeightMap, getLiteralProperty, getTokenProperty, isValidPropertyNode, notUndefined } from '../utils';
+import { convertPropertyNodeToStringableNode, defaultFontWeight, findFontFamilyValueForToken, findFontWeightTokenForValue, findTypographyTokenForValues, fontWeightMap, getLiteralProperty, getTokenProperty, insertFallbackImportFull, insertFallbackImportSpecifier, insertTokensImport, isValidPropertyNode, notUndefined } from '../utils';
 export const StyleObject = {
   lint(node, {
     context
@@ -29,7 +29,9 @@ export const StyleObject = {
     const {
       fontSizeNode,
       fontSizeRaw,
-      tokensImportNode
+      tokensImportNode,
+      themeImportNode,
+      shouldAddFallbackImport
     } = refs;
     const fontSizeValue = normaliseValue('fontSize', fontSizeRaw);
 
@@ -117,6 +119,8 @@ export const StyleObject = {
         matchingToken,
         nodesToReplace,
         tokensImportNode,
+        themeImportNode,
+        shouldAddFallbackImport,
         fontWeightReplacement,
         fontFamilyReplacement,
         fontStyleReplacement
@@ -164,20 +168,47 @@ export const StyleObject = {
         success: false
       };
     }
-    const importDeclaration = Root.findImportsByModule(context.getSourceCode().ast.body, '@atlaskit/tokens');
+    const tokensImportDeclaration = Root.findImportsByModule(context.getSourceCode().ast.body, '@atlaskit/tokens');
 
     // If there is more than one `@atlaskit/tokens` import, then it becomes difficult to determine which import to transform
-    if (importDeclaration.length > 1) {
+    if (tokensImportDeclaration.length > 1) {
       return {
         success: false
       };
     }
+
+    // This exists purely because we're not inlining the fallback values
+    // and instead referencing a `fontFallback` object that exists in @atlaskit/theme/typography.
+    // This is a temporary measure until fallbacks are no longer required
+    let shouldAddFallbackImport = 'full';
+    const themeImportDeclaration = Root.findImportsByModule(context.getSourceCode().ast.body, '@atlaskit/theme/typography');
+    if (themeImportDeclaration.length) {
+      // Import exists, check if specifier exists
+      shouldAddFallbackImport = 'specifier';
+      const fallbackImport = themeImportDeclaration[0].specifiers.find(specifier => {
+        // @atlaskit/theme/typography has no default export so we can safely narrow this type
+        if (!isNodeOfType(specifier, 'ImportSpecifier')) {
+          return false;
+        }
+        if (specifier.imported.name === 'fontFallback') {
+          return true;
+        }
+        return false;
+      });
+
+      // Exact import already exists, no need to add
+      if (fallbackImport) {
+        shouldAddFallbackImport = false;
+      }
+    }
     return {
       success: true,
       refs: {
         fontSizeNode,
         fontSizeRaw,
-        tokensImportNode: importDeclaration[0]
+        tokensImportNode: tokensImportDeclaration[0],
+        themeImportNode: themeImportDeclaration[0],
+        shouldAddFallbackImport
       }
     };
   },
@@ -187,15 +218,25 @@ export const StyleObject = {
         matchingToken,
         nodesToReplace,
         tokensImportNode,
+        themeImportNode,
+        shouldAddFallbackImport,
         fontWeightReplacement,
         fontFamilyReplacement,
         fontStyleReplacement
       } = refs;
       const fontSizeNode = nodesToReplace[0];
-      return (!tokensImportNode ? [insertTokensImport(fixer)] : []).concat(nodesToReplace.map((node, index) => {
+      const root = context.getSourceCode().ast.body;
+      let fallbackImport;
+      if (shouldAddFallbackImport === 'full') {
+        fallbackImport = insertFallbackImportFull(root, fixer);
+      } else if (shouldAddFallbackImport === 'specifier') {
+        fallbackImport = insertFallbackImportSpecifier(fixer, themeImportNode);
+      }
+      const fallbackName = (matchingToken.tokenName === 'font.body' ? 'font.body.medium' : matchingToken.tokenName).replace('font', 'fontFallback');
+      return (!tokensImportNode ? [insertTokensImport(root, fixer)] : []).concat(fallbackImport ? [fallbackImport] : [], nodesToReplace.map((node, index) => {
         // Replace first node with token, delete remaining nodes. Guaranteed to be fontSize
         if (index === 0) {
-          return fixer.replaceText(node, `${getTokenProperty('font', matchingToken.tokenName, matchingToken.tokenValue)}`);
+          return fixer.replaceText(node, `${getTokenProperty('font', matchingToken.tokenName, fallbackName, true)}`);
         }
 
         // We don't replace fontWeight/fontFamily/fontStyle here in case it occurs before the font property.

package/dist/es2019/rules/use-tokens-typography/utils.js

@@ -1,6 +1,7 @@
-import { callExpression, identifier, isNodeOfType, literal, property } from 'eslint-codemod-utils';
+import { callExpression, identifier, isNodeOfType, literal, memberExpression, property } from 'eslint-codemod-utils';
 import { typographyPalette } from '@atlaskit/tokens/palettes-raw';
 import { typographyAdg3 as typographyTokens } from '@atlaskit/tokens/tokens-raw';
+import { Import, Root } from '../../ast-nodes';
 export const typographyProperties = ['fontSize', 'fontWeight', 'fontFamily', 'lineHeight'];
 export const isTypographyProperty = propertyName => {
   return typographyProperties.includes(propertyName);
@@ -68,21 +69,37 @@ export function isValidPropertyNode(node) {
   }
   return true;
 }
-function getTokenNode(tokenName, tokenValue) {
+function getTokenNode(tokenName, tokenValue, isFallbackMember) {
+  let fallback;
+  if (isFallbackMember) {
+    fallback = createMemberExpressionFromArray(tokenValue.split('.'));
+  } else {
+    fallback = literal(tokenValue);
+  }
   return callExpression({
     callee: identifier({
       name: 'token'
     }),
     arguments: [literal({
       value: `'${tokenName}'`
-    }), literal(tokenValue)],
+    }), fallback],
     optional: false
   });
 }
-export function getTokenProperty(propertyName, tokenName, tokenFallback) {
+function createMemberExpressionFromArray(array) {
+  if (array.length === 1) {
+    return identifier(array[0]);
+  }
+  const property = array.pop();
+  return memberExpression({
+    object: createMemberExpressionFromArray(array),
+    property: identifier(property)
+  });
+}
+export function getTokenProperty(propertyName, tokenName, tokenFallback, isFallbackMember = false) {
   return property({
     key: identifier(propertyName),
-    value: getTokenNode(tokenName, tokenFallback)
+    value: getTokenNode(tokenName, tokenFallback, isFallbackMember)
   });
 }
 export function getLiteralProperty(propertyName, propertyValue) {
@@ -96,4 +113,19 @@ export function convertPropertyNodeToStringableNode(node) {
     key: node.key,
     value: node.value
   });
+}
+export function insertTokensImport(root, fixer) {
+  return Root.insertImport(root, {
+    module: '@atlaskit/tokens',
+    specifiers: ['token']
+  }, fixer);
+}
+export function insertFallbackImportFull(root, fixer) {
+  return Root.insertImport(root, {
+    module: '@atlaskit/theme/typography',
+    specifiers: ['fontFallback']
+  }, fixer);
+}
+export function insertFallbackImportSpecifier(fixer, themeImportNode) {
+  return Import.insertNamedSpecifiers(themeImportNode, ['fontFallback'], fixer);
 }

package/dist/es2019/rules/utils/is-supported-import.js

@@ -1,3 +1,10 @@
+// This should be kept in sync with
+// packages/design-system/eslint-plugin-ui-styling-standard/src/rules/utils/is-supported-import.tsx
+// whenever possible.
+//
+// TODO: would having an @atlassian/eslint-plugin-design-system-common
+// package be useful?
+
 // eslint-disable-next-line import/no-extraneous-dependencies
 
 export const CSS_IN_JS_IMPORTS = {
@@ -109,8 +116,14 @@ export const isCssMap = isSupportedImportWrapper('cssMap');
 export const isKeyframes = isSupportedImportWrapper('keyframes');
 // `styled` is also the explicit default of `styled-components` and `@emotion/styled`, so we also match on default imports generally
 export const isStyled = isSupportedImportWrapper('styled', ['styled-components', '@emotion/styled']);
-export const isImportedFrom = (moduleName, exactMatch = true) => (nodeToCheck, referencesInScope, importSources) => {
-  if (!importSources.some(importSource => importSource === moduleName || !exactMatch && importSource.startsWith(moduleName))) {
+export const isXcss = isSupportedImportWrapper('xcss');
+export const isImportedFrom = (moduleName, exactMatch = true) => (nodeToCheck, referencesInScope,
+/**
+ * If we strictly have specific import sources in the config scope, pass them to make this more performant.
+ * Pass `null` if you don't care if its configured or not.
+ */
+importSources = null) => {
+  if (importSources && !importSources.some(importSource => importSource === moduleName || !exactMatch && importSource.startsWith(moduleName))) {
     // Don't go through the trouble of checking the import sources does not include this
     // We'll assume this is skipped elsewhere.
     return false;

package/dist/esm/rules/consistent-css-prop-usage/index.js

@@ -1,4 +1,3 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
@@ -33,6 +32,18 @@ var getProgramNode = function getProgramNode(expression) {
   }
   return expression.parent;
 };
+var isDeclaredInsideComponent = function isDeclaredInsideComponent(expression) {
+  // These nodes imply that there is a distinct own scope (function scope / block scope),
+  // and so the presence of them means that expression was not defined in the module scope.
+  var NOT_MODULE_SCOPE = ['ArrowFunctionExpression', 'BlockStatement', 'ClassDeclaration', 'FunctionExpression'];
+  while (expression.type !== 'Program') {
+    if (NOT_MODULE_SCOPE.includes(expression.type)) {
+      return true;
+    }
+    expression = expression.parent;
+  }
+  return false;
+};
 var JSXExpressionLinter = /*#__PURE__*/function () {
   // File-level tracking of styles hoisted from the cssAtTopOfModule/cssAtBottomOfModule fixers.
 
@@ -112,13 +123,13 @@ var JSXExpressionLinter = /*#__PURE__*/function () {
         });
         return;
       }
-      if (identifier.parent.parent.parent.type !== 'Program') {
+      if (isDeclaredInsideComponent(identifier)) {
         // When variable is declared inside the component
         this.context.report({
           node: sourceIdentifier,
           messageId: this.configuration.stylesPlacement === 'bottom' ? 'cssAtBottomOfModule' : 'cssAtTopOfModule',
           fix: function fix(fixer) {
-            if (_this.configuration.fixNamesOnly) {
+            if (!_this.configuration.autoFix) {
               return [];
             }
             return _this.fixCssNotInModuleScope(fixer, identifier, false);
@@ -140,7 +151,7 @@ var JSXExpressionLinter = /*#__PURE__*/function () {
             node: identifier,
             messageId: 'cssObjectTypeOnly',
             fix: function fix(fixer) {
-              if (_this.configuration.fixNamesOnly) {
+              if (!_this.configuration.autoFix) {
                 return [];
               }
               return _this.addCssFunctionCall(fixer, identifier.parent);
@@ -316,10 +327,11 @@ var JSXExpressionLinter = /*#__PURE__*/function () {
         // The last value is the bottom of the file
         fixerNodePlacement = programNode.body[programNode.body.length - 1];
       } else {
+        var _ref3;
         // Place after the last ImportDeclaration
-        fixerNodePlacement = programNode.body.length === 1 ? programNode.body[0] : programNode.body.find(function (node) {
+        fixerNodePlacement = (_ref3 = programNode.body.length === 1 ? programNode.body[0] : programNode.body.find(function (node) {
           return node.type !== 'ImportDeclaration';
-        });
+        })) !== null && _ref3 !== void 0 ? _ref3 : fixerNodePlacement;
       }
       var moduleString;
       var fixes = [];
@@ -403,7 +415,7 @@ var JSXExpressionLinter = /*#__PURE__*/function () {
             node: expression,
             messageId: this.configuration.stylesPlacement === 'bottom' ? 'cssAtBottomOfModule' : 'cssAtTopOfModule',
             fix: function fix(fixer) {
-              if (_this3.configuration.fixNamesOnly) {
+              if (!_this3.configuration.autoFix) {
                 return [];
               }
 
@@ -448,8 +460,7 @@ var defaultConfig = {
   cssImportSource: CSS_IN_JS_IMPORTS.compiled,
   xcssImportSource: CSS_IN_JS_IMPORTS.atlaskitPrimitives,
   excludeReactComponents: false,
-  fixNamesOnly: false,
-  autoFixNames: true
+  autoFix: true
 };
 var rule = createLintRule({
   meta: {
@@ -468,8 +479,7 @@ var rule = createLintRule({
       cssObjectTypeOnly: "Create styles using objects passed to a css function call, e.g. `css({ textAlign: 'center'; })`.",
       cssInModule: "Imported styles should not be used; instead define in the module, import a component, or use a design token.",
       cssArrayStylesOnly: "Compose styles with an array on the css prop instead of using object spread.",
-      noMemberExpressions: "Styles should be a regular variable (e.g. 'buttonStyles'), not a member of an object (e.g. 'myObject.styles').",
-      shouldEndInStyles: 'Declared styles should end in "styles".'
+      noMemberExpressions: "Styles should be a regular variable (e.g. 'buttonStyles'), not a member of an object (e.g. 'myObject.styles')."
     },
     schema: [{
       type: 'object',
@@ -493,10 +503,7 @@ var rule = createLintRule({
         excludeReactComponents: {
           type: 'boolean'
         },
-        autoFixNames: {
-          type: 'boolean'
-        },
-        fixNamesOnly: {
+        autoFix: {
           type: 'boolean'
         }
       },
@@ -504,80 +511,41 @@ var rule = createLintRule({
     }]
   },
   create: function create(context) {
-    var _ref3;
     var mergedConfig = assign({}, defaultConfig, context.options[0]);
-    var declarationSuffix = 'Styles';
-    var callSelectorFunctions = [].concat(_toConsumableArray(mergedConfig.cssFunctions), ['cssMap']);
-    var callSelector = callSelectorFunctions.map(function (fn) {
-      return "CallExpression[callee.name=".concat(fn, "]");
-    }).join(',');
-    return _ref3 = {}, _defineProperty(_ref3, callSelector, function (node) {
-      if (node.parent.type !== 'VariableDeclarator') {
-        // We aren't interested in these that don't have a parent.
-        return;
-      }
-      var identifier = node.parent.id;
-      if (identifier.type === 'Identifier' && (identifier.name.endsWith(declarationSuffix) || identifier.name.startsWith(declarationSuffix.toLowerCase()) || identifier.name === declarationSuffix.toLowerCase())) {
-        // Already prefixed! Nothing to do.
-        return;
-      }
-      if (!mergedConfig.autoFixNames) {
-        return;
-      }
-      context.report({
-        node: identifier,
-        messageId: 'shouldEndInStyles',
-        fix: function fix(fixer) {
-          var _context$getScope$var;
-          var identifierName = identifier.type === 'Identifier' ? identifier.name : '';
-          var references = ((_context$getScope$var = context.getScope().variables.find(function (varb) {
-            return varb.name === identifierName;
-          })) === null || _context$getScope$var === void 0 ? void 0 : _context$getScope$var.references) || [];
-          var newIdentifierName = "".concat(identifierName
-          // Remove "Style" if it is already defined.
-          .replace(/Style$/, '')).concat(declarationSuffix);
-          return references.filter(function (ref) {
-            return ref.identifier.name === identifierName;
-          }).map(function (ref) {
-            if (ref.identifier.parent && ref.identifier.parent.shorthand) {
-              return fixer.replaceText(ref.identifier, "".concat(identifierName, ": ").concat(newIdentifierName));
-            }
-            return fixer.replaceText(ref.identifier, newIdentifierName);
-          });
-        }
-      });
-    }), _defineProperty(_ref3, "JSXAttribute", function JSXAttribute(nodeOriginal) {
-      var node = nodeOriginal;
-      var name = node.name,
-        value = node.value;
-      if (mergedConfig.excludeReactComponents && node.parent.type === 'JSXOpeningElement') {
-        // e.g. <item.before />
-        if (node.parent.name.type === 'JSXMemberExpression') {
-          return;
-        }
-        // e.g. <div />, <MenuItem />
-        if (node.parent.name.type === 'JSXIdentifier' && !isDOMElementName(node.parent.name.name)) {
-          return;
-        }
-      }
-      if (name.type === 'JSXIdentifier' && mergedConfig.cssFunctions.includes(name.name)) {
-        // When not a jsx expression. For eg. css=""
-        if ((value === null || value === void 0 ? void 0 : value.type) !== 'JSXExpressionContainer') {
-          context.report({
-            node: node,
-            messageId: mergedConfig.stylesPlacement === 'bottom' ? 'cssAtBottomOfModule' : 'cssAtTopOfModule'
-          });
-          return;
+    return {
+      JSXAttribute: function JSXAttribute(nodeOriginal) {
+        var node = nodeOriginal;
+        var name = node.name,
+          value = node.value;
+        if (mergedConfig.excludeReactComponents && node.parent.type === 'JSXOpeningElement') {
+          // e.g. <item.before />
+          if (node.parent.name.type === 'JSXMemberExpression') {
+            return;
+          }
+          // e.g. <div />, <MenuItem />
+          if (node.parent.name.type === 'JSXIdentifier' && !isDOMElementName(node.parent.name.name)) {
+            return;
+          }
         }
-        if (value.expression.type === 'JSXEmptyExpression') {
-          // e.g. the comment in
-          //      <div css={/* Hello there */} />
-          return;
+        if (name.type === 'JSXIdentifier' && mergedConfig.cssFunctions.includes(name.name)) {
+          // When not a jsx expression. For eg. css=""
+          if ((value === null || value === void 0 ? void 0 : value.type) !== 'JSXExpressionContainer') {
+            context.report({
+              node: node,
+              messageId: mergedConfig.stylesPlacement === 'bottom' ? 'cssAtBottomOfModule' : 'cssAtTopOfModule'
+            });
+            return;
+          }
+          if (value.expression.type === 'JSXEmptyExpression') {
+            // e.g. the comment in
+            //      <div css={/* Hello there */} />
+            return;
+          }
+          var linter = new JSXExpressionLinter(context, name.name, mergedConfig, value.expression);
+          linter.run();
         }
-        var linter = new JSXExpressionLinter(context, name.name, mergedConfig, value.expression);
-        linter.run();
       }
-    }), _ref3;
+    };
   }
 });
 export default rule;

package/dist/esm/rules/use-tokens-typography/transformers/style-object.js

@@ -2,9 +2,9 @@
 
 import { isNodeOfType } from 'eslint-codemod-utils';
 import { Object as ASTObject, ObjectEntry, Root } from '../../../ast-nodes';
-import { getValueForPropertyNode, insertTokensImport, normaliseValue } from '../../ensure-design-token-usage/utils';
+import { getValueForPropertyNode, normaliseValue } from '../../ensure-design-token-usage/utils';
 import { isDecendantOfGlobalToken, isDecendantOfStyleBlock, isDecendantOfType } from '../../utils/is-node';
-import { convertPropertyNodeToStringableNode, defaultFontWeight, findFontFamilyValueForToken, findFontWeightTokenForValue, findTypographyTokenForValues, fontWeightMap, getLiteralProperty, getTokenProperty, isValidPropertyNode, notUndefined } from '../utils';
+import { convertPropertyNodeToStringableNode, defaultFontWeight, findFontFamilyValueForToken, findFontWeightTokenForValue, findTypographyTokenForValues, fontWeightMap, getLiteralProperty, getTokenProperty, insertFallbackImportFull, insertFallbackImportSpecifier, insertTokensImport, isValidPropertyNode, notUndefined } from '../utils';
 export var StyleObject = {
   lint: function lint(node, _ref) {
     var context = _ref.context;
@@ -26,7 +26,9 @@ export var StyleObject = {
     }
     var fontSizeNode = refs.fontSizeNode,
       fontSizeRaw = refs.fontSizeRaw,
-      tokensImportNode = refs.tokensImportNode;
+      tokensImportNode = refs.tokensImportNode,
+      themeImportNode = refs.themeImportNode,
+      shouldAddFallbackImport = refs.shouldAddFallbackImport;
     var fontSizeValue = normaliseValue('fontSize', fontSizeRaw);
 
     // -- Font weight --
@@ -117,6 +119,8 @@ export var StyleObject = {
         matchingToken: matchingToken,
         nodesToReplace: nodesToReplace,
         tokensImportNode: tokensImportNode,
+        themeImportNode: themeImportNode,
+        shouldAddFallbackImport: shouldAddFallbackImport,
         fontWeightReplacement: fontWeightReplacement,
         fontFamilyReplacement: fontFamilyReplacement,
         fontStyleReplacement: fontStyleReplacement
@@ -163,20 +167,47 @@ export var StyleObject = {
         success: false
       };
     }
-    var importDeclaration = Root.findImportsByModule(context.getSourceCode().ast.body, '@atlaskit/tokens');
+    var tokensImportDeclaration = Root.findImportsByModule(context.getSourceCode().ast.body, '@atlaskit/tokens');
 
     // If there is more than one `@atlaskit/tokens` import, then it becomes difficult to determine which import to transform
-    if (importDeclaration.length > 1) {
+    if (tokensImportDeclaration.length > 1) {
       return {
         success: false
       };
     }
+
+    // This exists purely because we're not inlining the fallback values
+    // and instead referencing a `fontFallback` object that exists in @atlaskit/theme/typography.
+    // This is a temporary measure until fallbacks are no longer required
+    var shouldAddFallbackImport = 'full';
+    var themeImportDeclaration = Root.findImportsByModule(context.getSourceCode().ast.body, '@atlaskit/theme/typography');
+    if (themeImportDeclaration.length) {
+      // Import exists, check if specifier exists
+      shouldAddFallbackImport = 'specifier';
+      var fallbackImport = themeImportDeclaration[0].specifiers.find(function (specifier) {
+        // @atlaskit/theme/typography has no default export so we can safely narrow this type
+        if (!isNodeOfType(specifier, 'ImportSpecifier')) {
+          return false;
+        }
+        if (specifier.imported.name === 'fontFallback') {
+          return true;
+        }
+        return false;
+      });
+
+      // Exact import already exists, no need to add
+      if (fallbackImport) {
+        shouldAddFallbackImport = false;
+      }
+    }
     return {
       success: true,
       refs: {
         fontSizeNode: fontSizeNode,
         fontSizeRaw: fontSizeRaw,
-        tokensImportNode: importDeclaration[0]
+        tokensImportNode: tokensImportDeclaration[0],
+        themeImportNode: themeImportDeclaration[0],
+        shouldAddFallbackImport: shouldAddFallbackImport
       }
     };
   },
@@ -185,14 +216,24 @@ export var StyleObject = {
       var matchingToken = refs.matchingToken,
         nodesToReplace = refs.nodesToReplace,
         tokensImportNode = refs.tokensImportNode,
+        themeImportNode = refs.themeImportNode,
+        shouldAddFallbackImport = refs.shouldAddFallbackImport,
         fontWeightReplacement = refs.fontWeightReplacement,
         fontFamilyReplacement = refs.fontFamilyReplacement,
         fontStyleReplacement = refs.fontStyleReplacement;
       var fontSizeNode = nodesToReplace[0];
-      return (!tokensImportNode ? [insertTokensImport(fixer)] : []).concat(nodesToReplace.map(function (node, index) {
+      var root = context.getSourceCode().ast.body;
+      var fallbackImport;
+      if (shouldAddFallbackImport === 'full') {
+        fallbackImport = insertFallbackImportFull(root, fixer);
+      } else if (shouldAddFallbackImport === 'specifier') {
+        fallbackImport = insertFallbackImportSpecifier(fixer, themeImportNode);
+      }
+      var fallbackName = (matchingToken.tokenName === 'font.body' ? 'font.body.medium' : matchingToken.tokenName).replace('font', 'fontFallback');
+      return (!tokensImportNode ? [insertTokensImport(root, fixer)] : []).concat(fallbackImport ? [fallbackImport] : [], nodesToReplace.map(function (node, index) {
         // Replace first node with token, delete remaining nodes. Guaranteed to be fontSize
         if (index === 0) {
-          return fixer.replaceText(node, "".concat(getTokenProperty('font', matchingToken.tokenName, matchingToken.tokenValue)));
+          return fixer.replaceText(node, "".concat(getTokenProperty('font', matchingToken.tokenName, fallbackName, true)));
         }
 
         // We don't replace fontWeight/fontFamily/fontStyle here in case it occurs before the font property.

package/dist/esm/rules/use-tokens-typography/utils.js

@@ -1,6 +1,7 @@
-import { callExpression, identifier, isNodeOfType, literal, property } from 'eslint-codemod-utils';
+import { callExpression, identifier, isNodeOfType, literal, memberExpression, property } from 'eslint-codemod-utils';
 import { typographyPalette } from '@atlaskit/tokens/palettes-raw';
 import { typographyAdg3 as typographyTokens } from '@atlaskit/tokens/tokens-raw';
+import { Import, Root } from '../../ast-nodes';
 export var typographyProperties = ['fontSize', 'fontWeight', 'fontFamily', 'lineHeight'];
 export var isTypographyProperty = function isTypographyProperty(propertyName) {
   return typographyProperties.includes(propertyName);
@@ -98,21 +99,38 @@ export function isValidPropertyNode(node) {
   }
   return true;
 }
-function getTokenNode(tokenName, tokenValue) {
+function getTokenNode(tokenName, tokenValue, isFallbackMember) {
+  var fallback;
+  if (isFallbackMember) {
+    fallback = createMemberExpressionFromArray(tokenValue.split('.'));
+  } else {
+    fallback = literal(tokenValue);
+  }
   return callExpression({
     callee: identifier({
       name: 'token'
     }),
     arguments: [literal({
       value: "'".concat(tokenName, "'")
-    }), literal(tokenValue)],
+    }), fallback],
     optional: false
   });
 }
+function createMemberExpressionFromArray(array) {
+  if (array.length === 1) {
+    return identifier(array[0]);
+  }
+  var property = array.pop();
+  return memberExpression({
+    object: createMemberExpressionFromArray(array),
+    property: identifier(property)
+  });
+}
 export function getTokenProperty(propertyName, tokenName, tokenFallback) {
+  var isFallbackMember = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
   return property({
     key: identifier(propertyName),
-    value: getTokenNode(tokenName, tokenFallback)
+    value: getTokenNode(tokenName, tokenFallback, isFallbackMember)
   });
 }
 export function getLiteralProperty(propertyName, propertyValue) {
@@ -126,4 +144,19 @@ export function convertPropertyNodeToStringableNode(node) {
     key: node.key,
     value: node.value
   });
+}
+export function insertTokensImport(root, fixer) {
+  return Root.insertImport(root, {
+    module: '@atlaskit/tokens',
+    specifiers: ['token']
+  }, fixer);
+}
+export function insertFallbackImportFull(root, fixer) {
+  return Root.insertImport(root, {
+    module: '@atlaskit/theme/typography',
+    specifiers: ['fontFallback']
+  }, fixer);
+}
+export function insertFallbackImportSpecifier(fixer, themeImportNode) {
+  return Import.insertNamedSpecifiers(themeImportNode, ['fontFallback'], fixer);
 }

package/dist/esm/rules/utils/is-supported-import.js

@@ -1,3 +1,10 @@
+// This should be kept in sync with
+// packages/design-system/eslint-plugin-ui-styling-standard/src/rules/utils/is-supported-import.tsx
+// whenever possible.
+//
+// TODO: would having an @atlassian/eslint-plugin-design-system-common
+// package be useful?
+
 // eslint-disable-next-line import/no-extraneous-dependencies
 
 export var CSS_IN_JS_IMPORTS = {
@@ -112,10 +119,12 @@ export var isCssMap = isSupportedImportWrapper('cssMap');
 export var isKeyframes = isSupportedImportWrapper('keyframes');
 // `styled` is also the explicit default of `styled-components` and `@emotion/styled`, so we also match on default imports generally
 export var isStyled = isSupportedImportWrapper('styled', ['styled-components', '@emotion/styled']);
+export var isXcss = isSupportedImportWrapper('xcss');
 export var isImportedFrom = function isImportedFrom(moduleName) {
   var exactMatch = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-  return function (nodeToCheck, referencesInScope, importSources) {
-    if (!importSources.some(function (importSource) {
+  return function (nodeToCheck, referencesInScope) {
+    var importSources = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+    if (importSources && !importSources.some(function (importSource) {
       return importSource === moduleName || !exactMatch && importSource.startsWith(moduleName);
     })) {
       // Don't go through the trouble of checking the import sources does not include this

package/dist/types/rules/consistent-css-prop-usage/types.d.ts

@@ -5,6 +5,5 @@ export type RuleConfig = {
     cssImportSource: ImportSource;
     xcssImportSource: ImportSource;
     excludeReactComponents: boolean;
-    autoFixNames: boolean;
-    fixNamesOnly: boolean;
+    autoFix: boolean;
 };

package/dist/types/rules/use-tokens-typography/transformers/style-object.d.ts

@@ -8,6 +8,8 @@ interface Refs {
     fontSizeNode: Property;
     fontSizeRaw: string | number;
     tokensImportNode: ImportDeclaration | undefined;
+    themeImportNode: ImportDeclaration | undefined;
+    shouldAddFallbackImport: 'full' | 'specifier' | false;
 }
 type Check = {
     success: boolean;
@@ -17,6 +19,8 @@ interface FixerRefs {
     matchingToken: TokenValueMap;
     nodesToReplace: Property[];
     tokensImportNode: ImportDeclaration | undefined;
+    themeImportNode: ImportDeclaration | undefined;
+    shouldAddFallbackImport: Refs['shouldAddFallbackImport'];
     fontWeightReplacement: StringableASTNode<Property> | undefined;
     fontFamilyReplacement: StringableASTNode<Property> | undefined;
     fontStyleReplacement: StringableASTNode<Property> | undefined;