@atlaskit/eslint-plugin-design-system 4.15.4 → 4.15.6

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 4.15.6
+
+### Patch Changes
+
+- [`6a43a780a85`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6a43a780a85) - Enhance token replacement capabilities of ensure-design-tokens-usage-spacing rule in tagged template literal strings
+
+## 4.15.5
+
+### Patch Changes
+
+- [`dda18b361da`](https://bitbucket.org/atlassian/atlassian-frontend/commits/dda18b361da) - Bump version of `eslint-codemod-utils`.
+
 ## 4.15.4
 
 ### Patch Changes

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

@@ -8,91 +8,10 @@ exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _eslintCodemodUtils = require("eslint-codemod-utils");
-var _tokensRaw = require("@atlaskit/tokens/tokens-raw");
 var _isNode = require("../utils/is-node");
 var _utils = require("./utils");
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 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) { (0, _defineProperty2.default)(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; }
-/**
- * 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.
- * This could be removed in the future.
- */
-var onlyScaleTokens = _tokensRaw.spacing.filter(function (token) {
-  return token.name.startsWith('space.');
-});
-var spacingValueToToken = Object.fromEntries(onlyScaleTokens.map(function (token) {
-  return [token.attributes['pixelValue'], token.name];
-}));
-var typographyValueToToken = Object.fromEntries(_tokensRaw.typography.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(_tokensRaw.typography.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
- * ```
- * propertyName: padding, value: '8px' => token('space.100', '8px')
- * propertyName: fontWeight, value: 400 => token('font.weight.regular', '400')
- * ```
- */
-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)(fallbackValue)],
-    optional: false
-  });
-}
-
-/**
- * Returns a boolean that signals wether the current property is revelant under the current configuration
- * @param propertyName camelCase CSS property
- * @param targetOptions Array containing the types of properties that should be included in the rule
- * @example
- * ```
- * propertyName: padding, targetOptions: ['spacing']
- * propertyName: fontWeight, targetOptions: ['spacing', 'typography']
- * ```
- */
-function shouldAnalyzeProperty(propertyName, targetOptions) {
-  if ((0, _utils.isSpacingProperty)(propertyName) && targetOptions.includes('spacing')) {
-    return true;
-  }
-  if ((0, _utils.isTypographyProperty)(propertyName) && targetOptions.includes('typography')) {
-    return true;
-  }
-  return false;
-}
-/**
- * Attempts to remove all non-essential words & characters from a style block.
- * Including selectors and queries
- * Adapted from ensure-design-token-usage
- * @param styleString string of css properties
- */
-function splitCssProperties(styleString) {
-  return styleString.split('\n').filter(function (line) {
-    return !line.trim().startsWith('@');
-  }).join('\n').replace(/\n/g, '').split(/;|(?<!\$){|(?<!\${.+?)}/) // don't split on template literal expressions i.e. `${...}`
-  .map(function (el) {
-    return el.trim() || '';
-  }).filter(Boolean);
-}
 var rule = {
   meta: {
     type: 'problem',
@@ -102,7 +21,8 @@ var rule = {
       recommended: true
     },
     messages: {
-      noRawSpacingValues: 'The use of spacing primitives or tokens is preferred over the direct application of spacing properties.\n\n@meta <<{{payload}}>>'
+      noRawSpacingValues: 'The use of spacing primitives or tokens is preferred over the direct application of spacing properties.\n\n@meta <<{{payload}}>>',
+      autofixesPossible: 'Automated corrections available for spacing values. Apply autofix to replace values with appropriate tokens'
     }
   },
   create: function create(context) {
@@ -146,7 +66,7 @@ var rule = {
           if (!(0, _eslintCodemodUtils.isNodeOfType)(node.key, 'Identifier')) {
             return;
           }
-          if (!shouldAnalyzeProperty(node.key.name, targetCategories)) {
+          if (!(0, _utils.shouldAnalyzeProperty)(node.key.name, targetCategories)) {
             return;
           }
           if ((0, _isNode.isDecendantOfGlobalToken)(node.value)) {
@@ -195,16 +115,16 @@ var rule = {
               },
               fix: function fix(fixer) {
                 var _node$loc;
-                if (!shouldAnalyzeProperty(propertyName, targetCategories)) {
+                if (!(0, _utils.shouldAnalyzeProperty)(propertyName, targetCategories)) {
                   return null;
                 }
                 var pixelValueString = "".concat(pixelValue, "px");
                 var lookupValue = /fontWeight|fontFamily/.test(propertyName) ? pixelValue : pixelValueString;
-                var tokenName = (0, _utils.isTypographyProperty)(propertyName) ? typographyValueToToken[propertyName][lookupValue] : spacingValueToToken[lookupValue];
+                var tokenName = (0, _utils.isTypographyProperty)(propertyName) ? _utils.typographyValueToToken[propertyName][lookupValue] : _utils.spacingValueToToken[lookupValue];
                 if (!tokenName) {
                   return null;
                 }
-                var replacementValue = getTokenNodeForValue(propertyName, lookupValue);
+                var replacementValue = (0, _utils.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: replacementValue
                 })).toString())];
@@ -237,7 +157,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(getTokenNodeForValue(propertyName, pixelValueString), "}");
+                  return "${".concat((0, _utils.getTokenNodeForValue)(propertyName, pixelValueString), "}");
                 }).join(' '), "`"));
               } : undefined
             });
