@atlaskit/eslint-plugin-design-system 4.16.1 → 4.16.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 4.16.3
+
+### Patch Changes
+
+- [`ed34264c827`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ed34264c827) - Fix errors on tagged template literals for eslint rule ensure-design-token-usage-spacing and handle edgecases ensuring seamless fallback on errors
+
+## 4.16.2
+
+### Patch Changes
+
+- [`3db6efeac0d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3db6efeac0d) - Improves internal configuration of spacing tokens rule.
+
 ## 4.16.1
 
 ### Patch Changes

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

@@ -5,34 +5,67 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _eslintCodemodUtils = require("eslint-codemod-utils");
+var _createRule = require("../utils/create-rule");
 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; }
-var rule = {
+var rule = (0, _createRule.createRule)({
+  defaultOptions: [{
+    addons: ['spacing'],
+    applyImport: true
+  }],
+  name: 'ensure-design-token-usage-spacing',
   meta: {
+    schema: {
+      type: 'array',
+      items: {
+        type: 'object',
+        properties: {
+          applyImport: {
+            type: 'boolean'
+          },
+          addons: {
+            type: 'array',
+            items: {
+              enum: ['spacing', 'typography', 'shape']
+            }
+          }
+        }
+      }
+    },
     type: 'problem',
     fixable: 'code',
     docs: {
       description: 'Rule ensures all spacing CSS properties apply a matching spacing token',
-      recommended: true
+      recommended: 'error'
     },
     messages: {
       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) {
-    var _context$options$;
-    var targetCategories = ['spacing'];
-    var configCategories = (_context$options$ = context.options[0]) === null || _context$options$ === void 0 ? void 0 : _context$options$.addons;
-    if (Array.isArray(configCategories) && configCategories.includes('typography')) {
-      targetCategories.push('typography');
+  // @ts-expect-error
+  create: function create(context, options) {
+    var tokenNode = null;
+
+    // merge configs
+    var ruleConfig = _objectSpread(_objectSpread({}, options[0]), {}, {
+      addons: (0, _toConsumableArray2.default)(options[0].addons)
+    });
+    if (!ruleConfig.addons.includes('spacing')) {
+      ruleConfig.addons.push('spacing');
     }
     return {
+      ImportDeclaration: function ImportDeclaration(node) {
+        if (node.source.value === '@atlaskit/tokens' && ruleConfig.applyImport) {
+          tokenNode = node;
+        }
+      },
       // CSSObjectExpression
       // const styles = css({ color: 'red', margin: '4px' }), styled.div({ color: 'red', margin: '4px' })
       'CallExpression[callee.name=css] > ObjectExpression, CallExpression[callee.object.name=styled] > ObjectExpression': function CallExpressionCalleeNameCssObjectExpressionCallExpressionCalleeObjectNameStyledObjectExpression(parentNode) {
@@ -66,7 +99,7 @@ var rule = {
           if (!(0, _eslintCodemodUtils.isNodeOfType)(node.key, 'Identifier')) {
             return;
           }
-          if (!(0, _utils.shouldAnalyzeProperty)(node.key.name, targetCategories)) {
+          if (!(0, _utils.shouldAnalyzeProperty)(node.key.name, ruleConfig.addons)) {
             return;
           }
           if ((0, _isNode.isDecendantOfGlobalToken)(node.value)) {
@@ -115,7 +148,7 @@ var rule = {
               },
               fix: function fix(fixer) {
                 var _node$loc;
-                if (!(0, _utils.shouldAnalyzeProperty)(propertyName, targetCategories)) {
+                if (!(0, _utils.shouldAnalyzeProperty)(propertyName, ruleConfig.addons)) {
                   return null;
                 }
                 var pixelValueString = "".concat(pixelValue, "px");
@@ -125,9 +158,9 @@ var rule = {
                   return null;
                 }
                 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), {}, {
+                return (!tokenNode && ruleConfig.applyImport ? [(0, _utils.insertTokensImport)(fixer)] : []).concat([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())];
+                })).toString())]);
               }
             });
           }
@@ -154,11 +187,11 @@ var rule = {
                 if (!allResolvableValues) {
                   return null;
                 }
-                return fixer.replaceText(node.value, "`".concat(values.map(function (value) {
+                return (!tokenNode && ruleConfig.applyImport ? [(0, _utils.insertTokensImport)(fixer)] : []).concat([fixer.replaceText(node.value, "`".concat(values.map(function (value) {
                   var pixelValue = (0, _utils.emToPixels)(value, fontSize);
                   var pixelValueString = "".concat(pixelValue, "px");
                   return "${".concat((0, _utils.getTokenNodeForValue)(propertyName, pixelValueString), "}");
-                }).join(' '), "`"));
+                }).join(' '), "`"))]);
               } : undefined
             });
           });
@@ -172,8 +205,12 @@ var rule = {
         if (node.type !== 'TaggedTemplateExpression') {
           return;
         }
-        var parentNode = (0, _utils.findParentNodeForLine)(node);
         var processedCssLines = (0, _utils.processCssNode)(node, context);
+        if (!processedCssLines) {
+          // if we can't get a processed css we bail
+          return;
+        }
+        var parentNode = (0, _utils.findParentNodeForLine)(node);
         var globalFontSize = (0, _utils.getFontSizeValueInScope)(processedCssLines);
         var textForSource = context.getSourceCode().getText(node.quasi);
         var allReplacedValues = [];
@@ -192,7 +229,7 @@ var rule = {
           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)) {
+          if (!(0, _utils.shouldAnalyzeProperty)(propertyName, ruleConfig.addons) || !resolvedCssValues || !(0, _utils.isValidSpacingValue)(resolvedCssValues, globalFontSize)) {
             // in all of these cases no changes should be made to the current property
             return currentSource;
           }
@@ -278,13 +315,13 @@ var rule = {
             node: node,
             messageId: 'autofixesPossible',
             fix: function fix(fixer) {
-              return [fixer.insertTextBefore(parentNode, replacementComments), fixer.replaceText(node.quasi, completeSource)];
+              return (!tokenNode && ruleConfig.applyImport ? [(0, _utils.insertTokensImport)(fixer)] : []).concat([fixer.insertTextBefore(parentNode, replacementComments), fixer.replaceText(node.quasi, completeSource)]);
             }
           });
         }
       }
     };
   }
