@atlaskit/eslint-plugin-design-system 4.13.6 → 4.13.8

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 4.13.8
+
+### Patch Changes
+
+- [`f4c5d7db7aa`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f4c5d7db7aa) - Updates fix for `ensure-design-token-usage-spacing` to ensure fixes are not applied erroneously.
+
+## 4.13.7
+
+### Patch Changes
+
+- [`41ac6cadd32`](https://bitbucket.org/atlassian/atlassian-frontend/commits/41ac6cadd32) - Adds support to the ensure-design-token-usage-spacing rule for replacing typography values with tokens
+
 ## 4.13.6
 
 ### Patch Changes

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

@@ -15,6 +15,8 @@ var _eslintCodemodUtils = require("eslint-codemod-utils");
 
 var _spacingRaw = _interopRequireDefault(require("@atlaskit/tokens/spacing-raw"));
 
+var _typographyRaw = _interopRequireDefault(require("@atlaskit/tokens/typography-raw"));
+
 var _isNode = require("../utils/is-node");
 
 var _utils = require("./utils");
@@ -35,22 +37,38 @@ var onlyScaleTokens = _spacingRaw.default.filter(function (token) {
 var spacingValueToToken = Object.fromEntries(onlyScaleTokens.map(function (token) {
   return [token.attributes['pixelValue'], token.name];
 }));
+var typographyValueToToken = Object.fromEntries(_typographyRaw.default.map(function (currentToken) {
+  // Group tokens by property name (e.g. fontSize, fontFamily, lineHeight)
+  // This allows us to look up values specific to a property
+  // (so as not to mix tokens with overlapping values e.g. font size and line height both have tokens for 16px)
+  var tokenGroup = currentToken.attributes.group;
+  return [tokenGroup, Object.fromEntries(_typographyRaw.default.map(function (token) {
+    return token.attributes.group === tokenGroup ? [token.value.replaceAll("\"", "'"), token.name] : [];
+  }).filter(function (token) {
+    return token.length;
+  }))];
+}));
 /**
+ * Returns a token node for a given value including fallbacks.
+ * @param propertyName camelCase CSS property
+ * @param value string representing pixel value, or font family, or number representing font weight
  * @example
  * ```
- * '8px' => token('spacing.scale.100', '8px')
+ * propertyName: padding, value: '8px' => token('spacing.scale.100', '8px')
+ * propertyName: fontWeight, value: 400 => token('font.weight.regular', '400')
  * ```
  */
 
-function pixelValueToSpacingTokenNode(pixelValueString) {
-  var token = spacingValueToToken[pixelValueString];
+function getTokenNodeForValue(propertyName, value) {
+  var token = (0, _utils.isTypographyProperty)(propertyName) ? typographyValueToToken[propertyName][value] : spacingValueToToken[value];
+  var fallbackValue = propertyName === 'fontFamily' ? "\"".concat(value, "\"") : "'".concat(value, "'");
   return (0, _eslintCodemodUtils.callExpression)({
     callee: (0, _eslintCodemodUtils.identifier)({
       name: 'token'
     }),
     arguments: [(0, _eslintCodemodUtils.literal)({
       value: "'".concat(token !== null && token !== void 0 ? token : '', "'")
-    }), (0, _eslintCodemodUtils.literal)("'".concat(pixelValueString, "'"))],
+    }), (0, _eslintCodemodUtils.literal)(fallbackValue)],
     optional: false
   });
 }
@@ -92,7 +110,7 @@ var rule = {
 
           return node.key.name === 'fontSize';
         });
