@atlaskit/eslint-plugin-design-system 10.9.0 → 10.10.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 10.10.0
+
+### Minor Changes
+
+- [#116426](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/116426)
+  [`29d6c074c76ea`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/29d6c074c76ea) -
+  Add lint rule to detect use of custom icons
+
 ## 10.9.0
 
 ### Minor Changes

package/README.md

@@ -55,6 +55,7 @@ module.exports = {
 | <a href="./src/rules/icon-label/README.md">icon-label</a>                                                                   | Enforces accessible usage of icon labels when composed with Atlassian Design System components.                                                                                                                                                                                                                     | Yes         | Yes     |             |
 | <a href="./src/rules/no-banned-imports/README.md">no-banned-imports</a>                                                     | Disallow importing banned modules.                                                                                                                                                                                                                                                                                  | Yes         |         |             |
 | <a href="./src/rules/no-css-tagged-template-expression/README.md">no-css-tagged-template-expression</a>                     | Disallows any `css` tagged template expressions that originate from Emotion, Styled Components or Compiled                                                                                                                                                                                                          |             | Yes     |             |
+| <a href="./src/rules/no-custom-icons/README.md">no-custom-icons</a>                                                         | Enforces custom glyph icons are used.                                                                                                                                                                                                                                                                               |             |         |             |
 | <a href="./src/rules/no-deprecated-apis/README.md">no-deprecated-apis</a>                                                   | Disallow using deprecated APIs.                                                                                                                                                                                                                                                                                     | Yes         |         |             |
 | <a href="./src/rules/no-deprecated-design-token-usage/README.md">no-deprecated-design-token-usage</a>                       | Disallow using deprecated design tokens.                                                                                                                                                                                                                                                                            | Yes         | Yes     |             |
 | <a href="./src/rules/no-deprecated-imports/README.md">no-deprecated-imports</a>                                             | Disallow importing deprecated modules.                                                                                                                                                                                                                                                                              | Yes         |         |             |

package/constellation/index/usage.mdx

@@ -18,6 +18,7 @@ This plugin contains rules that should be used when working with the
 | <a href="/components/eslint-plugin-design-system/icon-label/usage">icon-label</a>                                                                   | Enforces accessible usage of icon labels when composed with Atlassian Design System components.                                                                                                                                                                                                                     | Yes         | Yes     |             |
 | <a href="/components/eslint-plugin-design-system/no-banned-imports/usage">no-banned-imports</a>                                                     | Disallow importing banned modules.                                                                                                                                                                                                                                                                                  | Yes         |         |             |
 | <a href="/components/eslint-plugin-design-system/no-css-tagged-template-expression/usage">no-css-tagged-template-expression</a>                     | Disallows any `css` tagged template expressions that originate from Emotion, Styled Components or Compiled                                                                                                                                                                                                          |             | Yes     |             |
+| <a href="/components/eslint-plugin-design-system/no-custom-icons/usage">no-custom-icons</a>                                                         | Enforces custom glyph icons are used.                                                                                                                                                                                                                                                                               |             |         |             |
 | <a href="/components/eslint-plugin-design-system/no-deprecated-apis/usage">no-deprecated-apis</a>                                                   | Disallow using deprecated APIs.                                                                                                                                                                                                                                                                                     | Yes         |         |             |
 | <a href="/components/eslint-plugin-design-system/no-deprecated-design-token-usage/usage">no-deprecated-design-token-usage</a>                       | Disallow using deprecated design tokens.                                                                                                                                                                                                                                                                            | Yes         | Yes     |             |
 | <a href="/components/eslint-plugin-design-system/no-deprecated-imports/usage">no-deprecated-imports</a>                                             | Disallow importing deprecated modules.                                                                                                                                                                                                                                                                              | Yes         |         |             |

package/constellation/no-custom-icons/usage.mdx

@@ -0,0 +1,36 @@
+# no-custom-icons
+
+Icons are being updated with new designs, a simplified set of available icons and sizes, as well as
+more consistent padding and spacing.
+
+The new icon components allows your components to align with the new visual language - either by
+default, or when enabled via a feature flag.
+
+Custom icons are no longer supported, and should either be replaced with an existing icon from the
+`@atlaskit/icon` or `@atlassian/icon-lab` packages, or contributed to those packages.
+
+During the migration process, any custom icons should be moved into a central location to disable
+this error and allow the icon to be quickly replaced. What location to display in the error can be
+configured via the legacyIconPackages option.
+
+## Examples
+
+This rule identifies usages of custom icons from `@atlaskit/icon` or `@atlaskit/icon/base`.
+
+### Incorrect
+
+```js
+import Icon from '@atlaskit/icon';
+                 ^^^^^^^^^^^^^^^^^ custom icon import
+
+<Icon label="Activity" glyph="...">
+^^^^^^^^^^^^^^^^^^^^^^^ custom icon
+```
+
+### Correct
+
+```js
+import AddIcon from '@atlaskit/icon/core/add';
+
+<AddIcon label="" />;
+```

package/dist/cjs/presets/all.codegen.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::9bb5329713677543f16019954484ae2f>>
+ * @codegen <<SignedSource::ab43b6e1a867d07b9a27eae78d48834a>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = exports.default = {
@@ -18,6 +18,7 @@ var _default = exports.default = {
     '@atlaskit/design-system/icon-label': 'warn',
     '@atlaskit/design-system/no-banned-imports': 'error',
     '@atlaskit/design-system/no-css-tagged-template-expression': 'error',
+    '@atlaskit/design-system/no-custom-icons': 'warn',
     '@atlaskit/design-system/no-deprecated-apis': 'error',
     '@atlaskit/design-system/no-deprecated-design-token-usage': 'warn',
     '@atlaskit/design-system/no-deprecated-imports': 'error',

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

@@ -36,26 +36,18 @@ var createWithConfig = exports.createWithConfig = function createWithConfig(init
       failSilently: (userConfig === null || userConfig === void 0 ? void 0 : userConfig.failSilently) || defaultConfig.failSilently
     };
     var tokenNode = null;
-    return {
+    return (0, _errorBoundary.errorBoundary)({
       ImportDeclaration: function ImportDeclaration(node) {
-        return (0, _errorBoundary.errorBoundary)(function () {
-          if (node.source.value === '@atlaskit/tokens' && config.applyImport) {
-            tokenNode = node;
-          }
-        }, {
-          config: config
-        });
+        if (node.source.value === '@atlaskit/tokens' && config.applyImport) {
+          tokenNode = node;
+        }
       },
       // For expressions within template literals (e.g. `color: ${red}`) - color only
       'TemplateLiteral > Identifier': function TemplateLiteralIdentifier(node) {
-        return (0, _errorBoundary.errorBoundary)(function () {
-          if (config.domains.includes('color')) {
-            return (0, _color.lintTemplateIdentifierForColor)(node, context, config);
-          }
-          return;
-        }, {
-          config: config
-        });
+        if (config.domains.includes('color')) {
+          return (0, _color.lintTemplateIdentifierForColor)(node, context, config);
+        }
+        return;
       },
       // const styles = css({ color: 'red', margin: '4px' }), styled.div({ color: 'red', margin: '4px' })
       ObjectExpression: function (_ObjectExpression) {
@@ -67,263 +59,243 @@ var createWithConfig = exports.createWithConfig = function createWithConfig(init
         };
         return ObjectExpression;
       }(function (parentNode) {
-        return (0, _errorBoundary.errorBoundary)(function () {
-          var _context$getScope = context.getScope(),
-            references = _context$getScope.references;
-          /**
-           * NOTE: This rule doesn't have an `importSources` config option,
-           * so this will just be equal to DEFAULT_IMPORT_SOURCES (which is fine)
-           */
-          var importSources = (0, _isSupportedImport.getImportSources)(context);
+        var _context$getScope = context.getScope(),
+          references = _context$getScope.references;
+        /**
+         * NOTE: This rule doesn't have an `importSources` config option,
+         * so this will just be equal to DEFAULT_IMPORT_SOURCES (which is fine)
+         */
+        var importSources = (0, _isSupportedImport.getImportSources)(context);
 
-          // To force the correct node type
-          if (!(0, _eslintCodemodUtils.isNodeOfType)(parentNode, 'ObjectExpression')) {
-            return;
-          }
+        // To force the correct node type
+        if (!(0, _eslintCodemodUtils.isNodeOfType)(parentNode, 'ObjectExpression')) {
+          return;
+        }
 
-          // Return for nested objects - these get handled automatically so without returning we'd be doubling up
-          if (parentNode.parent.type === 'Property') {
+        // Return for nested objects - these get handled automatically so without returning we'd be doubling up
+        if (parentNode.parent.type === 'Property') {
+          return;
+        }
+        if ((0, _isNode.isDecendantOfXcssBlock)(parentNode, references, importSources)) {
+          return;
+        }
+        if (!(0, _isNode.isDecendantOfStyleBlock)(parentNode) && !(0, _isNode.isDecendantOfType)(parentNode, 'JSXExpressionContainer')) {
+          return;
+        }
+        function findObjectStyles(node) {
+          if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'Property')) {
             return;
           }
-          if ((0, _isNode.isDecendantOfXcssBlock)(parentNode, references, importSources)) {
+          if ((0, _eslintCodemodUtils.isNodeOfType)(node.value, 'ObjectExpression')) {
+            return node.value.properties.forEach(findObjectStyles);
+          }
+          if (!(0, _eslintCodemodUtils.isNodeOfType)(node.key, 'Identifier') && !(0, _eslintCodemodUtils.isNodeOfType)(node.key, 'Literal')) {
             return;
           }
-          if (!(0, _isNode.isDecendantOfStyleBlock)(parentNode) && !(0, _isNode.isDecendantOfType)(parentNode, 'JSXExpressionContainer')) {
+          var propertyName = (0, _eslintCodemodUtils.isNodeOfType)(node.key, 'Identifier') ? node.key.name : String(node.key.value);
+
+          // Returns which domains to lint against based on rule's config and current property
+          var domains = (0, _utils.getDomainsForProperty)(propertyName, config.domains);
+          if (domains.length === 0 || (0, _isNode.isDecendantOfGlobalToken)(node.value)) {
             return;
           }
-          function findObjectStyles(node) {
-            if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'Property')) {
-              return;
-            }
-            if ((0, _eslintCodemodUtils.isNodeOfType)(node.value, 'ObjectExpression')) {
-              return node.value.properties.forEach(findObjectStyles);
-            }
-            if (!(0, _eslintCodemodUtils.isNodeOfType)(node.key, 'Identifier') && !(0, _eslintCodemodUtils.isNodeOfType)(node.key, 'Literal')) {
-              return;
+          if ((0, _eslintCodemodUtils.isNodeOfType)(node.value, 'TemplateLiteral')) {
+            var value = (0, _utils.getValueFromTemplateLiteralRaw)(node.value, context);
+            if (Array.isArray(value) && value.some(_utils.isCalc)) {
+              return context.report({
+                node: node,
+                messageId: 'noCalcUsage',
+                data: {
+                  payload: "".concat(propertyName)
+                }
+              });
             }
-            var propertyName = (0, _eslintCodemodUtils.isNodeOfType)(node.key, 'Identifier') ? node.key.name : String(node.key.value);
-
-            // Returns which domains to lint against based on rule's config and current property
-            var domains = (0, _utils.getDomainsForProperty)(propertyName, config.domains);
-            if (domains.length === 0 || (0, _isNode.isDecendantOfGlobalToken)(node.value)) {
+            if (node.value.expressions.some(_isNode.isDecendantOfGlobalToken)) {
               return;
             }
-            if ((0, _eslintCodemodUtils.isNodeOfType)(node.value, 'TemplateLiteral')) {
-              var value = (0, _utils.getValueFromTemplateLiteralRaw)(node.value, context);
-              if (Array.isArray(value) && value.some(_utils.isCalc)) {
-                return context.report({
-                  node: node,
-                  messageId: 'noCalcUsage',
-                  data: {
-                    payload: "".concat(propertyName)
-                  }
-                });
-              }
-              if (node.value.expressions.some(_isNode.isDecendantOfGlobalToken)) {
-                return;
-              }
-            }
-            if (domains.includes('color')) {
-              return (0, _color.lintObjectForColor)(node, context, config);
-            }
-            if (domains.includes('spacing') || domains.includes('shape')) {
-              /**
-               * We do this in case the fontSize for a style object is declared alongside the `em` or `lineHeight` declaration.
-               */
-              var fontSizeNode = (0, _utils.getPropertyNodeFromParent)('fontSize', parentNode);
-              var fontSize = fontSizeNode && (0, _utils.getValueForPropertyNode)(fontSizeNode, context);
-              return (0, _spacing.lintObjectForSpacing)(node, context, config, fontSize, tokenNode);
-            }
           }
-          parentNode.properties.forEach(findObjectStyles);
-        }, {
-          config: config
-        });
+          if (domains.includes('color')) {
+            return (0, _color.lintObjectForColor)(node, context, config);
+          }
+          if (domains.includes('spacing') || domains.includes('shape')) {
+            /**
+             * We do this in case the fontSize for a style object is declared alongside the `em` or `lineHeight` declaration.
+             */
+            var fontSizeNode = (0, _utils.getPropertyNodeFromParent)('fontSize', parentNode);
+            var fontSize = fontSizeNode && (0, _utils.getValueForPropertyNode)(fontSizeNode, context);
+            return (0, _spacing.lintObjectForSpacing)(node, context, config, fontSize, tokenNode);
+          }
+        }
+        parentNode.properties.forEach(findObjectStyles);
       }),
       // CSSTemplateLiteral and StyledTemplateLiteral
       // const cssTemplateLiteral = css`color: red; padding: 12px`;
       // const styledTemplateLiteral = styled.p`color: red; padding: 8px`;
       'TaggedTemplateExpression[tag.name="css"],TaggedTemplateExpression[tag.object.name="styled"],TaggedTemplateExpression[tag.callee.name="styled"]': function TaggedTemplateExpressionTagNameCssTaggedTemplateExpressionTagObjectNameStyledTaggedTemplateExpressionTagCalleeNameStyled(node) {
-        return (0, _errorBoundary.errorBoundary)(function () {
-          // To force the correct node type
-          if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'TaggedTemplateExpression')) {
-            return;
-          }
-          var processedCssLines = (0, _utils.processCssNode)(node, context);
-          if (!processedCssLines) {
-            // if we can't get a processed css we bail
-            return;
+        // To force the correct node type
+        if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'TaggedTemplateExpression')) {
+          return;
+        }
+        var processedCssLines = (0, _utils.processCssNode)(node, context);
+        if (!processedCssLines) {
+          // if we can't get a processed css we bail
+          return;
+        }
+        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];
+          var domains = (0, _utils.getDomainsForProperty)(propertyName, config.domains);
+          if (domains.length === 0 || !resolvedCssValues) {
+            // in both of these cases no changes should be made to the current property
+            return currentSource;
           }
-          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];
-            var domains = (0, _utils.getDomainsForProperty)(propertyName, config.domains);
-            if (domains.length === 0 || !resolvedCssValues) {
-              // in both of these cases no changes should be made to the current property
+          if (domains.includes('color')) {
+            if ((0, _utils.includesTokenString)(resolvedCssValues.trim())) {
               return currentSource;
             }
-            if (domains.includes('color')) {
-              if ((0, _utils.includesTokenString)(resolvedCssValues.trim())) {
-                return currentSource;
-              }
-              if ((0, _isColor.includesHardCodedColor)(resolvedCssValues)) {
-                context.report({
-                  messageId: 'hardCodedColor',
-                  node: node
-                });
-                return currentSource;
-              }
+            if ((0, _isColor.includesHardCodedColor)(resolvedCssValues)) {
+              context.report({
+                messageId: 'hardCodedColor',
+                node: node
+              });
+              return currentSource;
+            }
+          }
+          if (domains.includes('spacing') || domains.includes('shape')) {
+            if (!(0, _utils.isValidSpacingValue)(resolvedCssValues, globalFontSize)) {
+              // no changes should be made to the current property
+              return currentSource;
             }
-            if (domains.includes('spacing') || domains.includes('shape')) {
-              if (!(0, _utils.isValidSpacingValue)(resolvedCssValues, globalFontSize)) {
-                // no changes should be made to the current property
-                return currentSource;
-              }
-
-              // 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 (!originalValue) {
-                  return originalValue;
-                }
-                if ((0, _utils.isCalc)(originalValue)) {
-                  context.report({
-                    node: node,
-                    messageId: 'noCalcUsage',
-                    data: {
-                      payload: "".concat(propertyName)
-                    }
-                  });
-                  return originalValue;
-                }
-                if ((0, _utils.isTokenValueString)(originalValue)) {
-                  // if the value is already valid, nothing to report or replace
-                  return originalValue;
-                }
+            // 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);
 
-                // do not replace 0 or auto with tokens
-                if ((0, _utils.isZero)(pxValue) || (0, _utils.isAuto)(pxValue)) {
-                  return originalValue;
-                }
-                if (isNaN(numericOrNanValue) && !isFontFamily) {
-                  // do not report if we have nothing to replace with
-                  return originalValue;
-                }
+            // reconstructing the string
+            // should replace what it can and preserve the raw value for everything else
 
-                // value is numeric or fontFamily, and needs replacing we'll report first
+            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 (!originalValue) {
+                return originalValue;
+              }
+              if ((0, _utils.isCalc)(originalValue)) {
                 context.report({
                   node: node,
-                  messageId: 'noRawSpacingValues',
+                  messageId: 'noCalcUsage',
                   data: {
-                    payload: "".concat(propertyName, ":").concat(numericOrNanValue)
+                    payload: "".concat(propertyName)
                   }
                 });
+                return originalValue;
+              }
+              if ((0, _utils.isTokenValueString)(originalValue)) {
+                // if the value is already valid, nothing to report or replace
+                return originalValue;
+              }
 
-                // from here on we know value is numeric or a font family, so it might or might not have a token equivalent
-                var replacementNode = (0, _utils.getTokenReplacement)(propertyName, numericOrNanValue);
-                if (!replacementNode) {
-                  return originalValue;
-                }
-                var replacementToken = '${' + replacementNode.toString() + '}';
-                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);
+              // do not replace 0 or auto with tokens
+              if ((0, _utils.isZero)(pxValue) || (0, _utils.isAuto)(pxValue)) {
+                return originalValue;
+              }
+              if (isNaN(numericOrNanValue) && !isFontFamily) {
+                // do not report if we have nothing to replace with
+                return originalValue;
               }
 
-              // replace property:val with new property:val
-              var replacedCssLine = currentSource.replace(originalCssLine, //  padding: ${gridSize()}px;
-              "".concat(originalProperty, ": ").concat(replacementValue));
-              if (!replacedCssLine) {
-                return currentSource;
+              // value is numeric or fontFamily, and needs replacing we'll report first
+              context.report({
+                node: node,
+                messageId: 'noRawSpacingValues',
+                data: {
+                  payload: "".concat(propertyName, ":").concat(numericOrNanValue)
+                }
+              });
+
+              // from here on we know value is numeric or a font family, so it might or might not have a token equivalent
+              var replacementNode = (0, _utils.getTokenReplacement)(propertyName, numericOrNanValue);
+              if (!replacementNode) {
+                return originalValue;
               }
-              return replacedCssLine;
+              var replacementToken = '${' + replacementNode.toString() + '}';
+              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);
             }
-            return currentSource;
-          }, textForSource);
-          if (completeSource !== textForSource) {
-            // means we found some replacement values, we'll give the option to fix them
 
-            context.report({
-              node: node,
-              messageId: 'autofixesPossible',
-              fix: function fix(fixer) {
-                return (!tokenNode && config.applyImport ? [(0, _utils.insertTokensImport)(fixer)] : []).concat([fixer.replaceText(node.quasi, completeSource)]);
-              }
-            });
+            // 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;
           }
-        }, {
-          config: config
-        });
+          return currentSource;
+        }, textForSource);
+        if (completeSource !== textForSource) {
+          // means we found some replacement values, we'll give the option to fix them
+
+          context.report({
+            node: node,
+            messageId: 'autofixesPossible',
+            fix: function fix(fixer) {
+              return (!tokenNode && config.applyImport ? [(0, _utils.insertTokensImport)(fixer)] : []).concat([fixer.replaceText(node.quasi, completeSource)]);
+            }
+          });
+        }
       },
       // For inline JSX styles - literals (e.g. <Test color="red"/>) - color only
       'JSXAttribute > Literal': function JSXAttributeLiteral(node) {
-        return (0, _errorBoundary.errorBoundary)(function () {
-          if (config.domains.includes('color')) {
-            return (0, _color.lintJSXLiteralForColor)(node, context, config);
-          }
-          return;
-        }, {
-          config: config
-        });
+        if (config.domains.includes('color')) {
+          return (0, _color.lintJSXLiteralForColor)(node, context, config);
+        }
+        return;
       },
       // For inline JSX styles - members (e.g. <Test color={color.red}/>) - color only
       'JSXExpressionContainer > MemberExpression': function JSXExpressionContainerMemberExpression(node) {
-        return (0, _errorBoundary.errorBoundary)(function () {
-          if (config.domains.includes('color')) {
-            return (0, _color.lintJSXMemberForColor)(node, context, config);
-          }
-          return;
-        }, {
-          config: config
-        });
+        if (config.domains.includes('color')) {
+          return (0, _color.lintJSXMemberForColor)(node, context, config);
+        }
+        return;
       },
       // For inline JSX styles - identifiers (e.g. <Test color={red}/>) - color only
       'JSXExpressionContainer > Identifier': function JSXExpressionContainerIdentifier(node) {
-        return (0, _errorBoundary.errorBoundary)(function () {
-          if (config.domains.includes('color')) {
-            return (0, _color.lintJSXIdentifierForColor)(node, context, config);
-          }
-          return;
-        }, {
-          config: config
-        });
+        if (config.domains.includes('color')) {
+          return (0, _color.lintJSXIdentifierForColor)(node, context, config);
+        }
+        return;
       }
-    };
+    }, config);
   };
 };
 var rule = (0, _createRule.createLintRule)({

package/dist/cjs/rules/index.codegen.js

@@ -11,6 +11,7 @@ var _ensureDesignTokenUsagePreview = _interopRequireDefault(require("./ensure-de
 var _iconLabel = _interopRequireDefault(require("./icon-label"));
 var _noBannedImports = _interopRequireDefault(require("./no-banned-imports"));
 var _noCssTaggedTemplateExpression = _interopRequireDefault(require("./no-css-tagged-template-expression"));
+var _noCustomIcons = _interopRequireDefault(require("./no-custom-icons"));
 var _noDeprecatedApis = _interopRequireDefault(require("./no-deprecated-apis"));
 var _noDeprecatedDesignTokenUsage = _interopRequireDefault(require("./no-deprecated-design-token-usage"));
 var _noDeprecatedImports = _interopRequireDefault(require("./no-deprecated-imports"));
@@ -47,7 +48,7 @@ var _useTokensTypography = _interopRequireDefault(require("./use-tokens-typograp
 var _useVisuallyHidden = _interopRequireDefault(require("./use-visually-hidden"));
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::b359d356c482db0087ddfce5bd105403>>
+ * @codegen <<SignedSource::402e6eb5433560b1032e5ed926bb5564>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = exports.default = {
@@ -57,6 +58,7 @@ var _default = exports.default = {
   'icon-label': _iconLabel.default,
   'no-banned-imports': _noBannedImports.default,
   'no-css-tagged-template-expression': _noCssTaggedTemplateExpression.default,
+  'no-custom-icons': _noCustomIcons.default,
   'no-deprecated-apis': _noDeprecatedApis.default,
   'no-deprecated-design-token-usage': _noDeprecatedDesignTokenUsage.default,
   'no-deprecated-imports': _noDeprecatedImports.default,

package/dist/cjs/rules/no-custom-icons/checks/has-prop.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.hasProp = hasProp;
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+function hasProp(node, propName) {
+  return (0, _eslintCodemodUtils.isNodeOfType)(node.openingElement, 'JSXOpeningElement') && node.openingElement.attributes.some(function (a) {
+    return a.type === 'JSXAttribute' && a.name.name === propName;
+  });
+}