-};
+});
 var _default = rule;
 exports.default = _default;

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

@@ -4,6 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.cleanComments = cleanComments;
 exports.emToPixels = exports.convertHyphenatedNameToCamelCase = void 0;
 exports.findIdentifierInParentScope = findIdentifierInParentScope;
 exports.findParentNodeForLine = void 0;
@@ -11,7 +12,9 @@ exports.getFontSizeValueInScope = getFontSizeValueInScope;
 exports.getRawExpression = void 0;
 exports.getTokenNodeForValue = getTokenNodeForValue;
 exports.getTokenReplacement = getTokenReplacement;
-exports.isSpacingProperty = exports.getValueFromShorthand = exports.getValue = void 0;
+exports.getValueFromShorthand = exports.getValue = void 0;
+exports.insertTokensImport = insertTokensImport;
+exports.isSpacingProperty = void 0;
 exports.isTokenValueString = isTokenValueString;
 exports.onlyScaleTokens = exports.isValidSpacingValue = exports.isTypographyProperty = void 0;
 exports.processCssNode = processCssNode;
@@ -65,6 +68,9 @@ function findIdentifierInParentScope(_ref) {
   }
   return null;
 }
+function insertTokensImport(fixer) {
+  return (0, _eslintCodemodUtils.insertAtStartOfFile)(fixer, "".concat((0, _eslintCodemodUtils.insertImportDeclaration)('@atlaskit/tokens', ['token']), "\n"));
+}
 var isSpacingProperty = function isSpacingProperty(propertyName) {
   return properties.includes(propertyName);
 };
@@ -72,10 +78,21 @@ exports.isSpacingProperty = isSpacingProperty;
 var isTypographyProperty = function isTypographyProperty(propertyName) {
   return typographyProperties.includes(propertyName);
 };
+
+/**
+ * Accomplishes split str by whitespace but preserves expressions in between ${...}
+ * even if they might have whitepaces or nested brackets
+ * @param str
+ * @returns string[]
+ * @example
+ * Regex has two parts, first attempts to capture anything in between `${...}` in a capture group
+ * Whilst allowing nested brackets and non empty characters leading or traling wrapping expression e.g `${gridSize}`, `-${gridSize}px`
+ * second part is a white space delimiter
+ * For input `-${gridSize / 2}px ${token(...)} 18px -> [`-${gridSize / 2}px`, `${token(...)}`, `18px`]
+ */
 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);
+  return str.split(/(\S*\$\{[^{}]*(?:\{[^{}]*\}[^{}]*)*\}\S*)|\s+/g).filter(Boolean);
 };
 exports.splitShorthandValues = splitShorthandValues;
 var getValueFromShorthand = function getValueFromShorthand(str) {
@@ -171,7 +188,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') || (0, _eslintCodemodUtils.isNodeOfType)(node, 'ArrowFunctionExpression')) || !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')) || !Array.isArray(node.range)) {
     return null;
   }
   var _node$range = (0, _slicedToArray2.default)(node.range, 2),
@@ -353,6 +370,14 @@ function shouldAnalyzeProperty(propertyName, targetOptions) {
   return false;
 }
 