@@ -253,96 +173,115 @@ var rule = {
           return;
         }
         var parentNode = (0, _utils.findParentNodeForLine)(node);
-        var combinedString = node.quasi.quasis.map(function (q, i) {
-          return "".concat(q.value.raw).concat(node.quasi.expressions[i] ? (0, _utils.getValue)(node.quasi.expressions[i], context) : '');
-        }).join('');
-        var rawString = node.quasi.quasis.map(function (q, i) {
-          return "".concat(q.value.raw).concat(node.quasi.expressions[i] ? "${".concat((0, _utils.getRawExpression)(node.quasi.expressions[i], context), "}") : '');
-        }).join('');
-        var cssProperties = splitCssProperties(combinedString);
-        var unalteredCssProperties = splitCssProperties(rawString);
-
-        // Get font size
-        var fontSizeNode = cssProperties.find(function (style) {
-          var _style$split = style.split(':'),
-            _style$split2 = (0, _slicedToArray2.default)(_style$split, 2),
-            rawProperty = _style$split2[0],
-            value = _style$split2[1];
-          return /font-size/.test(rawProperty) ? value : null;
-        });
-        var fontSize = (0, _utils.getValueFromShorthand)(fontSizeNode)[0];
-        cssProperties.forEach(function (style, currentPropIndex) {
-          var _style$split3 = style.split(':'),
-            _style$split4 = (0, _slicedToArray2.default)(_style$split3, 2),
-            rawProperty = _style$split4[0],
-            value = _style$split4[1];
-          var propertyName = (0, _utils.convertHyphenatedNameToCamelCase)(rawProperty);
-          if (!shouldAnalyzeProperty(propertyName, targetCategories)) {
-            return;
+        var processedCssLines = (0, _utils.processCssNode)(node, context);
+        var globalFontSize = (0, _utils.getFontSizeValueInScope)(processedCssLines);
+        var textForSource = context.getSourceCode().getText(node.quasi);
+        var allReplacedValues = [];
+        var completeSource = processedCssLines.reduce(function (currentSource, _ref) {
+          var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
+            resolvedCssLine = _ref2[0],
+            originalCssLine = _ref2[1];
+          var _resolvedCssLine$spli = resolvedCssLine.split(':'),
+            _resolvedCssLine$spli2 = (0, _slicedToArray2.default)(_resolvedCssLine$spli, 2),
+            originalProperty = _resolvedCssLine$spli2[0],
+            resolvedCssValues = _resolvedCssLine$spli2[1];
+          var _originalCssLine$spli = originalCssLine.split(':'),
+            _originalCssLine$spli2 = (0, _slicedToArray2.default)(_originalCssLine$spli, 2),
+            _ = _originalCssLine$spli2[0],
+            originalCssValues = _originalCssLine$spli2[1];
+          var propertyName = (0, _utils.convertHyphenatedNameToCamelCase)(originalProperty);
+          var isFontFamily = /fontFamily/.test(propertyName);
+          var replacedValuesPerProperty = [originalProperty];
+          if (!(0, _utils.shouldAnalyzeProperty)(propertyName, targetCategories) || !resolvedCssValues || !(0, _utils.isValidSpacingValue)(resolvedCssValues, globalFontSize)) {
+            // in all of these cases no changes should be made to the current property
+            return currentSource;
           }
 
-          // value is either NaN or it can't be resolved eg, em, 100% etc...
-          if (!(0, _utils.isValidSpacingValue)(value, fontSize)) {
-            return context.report({
-              node: node,
-              messageId: 'noRawSpacingValues',
-              data: {
-                payload: "NaN:".concat(value)
-              }
-            });
-          }
-          var values = (0, _utils.getValueFromShorthand)(value);
-          values.forEach(function (val, index) {
-            if (!val && val !== 0 || !shouldAnalyzeProperty(propertyName, targetCategories)) {
-              return;
+          // gets the values from the associated property, numeric values or NaN
+          var processedNumericValues = (0, _utils.getValueFromShorthand)(resolvedCssValues);
+          var processedValues = (0, _utils.splitShorthandValues)(resolvedCssValues);
+          // only splits shorthand values but it does not transform NaNs so tokens are preserved
+          var originalValues = (0, _utils.splitShorthandValues)(originalCssValues);
+
+          // reconstructing the string
+          // should replace what it can and preserve the raw value for everything else
+
+          var replacementValue = processedNumericValues
+          // put together resolved value and original value on a tuple
+          .map(function (value, index) {
+            return [
+            // if emToPX conversion fails we'll default to original value
+            (0, _utils.emToPixels)(value, globalFontSize) || value, processedValues[index], originalValues[index]];
+          }).map(function (_ref3) {
+            var _ref4 = (0, _slicedToArray2.default)(_ref3, 3),
+              numericOrNanValue = _ref4[0],
+              pxValue = _ref4[1],
+              originalValue = _ref4[2];
+            if ((0, _utils.isTokenValueString)(originalValue)) {
+              // if the value is already valid, nothing to report or replace
+              return originalValue;
+            }
+            if (isNaN(numericOrNanValue) && !isFontFamily) {
+              // this can be either a weird expression or a fontsize declaration
+
+              // we can't replace a NaN but we can alert what the offending value is
+              context.report({
+                node: node,
+                messageId: 'noRawSpacingValues',
+                data: {
+                  payload: "".concat(propertyName, ":").concat(originalValue)
+                }
+              });
+              return originalValue;
             }
-            var isFontFamily = /fontFamily/.test(propertyName);
-            var pixelValue = isFontFamily ? val : (0, _utils.emToPixels)(val, fontSize);
+
+            // value is numeric or fontFamily, and needs replacing we'll report first
             context.report({
               node: node,
               messageId: 'noRawSpacingValues',
               data: {
-                payload: "".concat(propertyName, ":").concat(pixelValue)
-              },
-              fix: index === 0 ? function (fixer) {
-                var allResolvableValues = values.every(function (value) {
-                  return !Number.isNaN((0, _utils.emToPixels)(value, fontSize));
-                });
-                if (!allResolvableValues) {
-                  return null;
-                }
-                var replacementValue = values.map(function (value) {
-                  var propertyValue = typeof value === 'string' ? value.trim() : value;
-                  var pixelValue = isFontFamily ? propertyValue : (0, _utils.emToPixels)(propertyValue, fontSize);
-                  var pixelValueString = "".concat(pixelValue, "px");
-                  var lookupValue = /fontWeight|fontFamily/.test(propertyName) ? pixelValue : pixelValueString;
-                  var tokenName = (0, _utils.isTypographyProperty)(propertyName) ? typographyValueToToken[propertyName][lookupValue] : spacingValueToToken[lookupValue];
-                  if (!tokenName) {
-                    return pixelValueString;
-                  }
-                  var replacementTokenValue = getTokenNodeForValue(propertyName, lookupValue);
+                payload: "".concat(propertyName, ":").concat(numericOrNanValue)
+              }
+            });
 
-                  // ${token('...', '...')}
-                  var replacementSubValue = '${' + replacementTokenValue.toString() + '}';
-                  return replacementSubValue;
-                }).join(' ');
+            // from here on we know value is numeric or a font family, so it might or might not have a token equivalent
+            var replacementToken = (0, _utils.getTokenReplacement)(propertyName, numericOrNanValue);
+            if (!replacementToken) {
+              return originalValue;
+            }
+            replacedValuesPerProperty.push(isFontFamily ? numericOrNanValue.trim() : pxValue);
+            return replacementToken;
+          }).join(' ');
+          if (replacedValuesPerProperty.length > 1) {
+            // first value is the property name, so it will always have at least 1
+            allReplacedValues.push(replacedValuesPerProperty);
+          }
 
-                // get original source
-                var textForSource = context.getSourceCode().getText(node.quasi);
+          // replace property:val with new property:val
+          var replacedCssLine = currentSource.replace(originalCssLine, //  padding: ${gridSize()}px;
+          "".concat(originalProperty, ": ").concat(replacementValue));
+          if (!replacedCssLine) {
+            return currentSource;
+          }
+          return replacedCssLine;
+        }, textForSource);
+        if (completeSource !== textForSource) {
+          // means we found some replacement values, well give the option to fix them
 
-                // find `<property>: ...;` in original
-                var styleString = unalteredCssProperties[currentPropIndex];
-                // replace property:val with new property:val
-                var replacement = textForSource.replace(styleString, //  padding: ${gridSize()}px;
-                "".concat(rawProperty, ": ").concat(replacementValue));
-                if (!replacement) {
-                  return [];
-                }
-                return [fixer.insertTextBefore(parentNode, "// TODO Delete this comment after verifying spacing token -> previous value `".concat(value.trim(), "`\n")), fixer.replaceText(node.quasi, replacement)];
-              } : undefined
-            });
+          var replacementComments = "".concat(allReplacedValues.map(function (replacedProperties) {
+            var _replacedProperties = (0, _slicedToArray2.default)(replacedProperties, 1),
+              propertyName = _replacedProperties[0];
+            var replacedValues = replacedProperties.slice(1).join(' ');
+            return "// TODO Delete this comment after verifying spacing token -> previous value `".concat(propertyName, ": ").concat(replacedValues, "`");
+          }).join('\n'), "\n");
+          context.report({
+            node: node,
+            messageId: 'autofixesPossible',
+            fix: function fix(fixer) {
+              return [fixer.insertTextBefore(parentNode, replacementComments), fixer.replaceText(node.quasi, completeSource)];
+            }
           });
-        });
+        }
       }
     };
   }

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