-        var fontSizeValue = (0, _utils.getValue)( // @ts-ignore
+        var fontSizeValue = (0, _utils.getValue)( // @ts-expect-error
         (0, _eslintCodemodUtils.isNodeOfType)(fontSizeNode, 'Property') && fontSizeNode.value, context);
         var fontSize = Array.isArray(fontSizeValue) ? fontSizeValue[0] : fontSizeValue;
 
@@ -132,6 +150,8 @@ var rule = {
             return;
           }
 
+          var propertyName = node.key.name;
+          var isFontFamily = /fontFamily/.test(propertyName);
           var value = (0, _utils.getValue)(node.value, context); // value is either NaN or it can't be resolved eg, em, 100% etc...
 
           if (!(value && (0, _utils.isValidSpacingValue)(value, fontSize))) {
@@ -145,34 +165,37 @@ var rule = {
           }
 
           var values = Array.isArray(value) ? value : [value]; // value is a single value so we can apply a more robust approach to our fix
+          // treat fontFamily as having one value
 
-          if (values.length === 1) {
+          if (values.length === 1 || isFontFamily) {
             var _values = (0, _slicedToArray2.default)(values, 1),
                 _value = _values[0];
 
-            var pixelValue = (0, _utils.emToPixels)(_value, fontSize);
+            var pixelValue = isFontFamily ? _value : (0, _utils.emToPixels)(_value, fontSize);
             return context.report({
               node: node,
               messageId: 'noRawSpacingValues',
               data: {
-                payload: "".concat(node.key.name, ":").concat(pixelValue)
+                payload: "".concat(propertyName, ":").concat(pixelValue)
               },
               fix: function fix(fixer) {
                 var _node$loc;
 
-                if (!/padding|margin|gap/.test(node.key.name)) {
+                if (!(0, _utils.isSpacingProperty)(propertyName)) {
                   return null;
                 }
 
                 var pixelValueString = "".concat(pixelValue, "px");
-                var tokenName = spacingValueToToken[pixelValueString];
+                var lookupValue = /fontWeight|fontFamily/.test(propertyName) ? pixelValue : pixelValueString;
+                var tokenName = (0, _utils.isTypographyProperty)(propertyName) ? typographyValueToToken[propertyName][lookupValue] : spacingValueToToken[lookupValue];
 
                 if (!tokenName) {
                   return null;
                 }
 
+                var replacementValue = getTokenNodeForValue(propertyName, lookupValue);
                 return [fixer.insertTextBefore(node, "// TODO Delete this comment after verifying spacing token -> previous value `".concat((0, _eslintCodemodUtils.node)(node.value), "`\n").concat(' '.padStart(((_node$loc = node.loc) === null || _node$loc === void 0 ? void 0 : _node$loc.start.column) || 0))), fixer.replaceText(node, (0, _eslintCodemodUtils.property)(_objectSpread(_objectSpread({}, node), {}, {
-                  value: pixelValueToSpacingTokenNode(pixelValueString)
+                  value: replacementValue
                 })).toString())];
               }
             });
@@ -192,7 +215,7 @@ var rule = {
               node: node,
               messageId: 'noRawSpacingValues',
               data: {
-                payload: "".concat(node.key.name, ":").concat(pixelValue)
+                payload: "".concat(propertyName, ":").concat(pixelValue)
               },
               fix: index === 0 ? function (fixer) {
                 var allResolvableValues = values.every(function (value) {
@@ -206,7 +229,7 @@ var rule = {
                 return fixer.replaceText(node.value, "`".concat(values.map(function (value) {
                   var pixelValue = (0, _utils.emToPixels)(value, fontSize);
                   var pixelValueString = "".concat(pixelValue, "px");
-                  return "${".concat(pixelValueToSpacingTokenNode(pixelValueString), "}");
+                  return "${".concat(getTokenNodeForValue(propertyName, pixelValueString), "}");
                 }).join(' '), "`"));
               } : undefined
             });
@@ -255,9 +278,9 @@ var rule = {
               rawProperty = _style$split4[0],
               value = _style$split4[1];
 
-          var property = (0, _utils.convertHyphenatedNameToCamelCase)(rawProperty);
+          var propertyName = (0, _utils.convertHyphenatedNameToCamelCase)(rawProperty);
 
-          if (!(0, _utils.isSpacingProperty)(property)) {
+          if (!(0, _utils.isSpacingProperty)(propertyName)) {
             return;
           } // value is either NaN or it can't be resolved eg, em, 100% etc...
 
@@ -274,16 +297,17 @@ var rule = {
 
           var values = (0, _utils.getValueFromShorthand)(value);
           values.forEach(function (val, index) {
-            if (!val && val !== 0 || !/padding|margin|gap/.test(rawProperty)) {
+            if (!val && val !== 0 || !(0, _utils.isSpacingProperty)(propertyName)) {
               return;
             }
 
-            var pixelValue = (0, _utils.emToPixels)(val, fontSize);
+            var isFontFamily = /fontFamily/.test(propertyName);
+            var pixelValue = isFontFamily ? val : (0, _utils.emToPixels)(val, fontSize);
             context.report({
               node: node,
               messageId: 'noRawSpacingValues',
               data: {
-                payload: "".concat(property, ":").concat(pixelValue)
+                payload: "".concat(propertyName, ":").concat(pixelValue)
               },
               fix: index === 0 ? function (fixer) {
                 var allResolvableValues = values.every(function (value) {
@@ -295,24 +319,33 @@ var rule = {
                 }
 
                 var replacementValue = values.map(function (value) {
-                  var pixelValue = (0, _utils.emToPixels)(value, fontSize);
+                  var propertyValue = typeof value === 'string' ? value.trim() : value;
+                  var pixelValue = isFontFamily ? propertyValue : (0, _utils.emToPixels)(propertyValue, fontSize);
                   var pixelValueString = "".concat(pixelValue, "px");
-                  var tokenName = spacingValueToToken[pixelValueString];
+                  var lookupValue = /fontWeight|fontFamily/.test(propertyName) ? pixelValue : pixelValueString;
+                  var tokenName = (0, _utils.isTypographyProperty)(propertyName) ? typographyValueToToken[propertyName][lookupValue] : spacingValueToToken[lookupValue];
 
                   if (!tokenName) {
                     return pixelValueString;
-                  } // ${token('...', '...')}
+                  }
 
+                  var replacementTokenValue = getTokenNodeForValue(propertyName, lookupValue); // ${token('...', '...')}
 
-                  var replacementSubValue = '${' + pixelValueToSpacingTokenNode(pixelValueString).toString() + '}';
+                  var replacementSubValue = '${' + replacementTokenValue.toString() + '}';
                   return replacementSubValue;
                 }).join(' '); // get original source
 
                 var textForSource = context.getSourceCode().getText(node.quasi); // find `<property>: ...;` in original
 
-                var searchRegExp = new RegExp("".concat(rawProperty, ".+?;"), 'g'); // replace property:val with new property:val
+                var searchRegExp = new RegExp(style, 'g'); // replace property:val with new property:val
+
+                var replacement = textForSource.replace(searchRegExp, //  padding: ${gridSize()}px;
+                "".concat(rawProperty, ": ").concat(replacementValue));
+
+                if (!replacement) {
+                  return [];
+                }
 
-                var replacement = textForSource.replace(searchRegExp, "".concat(rawProperty, ": ").concat(replacementValue, ";"));
                 return [fixer.insertTextBefore(parentNode, "// TODO Delete this comment after verifying spacing token -> previous value `".concat(value.trim(), "`\n")), fixer.replaceText(node.quasi, replacement)];
               } : undefined
             });

package/dist/cjs/rules/ensure-design-token-usage-spacing/utils.js

@@ -5,13 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.emToPixels = exports.convertHyphenatedNameToCamelCase = void 0;
 exports.findIdentifierInParentScope = findIdentifierInParentScope;
-exports.removePixelSuffix = exports.isValidSpacingValue = exports.isSpacingProperty = exports.getValueFromShorthand = exports.getValue = exports.findParentNodeForLine = void 0;
+exports.removePixelSuffix = exports.isValidSpacingValue = exports.isTypographyProperty = exports.isSpacingProperty = exports.getValueFromShorthand = exports.getValue = exports.findParentNodeForLine = void 0;
 
 var _eslintCodemodUtils = require("eslint-codemod-utils");
 
-var properties = ['padding', 'paddingBlock', 'paddingInline', 'paddingLeft', 'paddingTop', 'paddingRight', 'paddingBottom', 'marginLeft', 'marginTop', 'marginRight', 'marginBottom', 'margin', 'gap', 'fontSize', 'lineHeight', // 'width', re-enable later
+var typographyProperties = ['fontSize', 'fontWeight', 'fontFamily', 'lineHeight'];
+var properties = ['padding', 'paddingBlock', 'paddingInline', 'paddingLeft', 'paddingTop', 'paddingRight', 'paddingBottom', 'marginLeft', 'marginTop', 'marginRight', 'marginBottom', 'margin', 'gap'].concat(typographyProperties, [// 'width', re-enable later
 // 'height', re-enable later
-'rowGap', 'gridRowGap', 'columnGap', 'gridColumnGap'];
+'rowGap', 'gridRowGap', 'columnGap', 'gridColumnGap']);
 
 function findIdentifierInParentScope(_ref) {
   var scope = _ref.scope,
@@ -33,14 +34,27 @@ function findIdentifierInParentScope(_ref) {
   return null;
 }
 
-var isSpacingProperty = function isSpacingProperty(prop) {
-  return properties.includes(prop);
+var isSpacingProperty = function isSpacingProperty(propertyName) {
+  return properties.includes(propertyName);
 };
 
 exports.isSpacingProperty = isSpacingProperty;
 
+var isTypographyProperty = function isTypographyProperty(propertyName) {
+  return typographyProperties.includes(propertyName);
+};
+
+exports.isTypographyProperty = isTypographyProperty;
+
 var getValueFromShorthand = function getValueFromShorthand(str) {
-  // If we want to filter out NaN just add .filter(Boolean)
+  var valueString = String(str);
+  var fontFamily = /(sans-serif$)|(monospace$)/;
+
+  if (fontFamily.test(valueString)) {
+    return [valueString];
+  } // If we want to filter out NaN just add .filter(Boolean)
+
+
   return String(str).trim().split(' ').filter(function (val) {
     return val !== '';
   }).map(removePixelSuffix);
@@ -60,6 +74,14 @@ var isFontSizeSmall = function isFontSizeSmall(node) {
   return (0, _eslintCodemodUtils.isNodeOfType)(node, 'CallExpression') && (0, _eslintCodemodUtils.isNodeOfType)(node.callee, 'Identifier') && node.callee.name === 'fontSizeSmall';
 };
 
+var isFontFamily = function isFontFamily(node) {
+  return (0, _eslintCodemodUtils.isNodeOfType)(node, 'CallExpression') && (0, _eslintCodemodUtils.isNodeOfType)(node.callee, 'Identifier') && (node.callee.name === 'fontFamily' || node.callee.name === 'getFontFamily');
+};
+
+var isCodeFontFamily = function isCodeFontFamily(node) {
+  return (0, _eslintCodemodUtils.isNodeOfType)(node, 'CallExpression') && (0, _eslintCodemodUtils.isNodeOfType)(node.callee, 'Identifier') && (node.callee.name === 'codeFontFamily' || node.callee.name === 'getCodeFontFamily');
+};
+
 var isToken = function isToken(node) {
   return (0, _eslintCodemodUtils.isNodeOfType)(node, 'CallExpression') && (0, _eslintCodemodUtils.isNodeOfType)(node.callee, 'Identifier') && node.callee.name === 'token';
 };
@@ -81,6 +103,14 @@ var getValueFromCallExpression = function getValueFromCallExpression(node, conte
     return 11;
   }
 
+  if (isFontFamily(node)) {
+    return "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif";
+  }
+
+  if (isCodeFontFamily(node)) {
+    return "'SFMono-Medium', 'SF Mono', 'Segoe UI Mono', 'Roboto Mono', 'Ubuntu Mono', Menlo, Consolas, Courier, monospace";
+  }
+
   if (isToken(node)) {
     var args = node.arguments;
     var call = "${token(".concat(args.map(function (argNode) {

package/dist/cjs/version.json

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

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

@@ -1,7 +1,9 @@
+/* eslint-disable @atlassian/tangerine/import/entry-points */
 import { callExpression, identifier, isNodeOfType, literal, node as nodeFn, property } from 'eslint-codemod-utils';
 import spacingScale from '@atlaskit/tokens/spacing-raw';
+import typographyTokens from '@atlaskit/tokens/typography-raw';
 import { isDecendantOfGlobalToken } from '../utils/is-node';
-import { convertHyphenatedNameToCamelCase, emToPixels, findParentNodeForLine, getValue, getValueFromShorthand, isSpacingProperty, isValidSpacingValue } from './utils';
+import { convertHyphenatedNameToCamelCase, emToPixels, findParentNodeForLine, getValue, getValueFromShorthand, isSpacingProperty, isTypographyProperty, isValidSpacingValue } from './utils';
 /**
  * Currently we have a wide range of experimental spacing tokens that we are testing.
  * We only want transforms to apply to the stable scale values, not the rest.
@@ -10,22 +12,34 @@ import { convertHyphenatedNameToCamelCase, emToPixels, findParentNodeForLine, ge
 
 const onlyScaleTokens = spacingScale.filter(token => token.name.startsWith('space.'));
 const spacingValueToToken = Object.fromEntries(onlyScaleTokens.map(token => [token.attributes['pixelValue'], token.name]));
+const typographyValueToToken = Object.fromEntries(typographyTokens.map(currentToken => {
+  // Group tokens by property name (e.g. fontSize, fontFamily, lineHeight)
+  // This allows us to look up values specific to a property
+  // (so as not to mix tokens with overlapping values e.g. font size and line height both have tokens for 16px)
+  const tokenGroup = currentToken.attributes.group;
+  return [tokenGroup, Object.fromEntries(typographyTokens.map(token => token.attributes.group === tokenGroup ? [token.value.replaceAll(`"`, `'`), token.name] : []).filter(token => token.length))];
+}));
 /**
+ * Returns a token node for a given value including fallbacks.
+ * @param propertyName camelCase CSS property
+ * @param value string representing pixel value, or font family, or number representing font weight
  * @example
  * ```
- * '8px' => token('spacing.scale.100', '8px')
+ * propertyName: padding, value: '8px' => token('spacing.scale.100', '8px')
+ * propertyName: fontWeight, value: 400 => token('font.weight.regular', '400')
  * ```
  */
 
-function pixelValueToSpacingTokenNode(pixelValueString) {
-  const token = spacingValueToToken[pixelValueString];
+function getTokenNodeForValue(propertyName, value) {
+  const token = isTypographyProperty(propertyName) ? typographyValueToToken[propertyName][value] : spacingValueToToken[value];
+  const fallbackValue = propertyName === 'fontFamily' ? `"${value}"` : `'${value}'`;
   return callExpression({
     callee: identifier({
       name: 'token'
     }),
     arguments: [literal({
       value: `'${token !== null && token !== void 0 ? token : ''}'`
-    }), literal(`'${pixelValueString}'`)],
+    }), literal(fallbackValue)],
     optional: false
   });
 }
@@ -68,7 +82,7 @@ const rule = {
 
           return node.key.name === 'fontSize';
         });
-        const fontSizeValue = getValue( // @ts-ignore
+        const fontSizeValue = getValue( // @ts-expect-error
         isNodeOfType(fontSizeNode, 'Property') && fontSizeNode.value, context);
         const fontSize = Array.isArray(fontSizeValue) ? fontSizeValue[0] : fontSizeValue;
 
@@ -108,6 +122,8 @@ const rule = {
             return;
           }
 
+          const propertyName = node.key.name;
+          const isFontFamily = /fontFamily/.test(propertyName);
           const value = getValue(node.value, context); // value is either NaN or it can't be resolved eg, em, 100% etc...
 
           if (!(value && isValidSpacingValue(value, fontSize))) {
@@ -121,32 +137,35 @@ const rule = {
           }
 
           const values = Array.isArray(value) ? value : [value]; // value is a single value so we can apply a more robust approach to our fix
+          // treat fontFamily as having one value
 
-          if (values.length === 1) {
+          if (values.length === 1 || isFontFamily) {
             const [value] = values;
-            const pixelValue = emToPixels(value, fontSize);
+            const pixelValue = isFontFamily ? value : emToPixels(value, fontSize);
             return context.report({
               node,
               messageId: 'noRawSpacingValues',
               data: {
-                payload: `${node.key.name}:${pixelValue}`
+                payload: `${propertyName}:${pixelValue}`
               },
               fix: fixer => {
                 var _node$loc;
 
-                if (!/padding|margin|gap/.test(node.key.name)) {
+                if (!isSpacingProperty(propertyName)) {
                   return null;
                 }
 
                 const pixelValueString = `${pixelValue}px`;
-                const tokenName = spacingValueToToken[pixelValueString];
+                const lookupValue = /fontWeight|fontFamily/.test(propertyName) ? pixelValue : pixelValueString;
+                const tokenName = isTypographyProperty(propertyName) ? typographyValueToToken[propertyName][lookupValue] : spacingValueToToken[lookupValue];
 
                 if (!tokenName) {
                   return null;
                 }
 
+                const replacementValue = getTokenNodeForValue(propertyName, lookupValue);
                 return [fixer.insertTextBefore(node, `// TODO Delete this comment after verifying spacing token -> previous value \`${nodeFn(node.value)}\`\n${' '.padStart(((_node$loc = node.loc) === null || _node$loc === void 0 ? void 0 : _node$loc.start.column) || 0)}`), fixer.replaceText(node, property({ ...node,
-                  value: pixelValueToSpacingTokenNode(pixelValueString)
+                  value: replacementValue
                 }).toString())];
               }
             });
@@ -166,7 +185,7 @@ const rule = {
               node,
               messageId: 'noRawSpacingValues',
               data: {
-                payload: `${node.key.name}:${pixelValue}`
+                payload: `${propertyName}:${pixelValue}`
               },
               fix: index === 0 ? fixer => {
                 const allResolvableValues = values.every(value => !Number.isNaN(emToPixels(value, fontSize)));
@@ -178,7 +197,7 @@ const rule = {
                 return fixer.replaceText(node.value, `\`${values.map(value => {
                   const pixelValue = emToPixels(value, fontSize);
                   const pixelValueString = `${pixelValue}px`;
-                  return `\${${pixelValueToSpacingTokenNode(pixelValueString)}}`;
+                  return `\${${getTokenNodeForValue(propertyName, pixelValueString)}}`;
                 }).join(' ')}\``);
               } : undefined
             });
@@ -215,9 +234,9 @@ const rule = {
         const fontSize = getValueFromShorthand(fontSizeNode)[0];
         cssProperties.forEach(style => {
           const [rawProperty, value] = style.split(':');
-          const property = convertHyphenatedNameToCamelCase(rawProperty);
+          const propertyName = convertHyphenatedNameToCamelCase(rawProperty);
 
-          if (!isSpacingProperty(property)) {
+          if (!isSpacingProperty(propertyName)) {
             return;
           } // value is either NaN or it can't be resolved eg, em, 100% etc...
 
@@ -234,16 +253,17 @@ const rule = {
 
           const values = getValueFromShorthand(value);
           values.forEach((val, index) => {
-            if (!val && val !== 0 || !/padding|margin|gap/.test(rawProperty)) {
+            if (!val && val !== 0 || !isSpacingProperty(propertyName)) {
               return;
             }
 
-            const pixelValue = emToPixels(val, fontSize);
+            const isFontFamily = /fontFamily/.test(propertyName);
+            const pixelValue = isFontFamily ? val : emToPixels(val, fontSize);
             context.report({
               node,
               messageId: 'noRawSpacingValues',
               data: {
-                payload: `${property}:${pixelValue}`
+                payload: `${propertyName}:${pixelValue}`
               },
               fix: index === 0 ? fixer => {
                 const allResolvableValues = values.every(value => !Number.isNaN(emToPixels(value, fontSize)));
@@ -253,24 +273,33 @@ const rule = {
                 }
 
                 const replacementValue = values.map(value => {
-                  const pixelValue = emToPixels(value, fontSize);
+                  const propertyValue = typeof value === 'string' ? value.trim() : value;
+                  const pixelValue = isFontFamily ? propertyValue : emToPixels(propertyValue, fontSize);
                   const pixelValueString = `${pixelValue}px`;
-                  const tokenName = spacingValueToToken[pixelValueString];
+                  const lookupValue = /fontWeight|fontFamily/.test(propertyName) ? pixelValue : pixelValueString;
+                  const tokenName = isTypographyProperty(propertyName) ? typographyValueToToken[propertyName][lookupValue] : spacingValueToToken[lookupValue];
 
                   if (!tokenName) {
                     return pixelValueString;
-                  } // ${token('...', '...')}
+                  }
 
+                  const replacementTokenValue = getTokenNodeForValue(propertyName, lookupValue); // ${token('...', '...')}
 
-                  const replacementSubValue = '${' + pixelValueToSpacingTokenNode(pixelValueString).toString() + '}';
+                  const replacementSubValue = '${' + replacementTokenValue.toString() + '}';
                   return replacementSubValue;
                 }).join(' '); // get original source
 
                 const textForSource = context.getSourceCode().getText(node.quasi); // find `<property>: ...;` in original
 
-                const searchRegExp = new RegExp(`${rawProperty}.+?;`, 'g'); // replace property:val with new property:val
+                const searchRegExp = new RegExp(style, 'g'); // replace property:val with new property:val
+
+                const replacement = textForSource.replace(searchRegExp, //  padding: ${gridSize()}px;
+                `${rawProperty}: ${replacementValue}`);
+
+                if (!replacement) {
+                  return [];
+                }
 
-                const replacement = textForSource.replace(searchRegExp, `${rawProperty}: ${replacementValue};`);
                 return [fixer.insertTextBefore(parentNode, `// TODO Delete this comment after verifying spacing token -> previous value \`${value.trim()}\`\n`), fixer.replaceText(node.quasi, replacement)];
               } : undefined
             });

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

@@ -1,5 +1,6 @@
 import { isNodeOfType } from 'eslint-codemod-utils';
-const properties = ['padding', 'paddingBlock', 'paddingInline', 'paddingLeft', 'paddingTop', 'paddingRight', 'paddingBottom', 'marginLeft', 'marginTop', 'marginRight', 'marginBottom', 'margin', 'gap', 'fontSize', 'lineHeight', // 'width', re-enable later
+const typographyProperties = ['fontSize', 'fontWeight', 'fontFamily', 'lineHeight'];
+const properties = ['padding', 'paddingBlock', 'paddingInline', 'paddingLeft', 'paddingTop', 'paddingRight', 'paddingBottom', 'marginLeft', 'marginTop', 'marginRight', 'marginBottom', 'margin', 'gap', ...typographyProperties, // 'width', re-enable later
 // 'height', re-enable later
 'rowGap', 'gridRowGap', 'columnGap', 'gridColumnGap'];
 export function findIdentifierInParentScope({
@@ -20,11 +21,21 @@ export function findIdentifierInParentScope({
 
   return null;
 }
-export const isSpacingProperty = prop => {
-  return properties.includes(prop);
+export const isSpacingProperty = propertyName => {
+  return properties.includes(propertyName);
+};
+export const isTypographyProperty = propertyName => {
+  return typographyProperties.includes(propertyName);
 };
 export const getValueFromShorthand = str => {
-  // If we want to filter out NaN just add .filter(Boolean)
+  const valueString = String(str);
+  const fontFamily = /(sans-serif$)|(monospace$)/;
+
+  if (fontFamily.test(valueString)) {
+    return [valueString];
+  } // If we want to filter out NaN just add .filter(Boolean)
+
+
   return String(str).trim().split(' ').filter(val => val !== '').map(removePixelSuffix);
 };
 
@@ -34,6 +45,10 @@ const isFontSize = node => isNodeOfType(node, 'CallExpression') && isNodeOfType(
 
 const isFontSizeSmall = node => isNodeOfType(node, 'CallExpression') && isNodeOfType(node.callee, 'Identifier') && node.callee.name === 'fontSizeSmall';
 
+const isFontFamily = node => isNodeOfType(node, 'CallExpression') && isNodeOfType(node.callee, 'Identifier') && (node.callee.name === 'fontFamily' || node.callee.name === 'getFontFamily');
+
+const isCodeFontFamily = node => isNodeOfType(node, 'CallExpression') && isNodeOfType(node.callee, 'Identifier') && (node.callee.name === 'codeFontFamily' || node.callee.name === 'getCodeFontFamily');
+
 const isToken = node => isNodeOfType(node, 'CallExpression') && isNodeOfType(node.callee, 'Identifier') && node.callee.name === 'token';
 
 const getValueFromCallExpression = (node, context) => {
@@ -53,6 +68,14 @@ const getValueFromCallExpression = (node, context) => {
     return 11;
   }
 
+  if (isFontFamily(node)) {
+    return `-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif`;
+  }
+
+  if (isCodeFontFamily(node)) {
+    return `'SFMono-Medium', 'SF Mono', 'Segoe UI Mono', 'Roboto Mono', 'Ubuntu Mono', Menlo, Consolas, Courier, monospace`;
+  }
+
   if (isToken(node)) {
     const args = node.arguments;
     const call = `\${token(${args.map(argNode => {

package/dist/es2019/version.json

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

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

@@ -5,10 +5,12 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
+/* eslint-disable @atlassian/tangerine/import/entry-points */
 import { callExpression, identifier, isNodeOfType, literal, node as nodeFn, property } from 'eslint-codemod-utils';
 import spacingScale from '@atlaskit/tokens/spacing-raw';
+import typographyTokens from '@atlaskit/tokens/typography-raw';
 import { isDecendantOfGlobalToken } from '../utils/is-node';
-import { convertHyphenatedNameToCamelCase, emToPixels, findParentNodeForLine, getValue, getValueFromShorthand, isSpacingProperty, isValidSpacingValue } from './utils';
+import { convertHyphenatedNameToCamelCase, emToPixels, findParentNodeForLine, getValue, getValueFromShorthand, isSpacingProperty, isTypographyProperty, isValidSpacingValue } from './utils';
 /**
  * Currently we have a wide range of experimental spacing tokens that we are testing.
  * We only want transforms to apply to the stable scale values, not the rest.
@@ -21,22 +23,38 @@ var onlyScaleTokens = spacingScale.filter(function (token) {
 var spacingValueToToken = Object.fromEntries(onlyScaleTokens.map(function (token) {
   return [token.attributes['pixelValue'], token.name];
 }));
+var typographyValueToToken = Object.fromEntries(typographyTokens.map(function (currentToken) {
+  // Group tokens by property name (e.g. fontSize, fontFamily, lineHeight)
+  // This allows us to look up values specific to a property
+  // (so as not to mix tokens with overlapping values e.g. font size and line height both have tokens for 16px)
+  var tokenGroup = currentToken.attributes.group;
+  return [tokenGroup, Object.fromEntries(typographyTokens.map(function (token) {
+    return token.attributes.group === tokenGroup ? [token.value.replaceAll("\"", "'"), token.name] : [];
+  }).filter(function (token) {
+    return token.length;
+  }))];
+}));
 /**
+ * Returns a token node for a given value including fallbacks.
+ * @param propertyName camelCase CSS property
+ * @param value string representing pixel value, or font family, or number representing font weight
  * @example
  * ```
- * '8px' => token('spacing.scale.100', '8px')
+ * propertyName: padding, value: '8px' => token('spacing.scale.100', '8px')
+ * propertyName: fontWeight, value: 400 => token('font.weight.regular', '400')
  * ```
  */
 
-function pixelValueToSpacingTokenNode(pixelValueString) {
-  var token = spacingValueToToken[pixelValueString];
+function getTokenNodeForValue(propertyName, value) {
+  var token = isTypographyProperty(propertyName) ? typographyValueToToken[propertyName][value] : spacingValueToToken[value];
+  var fallbackValue = propertyName === 'fontFamily' ? "\"".concat(value, "\"") : "'".concat(value, "'");
   return callExpression({
     callee: identifier({
       name: 'token'
     }),
     arguments: [literal({
       value: "'".concat(token !== null && token !== void 0 ? token : '', "'")
-    }), literal("'".concat(pixelValueString, "'"))],
+    }), literal(fallbackValue)],
     optional: false
   });
 }
@@ -78,7 +96,7 @@ var rule = {
 
           return node.key.name === 'fontSize';
         });
-        var fontSizeValue = getValue( // @ts-ignore
+        var fontSizeValue = getValue( // @ts-expect-error
         isNodeOfType(fontSizeNode, 'Property') && fontSizeNode.value, context);
         var fontSize = Array.isArray(fontSizeValue) ? fontSizeValue[0] : fontSizeValue;
 
@@ -118,6 +136,8 @@ var rule = {
             return;
           }
 
+          var propertyName = node.key.name;
+          var isFontFamily = /fontFamily/.test(propertyName);
           var value = getValue(node.value, context); // value is either NaN or it can't be resolved eg, em, 100% etc...
 
           if (!(value && isValidSpacingValue(value, fontSize))) {
@@ -131,34 +151,37 @@ var rule = {
           }
 
           var values = Array.isArray(value) ? value : [value]; // value is a single value so we can apply a more robust approach to our fix
+          // treat fontFamily as having one value
 
-          if (values.length === 1) {
+          if (values.length === 1 || isFontFamily) {
             var _values = _slicedToArray(values, 1),
                 _value = _values[0];
 
-            var pixelValue = emToPixels(_value, fontSize);
+            var pixelValue = isFontFamily ? _value : emToPixels(_value, fontSize);
             return context.report({
               node: node,
               messageId: 'noRawSpacingValues',
               data: {
-                payload: "".concat(node.key.name, ":").concat(pixelValue)
+                payload: "".concat(propertyName, ":").concat(pixelValue)
               },
               fix: function fix(fixer) {
                 var _node$loc;
 
-                if (!/padding|margin|gap/.test(node.key.name)) {
+                if (!isSpacingProperty(propertyName)) {
                   return null;
                 }
 
                 var pixelValueString = "".concat(pixelValue, "px");
-                var tokenName = spacingValueToToken[pixelValueString];
+                var lookupValue = /fontWeight|fontFamily/.test(propertyName) ? pixelValue : pixelValueString;
+                var tokenName = isTypographyProperty(propertyName) ? typographyValueToToken[propertyName][lookupValue] : spacingValueToToken[lookupValue];
 
                 if (!tokenName) {
                   return null;
                 }
 
+                var replacementValue = getTokenNodeForValue(propertyName, lookupValue);
                 return [fixer.insertTextBefore(node, "// TODO Delete this comment after verifying spacing token -> previous value `".concat(nodeFn(node.value), "`\n").concat(' '.padStart(((_node$loc = node.loc) === null || _node$loc === void 0 ? void 0 : _node$loc.start.column) || 0))), fixer.replaceText(node, property(_objectSpread(_objectSpread({}, node), {}, {
-                  value: pixelValueToSpacingTokenNode(pixelValueString)
+                  value: replacementValue
                 })).toString())];
               }
             });
@@ -178,7 +201,7 @@ var rule = {
               node: node,
               messageId: 'noRawSpacingValues',
               data: {
-                payload: "".concat(node.key.name, ":").concat(pixelValue)
+                payload: "".concat(propertyName, ":").concat(pixelValue)
               },
               fix: index === 0 ? function (fixer) {
                 var allResolvableValues = values.every(function (value) {
@@ -192,7 +215,7 @@ var rule = {
                 return fixer.replaceText(node.value, "`".concat(values.map(function (value) {
                   var pixelValue = emToPixels(value, fontSize);
                   var pixelValueString = "".concat(pixelValue, "px");
-                  return "${".concat(pixelValueToSpacingTokenNode(pixelValueString), "}");
+                  return "${".concat(getTokenNodeForValue(propertyName, pixelValueString), "}");
                 }).join(' '), "`"));
               } : undefined
             });
@@ -241,9 +264,9 @@ var rule = {
               rawProperty = _style$split4[0],
               value = _style$split4[1];
 
-          var property = convertHyphenatedNameToCamelCase(rawProperty);
+          var propertyName = convertHyphenatedNameToCamelCase(rawProperty);
 
-          if (!isSpacingProperty(property)) {
+          if (!isSpacingProperty(propertyName)) {
             return;
           } // value is either NaN or it can't be resolved eg, em, 100% etc...
 
@@ -260,16 +283,17 @@ var rule = {
 
           var values = getValueFromShorthand(value);
           values.forEach(function (val, index) {
-            if (!val && val !== 0 || !/padding|margin|gap/.test(rawProperty)) {
+            if (!val && val !== 0 || !isSpacingProperty(propertyName)) {
               return;
             }
 
-            var pixelValue = emToPixels(val, fontSize);
+            var isFontFamily = /fontFamily/.test(propertyName);
+            var pixelValue = isFontFamily ? val : emToPixels(val, fontSize);
             context.report({
               node: node,
               messageId: 'noRawSpacingValues',
               data: {
-                payload: "".concat(property, ":").concat(pixelValue)
+                payload: "".concat(propertyName, ":").concat(pixelValue)
               },
               fix: index === 0 ? function (fixer) {
                 var allResolvableValues = values.every(function (value) {
@@ -281,24 +305,33 @@ var rule = {
                 }
 
                 var replacementValue = values.map(function (value) {
-                  var pixelValue = emToPixels(value, fontSize);
+                  var propertyValue = typeof value === 'string' ? value.trim() : value;
+                  var pixelValue = isFontFamily ? propertyValue : emToPixels(propertyValue, fontSize);
                   var pixelValueString = "".concat(pixelValue, "px");
-                  var tokenName = spacingValueToToken[pixelValueString];
+                  var lookupValue = /fontWeight|fontFamily/.test(propertyName) ? pixelValue : pixelValueString;
+                  var tokenName = isTypographyProperty(propertyName) ? typographyValueToToken[propertyName][lookupValue] : spacingValueToToken[lookupValue];
 
                   if (!tokenName) {
                     return pixelValueString;
-                  } // ${token('...', '...')}
+                  }
 
+                  var replacementTokenValue = getTokenNodeForValue(propertyName, lookupValue); // ${token('...', '...')}
 
-                  var replacementSubValue = '${' + pixelValueToSpacingTokenNode(pixelValueString).toString() + '}';
+                  var replacementSubValue = '${' + replacementTokenValue.toString() + '}';
                   return replacementSubValue;
                 }).join(' '); // get original source
 
                 var textForSource = context.getSourceCode().getText(node.quasi); // find `<property>: ...;` in original
 
-                var searchRegExp = new RegExp("".concat(rawProperty, ".+?;"), 'g'); // replace property:val with new property:val
+                var searchRegExp = new RegExp(style, 'g'); // replace property:val with new property:val
+
+                var replacement = textForSource.replace(searchRegExp, //  padding: ${gridSize()}px;
+                "".concat(rawProperty, ": ").concat(replacementValue));
+
+                if (!replacement) {
+                  return [];
+                }
 
-                var replacement = textForSource.replace(searchRegExp, "".concat(rawProperty, ": ").concat(replacementValue, ";"));
                 return [fixer.insertTextBefore(parentNode, "// TODO Delete this comment after verifying spacing token -> previous value `".concat(value.trim(), "`\n")), fixer.replaceText(node.quasi, replacement)];
               } : undefined
             });

package/dist/esm/rules/ensure-design-token-usage-spacing/utils.js

@@ -1,7 +1,8 @@
 import { isNodeOfType } from 'eslint-codemod-utils';
-var properties = ['padding', 'paddingBlock', 'paddingInline', 'paddingLeft', 'paddingTop', 'paddingRight', 'paddingBottom', 'marginLeft', 'marginTop', 'marginRight', 'marginBottom', 'margin', 'gap', 'fontSize', 'lineHeight', // 'width', re-enable later
+var typographyProperties = ['fontSize', 'fontWeight', 'fontFamily', 'lineHeight'];
+var properties = ['padding', 'paddingBlock', 'paddingInline', 'paddingLeft', 'paddingTop', 'paddingRight', 'paddingBottom', 'marginLeft', 'marginTop', 'marginRight', 'marginBottom', 'margin', 'gap'].concat(typographyProperties, [// 'width', re-enable later
 // 'height', re-enable later
-'rowGap', 'gridRowGap', 'columnGap', 'gridColumnGap'];
+'rowGap', 'gridRowGap', 'columnGap', 'gridColumnGap']);
 export function findIdentifierInParentScope(_ref) {
   var scope = _ref.scope,
       identifierName = _ref.identifierName;
@@ -21,11 +22,21 @@ export function findIdentifierInParentScope(_ref) {
 
   return null;
 }
-export var isSpacingProperty = function isSpacingProperty(prop) {
-  return properties.includes(prop);
+export var isSpacingProperty = function isSpacingProperty(propertyName) {
+  return properties.includes(propertyName);
+};
+export var isTypographyProperty = function isTypographyProperty(propertyName) {
+  return typographyProperties.includes(propertyName);
 };
 export var getValueFromShorthand = function getValueFromShorthand(str) {
-  // If we want to filter out NaN just add .filter(Boolean)
+  var valueString = String(str);
+  var fontFamily = /(sans-serif$)|(monospace$)/;
+
+  if (fontFamily.test(valueString)) {
+    return [valueString];
+  } // If we want to filter out NaN just add .filter(Boolean)
+
+
   return String(str).trim().split(' ').filter(function (val) {
     return val !== '';
   }).map(removePixelSuffix);
@@ -43,6 +54,14 @@ var isFontSizeSmall = function isFontSizeSmall(node) {
   return isNodeOfType(node, 'CallExpression') && isNodeOfType(node.callee, 'Identifier') && node.callee.name === 'fontSizeSmall';
 };
 
+var isFontFamily = function isFontFamily(node) {
+  return isNodeOfType(node, 'CallExpression') && isNodeOfType(node.callee, 'Identifier') && (node.callee.name === 'fontFamily' || node.callee.name === 'getFontFamily');
+};
+
+var isCodeFontFamily = function isCodeFontFamily(node) {
+  return isNodeOfType(node, 'CallExpression') && isNodeOfType(node.callee, 'Identifier') && (node.callee.name === 'codeFontFamily' || node.callee.name === 'getCodeFontFamily');
+};
+
 var isToken = function isToken(node) {
   return isNodeOfType(node, 'CallExpression') && isNodeOfType(node.callee, 'Identifier') && node.callee.name === 'token';
 };
@@ -64,6 +83,14 @@ var getValueFromCallExpression = function getValueFromCallExpression(node, conte
     return 11;
   }
 
+  if (isFontFamily(node)) {
+    return "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif";
+  }
+
+  if (isCodeFontFamily(node)) {
+    return "'SFMono-Medium', 'SF Mono', 'Segoe UI Mono', 'Roboto Mono', 'Ubuntu Mono', Menlo, Consolas, Courier, monospace";
+  }
+
   if (isToken(node)) {
     var args = node.arguments;
     var call = "${token(".concat(args.map(function (argNode) {

package/dist/esm/version.json

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

package/dist/types/rules/ensure-design-token-usage-spacing/utils.d.ts

@@ -4,7 +4,8 @@ export declare function findIdentifierInParentScope({ scope, identifierName, }:
     scope: Scope.Scope;
     identifierName: string;
 }): Scope.Variable | null;
-export declare const isSpacingProperty: (prop: string) => boolean;
+export declare const isSpacingProperty: (propertyName: string) => boolean;
+export declare const isTypographyProperty: (propertyName: string) => boolean;
 export declare const getValueFromShorthand: (str: unknown) => any[];
 export declare const getValue: (node: EslintNode, context: Rule.RuleContext) => string | number | any[] | null | undefined;
 export declare const emToPixels: <T extends unknown>(value: T, fontSize: number | null | undefined) => number | T | null;

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": "4.13.6",
+  "version": "4.13.8",
   "author": "Atlassian Pty Ltd",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"