+/**
+ * Function that removes JS comments from a string of code,
+ * sometimes makers will have single or multiline comments in their tagged template literals styles, this can mess with our parsing logic
+ */
+function cleanComments(str) {
+  return str.replace(/\/\*([\s\S]*?)\*\//g, '').replace(/\/\/(.*)/g, '');
+}
+
 /**
  * Returns an array of tuples representing a processed css within `TaggedTemplateExpression` node.
  * each element of the array is a tuple `[string, string]`,
@@ -370,10 +395,14 @@ function processCssNode(node, context) {
     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), "}") : '');
+    return "".concat(q.value.raw).concat(node.quasi.expressions[i] ? getRawExpression(node.quasi.expressions[i], context) ? "${".concat(getRawExpression(node.quasi.expressions[i], context), "}") : null : '');
   }).join('');
-  var cssProperties = splitCssProperties(combinedString);
-  var unalteredCssProperties = splitCssProperties(rawString);
+  var cssProperties = splitCssProperties(cleanComments(combinedString));
+  var unalteredCssProperties = splitCssProperties(cleanComments(rawString));
+  if (cssProperties.length !== unalteredCssProperties.length) {
+    // this means something wen't wrong with the parsing, the original lines can't be reconciliated with the processed lines
+    return undefined;
+  }
   return cssProperties.map(function (cssProperty, index) {
     return [cssProperty, unalteredCssProperties[index]];
   });
@@ -437,9 +466,21 @@ function getFontSizeValueInScope(cssProperties) {
 function splitCssProperties(styleString) {
   return styleString.split('\n').filter(function (line) {
     return !line.trim().startsWith('@');
+  })
+  // sometimes makers will end a css line with `;` that's output from a function expression
+  // since we'll rely on `;` to split each line, we need to ensure it's there
+  .map(function (line) {
+    return line.endsWith(';') ? line : "".concat(line, ";");
   }).join('\n').replace(/\n/g, '').split(/;|(?<!\$){|(?<!\${.+?)}/) // don't split on template literal expressions i.e. `${...}`
-  .map(function (el) {
+  // filters lines that are completely null, this could be from function expressions that output both property and value
+  .filter(function (line) {
+    return line.trim() !== 'null' && line.trim() !== 'null;';
+  }).map(function (el) {
     return el.trim() || '';
+  })
+  // we won't be able to reason about lines that don't have colon (:)
+  .filter(function (line) {
+    return line.split(':').length === 2;
   }).filter(Boolean);
 }
 

package/dist/cjs/rules/no-deprecated-apis/index.js

@@ -9,9 +9,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _fs = _interopRequireDefault(require("fs"));
 var _path = _interopRequireDefault(require("path"));
 var _utils = require("@typescript-eslint/utils");
-var createRule = _utils.ESLintUtils.RuleCreator(function (name) {
-  return name;
-});
+var _createRule = require("../utils/create-rule");
 var noDeprecatedJSXAttributeMessageId = 'noDeprecatedJSXAttributes';
 exports.noDeprecatedJSXAttributeMessageId = noDeprecatedJSXAttributeMessageId;
 var isNodeOfType = function isNodeOfType(node, nodeType) {
@@ -38,7 +36,7 @@ var getConfig = function getConfig() {
 };
 var name = 'no-deprecated-apis';
 exports.name = name;
-var rule = createRule({
+var rule = (0, _createRule.createRule)({
   name: name,
   defaultOptions: [{
     deprecatedConfig: getConfig()

package/dist/cjs/rules/utils/create-rule.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createRule = void 0;
+var _utils = require("@typescript-eslint/utils");
+var createRule = _utils.ESLintUtils.RuleCreator(function (name) {
+  return "https://atlassian.design/components/eslint-plugin-design-system/examples#".concat(name);
+});
+exports.createRule = createRule;

package/dist/cjs/version.json

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

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

@@ -1,29 +1,62 @@
 /* eslint-disable @atlassian/tangerine/import/entry-points */
 
 import { isNodeOfType, node as nodeFn, property } from 'eslint-codemod-utils';
+import { createRule } from '../utils/create-rule';
 import { isDecendantOfGlobalToken } from '../utils/is-node';
-import { convertHyphenatedNameToCamelCase, emToPixels, findParentNodeForLine, getFontSizeValueInScope, getTokenNodeForValue, getTokenReplacement, getValue, getValueFromShorthand, isTokenValueString, isTypographyProperty, isValidSpacingValue, processCssNode, shouldAnalyzeProperty, spacingValueToToken, splitShorthandValues, typographyValueToToken } from './utils';
-const rule = {
+import { convertHyphenatedNameToCamelCase, emToPixels, findParentNodeForLine, getFontSizeValueInScope, getTokenNodeForValue, getTokenReplacement, getValue, getValueFromShorthand, insertTokensImport, isTokenValueString, isTypographyProperty, isValidSpacingValue, processCssNode, shouldAnalyzeProperty, spacingValueToToken, splitShorthandValues, typographyValueToToken } from './utils';
+const rule = createRule({
+  defaultOptions: [{
+    addons: ['spacing'],
+    applyImport: true
+  }],
+  name: 'ensure-design-token-usage-spacing',
   meta: {
+    schema: {
+      type: 'array',
+      items: {
+        type: 'object',
+        properties: {
+          applyImport: {
+            type: 'boolean'
+          },
+          addons: {
+            type: 'array',
+            items: {
+              enum: ['spacing', 'typography', 'shape']
+            }
+          }
+        }
+      }
+    },
     type: 'problem',
     fixable: 'code',
     docs: {
       description: 'Rule ensures all spacing CSS properties apply a matching spacing token',
-      recommended: true
+      recommended: 'error'
     },
     messages: {
       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(context) {
-    var _context$options$;
-    const targetCategories = ['spacing'];
-    const configCategories = (_context$options$ = context.options[0]) === null || _context$options$ === void 0 ? void 0 : _context$options$.addons;
-    if (Array.isArray(configCategories) && configCategories.includes('typography')) {
-      targetCategories.push('typography');
+  // @ts-expect-error
+  create(context, options) {
+    let tokenNode = null;
+
+    // merge configs
+    const ruleConfig = {
+      ...options[0],
+      addons: [...options[0].addons]
+    };
+    if (!ruleConfig.addons.includes('spacing')) {
+      ruleConfig.addons.push('spacing');
     }
     return {
+      ImportDeclaration(node) {
+        if (node.source.value === '@atlaskit/tokens' && ruleConfig.applyImport) {
+          tokenNode = node;
+        }
+      },
       // CSSObjectExpression
       // const styles = css({ color: 'red', margin: '4px' }), styled.div({ color: 'red', margin: '4px' })
       'CallExpression[callee.name=css] > ObjectExpression, CallExpression[callee.object.name=styled] > ObjectExpression': parentNode => {
@@ -57,7 +90,7 @@ const rule = {
           if (!isNodeOfType(node.key, 'Identifier')) {
             return;
           }
-          if (!shouldAnalyzeProperty(node.key.name, targetCategories)) {
+          if (!shouldAnalyzeProperty(node.key.name, ruleConfig.addons)) {
             return;
           }
           if (isDecendantOfGlobalToken(node.value)) {
@@ -105,7 +138,7 @@ const rule = {
               },
               fix: fixer => {
                 var _node$loc;
-                if (!shouldAnalyzeProperty(propertyName, targetCategories)) {
+                if (!shouldAnalyzeProperty(propertyName, ruleConfig.addons)) {
                   return null;
                 }
                 const pixelValueString = `${pixelValue}px`;
@@ -115,10 +148,10 @@ const rule = {
                   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({
+                return (!tokenNode && ruleConfig.applyImport ? [insertTokensImport(fixer)] : []).concat([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: replacementValue
-                }).toString())];
+                }).toString())]);
               }
             });
           }
@@ -143,11 +176,11 @@ const rule = {
                 if (!allResolvableValues) {
                   return null;
                 }
-                return fixer.replaceText(node.value, `\`${values.map(value => {
+                return (!tokenNode && ruleConfig.applyImport ? [insertTokensImport(fixer)] : []).concat([fixer.replaceText(node.value, `\`${values.map(value => {
                   const pixelValue = emToPixels(value, fontSize);
                   const pixelValueString = `${pixelValue}px`;
                   return `\${${getTokenNodeForValue(propertyName, pixelValueString)}}`;
-                }).join(' ')}\``);
+                }).join(' ')}\``)]);
               } : undefined
             });
           });
