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

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 9.1.0
+
+### Minor Changes
+
+- [#84334](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/84334) [`b2134858ba58`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b2134858ba58) - The `use-tokens-typography` rule now applies token fallbacks that reference the constants exported via `@atlaskit/theme/typography`, rather than applying the fallback string inline.
+
 ## 9.0.0
 
 ### Major Changes

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

@@ -32,7 +32,9 @@ var StyleObject = exports.StyleObject = {
     }
     var fontSizeNode = refs.fontSizeNode,
       fontSizeRaw = refs.fontSizeRaw,
-      tokensImportNode = refs.tokensImportNode;
+      tokensImportNode = refs.tokensImportNode,
+      themeImportNode = refs.themeImportNode,
+      shouldAddFallbackImport = refs.shouldAddFallbackImport;
     var fontSizeValue = (0, _utils.normaliseValue)('fontSize', fontSizeRaw);
 
     // -- Font weight --
@@ -123,6 +125,8 @@ var StyleObject = exports.StyleObject = {
         matchingToken: matchingToken,
         nodesToReplace: nodesToReplace,
         tokensImportNode: tokensImportNode,
+        themeImportNode: themeImportNode,
+        shouldAddFallbackImport: shouldAddFallbackImport,
         fontWeightReplacement: fontWeightReplacement,
         fontFamilyReplacement: fontFamilyReplacement,
         fontStyleReplacement: fontStyleReplacement
@@ -169,20 +173,47 @@ var StyleObject = exports.StyleObject = {
         success: false
       };
     }
-    var importDeclaration = _astNodes.Root.findImportsByModule(context.getSourceCode().ast.body, '@atlaskit/tokens');
+    var tokensImportDeclaration = _astNodes.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 = _astNodes.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 (!(0, _eslintCodemodUtils.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
       }
     };
   },