@@ -6,11 +6,50 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.emToPixels = exports.convertHyphenatedNameToCamelCase = void 0;
 exports.findIdentifierInParentScope = findIdentifierInParentScope;
-exports.removePixelSuffix = exports.isValidSpacingValue = exports.isTypographyProperty = exports.isSpacingProperty = exports.getValueFromShorthand = exports.getValue = exports.getRawExpression = exports.findParentNodeForLine = void 0;
+exports.findParentNodeForLine = void 0;
+exports.getFontSizeValueInScope = getFontSizeValueInScope;
+exports.getRawExpression = void 0;
+exports.getTokenNodeForValue = getTokenNodeForValue;
+exports.getTokenReplacement = getTokenReplacement;
+exports.isSpacingProperty = exports.getValueFromShorthand = exports.getValue = void 0;
+exports.isTokenValueString = isTokenValueString;
+exports.onlyScaleTokens = exports.isValidSpacingValue = exports.isTypographyProperty = void 0;
+exports.processCssNode = processCssNode;
+exports.removePixelSuffix = void 0;
+exports.shouldAnalyzeProperty = shouldAnalyzeProperty;
+exports.spacingValueToToken = void 0;
+exports.splitCssProperties = splitCssProperties;
+exports.typographyValueToToken = exports.splitShorthandValues = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _eslintCodemodUtils = require("eslint-codemod-utils");
+var _tokensRaw = require("@atlaskit/tokens/tokens-raw");
 var typographyProperties = ['fontSize', 'fontWeight', 'fontFamily', 'lineHeight'];
 var properties = ['padding', 'paddingBlock', 'paddingInline', 'paddingLeft', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingInline', 'paddingInlineStart', 'paddingInlineEnd', 'paddingBlock', 'paddingBlockStart', 'paddingBlockEnd', 'marginLeft', 'marginTop', 'marginRight', 'marginBottom', 'marginInline', 'marginInlineStart', 'marginInlineEnd', 'marginBlock', 'marginBlockStart', 'marginBlockEnd', 'margin', 'gap', 'rowGap', 'gridRowGap', 'columnGap', 'gridColumnGap'];
+/**
+ * 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.
+ * This could be removed in the future.
+ */
+var onlyScaleTokens = _tokensRaw.spacing.filter(function (token) {
+  return token.name.startsWith('space.');
+});
+exports.onlyScaleTokens = onlyScaleTokens;
+var spacingValueToToken = Object.fromEntries(onlyScaleTokens.map(function (token) {
+  return [token.attributes['pixelValue'], token.name];
+}));
+exports.spacingValueToToken = spacingValueToToken;
+var typographyValueToToken = Object.fromEntries(_tokensRaw.typography.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(_tokensRaw.typography.map(function (token) {
+    return token.attributes.group === tokenGroup ? [token.value.replaceAll("\"", "'"), token.name] : [];
+  }).filter(function (token) {
+    return token.length;
+  }))];
+}));
+exports.typographyValueToToken = typographyValueToToken;
 function findIdentifierInParentScope(_ref) {
   var scope = _ref.scope,
     identifierName = _ref.identifierName;
@@ -34,6 +73,11 @@ var isTypographyProperty = function isTypographyProperty(propertyName) {
   return typographyProperties.includes(propertyName);
 };
 exports.isTypographyProperty = isTypographyProperty;
+var splitShorthandValues = function splitShorthandValues(str) {
+  // Regex accomplishes split str by whitespace but ignore spaces in between ${}
+  return str.split(/(\${[^}]*}\S*)|\s+/g).filter(Boolean);
+};
+exports.splitShorthandValues = splitShorthandValues;
 var getValueFromShorthand = function getValueFromShorthand(str) {
   var valueString = String(str);
   var fontFamily = /(sans-serif$)|(monospace$)/;
@@ -41,9 +85,7 @@ var getValueFromShorthand = function getValueFromShorthand(str) {
     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);
+  return splitShorthandValues(String(str).trim()).map(removePixelSuffix);
 };
 exports.getValueFromShorthand = getValueFromShorthand;
 var isGridSize = function isGridSize(node) {
@@ -129,7 +171,7 @@ var getRawExpression = function getRawExpression(node, context) {
   if (!(
   // if not one of our recognized types or doesn't have a range prop, early return
 
-  (0, _eslintCodemodUtils.isNodeOfType)(node, 'Literal') || (0, _eslintCodemodUtils.isNodeOfType)(node, 'Identifier') || (0, _eslintCodemodUtils.isNodeOfType)(node, 'BinaryExpression') || (0, _eslintCodemodUtils.isNodeOfType)(node, 'UnaryExpression') || (0, _eslintCodemodUtils.isNodeOfType)(node, 'TemplateLiteral') || (0, _eslintCodemodUtils.isNodeOfType)(node, 'CallExpression')) || !Array.isArray(node.range)) {
+  (0, _eslintCodemodUtils.isNodeOfType)(node, 'Literal') || (0, _eslintCodemodUtils.isNodeOfType)(node, 'Identifier') || (0, _eslintCodemodUtils.isNodeOfType)(node, 'BinaryExpression') || (0, _eslintCodemodUtils.isNodeOfType)(node, 'UnaryExpression') || (0, _eslintCodemodUtils.isNodeOfType)(node, 'TemplateLiteral') || (0, _eslintCodemodUtils.isNodeOfType)(node, 'CallExpression') || (0, _eslintCodemodUtils.isNodeOfType)(node, 'ArrowFunctionExpression')) || !Array.isArray(node.range)) {
     return null;
   }
   var _node$range = (0, _slicedToArray2.default)(node.range, 2),
@@ -142,6 +184,9 @@ var getValueFromIdentifier = function getValueFromIdentifier(node, context) {
   if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'Identifier')) {
     return null;
   }