@@ -161,8 +194,12 @@ const rule = {
         if (node.type !== 'TaggedTemplateExpression') {
           return;
         }
-        const parentNode = findParentNodeForLine(node);
         const processedCssLines = processCssNode(node, context);
+        if (!processedCssLines) {
+          // if we can't get a processed css we bail
+          return;
+        }
+        const parentNode = findParentNodeForLine(node);
         const globalFontSize = getFontSizeValueInScope(processedCssLines);
         const textForSource = context.getSourceCode().getText(node.quasi);
         const allReplacedValues = [];
@@ -172,7 +209,7 @@ const rule = {
           const propertyName = convertHyphenatedNameToCamelCase(originalProperty);
           const isFontFamily = /fontFamily/.test(propertyName);
           const replacedValuesPerProperty = [originalProperty];
-          if (!shouldAnalyzeProperty(propertyName, targetCategories) || !resolvedCssValues || !isValidSpacingValue(resolvedCssValues, globalFontSize)) {
+          if (!shouldAnalyzeProperty(propertyName, ruleConfig.addons) || !resolvedCssValues || !isValidSpacingValue(resolvedCssValues, globalFontSize)) {
             // in all of these cases no changes should be made to the current property
             return currentSource;
           }
@@ -252,12 +289,12 @@ const rule = {
             node,
             messageId: 'autofixesPossible',
             fix: fixer => {
-              return [fixer.insertTextBefore(parentNode, replacementComments), fixer.replaceText(node.quasi, completeSource)];
+              return (!tokenNode && ruleConfig.applyImport ? [insertTokensImport(fixer)] : []).concat([fixer.insertTextBefore(parentNode, replacementComments), fixer.replaceText(node.quasi, completeSource)]);
             }
           });
         }
       }
     };
   }
-};
+});
 export default rule;

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

@@ -1,4 +1,4 @@
-import { callExpression, identifier, isNodeOfType, literal } from 'eslint-codemod-utils';
+import { callExpression, identifier, insertAtStartOfFile, insertImportDeclaration, isNodeOfType, literal } from 'eslint-codemod-utils';
 import { spacing as spacingScale, typography as typographyTokens } from '@atlaskit/tokens/tokens-raw';
 const typographyProperties = ['fontSize', 'fontWeight', 'fontFamily', 'lineHeight'];
 const 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'];
@@ -30,15 +30,29 @@ export function findIdentifierInParentScope({
   }
   return null;
 }
+export function insertTokensImport(fixer) {
+  return insertAtStartOfFile(fixer, `${insertImportDeclaration('@atlaskit/tokens', ['token'])}\n`);
+}
 export const isSpacingProperty = propertyName => {
   return properties.includes(propertyName);
 };
 export const isTypographyProperty = propertyName => {
   return typographyProperties.includes(propertyName);
 };