@@ -191,14 +222,24 @@ var StyleObject = exports.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 ? [(0, _utils.insertTokensImport)(fixer)] : []).concat(nodesToReplace.map(function (node, index) {
+      var root = context.getSourceCode().ast.body;
+      var fallbackImport;
+      if (shouldAddFallbackImport === 'full') {
+        fallbackImport = (0, _utils2.insertFallbackImportFull)(root, fixer);
+      } else if (shouldAddFallbackImport === 'specifier') {
+        fallbackImport = (0, _utils2.insertFallbackImportSpecifier)(fixer, themeImportNode);
+      }
+      var fallbackName = (matchingToken.tokenName === 'font.body' ? 'font.body.medium' : matchingToken.tokenName).replace('font', 'fontFallback');
+      return (!tokensImportNode ? [(0, _utils2.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((0, _utils2.getTokenProperty)('font', matchingToken.tokenName, matchingToken.tokenValue)));
+          return fixer.replaceText(node, "".concat((0, _utils2.getTokenProperty)('font', matchingToken.tokenName, fallbackName, true)));
         }
 
         // We don't replace fontWeight/fontFamily/fontStyle here in case it occurs before the font property.

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

@@ -11,6 +11,9 @@ exports.findTypographyTokenForValues = findTypographyTokenForValues;
 exports.fontWeightTokens = exports.fontWeightMap = exports.fontFamilyTokens = void 0;
 exports.getLiteralProperty = getLiteralProperty;
 exports.getTokenProperty = getTokenProperty;
+exports.insertFallbackImportFull = insertFallbackImportFull;
+exports.insertFallbackImportSpecifier = insertFallbackImportSpecifier;
+exports.insertTokensImport = insertTokensImport;
 exports.isTypographyProperty = exports.isFontSizeSmall = exports.isFontSize = exports.isFontFamily = exports.isCodeFontFamily = void 0;
 exports.isValidPropertyNode = isValidPropertyNode;
 exports.notUndefined = notUndefined;
@@ -18,6 +21,7 @@ exports.typographyValueToToken = exports.typographyProperties = void 0;
 var _eslintCodemodUtils = require("eslint-codemod-utils");
 var _palettesRaw = require("@atlaskit/tokens/palettes-raw");
 var _tokensRaw = require("@atlaskit/tokens/tokens-raw");
+var _astNodes = require("../../ast-nodes");
 var typographyProperties = exports.typographyProperties = ['fontSize', 'fontWeight', 'fontFamily', 'lineHeight'];
 var isTypographyProperty = exports.isTypographyProperty = function isTypographyProperty(propertyName) {
   return typographyProperties.includes(propertyName);
@@ -115,21 +119,38 @@ function isValidPropertyNode(node) {
   }
   return true;
 }
-function getTokenNode(tokenName, tokenValue) {
+function getTokenNode(tokenName, tokenValue, isFallbackMember) {
+  var fallback;
+  if (isFallbackMember) {
+    fallback = createMemberExpressionFromArray(tokenValue.split('.'));
+  } else {
+    fallback = (0, _eslintCodemodUtils.literal)(tokenValue);
+  }
   return (0, _eslintCodemodUtils.callExpression)({
     callee: (0, _eslintCodemodUtils.identifier)({
       name: 'token'
     }),
     arguments: [(0, _eslintCodemodUtils.literal)({
       value: "'".concat(tokenName, "'")
-    }), (0, _eslintCodemodUtils.literal)(tokenValue)],
+    }), fallback],
     optional: false
   });
 }
+function createMemberExpressionFromArray(array) {
+  if (array.length === 1) {
+    return (0, _eslintCodemodUtils.identifier)(array[0]);
+  }
+  var property = array.pop();
+  return (0, _eslintCodemodUtils.memberExpression)({
+    object: createMemberExpressionFromArray(array),
+    property: (0, _eslintCodemodUtils.identifier)(property)
+  });
+}
 function getTokenProperty(propertyName, tokenName, tokenFallback) {
+  var isFallbackMember = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
   return (0, _eslintCodemodUtils.property)({
     key: (0, _eslintCodemodUtils.identifier)(propertyName),
-    value: getTokenNode(tokenName, tokenFallback)
+    value: getTokenNode(tokenName, tokenFallback, isFallbackMember)
   });
 }
 function getLiteralProperty(propertyName, propertyValue) {
@@ -143,4 +164,19 @@ function convertPropertyNodeToStringableNode(node) {
     key: node.key,
     value: node.value
   });
+}
+function insertTokensImport(root, fixer) {
+  return _astNodes.Root.insertImport(root, {
+    module: '@atlaskit/tokens',
+    specifiers: ['token']
+  }, fixer);
+}
+function insertFallbackImportFull(root, fixer) {
+  return _astNodes.Root.insertImport(root, {
+    module: '@atlaskit/theme/typography',
+    specifiers: ['fontFallback']
+  }, fixer);
+}
+function insertFallbackImportSpecifier(fixer, themeImportNode) {
+  return _astNodes.Import.insertNamedSpecifiers(themeImportNode, ['fontFallback'], fixer);
 }

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/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/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;

package/dist/types/rules/use-tokens-typography/utils.d.ts

@@ -1,4 +1,5 @@
-import { CallExpression, EslintNode, Property } from 'eslint-codemod-utils';
+import type { Rule } from 'eslint';
+import { CallExpression, Directive, EslintNode, ImportDeclaration, ModuleDeclaration, Property, Statement, StringableASTNode } from 'eslint-codemod-utils';
 export declare const typographyProperties: string[];
 export declare const isTypographyProperty: (propertyName: string) => boolean;
 export declare const isFontSize: (node: EslintNode) => node is CallExpression;
@@ -189,6 +190,9 @@ export declare const fontFamilyTokens: ({
 export declare function findFontFamilyValueForToken(tokenName: string): string;
 export declare function notUndefined<V>(value: V | undefined): value is V;
 export declare function isValidPropertyNode(node: Property): boolean;
-export declare function getTokenProperty(propertyName: string, tokenName: string, tokenFallback: string): import("eslint-codemod-utils").StringableASTNode<Property>;
-export declare function getLiteralProperty(propertyName: string, propertyValue: string): import("eslint-codemod-utils").StringableASTNode<Property>;
-export declare function convertPropertyNodeToStringableNode(node: Property): import("eslint-codemod-utils").StringableASTNode<Property>;
+export declare function getTokenProperty(propertyName: string, tokenName: string, tokenFallback: string, isFallbackMember?: boolean): StringableASTNode<Property>;
+export declare function getLiteralProperty(propertyName: string, propertyValue: string): StringableASTNode<Property>;
+export declare function convertPropertyNodeToStringableNode(node: Property): StringableASTNode<Property>;
+export declare function insertTokensImport(root: (Directive | Statement | ModuleDeclaration)[], fixer: Rule.RuleFixer): Rule.Fix;
+export declare function insertFallbackImportFull(root: (Directive | Statement | ModuleDeclaration)[], fixer: Rule.RuleFixer): Rule.Fix;
+export declare function insertFallbackImportSpecifier(fixer: Rule.RuleFixer, themeImportNode: ImportDeclaration): Rule.Fix | undefined;

package/dist/types-ts4.5/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;

package/dist/types-ts4.5/rules/use-tokens-typography/utils.d.ts

@@ -1,4 +1,5 @@
-import { CallExpression, EslintNode, Property } from 'eslint-codemod-utils';
+import type { Rule } from 'eslint';
+import { CallExpression, Directive, EslintNode, ImportDeclaration, ModuleDeclaration, Property, Statement, StringableASTNode } from 'eslint-codemod-utils';
 export declare const typographyProperties: string[];
 export declare const isTypographyProperty: (propertyName: string) => boolean;
 export declare const isFontSize: (node: EslintNode) => node is CallExpression;
@@ -189,6 +190,9 @@ export declare const fontFamilyTokens: ({
 export declare function findFontFamilyValueForToken(tokenName: string): string;
 export declare function notUndefined<V>(value: V | undefined): value is V;
 export declare function isValidPropertyNode(node: Property): boolean;
-export declare function getTokenProperty(propertyName: string, tokenName: string, tokenFallback: string): import("eslint-codemod-utils").StringableASTNode<Property>;
-export declare function getLiteralProperty(propertyName: string, propertyValue: string): import("eslint-codemod-utils").StringableASTNode<Property>;
-export declare function convertPropertyNodeToStringableNode(node: Property): import("eslint-codemod-utils").StringableASTNode<Property>;
+export declare function getTokenProperty(propertyName: string, tokenName: string, tokenFallback: string, isFallbackMember?: boolean): StringableASTNode<Property>;
+export declare function getLiteralProperty(propertyName: string, propertyValue: string): StringableASTNode<Property>;
+export declare function convertPropertyNodeToStringableNode(node: Property): StringableASTNode<Property>;
+export declare function insertTokensImport(root: (Directive | Statement | ModuleDeclaration)[], fixer: Rule.RuleFixer): Rule.Fix;
+export declare function insertFallbackImportFull(root: (Directive | Statement | ModuleDeclaration)[], fixer: Rule.RuleFixer): Rule.Fix;
+export declare function insertFallbackImportSpecifier(fixer: Rule.RuleFixer, themeImportNode: ImportDeclaration): Rule.Fix | undefined;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@atlaskit/eslint-plugin-design-system",
   "description": "The essential plugin for use with the Atlassian Design System.",
-  "version": "9.0.0",
+  "version": "9.1.0",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
   "publishConfig": {
@@ -48,7 +48,7 @@
   },
   "devDependencies": {
     "@atlaskit/ds-lib": "^2.2.0",
-    "@atlaskit/theme": "^12.6.0",
+    "@atlaskit/theme": "^12.7.0",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@atlassian/codegen": "*",
     "@atlassian/eslint-utils": "^0.4.0",