@atlaskit/eslint-plugin-design-system 9.4.0 → 9.5.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 9.5.0
+
+### Minor Changes
+
+- [#91506](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/91506) [`2724a3783955`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2724a3783955) - Add support for React 18.
+
+## 9.4.1
+
+### Patch Changes
+
+- [#90125](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/90125) [`3ee5bf94b4fd`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3ee5bf94b4fd) - Added the `shouldEnforceFallbacks` option to the `use-tokens-typography` rule which can be used to prevent token fallback values being added automatically.
+
 ## 9.4.0
 
 ### Minor Changes

package/constellation/use-tokens-typography/usage.mdx

@@ -36,7 +36,11 @@ css({
 ```js
 import { token } from '@atlaskit/tokens';
 
-css({ fontSize: token('font.heading.large') });
+css({ font: token('font.heading.large') });
 
-css({ fontSize: token('font.body') });
+css({ font: token('font.body') });
 ```
+
+## Options
+
+`shouldEnforceFallbacks`: Set to `false` to ensure token fallback values are not added. Defaults to `true`.

package/dist/cjs/rules/use-tokens-typography/config/index.js

@@ -11,12 +11,16 @@ var ruleSchema = exports.ruleSchema = {
     properties: {
       failSilently: {
         type: 'boolean'
+      },
+      shouldEnforceFallbacks: {
+        type: 'boolean'
       }
     }
   }
 };
 var defaultConfig = {
-  failSilently: false
+  failSilently: false,
+  shouldEnforceFallbacks: true
 };
 var getConfig = exports.getConfig = function getConfig(overrides) {
   // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

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

@@ -15,7 +15,8 @@ var create = function create(context) {
     ObjectExpression: function ObjectExpression(node) {
       return (0, _errorBoundary.errorBoundary)(function () {
         return _styleObject.StyleObject.lint(node, {
-          context: context
+          context: context,
+          config: config
         });
       }, {
         config: config

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

@@ -13,7 +13,8 @@ var _utils2 = require("../utils");
 
 var StyleObject = exports.StyleObject = {
   lint: function lint(node, _ref) {
-    var context = _ref.context;
+    var context = _ref.context,
+      config = _ref.config;
     // To force the correct node type
     if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'ObjectExpression')) {
       return {
@@ -23,7 +24,8 @@ var StyleObject = exports.StyleObject = {
 
     // Check whether all criteria needed to make a transformation are met
     var _StyleObject$_check = StyleObject._check(node, {
-        context: context
+        context: context,
+        config: config
       }),
       success = _StyleObject$_check.success,
       refs = _StyleObject$_check.refs;
@@ -34,6 +36,7 @@ var StyleObject = exports.StyleObject = {
       fontSizeRaw = refs.fontSizeRaw,
       tokensImportNode = refs.tokensImportNode,
       themeImportNode = refs.themeImportNode,
+      shouldAddFallback = refs.shouldAddFallback,
       shouldAddFallbackImport = refs.shouldAddFallbackImport;
     var fontSizeValue = (0, _utils.normaliseValue)('fontSize', fontSizeRaw);
 
@@ -116,16 +119,17 @@ var StyleObject = exports.StyleObject = {
       var nodesToReplace = [fontSizeNode, fontWeightNode, lineHeightNode, fontFamilyNode, fontStyleNode, letterSpacingNode].filter(_utils2.notUndefined);
       var fontFamilyTokenName = fontFamilyToAdd ? "font.family.brand.".concat(fontFamilyToAdd) : '';
       var fontWeightReplacementToken = shouldAddFontWeight ? (0, _utils2.findFontWeightTokenForValue)(fontWeightValue) : undefined;
-      var fontWeightReplacement = fontWeightReplacementToken && (0, _utils2.getTokenProperty)('fontWeight', fontWeightReplacementToken.tokenName, fontWeightValue);
+      var fontWeightReplacement = fontWeightReplacementToken && (0, _utils2.getTokenProperty)('fontWeight', fontWeightReplacementToken.tokenName, shouldAddFallback ? fontWeightValue : undefined);
       var fontFamilyReplacement = fontFamilyToAdd && (fontFamilyToAdd === 'original' ? (0, _utils2.convertPropertyNodeToStringableNode)(
       // This will always exist if fontFamilyToAdd === 'original', TS can't figure that out.
-      fontFamilyNode) : (0, _utils2.getTokenProperty)('fontFamily', fontFamilyTokenName, (0, _utils2.findFontFamilyValueForToken)(fontFamilyTokenName)));
+      fontFamilyNode) : (0, _utils2.getTokenProperty)('fontFamily', fontFamilyTokenName, shouldAddFallback ? (0, _utils2.findFontFamilyValueForToken)(fontFamilyTokenName) : undefined));
       var fontStyleReplacement = fontStyleToAdd && (0, _utils2.getLiteralProperty)('fontStyle', fontStyleToAdd);
       var fixerRefs = {
         matchingToken: matchingToken,
         nodesToReplace: nodesToReplace,
         tokensImportNode: tokensImportNode,
         themeImportNode: themeImportNode,
+        shouldAddFallback: shouldAddFallback,
         shouldAddFallbackImport: shouldAddFallbackImport,
         fontWeightReplacement: fontWeightReplacement,
         fontFamilyReplacement: fontFamilyReplacement,
@@ -151,7 +155,8 @@ var StyleObject = exports.StyleObject = {
     return;
   },
   _check: function _check(node, _ref2) {
-    var context = _ref2.context;
+    var context = _ref2.context,
+      config = _ref2.config;
     if (!(0, _isNode.isDecendantOfStyleBlock)(node) && !(0, _isNode.isDecendantOfType)(node, 'JSXExpressionContainer')) {
       return {
         success: false
@@ -181,13 +186,13 @@ var StyleObject = exports.StyleObject = {
         success: false
       };
     }
-
+    var shouldAddFallback = Boolean(config.shouldEnforceFallbacks);
     // 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 shouldAddFallbackImport = shouldAddFallback && 'full';
     var themeImportDeclaration = _astNodes.Root.findImportsByModule(context.getSourceCode().ast.body, '@atlaskit/theme/typography');
-    if (themeImportDeclaration.length) {
+    if (themeImportDeclaration.length && shouldAddFallback) {
       // Import exists, check if specifier exists
       shouldAddFallbackImport = 'specifier';
       var fallbackImport = themeImportDeclaration[0].specifiers.find(function (specifier) {
@@ -213,6 +218,7 @@ var StyleObject = exports.StyleObject = {
         fontSizeRaw: fontSizeRaw,
         tokensImportNode: tokensImportDeclaration[0],
         themeImportNode: themeImportDeclaration[0],
+        shouldAddFallback: shouldAddFallback,
         shouldAddFallbackImport: shouldAddFallbackImport
       }
     };
@@ -223,6 +229,7 @@ var StyleObject = exports.StyleObject = {
         nodesToReplace = refs.nodesToReplace,
         tokensImportNode = refs.tokensImportNode,
         themeImportNode = refs.themeImportNode,
+        shouldAddFallback = refs.shouldAddFallback,
         shouldAddFallbackImport = refs.shouldAddFallbackImport,
         fontWeightReplacement = refs.fontWeightReplacement,
         fontFamilyReplacement = refs.fontFamilyReplacement,
@@ -239,7 +246,7 @@ var StyleObject = exports.StyleObject = {
       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, fallbackName, true)));
+          return fixer.replaceText(node, "".concat((0, _utils2.getTokenProperty)('font', matchingToken.tokenName, shouldAddFallback ? fallbackName : undefined, 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

@@ -119,20 +119,20 @@ function isValidPropertyNode(node) {
   }
   return true;
 }
-function getTokenNode(tokenName, tokenValue, isFallbackMember) {
-  var fallback;
-  if (isFallbackMember) {
-    fallback = createMemberExpressionFromArray(tokenValue.split('.'));
-  } else {
-    fallback = (0, _eslintCodemodUtils.literal)(tokenValue);
+function getTokenNode(tokenName, fallbackValue) {
+  var isFallbackMember = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  var callExpressionArgs = [(0, _eslintCodemodUtils.literal)({
+    value: "'".concat(tokenName, "'")
+  })];
+  if (fallbackValue) {
+    var fallback = isFallbackMember ? createMemberExpressionFromArray(fallbackValue.split('.')) : (0, _eslintCodemodUtils.literal)(fallbackValue);
+    callExpressionArgs.push(fallback);
   }
   return (0, _eslintCodemodUtils.callExpression)({
     callee: (0, _eslintCodemodUtils.identifier)({
       name: 'token'
     }),
-    arguments: [(0, _eslintCodemodUtils.literal)({
-      value: "'".concat(tokenName, "'")
-    }), fallback],
+    arguments: callExpressionArgs,
     optional: false
   });
 }

package/dist/es2019/rules/use-tokens-typography/config/index.js

@@ -5,12 +5,16 @@ export const ruleSchema = {
     properties: {
       failSilently: {
         type: 'boolean'
+      },
+      shouldEnforceFallbacks: {
+        type: 'boolean'
       }
     }
   }
 };
 const defaultConfig = {
-  failSilently: false
+  failSilently: false,
+  shouldEnforceFallbacks: true
 };
 export const getConfig = overrides => {
   // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

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

@@ -8,7 +8,8 @@ const create = context => {
     // const styles = css({ fontSize: '14px, ... }), styled.div({ fontSize: 14, ... })
     ObjectExpression: node => errorBoundary(() => {
       return StyleObject.lint(node, {
-        context
+        context,
+        config
       });
     }, {
       config

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

@@ -7,7 +7,8 @@ import { isDecendantOfGlobalToken, isDecendantOfStyleBlock, isDecendantOfType }
 import { convertPropertyNodeToStringableNode, defaultFontWeight, findFontFamilyValueForToken, findFontWeightTokenForValue, findTypographyTokenForValues, fontWeightMap, getLiteralProperty, getTokenProperty, insertFallbackImportFull, insertFallbackImportSpecifier, insertTokensImport, isValidPropertyNode, notUndefined } from '../utils';
 export const StyleObject = {
   lint(node, {
-    context
+    context,
+    config
   }) {
     // To force the correct node type
     if (!isNodeOfType(node, 'ObjectExpression')) {
@@ -21,7 +22,8 @@ export const StyleObject = {
       success,
       refs
     } = StyleObject._check(node, {
-      context
+      context,
+      config
     });
     if (!success || !refs) {
       return;
@@ -31,6 +33,7 @@ export const StyleObject = {
       fontSizeRaw,
       tokensImportNode,
       themeImportNode,
+      shouldAddFallback,
       shouldAddFallbackImport
     } = refs;
     const fontSizeValue = normaliseValue('fontSize', fontSizeRaw);
@@ -110,16 +113,17 @@ export const StyleObject = {
       const nodesToReplace = [fontSizeNode, fontWeightNode, lineHeightNode, fontFamilyNode, fontStyleNode, letterSpacingNode].filter(notUndefined);
       const fontFamilyTokenName = fontFamilyToAdd ? `font.family.brand.${fontFamilyToAdd}` : '';
       const fontWeightReplacementToken = shouldAddFontWeight ? findFontWeightTokenForValue(fontWeightValue) : undefined;
-      const fontWeightReplacement = fontWeightReplacementToken && getTokenProperty('fontWeight', fontWeightReplacementToken.tokenName, fontWeightValue);
+      const fontWeightReplacement = fontWeightReplacementToken && getTokenProperty('fontWeight', fontWeightReplacementToken.tokenName, shouldAddFallback ? fontWeightValue : undefined);
       const fontFamilyReplacement = fontFamilyToAdd && (fontFamilyToAdd === 'original' ? convertPropertyNodeToStringableNode(
       // This will always exist if fontFamilyToAdd === 'original', TS can't figure that out.
-      fontFamilyNode) : getTokenProperty('fontFamily', fontFamilyTokenName, findFontFamilyValueForToken(fontFamilyTokenName)));
+      fontFamilyNode) : getTokenProperty('fontFamily', fontFamilyTokenName, shouldAddFallback ? findFontFamilyValueForToken(fontFamilyTokenName) : undefined));
       const fontStyleReplacement = fontStyleToAdd && getLiteralProperty('fontStyle', fontStyleToAdd);
       const fixerRefs = {
         matchingToken,
         nodesToReplace,
         tokensImportNode,
         themeImportNode,
+        shouldAddFallback,
         shouldAddFallbackImport,
         fontWeightReplacement,
         fontFamilyReplacement,
@@ -145,7 +149,8 @@ export const StyleObject = {
     return;
   },
   _check(node, {
-    context
+    context,
+    config
   }) {
     if (!isDecendantOfStyleBlock(node) && !isDecendantOfType(node, 'JSXExpressionContainer')) {
       return {
@@ -176,13 +181,13 @@ export const StyleObject = {
         success: false
       };
     }
-
+    const shouldAddFallback = Boolean(config.shouldEnforceFallbacks);
     // 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';
+    let shouldAddFallbackImport = shouldAddFallback && 'full';
     const themeImportDeclaration = Root.findImportsByModule(context.getSourceCode().ast.body, '@atlaskit/theme/typography');
-    if (themeImportDeclaration.length) {
+    if (themeImportDeclaration.length && shouldAddFallback) {
       // Import exists, check if specifier exists
       shouldAddFallbackImport = 'specifier';
       const fallbackImport = themeImportDeclaration[0].specifiers.find(specifier => {
@@ -208,6 +213,7 @@ export const StyleObject = {
         fontSizeRaw,
         tokensImportNode: tokensImportDeclaration[0],
         themeImportNode: themeImportDeclaration[0],
+        shouldAddFallback,
         shouldAddFallbackImport
       }
     };
@@ -219,6 +225,7 @@ export const StyleObject = {
         nodesToReplace,
         tokensImportNode,
         themeImportNode,
+        shouldAddFallback,
         shouldAddFallbackImport,
         fontWeightReplacement,
         fontFamilyReplacement,
@@ -236,7 +243,7 @@ export const StyleObject = {
       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, fallbackName, true)}`);
+          return fixer.replaceText(node, `${getTokenProperty('font', matchingToken.tokenName, shouldAddFallback ? fallbackName : undefined, 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

@@ -69,20 +69,19 @@ export function isValidPropertyNode(node) {
   }
   return true;
 }
-function getTokenNode(tokenName, tokenValue, isFallbackMember) {
-  let fallback;
-  if (isFallbackMember) {
-    fallback = createMemberExpressionFromArray(tokenValue.split('.'));
-  } else {
-    fallback = literal(tokenValue);
+function getTokenNode(tokenName, fallbackValue, isFallbackMember = false) {
+  const callExpressionArgs = [literal({
+    value: `'${tokenName}'`
+  })];
+  if (fallbackValue) {
+    const fallback = isFallbackMember ? createMemberExpressionFromArray(fallbackValue.split('.')) : literal(fallbackValue);
+    callExpressionArgs.push(fallback);
   }
   return callExpression({
     callee: identifier({
       name: 'token'
     }),
-    arguments: [literal({
-      value: `'${tokenName}'`
-    }), fallback],
+    arguments: callExpressionArgs,
     optional: false
   });
 }

package/dist/esm/rules/use-tokens-typography/config/index.js

@@ -5,12 +5,16 @@ export var ruleSchema = {
     properties: {
       failSilently: {
         type: 'boolean'
+      },
+      shouldEnforceFallbacks: {
+        type: 'boolean'
       }
     }
   }
 };
 var defaultConfig = {
-  failSilently: false
+  failSilently: false,
+  shouldEnforceFallbacks: true
 };
 export var getConfig = function getConfig(overrides) {
   // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

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

@@ -9,7 +9,8 @@ var create = function create(context) {
     ObjectExpression: function ObjectExpression(node) {
       return errorBoundary(function () {
         return StyleObject.lint(node, {
-          context: context
+          context: context,
+          config: config
         });
       }, {
         config: config

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

@@ -7,7 +7,8 @@ import { isDecendantOfGlobalToken, isDecendantOfStyleBlock, isDecendantOfType }
 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;
+    var context = _ref.context,
+      config = _ref.config;
     // To force the correct node type
     if (!isNodeOfType(node, 'ObjectExpression')) {
       return {
@@ -17,7 +18,8 @@ export var StyleObject = {
 
     // Check whether all criteria needed to make a transformation are met
     var _StyleObject$_check = StyleObject._check(node, {
-        context: context
+        context: context,
+        config: config
       }),
       success = _StyleObject$_check.success,
       refs = _StyleObject$_check.refs;
@@ -28,6 +30,7 @@ export var StyleObject = {
       fontSizeRaw = refs.fontSizeRaw,
       tokensImportNode = refs.tokensImportNode,
       themeImportNode = refs.themeImportNode,
+      shouldAddFallback = refs.shouldAddFallback,
       shouldAddFallbackImport = refs.shouldAddFallbackImport;
     var fontSizeValue = normaliseValue('fontSize', fontSizeRaw);
 
@@ -110,16 +113,17 @@ export var StyleObject = {
       var nodesToReplace = [fontSizeNode, fontWeightNode, lineHeightNode, fontFamilyNode, fontStyleNode, letterSpacingNode].filter(notUndefined);
       var fontFamilyTokenName = fontFamilyToAdd ? "font.family.brand.".concat(fontFamilyToAdd) : '';
       var fontWeightReplacementToken = shouldAddFontWeight ? findFontWeightTokenForValue(fontWeightValue) : undefined;
-      var fontWeightReplacement = fontWeightReplacementToken && getTokenProperty('fontWeight', fontWeightReplacementToken.tokenName, fontWeightValue);
+      var fontWeightReplacement = fontWeightReplacementToken && getTokenProperty('fontWeight', fontWeightReplacementToken.tokenName, shouldAddFallback ? fontWeightValue : undefined);
       var fontFamilyReplacement = fontFamilyToAdd && (fontFamilyToAdd === 'original' ? convertPropertyNodeToStringableNode(
       // This will always exist if fontFamilyToAdd === 'original', TS can't figure that out.
-      fontFamilyNode) : getTokenProperty('fontFamily', fontFamilyTokenName, findFontFamilyValueForToken(fontFamilyTokenName)));
+      fontFamilyNode) : getTokenProperty('fontFamily', fontFamilyTokenName, shouldAddFallback ? findFontFamilyValueForToken(fontFamilyTokenName) : undefined));
       var fontStyleReplacement = fontStyleToAdd && getLiteralProperty('fontStyle', fontStyleToAdd);
       var fixerRefs = {
         matchingToken: matchingToken,
         nodesToReplace: nodesToReplace,
         tokensImportNode: tokensImportNode,
         themeImportNode: themeImportNode,
+        shouldAddFallback: shouldAddFallback,
         shouldAddFallbackImport: shouldAddFallbackImport,
         fontWeightReplacement: fontWeightReplacement,
         fontFamilyReplacement: fontFamilyReplacement,
@@ -145,7 +149,8 @@ export var StyleObject = {
     return;
   },
   _check: function _check(node, _ref2) {
-    var context = _ref2.context;
+    var context = _ref2.context,
+      config = _ref2.config;
     if (!isDecendantOfStyleBlock(node) && !isDecendantOfType(node, 'JSXExpressionContainer')) {
       return {
         success: false
@@ -175,13 +180,13 @@ export var StyleObject = {
         success: false
       };
     }
-
+    var shouldAddFallback = Boolean(config.shouldEnforceFallbacks);
     // 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 shouldAddFallbackImport = shouldAddFallback && 'full';
     var themeImportDeclaration = Root.findImportsByModule(context.getSourceCode().ast.body, '@atlaskit/theme/typography');
-    if (themeImportDeclaration.length) {
+    if (themeImportDeclaration.length && shouldAddFallback) {
       // Import exists, check if specifier exists
       shouldAddFallbackImport = 'specifier';
       var fallbackImport = themeImportDeclaration[0].specifiers.find(function (specifier) {
@@ -207,6 +212,7 @@ export var StyleObject = {
         fontSizeRaw: fontSizeRaw,
         tokensImportNode: tokensImportDeclaration[0],
         themeImportNode: themeImportDeclaration[0],
+        shouldAddFallback: shouldAddFallback,
         shouldAddFallbackImport: shouldAddFallbackImport
       }
     };
@@ -217,6 +223,7 @@ export var StyleObject = {
         nodesToReplace = refs.nodesToReplace,
         tokensImportNode = refs.tokensImportNode,
         themeImportNode = refs.themeImportNode,
+        shouldAddFallback = refs.shouldAddFallback,
         shouldAddFallbackImport = refs.shouldAddFallbackImport,
         fontWeightReplacement = refs.fontWeightReplacement,
         fontFamilyReplacement = refs.fontFamilyReplacement,
@@ -233,7 +240,7 @@ export var StyleObject = {
       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, fallbackName, true)));
+          return fixer.replaceText(node, "".concat(getTokenProperty('font', matchingToken.tokenName, shouldAddFallback ? fallbackName : undefined, 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

@@ -99,20 +99,20 @@ export function isValidPropertyNode(node) {
   }
   return true;
 }
-function getTokenNode(tokenName, tokenValue, isFallbackMember) {
-  var fallback;
-  if (isFallbackMember) {
-    fallback = createMemberExpressionFromArray(tokenValue.split('.'));
-  } else {
-    fallback = literal(tokenValue);
+function getTokenNode(tokenName, fallbackValue) {
+  var isFallbackMember = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  var callExpressionArgs = [literal({
+    value: "'".concat(tokenName, "'")
+  })];
+  if (fallbackValue) {
+    var fallback = isFallbackMember ? createMemberExpressionFromArray(fallbackValue.split('.')) : literal(fallbackValue);
+    callExpressionArgs.push(fallback);
   }
   return callExpression({
     callee: identifier({
       name: 'token'
     }),
-    arguments: [literal({
-      value: "'".concat(tokenName, "'")
-    }), fallback],
+    arguments: callExpressionArgs,
     optional: false
   });
 }

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

@@ -1,6 +1,7 @@
 import { JSONSchema4 } from '@typescript-eslint/utils/dist/json-schema';
 export type RuleConfig = {
     failSilently?: boolean;
+    shouldEnforceFallbacks?: boolean;
 };
 export declare const ruleSchema: JSONSchema4;
 export declare const getConfig: (overrides: RuleConfig) => RuleConfig;

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

@@ -1,14 +1,17 @@
 import type { Rule } from 'eslint';
 import { ImportDeclaration, ObjectExpression, Property, StringableASTNode } from 'eslint-codemod-utils';
+import { RuleConfig } from '../config';
 import { TokenValueMap } from '../utils';
 interface MetaData {
     context: Rule.RuleContext;
+    config: RuleConfig;
 }
 interface Refs {
     fontSizeNode: Property;
     fontSizeRaw: string | number;
     tokensImportNode: ImportDeclaration | undefined;
     themeImportNode: ImportDeclaration | undefined;
+    shouldAddFallback: boolean;
     shouldAddFallbackImport: 'full' | 'specifier' | false;
 }
 type Check = {
@@ -20,16 +23,17 @@ interface FixerRefs {
     nodesToReplace: Property[];
     tokensImportNode: ImportDeclaration | undefined;
     themeImportNode: ImportDeclaration | undefined;
+    shouldAddFallback: boolean;
     shouldAddFallbackImport: Refs['shouldAddFallbackImport'];
     fontWeightReplacement: StringableASTNode<Property> | undefined;
     fontFamilyReplacement: StringableASTNode<Property> | undefined;
     fontStyleReplacement: StringableASTNode<Property> | undefined;
 }
 export declare const StyleObject: {
-    lint(node: Rule.Node, { context }: MetaData): {
+    lint(node: Rule.Node, { context, config }: MetaData): {
         success: boolean;
     } | undefined;
-    _check(node: ObjectExpression & Rule.NodeParentExtension, { context }: MetaData): Check;
+    _check(node: ObjectExpression & Rule.NodeParentExtension, { context, config }: MetaData): Check;
     _fix(refs: FixerRefs, context: Rule.RuleContext): (fixer: Rule.RuleFixer) => Rule.Fix[];
 };
 export {};

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

@@ -190,7 +190,7 @@ 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, isFallbackMember?: boolean): 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;

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

@@ -1,6 +1,7 @@
 import { JSONSchema4 } from '@typescript-eslint/utils/dist/json-schema';
 export type RuleConfig = {
     failSilently?: boolean;
+    shouldEnforceFallbacks?: boolean;
 };
 export declare const ruleSchema: JSONSchema4;
 export declare const getConfig: (overrides: RuleConfig) => RuleConfig;

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

@@ -1,14 +1,17 @@
 import type { Rule } from 'eslint';
 import { ImportDeclaration, ObjectExpression, Property, StringableASTNode } from 'eslint-codemod-utils';
+import { RuleConfig } from '../config';
 import { TokenValueMap } from '../utils';
 interface MetaData {
     context: Rule.RuleContext;
+    config: RuleConfig;
 }
 interface Refs {
     fontSizeNode: Property;
     fontSizeRaw: string | number;
     tokensImportNode: ImportDeclaration | undefined;
     themeImportNode: ImportDeclaration | undefined;
+    shouldAddFallback: boolean;
     shouldAddFallbackImport: 'full' | 'specifier' | false;
 }
 type Check = {
@@ -20,16 +23,17 @@ interface FixerRefs {
     nodesToReplace: Property[];
     tokensImportNode: ImportDeclaration | undefined;
     themeImportNode: ImportDeclaration | undefined;
+    shouldAddFallback: boolean;
     shouldAddFallbackImport: Refs['shouldAddFallbackImport'];
     fontWeightReplacement: StringableASTNode<Property> | undefined;
     fontFamilyReplacement: StringableASTNode<Property> | undefined;
     fontStyleReplacement: StringableASTNode<Property> | undefined;
 }
 export declare const StyleObject: {
-    lint(node: Rule.Node, { context }: MetaData): {
+    lint(node: Rule.Node, { context, config }: MetaData): {
         success: boolean;
     } | undefined;
-    _check(node: ObjectExpression & Rule.NodeParentExtension, { context }: MetaData): Check;
+    _check(node: ObjectExpression & Rule.NodeParentExtension, { context, config }: MetaData): Check;
     _fix(refs: FixerRefs, context: Rule.RuleContext): (fixer: Rule.RuleFixer) => Rule.Fix[];
 };
 export {};

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

@@ -190,7 +190,7 @@ 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, isFallbackMember?: boolean): 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;

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.4.0",
+  "version": "9.5.0",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
   "publishConfig": {
@@ -16,7 +16,8 @@
     "website": {
       "name": "ESLint plugin",
       "category": "Tooling"
-    }
+    },
+    "runReact18": true
   },
   "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
   "main": "dist/cjs/index.js",
@@ -36,8 +37,11 @@
   "af:exports": {
     ".": "./src/index.tsx"
   },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0 || ~18.2.0"
+  },
   "dependencies": {
-    "@atlaskit/eslint-utils": "^1.1.0",
+    "@atlaskit/eslint-utils": "^1.2.0",
     "@atlaskit/tokens": "*",
     "@babel/runtime": "^7.0.0",
     "@typescript-eslint/utils": "^5.48.1",
@@ -49,7 +53,7 @@
     "semver": "^7.5.2"
   },
   "devDependencies": {
-    "@atlaskit/ds-lib": "^2.2.0",
+    "@atlaskit/ds-lib": "^2.3.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": "*",