+
+/**
+ * Accomplishes split str by whitespace but preserves expressions in between ${...}
+ * even if they might have whitepaces or nested brackets
+ * @param str
+ * @returns string[]
+ * @example
+ * Regex has two parts, first attempts to capture anything in between `${...}` in a capture group
+ * Whilst allowing nested brackets and non empty characters leading or traling wrapping expression e.g `${gridSize}`, `-${gridSize}px`
+ * second part is a white space delimiter
+ * For input `-${gridSize / 2}px ${token(...)} 18px -> [`-${gridSize / 2}px`, `${token(...)}`, `18px`]
+ */
 export const splitShorthandValues = str => {
-  // Regex accomplishes split str by whitespace but ignore spaces in between ${}
-  return str.split(/(\${[^}]*}\S*)|\s+/g).filter(Boolean);
+  return str.split(/(\S*\$\{[^{}]*(?:\{[^{}]*\}[^{}]*)*\}\S*)|\s+/g).filter(Boolean);
 };
 export const getValueFromShorthand = str => {
   const valueString = String(str);
@@ -119,7 +133,7 @@ export const getRawExpression = (node, context) => {
   if (!(
   // if not one of our recognized types or doesn't have a range prop, early return
 
-  isNodeOfType(node, 'Literal') || isNodeOfType(node, 'Identifier') || isNodeOfType(node, 'BinaryExpression') || isNodeOfType(node, 'UnaryExpression') || isNodeOfType(node, 'TemplateLiteral') || isNodeOfType(node, 'CallExpression') || isNodeOfType(node, 'ArrowFunctionExpression')) || !Array.isArray(node.range)) {
+  isNodeOfType(node, 'Literal') || isNodeOfType(node, 'Identifier') || isNodeOfType(node, 'BinaryExpression') || isNodeOfType(node, 'UnaryExpression') || isNodeOfType(node, 'TemplateLiteral') || isNodeOfType(node, 'CallExpression')) || !Array.isArray(node.range)) {
     return null;
   }
   const [start, end] = node.range;
@@ -293,6 +307,14 @@ export function shouldAnalyzeProperty(propertyName, targetOptions) {
   return false;
 }
 
+/**
+ * Function that removes JS comments from a string of code,
+ * sometimes makers will have single or multiline comments in their tagged template literals styles, this can mess with our parsing logic
+ */
+export function cleanComments(str) {
+  return str.replace(/\/\*([\s\S]*?)\*\//g, '').replace(/\/\/(.*)/g, '');
+}
+
 /**
  * Returns an array of tuples representing a processed css within `TaggedTemplateExpression` node.
  * each element of the array is a tuple `[string, string]`,
@@ -310,10 +332,14 @@ export function processCssNode(node, context) {
     return `${q.value.raw}${node.quasi.expressions[i] ? getValue(node.quasi.expressions[i], context) : ''}`;
   }).join('');
   const rawString = node.quasi.quasis.map((q, i) => {
-    return `${q.value.raw}${node.quasi.expressions[i] ? `\${${getRawExpression(node.quasi.expressions[i], context)}}` : ''}`;
+    return `${q.value.raw}${node.quasi.expressions[i] ? getRawExpression(node.quasi.expressions[i], context) ? `\${${getRawExpression(node.quasi.expressions[i], context)}}` : null : ''}`;
   }).join('');
-  const cssProperties = splitCssProperties(combinedString);
-  const unalteredCssProperties = splitCssProperties(rawString);
+  const cssProperties = splitCssProperties(cleanComments(combinedString));
+  const unalteredCssProperties = splitCssProperties(cleanComments(rawString));
+  if (cssProperties.length !== unalteredCssProperties.length) {
+    // this means something wen't wrong with the parsing, the original lines can't be reconciliated with the processed lines
+    return undefined;
+  }
   return cssProperties.map((cssProperty, index) => [cssProperty, unalteredCssProperties[index]]);
 }
 
@@ -365,8 +391,14 @@ export function getFontSizeValueInScope(cssProperties) {
  * @param styleString string of css properties
  */
 export function splitCssProperties(styleString) {
-  return styleString.split('\n').filter(line => !line.trim().startsWith('@')).join('\n').replace(/\n/g, '').split(/;|(?<!\$){|(?<!\${.+?)}/) // don't split on template literal expressions i.e. `${...}`
-  .map(el => el.trim() || '').filter(Boolean);
+  return styleString.split('\n').filter(line => !line.trim().startsWith('@'))
+  // sometimes makers will end a css line with `;` that's output from a function expression
+  // since we'll rely on `;` to split each line, we need to ensure it's there
+  .map(line => line.endsWith(';') ? line : `${line};`).join('\n').replace(/\n/g, '').split(/;|(?<!\$){|(?<!\${.+?)}/) // don't split on template literal expressions i.e. `${...}`
+  // filters lines that are completely null, this could be from function expressions that output both property and value
+  .filter(line => line.trim() !== 'null' && line.trim() !== 'null;').map(el => el.trim() || '')
+  // we won't be able to reason about lines that don't have colon (:)
+  .filter(line => line.split(':').length === 2).filter(Boolean);
 }
 
 /**

package/dist/es2019/rules/no-deprecated-apis/index.js

@@ -1,7 +1,7 @@
 import fs from 'fs';
 import path from 'path';
-import { AST_NODE_TYPES, ASTUtils, ESLintUtils } from '@typescript-eslint/utils';
-const createRule = ESLintUtils.RuleCreator(name => name);
+import { AST_NODE_TYPES, ASTUtils } from '@typescript-eslint/utils';
+import { createRule } from '../utils/create-rule';
 export const noDeprecatedJSXAttributeMessageId = 'noDeprecatedJSXAttributes';
 const isNodeOfType = (node, nodeType) => ASTUtils.isNodeOfType(nodeType)(node);
 const isImportDeclaration = programStatement => {

package/dist/es2019/rules/utils/create-rule.js

@@ -0,0 +1,2 @@
+import { ESLintUtils } from '@typescript-eslint/utils';
+export const createRule = ESLintUtils.RuleCreator(name => `https://atlassian.design/components/eslint-plugin-design-system/examples#${name}`);

package/dist/es2019/version.json

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

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

@@ -1,33 +1,66 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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) { _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 { isNodeOfType, node as nodeFn, property } from 'eslint-codemod-utils';
+import { createRule } from '../utils/create-rule';
 import { isDecendantOfGlobalToken } from '../utils/is-node';
-import { convertHyphenatedNameToCamelCase, emToPixels, findParentNodeForLine, getFontSizeValueInScope, getTokenNodeForValue, getTokenReplacement, getValue, getValueFromShorthand, isTokenValueString, isTypographyProperty, isValidSpacingValue, processCssNode, shouldAnalyzeProperty, spacingValueToToken, splitShorthandValues, typographyValueToToken } from './utils';
-var rule = {
+import { convertHyphenatedNameToCamelCase, emToPixels, findParentNodeForLine, getFontSizeValueInScope, getTokenNodeForValue, getTokenReplacement, getValue, getValueFromShorthand, insertTokensImport, isTokenValueString, isTypographyProperty, isValidSpacingValue, processCssNode, shouldAnalyzeProperty, spacingValueToToken, splitShorthandValues, typographyValueToToken } from './utils';
+var rule = createRule({
+  defaultOptions: [{
+    addons: ['spacing'],
+    applyImport: true
+  }],
+  name: 'ensure-design-token-usage-spacing',
   meta: {
+    schema: {
+      type: 'array',
+      items: {
+        type: 'object',
+        properties: {
+          applyImport: {
+            type: 'boolean'
+          },
+          addons: {
+            type: 'array',
+            items: {
+              enum: ['spacing', 'typography', 'shape']
+            }
+          }
+        }
+      }
+    },
     type: 'problem',
     fixable: 'code',
     docs: {
       description: 'Rule ensures all spacing CSS properties apply a matching spacing token',
-      recommended: true
+      recommended: 'error'
     },
     messages: {
       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) {
-    var _context$options$;
-    var targetCategories = ['spacing'];
-    var configCategories = (_context$options$ = context.options[0]) === null || _context$options$ === void 0 ? void 0 : _context$options$.addons;
-    if (Array.isArray(configCategories) && configCategories.includes('typography')) {
-      targetCategories.push('typography');
+  // @ts-expect-error
+  create: function create(context, options) {
+    var tokenNode = null;
+
+    // merge configs
+    var ruleConfig = _objectSpread(_objectSpread({}, options[0]), {}, {
+      addons: _toConsumableArray(options[0].addons)
+    });
+    if (!ruleConfig.addons.includes('spacing')) {
+      ruleConfig.addons.push('spacing');
     }
     return {
+      ImportDeclaration: function ImportDeclaration(node) {
+        if (node.source.value === '@atlaskit/tokens' && ruleConfig.applyImport) {
+          tokenNode = node;
+        }
+      },
       // CSSObjectExpression
       // const styles = css({ color: 'red', margin: '4px' }), styled.div({ color: 'red', margin: '4px' })
       'CallExpression[callee.name=css] > ObjectExpression, CallExpression[callee.object.name=styled] > ObjectExpression': function CallExpressionCalleeNameCssObjectExpressionCallExpressionCalleeObjectNameStyledObjectExpression(parentNode) {
@@ -61,7 +94,7 @@ var rule = {
           if (!isNodeOfType(node.key, 'Identifier')) {
             return;
           }
-          if (!shouldAnalyzeProperty(node.key.name, targetCategories)) {
+          if (!shouldAnalyzeProperty(node.key.name, ruleConfig.addons)) {
             return;
           }
           if (isDecendantOfGlobalToken(node.value)) {
@@ -110,7 +143,7 @@ var rule = {
               },
               fix: function fix(fixer) {
                 var _node$loc;
-                if (!shouldAnalyzeProperty(propertyName, targetCategories)) {
+                if (!shouldAnalyzeProperty(propertyName, ruleConfig.addons)) {
                   return null;
                 }
                 var pixelValueString = "".concat(pixelValue, "px");
@@ -120,9 +153,9 @@ var rule = {
                   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), {}, {
+                return (!tokenNode && ruleConfig.applyImport ? [insertTokensImport(fixer)] : []).concat([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: replacementValue
-                })).toString())];
+                })).toString())]);
               }
             });
           }
@@ -149,11 +182,11 @@ var rule = {
                 if (!allResolvableValues) {
                   return null;
                 }
-                return fixer.replaceText(node.value, "`".concat(values.map(function (value) {
+                return (!tokenNode && ruleConfig.applyImport ? [insertTokensImport(fixer)] : []).concat([fixer.replaceText(node.value, "`".concat(values.map(function (value) {
                   var pixelValue = emToPixels(value, fontSize);
                   var pixelValueString = "".concat(pixelValue, "px");
                   return "${".concat(getTokenNodeForValue(propertyName, pixelValueString), "}");
-                }).join(' '), "`"));
+                }).join(' '), "`"))]);
               } : undefined
             });
           });
@@ -167,8 +200,12 @@ var rule = {
         if (node.type !== 'TaggedTemplateExpression') {
           return;
         }
-        var parentNode = findParentNodeForLine(node);
         var processedCssLines = processCssNode(node, context);
+        if (!processedCssLines) {
+          // if we can't get a processed css we bail
+          return;
+        }
+        var parentNode = findParentNodeForLine(node);
         var globalFontSize = getFontSizeValueInScope(processedCssLines);
         var textForSource = context.getSourceCode().getText(node.quasi);
         var allReplacedValues = [];
@@ -187,7 +224,7 @@ var rule = {
           var propertyName = convertHyphenatedNameToCamelCase(originalProperty);
           var isFontFamily = /fontFamily/.test(propertyName);
           var replacedValuesPerProperty = [originalProperty];
-          if (!shouldAnalyzeProperty(propertyName, targetCategories) || !resolvedCssValues || !isValidSpacingValue(resolvedCssValues, globalFontSize)) {
+          if (!shouldAnalyzeProperty(propertyName, ruleConfig.addons) || !resolvedCssValues || !isValidSpacingValue(resolvedCssValues, globalFontSize)) {
             // in all of these cases no changes should be made to the current property
             return currentSource;
           }
@@ -273,12 +310,12 @@ var rule = {
             node: node,
             messageId: 'autofixesPossible',
             fix: function fix(fixer) {
-              return [fixer.insertTextBefore(parentNode, replacementComments), fixer.replaceText(node.quasi, completeSource)];
+              return (!tokenNode && ruleConfig.applyImport ? [insertTokensImport(fixer)] : []).concat([fixer.insertTextBefore(parentNode, replacementComments), fixer.replaceText(node.quasi, completeSource)]);
             }
           });
         }
       }
     };
   }
-};
+});
 export default rule;

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

@@ -1,5 +1,5 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import { callExpression, identifier, isNodeOfType, literal } from 'eslint-codemod-utils';
+import { callExpression, identifier, insertAtStartOfFile, insertImportDeclaration, isNodeOfType, literal } from 'eslint-codemod-utils';
 import { spacing as spacingScale, typography as typographyTokens } from '@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'];
@@ -40,15 +40,29 @@ export function findIdentifierInParentScope(_ref) {
   }
   return null;
 }
+export function insertTokensImport(fixer) {
+  return insertAtStartOfFile(fixer, "".concat(insertImportDeclaration('@atlaskit/tokens', ['token']), "\n"));
+}
 export var isSpacingProperty = function isSpacingProperty(propertyName) {
   return properties.includes(propertyName);
 };
 export var isTypographyProperty = function isTypographyProperty(propertyName) {
   return typographyProperties.includes(propertyName);
 };
+
+/**
+ * Accomplishes split str by whitespace but preserves expressions in between ${...}
+ * even if they might have whitepaces or nested brackets
+ * @param str
+ * @returns string[]
+ * @example
+ * Regex has two parts, first attempts to capture anything in between `${...}` in a capture group
+ * Whilst allowing nested brackets and non empty characters leading or traling wrapping expression e.g `${gridSize}`, `-${gridSize}px`
+ * second part is a white space delimiter
+ * For input `-${gridSize / 2}px ${token(...)} 18px -> [`-${gridSize / 2}px`, `${token(...)}`, `18px`]
+ */
 export var splitShorthandValues = function splitShorthandValues(str) {
-  // Regex accomplishes split str by whitespace but ignore spaces in between ${}
-  return str.split(/(\${[^}]*}\S*)|\s+/g).filter(Boolean);
+  return str.split(/(\S*\$\{[^{}]*(?:\{[^{}]*\}[^{}]*)*\}\S*)|\s+/g).filter(Boolean);
 };
 export var getValueFromShorthand = function getValueFromShorthand(str) {
   var valueString = String(str);
@@ -141,7 +155,7 @@ export var getRawExpression = function getRawExpression(node, context) {
   if (!(
   // if not one of our recognized types or doesn't have a range prop, early return
 
-  isNodeOfType(node, 'Literal') || isNodeOfType(node, 'Identifier') || isNodeOfType(node, 'BinaryExpression') || isNodeOfType(node, 'UnaryExpression') || isNodeOfType(node, 'TemplateLiteral') || isNodeOfType(node, 'CallExpression') || isNodeOfType(node, 'ArrowFunctionExpression')) || !Array.isArray(node.range)) {
+  isNodeOfType(node, 'Literal') || isNodeOfType(node, 'Identifier') || isNodeOfType(node, 'BinaryExpression') || isNodeOfType(node, 'UnaryExpression') || isNodeOfType(node, 'TemplateLiteral') || isNodeOfType(node, 'CallExpression')) || !Array.isArray(node.range)) {
     return null;
   }
   var _node$range = _slicedToArray(node.range, 2),
@@ -317,6 +331,14 @@ export function shouldAnalyzeProperty(propertyName, targetOptions) {
   return false;
 }
 
+/**
+ * Function that removes JS comments from a string of code,
+ * sometimes makers will have single or multiline comments in their tagged template literals styles, this can mess with our parsing logic
+ */
+export function cleanComments(str) {
+  return str.replace(/\/\*([\s\S]*?)\*\//g, '').replace(/\/\/(.*)/g, '');
+}
+
 /**
  * Returns an array of tuples representing a processed css within `TaggedTemplateExpression` node.
  * each element of the array is a tuple `[string, string]`,
@@ -334,10 +356,14 @@ export function processCssNode(node, context) {
     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), "}") : '');
+    return "".concat(q.value.raw).concat(node.quasi.expressions[i] ? getRawExpression(node.quasi.expressions[i], context) ? "${".concat(getRawExpression(node.quasi.expressions[i], context), "}") : null : '');
   }).join('');
-  var cssProperties = splitCssProperties(combinedString);
-  var unalteredCssProperties = splitCssProperties(rawString);
+  var cssProperties = splitCssProperties(cleanComments(combinedString));
+  var unalteredCssProperties = splitCssProperties(cleanComments(rawString));
+  if (cssProperties.length !== unalteredCssProperties.length) {
+    // this means something wen't wrong with the parsing, the original lines can't be reconciliated with the processed lines
+    return undefined;
+  }
   return cssProperties.map(function (cssProperty, index) {
     return [cssProperty, unalteredCssProperties[index]];
   });
@@ -401,9 +427,21 @@ export function getFontSizeValueInScope(cssProperties) {
 export function splitCssProperties(styleString) {
   return styleString.split('\n').filter(function (line) {
     return !line.trim().startsWith('@');
+  })
+  // sometimes makers will end a css line with `;` that's output from a function expression
+  // since we'll rely on `;` to split each line, we need to ensure it's there
+  .map(function (line) {
+    return line.endsWith(';') ? line : "".concat(line, ";");
   }).join('\n').replace(/\n/g, '').split(/;|(?<!\$){|(?<!\${.+?)}/) // don't split on template literal expressions i.e. `${...}`
-  .map(function (el) {
+  // filters lines that are completely null, this could be from function expressions that output both property and value
+  .filter(function (line) {
+    return line.trim() !== 'null' && line.trim() !== 'null;';
+  }).map(function (el) {
     return el.trim() || '';
+  })
+  // we won't be able to reason about lines that don't have colon (:)
+  .filter(function (line) {
+    return line.split(':').length === 2;
   }).filter(Boolean);
 }
 

package/dist/esm/rules/no-deprecated-apis/index.js

@@ -1,10 +1,8 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import fs from 'fs';
 import path from 'path';
-import { AST_NODE_TYPES, ASTUtils, ESLintUtils } from '@typescript-eslint/utils';
-var createRule = ESLintUtils.RuleCreator(function (name) {
-  return name;
-});
+import { AST_NODE_TYPES, ASTUtils } from '@typescript-eslint/utils';
+import { createRule } from '../utils/create-rule';
 export var noDeprecatedJSXAttributeMessageId = 'noDeprecatedJSXAttributes';
 var isNodeOfType = function isNodeOfType(node, nodeType) {
   return ASTUtils.isNodeOfType(nodeType)(node);

package/dist/esm/rules/utils/create-rule.js

@@ -0,0 +1,4 @@
+import { ESLintUtils } from '@typescript-eslint/utils';
+export var createRule = ESLintUtils.RuleCreator(function (name) {
+  return "https://atlassian.design/components/eslint-plugin-design-system/examples#".concat(name);
+});

package/dist/esm/version.json

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

package/dist/types/index.d.ts

@@ -9,7 +9,10 @@ export declare const rules: {
     'no-banned-imports': import("eslint").Rule.RuleModule;
     'no-unsafe-design-token-usage': import("eslint").Rule.RuleModule;
     'use-visually-hidden': import("eslint").Rule.RuleModule;
-    'ensure-design-token-usage-spacing': import("eslint").Rule.RuleModule;
+    'ensure-design-token-usage-spacing': import("@typescript-eslint/utils/dist/ts-eslint/Rule").RuleModule<"noRawSpacingValues" | "autofixesPossible", [{
+        addons: ("spacing" | "typography" | "shape")[];
+        applyImport?: boolean | undefined;
+    }], import("@typescript-eslint/utils/dist/ts-eslint/Rule").RuleListener>;
 };
 export declare const configs: {
     recommended: {

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

@@ -1,3 +1,7 @@
-import type { Rule } from 'eslint';
-declare const rule: Rule.RuleModule;
+declare type Addon = 'spacing' | 'typography' | 'shape';
+declare type RuleConfig = {
+    addons: Addon[];
+    applyImport?: boolean;
+};
+declare const rule: import("@typescript-eslint/utils/dist/ts-eslint/Rule").RuleModule<"noRawSpacingValues" | "autofixesPossible", [RuleConfig], import("@typescript-eslint/utils/dist/ts-eslint/Rule").RuleListener>;
 export default rule;

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

@@ -1,7 +1,7 @@
 import type { Rule, Scope } from 'eslint';
 import { EslintNode, TaggedTemplateExpression } from 'eslint-codemod-utils';
 export declare type ProcessedCSSLines = [string, string][];
-export declare type TargetOptions = ('spacing' | 'typography')[];
+export declare type TargetOptions = ('spacing' | 'typography' | 'shape')[];
 /**
  * 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.
@@ -70,8 +70,20 @@ export declare function findIdentifierInParentScope({ scope, identifierName, }:
     scope: Scope.Scope;
     identifierName: string;
 }): Scope.Variable | null;
+export declare function insertTokensImport(fixer: Rule.RuleFixer): Rule.Fix;
 export declare const isSpacingProperty: (propertyName: string) => boolean;
 export declare const isTypographyProperty: (propertyName: string) => boolean;
+/**
+ * Accomplishes split str by whitespace but preserves expressions in between ${...}
+ * even if they might have whitepaces or nested brackets
+ * @param str
+ * @returns string[]
+ * @example
+ * Regex has two parts, first attempts to capture anything in between `${...}` in a capture group
+ * Whilst allowing nested brackets and non empty characters leading or traling wrapping expression e.g `${gridSize}`, `-${gridSize}px`
+ * second part is a white space delimiter
+ * For input `-${gridSize / 2}px ${token(...)} 18px -> [`-${gridSize / 2}px`, `${token(...)}`, `18px`]
+ */
 export declare const splitShorthandValues: (str: string) => string[];
 export declare const getValueFromShorthand: (str: unknown) => any[];
 export declare const getValue: (node: EslintNode, context: Rule.RuleContext) => string | number | any[] | null | undefined;
@@ -96,6 +108,11 @@ export declare const findParentNodeForLine: (node: Rule.Node) => Rule.Node;
  * ```
  */
 export declare function shouldAnalyzeProperty(propertyName: string, targetOptions: TargetOptions): boolean;
+/**
+ * Function that removes JS comments from a string of code,
+ * sometimes makers will have single or multiline comments in their tagged template literals styles, this can mess with our parsing logic
+ */
+export declare function cleanComments(str: string): string;
 /**
  * Returns an array of tuples representing a processed css within `TaggedTemplateExpression` node.
  * each element of the array is a tuple `[string, string]`,
@@ -108,7 +125,7 @@ export declare function shouldAnalyzeProperty(propertyName: string, targetOption
  * `[['padding: 8', 'padding: ${gridSize()}'], ['margin: 6', 'margin: 6px' ]]`
  * ```
  */
-export declare function processCssNode(node: TaggedTemplateExpression & Rule.NodeParentExtension, context: Rule.RuleContext): ProcessedCSSLines;
+export declare function processCssNode(node: TaggedTemplateExpression & Rule.NodeParentExtension, context: Rule.RuleContext): ProcessedCSSLines | undefined;
 /**
  * Returns a token node for a given value including fallbacks.
  * @param propertyName camelCase CSS property

package/dist/types/rules/utils/create-rule.d.ts

@@ -0,0 +1,2 @@
+import { ESLintUtils } from '@typescript-eslint/utils';
+export declare const createRule: <TOptions extends readonly unknown[], TMessageIds extends string, TRuleListener extends import("@typescript-eslint/utils/dist/ts-eslint/Rule").RuleListener = import("@typescript-eslint/utils/dist/ts-eslint/Rule").RuleListener>({ name, meta, ...rule }: Readonly<ESLintUtils.RuleWithMetaAndName<TOptions, TMessageIds, TRuleListener>>) => import("@typescript-eslint/utils/dist/ts-eslint/Rule").RuleModule<TMessageIds, TOptions, TRuleListener>;

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