+  if (node.name === 'gridSize') {
+    return 8;
+  }
   var scope = context.getScope();
   var variable = findIdentifierInParentScope({
     scope: scope,
@@ -286,4 +331,145 @@ var findParentNodeForLine = function findParentNodeForLine(node) {
     return findParentNodeForLine(node.parent);
   }
 };
-exports.findParentNodeForLine = findParentNodeForLine;
+
+/**
+ * Returns a boolean that signals wether the current property is revelant under the current configuration
+ * @param propertyName camelCase CSS property
+ * @param targetOptions Array containing the types of properties that should be included in the rule
+ * @example
+ * ```
+ * propertyName: padding, targetOptions: ['spacing']
+ * propertyName: fontWeight, targetOptions: ['spacing', 'typography']
+ * ```
+ */
+exports.findParentNodeForLine = findParentNodeForLine;
+function shouldAnalyzeProperty(propertyName, targetOptions) {
+  if (isSpacingProperty(propertyName) && targetOptions.includes('spacing')) {
+    return true;
+  }
+  if (isTypographyProperty(propertyName) && targetOptions.includes('typography')) {
+    return true;
+  }
+  return false;
+}
+
+/**
+ * Returns an array of tuples representing a processed css within `TaggedTemplateExpression` node.
+ * each element of the array is a tuple `[string, string]`,
+ * where the first element is the processed css line with computed values
+ * and the second element of the tuple is the original css line from source
+ * @param node TaggedTemplateExpression node
+ * @param context Rule.RuleContext
+ * @example
+ * ```
+ * `[['padding: 8', 'padding: ${gridSize()}'], ['margin: 6', 'margin: 6px' ]]`
+ * ```
+ */
+function processCssNode(node, context) {
+  var combinedString = node.quasi.quasis.map(function (q, i) {
+    return "".concat(q.value.raw).concat(node.quasi.expressions[i] ? getValue(node.quasi.expressions[i], context) : '');
+  }).join('');
+  var rawString = node.quasi.quasis.map(function (q, i) {
+    return "".concat(q.value.raw).concat(node.quasi.expressions[i] ? "${".concat(getRawExpression(node.quasi.expressions[i], context), "}") : '');
+  }).join('');
+  var cssProperties = splitCssProperties(combinedString);
+  var unalteredCssProperties = splitCssProperties(rawString);
+  return cssProperties.map(function (cssProperty, index) {
+    return [cssProperty, unalteredCssProperties[index]];
+  });
+}
+
+/**
+ * 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
+ * ```
+ * propertyName: padding, value: '8px' => token('space.100', '8px')
+ * propertyName: fontWeight, value: 400 => token('font.weight.regular', '400')
+ * ```
+ */
+function getTokenNodeForValue(propertyName, value) {
+  var token = isTypographyProperty(propertyName) ? typographyValueToToken[propertyName][value] : spacingValueToToken[value];
+  var fallbackValue = propertyName === 'fontFamily' ? {
+    value: "".concat(value),
+    raw: "\"".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)(fallbackValue)],
+    optional: false
+  });
+}
+function getFontSizeValueInScope(cssProperties) {
+  var fontSizeNode = cssProperties.find(function (_ref2) {
+    var _ref3 = (0, _slicedToArray2.default)(_ref2, 1),
+      style = _ref3[0];
+    var _style$split = style.split(':'),
+      _style$split2 = (0, _slicedToArray2.default)(_style$split, 2),
+      rawProperty = _style$split2[0],
+      value = _style$split2[1];
+    return /font-size/.test(rawProperty) ? value : null;
+  });
+  if (!fontSizeNode) {
+    return undefined;
+  }
+  var _fontSizeNode$0$split = fontSizeNode[0].split(':'),
+    _fontSizeNode$0$split2 = (0, _slicedToArray2.default)(_fontSizeNode$0$split, 2),
+    _ = _fontSizeNode$0$split2[0],
+    fontSizeValue = _fontSizeNode$0$split2[1];
+  if (!fontSizeValue) {
+    return undefined;
+  }
+  return getValueFromShorthand(fontSizeValue)[0];
+}
+
+/**
+ * Attempts to remove all non-essential words & characters from a style block.
+ * Including selectors and queries
+ * Adapted from ensure-design-token-usage
+ * @param styleString string of css properties
+ */
+function splitCssProperties(styleString) {
+  return styleString.split('\n').filter(function (line) {
+    return !line.trim().startsWith('@');
+  }).join('\n').replace(/\n/g, '').split(/;|(?<!\$){|(?<!\${.+?)}/) // don't split on template literal expressions i.e. `${...}`
+  .map(function (el) {
+    return el.trim() || '';
+  }).filter(Boolean);
+}
+
+/**
+ * returns wether the current string is a token value
+ * @param originalVaue string representing a css property value e.g 1em, 12px
+ */
+function isTokenValueString(originalValue) {
+  return originalValue.startsWith('${token(') && originalValue.endsWith('}');
+}
+
+/**
+ * Returns a string with token expression corresponding to input parameters
+ * if no token found for the pair the function returns undefined
+ * @param propertyName string camelCased css property
+ * @param value the computed value e.g '8px' -> '8'
+ */
+function getTokenReplacement(propertyName, value) {
+  var isFontWeightOrFamily = /fontWeight|fontFamily/.test(propertyName);
+  var propertyValue = typeof value === 'string' ? value.trim() : value;
+  var pixelValue = propertyValue;
+  var pixelValueString = "".concat(propertyValue, "px");
+  var lookupValue = isFontWeightOrFamily ? pixelValue : pixelValueString;
+  var tokenName = isTypographyProperty(propertyName) ? typographyValueToToken[propertyName][lookupValue] : spacingValueToToken[lookupValue];
+  if (!tokenName) {
+    return undefined;
+  }
+  var replacementTokenValue = getTokenNodeForValue(propertyName, lookupValue);
+
+  // ${token('...', '...')}
+  var replacementSubValue = '${' + replacementTokenValue.toString() + '}';
+  return replacementSubValue;
+}

package/dist/cjs/version.json

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