@atlaskit/eslint-plugin-design-system 8.23.0 → 8.23.2

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

@@ -6,13 +6,15 @@ import { createLintRule } from '../utils/create-rule';
 import { includesHardCodedColor } from '../utils/is-color';
 import { isDecendantOfGlobalToken, isDecendantOfStyleBlock, isDecendantOfType } from '../utils/is-node';
 import { lintJSXIdentifierForColor, lintJSXLiteralForColor, lintJSXMemberForColor, lintObjectForColor, lintTemplateIdentifierForColor } from './color';
+import { errorBoundary } from './error-boundary';
 import ruleMeta from './rule-meta';
 import { lintObjectForSpacing } from './spacing';
 import { convertHyphenatedNameToCamelCase, emToPixels, getDomainsForProperty, getFontSizeFromNode, getFontSizeValueInScope, getTokenReplacement, getValueFromShorthand, getValueFromTemplateLiteralRaw, includesTokenString, insertTokensImport, isAuto, isCalc, isTokenValueString, isValidSpacingValue, isZero, processCssNode, splitShorthandValues } from './utils';
 var defaultConfig = {
   domains: ['color', 'spacing'],
   applyImport: true,
-  shouldEnforceFallbacks: false
+  shouldEnforceFallbacks: false,
+  failSilently: false
 };
 var createWithConfig = function createWithConfig(initialConfig) {
   return function (context) {
@@ -22,18 +24,27 @@ var createWithConfig = function createWithConfig(initialConfig) {
       domains: (userConfig === null || userConfig === void 0 ? void 0 : userConfig.domains) || initialConfig.domains,
       applyImport: (userConfig === null || userConfig === void 0 ? void 0 : userConfig.applyImport) !== undefined ? userConfig.applyImport : initialConfig.applyImport,
       shouldEnforceFallbacks: (userConfig === null || userConfig === void 0 ? void 0 : userConfig.shouldEnforceFallbacks) !== undefined ? userConfig.shouldEnforceFallbacks : initialConfig.shouldEnforceFallbacks,
-      exceptions: (userConfig === null || userConfig === void 0 ? void 0 : userConfig.exceptions) || []
+      exceptions: (userConfig === null || userConfig === void 0 ? void 0 : userConfig.exceptions) || [],
+      failSilently: (userConfig === null || userConfig === void 0 ? void 0 : userConfig.failSilently) || defaultConfig.failSilently
     };
     var tokenNode = null;
     return {
       ImportDeclaration: function ImportDeclaration(node) {
-        if (node.source.value === '@atlaskit/tokens' && config.applyImport) {
-          tokenNode = node;
-        }
+        return errorBoundary(function () {
+          if (node.source.value === '@atlaskit/tokens' && config.applyImport) {
+            tokenNode = node;
+          }
+        }, {
+          config: config
+        });
       },
       // For expressions within template literals (e.g. `color: ${red}`) - color only
       'TemplateLiteral > Identifier': function TemplateLiteralIdentifier(node) {
-        return lintTemplateIdentifierForColor(node, context, config);
+        return errorBoundary(function () {
+          return lintTemplateIdentifierForColor(node, context, config);
+        }, {
+          config: config
+        });
       },
       // const styles = css({ color: 'red', margin: '4px' }), styled.div({ color: 'red', margin: '4px' })
       ObjectExpression: function (_ObjectExpression) {
@@ -45,220 +56,240 @@ var createWithConfig = function createWithConfig(initialConfig) {
         };
         return ObjectExpression;
       }(function (parentNode) {
-        // To force the correct node type
-        if (!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;
-        }
-        if (!isDecendantOfStyleBlock(parentNode) && !isDecendantOfType(parentNode, 'JSXExpressionContainer')) {
-          return;
-        }
-        function findObjectStyles(node) {
-          if (!isNodeOfType(node, 'Property')) {
+        return errorBoundary(function () {
+          // To force the correct node type
+          if (!isNodeOfType(parentNode, 'ObjectExpression')) {
             return;
           }
-          if (isNodeOfType(node.value, 'ObjectExpression')) {
-            return node.value.properties.forEach(findObjectStyles);
-          }
-          if (!isNodeOfType(node.key, 'Identifier') && !isNodeOfType(node.key, 'Literal')) {
+
+          // Return for nested objects - these get handled automatically so without returning we'd be doubling up
+          if (parentNode.parent.type === 'Property') {
             return;
           }
-          var propertyName = 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 = getDomainsForProperty(propertyName, config.domains);
-          if (domains.length === 0 || isDecendantOfGlobalToken(node.value)) {
+          if (!isDecendantOfStyleBlock(parentNode) && !isDecendantOfType(parentNode, 'JSXExpressionContainer')) {
             return;
           }
-          if (isNodeOfType(node.value, 'TemplateLiteral')) {
-            var value = getValueFromTemplateLiteralRaw(node.value, context);
-            if (Array.isArray(value) && value.some(isCalc)) {
-              return context.report({
-                node: node,
-                messageId: 'noCalcUsage',
-                data: {
-                  payload: "".concat(propertyName)
-                }
-              });
+          function findObjectStyles(node) {
+            if (!isNodeOfType(node, 'Property')) {
+              return;
             }
-            if (node.value.expressions.some(isDecendantOfGlobalToken)) {
+            if (isNodeOfType(node.value, 'ObjectExpression')) {
+              return node.value.properties.forEach(findObjectStyles);
+            }
+            if (!isNodeOfType(node.key, 'Identifier') && !isNodeOfType(node.key, 'Literal')) {
               return;
             }
+            var propertyName = 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 = getDomainsForProperty(propertyName, config.domains);
+            if (domains.length === 0 || isDecendantOfGlobalToken(node.value)) {
+              return;
+            }
+            if (isNodeOfType(node.value, 'TemplateLiteral')) {
+              var value = getValueFromTemplateLiteralRaw(node.value, context);
+              if (Array.isArray(value) && value.some(isCalc)) {
+                return context.report({
+                  node: node,
+                  messageId: 'noCalcUsage',
+                  data: {
+                    payload: "".concat(propertyName)
+                  }
+                });
+              }
+              if (node.value.expressions.some(isDecendantOfGlobalToken)) {
+                return;
+              }
+            }
+            if (domains.includes('color')) {
+              return lintObjectForColor(node, context, config);
+            }
+            if (domains.includes('spacing') || domains.includes('shape') || domains.includes('typography')) {
+              /**
+               * We do this in case the fontSize for a style object is declared alongside the `em` or `lineHeight` declaration
+               */
+              var fontSize = getFontSizeFromNode(parentNode, context);
+              return lintObjectForSpacing(node, context, config, fontSize, tokenNode);
+            }
           }
-          if (domains.includes('color')) {
-            return lintObjectForColor(node, context, config);
-          }
-          if (domains.includes('spacing') || domains.includes('shape') || domains.includes('typography')) {
-            /**
-             * We do this in case the fontSize for a style object is declared alongside the `em` or `lineHeight` declaration
-             */
-            var fontSize = getFontSizeFromNode(parentNode, context);
-            return lintObjectForSpacing(node, context, config, fontSize, tokenNode);
-          }
-        }
-        parentNode.properties.forEach(findObjectStyles);
+          parentNode.properties.forEach(findObjectStyles);
+        }, {
+          config: config
+        });
       }),
       // 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) {
-        // To force the correct node type
-        if (!isNodeOfType(node, 'TaggedTemplateExpression')) {
-          return;
-        }
-        var processedCssLines = processCssNode(node, context);
-        if (!processedCssLines) {
-          // if we can't get a processed css we bail
-          return;
-        }
-        var globalFontSize = getFontSizeValueInScope(processedCssLines);
-        var textForSource = context.getSourceCode().getText(node.quasi);
-        var allReplacedValues = [];
-        var completeSource = processedCssLines.reduce(function (currentSource, _ref) {
-          var _ref2 = _slicedToArray(_ref, 2),
-            resolvedCssLine = _ref2[0],
-            originalCssLine = _ref2[1];
-          var _resolvedCssLine$spli = resolvedCssLine.split(':'),
-            _resolvedCssLine$spli2 = _slicedToArray(_resolvedCssLine$spli, 2),
-            originalProperty = _resolvedCssLine$spli2[0],
-            resolvedCssValues = _resolvedCssLine$spli2[1];
-          var _originalCssLine$spli = originalCssLine.split(':'),
-            _originalCssLine$spli2 = _slicedToArray(_originalCssLine$spli, 2),
-            _ = _originalCssLine$spli2[0],
-            originalCssValues = _originalCssLine$spli2[1];
-          var propertyName = convertHyphenatedNameToCamelCase(originalProperty);
-          var isFontFamily = /fontFamily/.test(propertyName);
-          var replacedValuesPerProperty = [originalProperty];
-          var domains = 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;
+        return errorBoundary(function () {
+          // To force the correct node type
+          if (!isNodeOfType(node, 'TaggedTemplateExpression')) {
+            return;
           }
-          if (domains.includes('color')) {
-            if (includesTokenString(resolvedCssValues.trim())) {
-              return currentSource;
-            }
-            if (includesHardCodedColor(resolvedCssValues)) {
-              context.report({
-                messageId: 'hardCodedColor',
-                node: node
-              });
-              return currentSource;
-            }
+          var processedCssLines = processCssNode(node, context);
+          if (!processedCssLines) {
+            // if we can't get a processed css we bail
+            return;
           }
-          if (domains.includes('spacing') || domains.includes('typography') || domains.includes('shape')) {
-            if (!isValidSpacingValue(resolvedCssValues, globalFontSize)) {
-              // no changes should be made to the current property
+          var globalFontSize = getFontSizeValueInScope(processedCssLines);
+          var textForSource = context.getSourceCode().getText(node.quasi);
+          var allReplacedValues = [];
+          var completeSource = processedCssLines.reduce(function (currentSource, _ref) {
+            var _ref2 = _slicedToArray(_ref, 2),
+              resolvedCssLine = _ref2[0],
+              originalCssLine = _ref2[1];
+            var _resolvedCssLine$spli = resolvedCssLine.split(':'),
+              _resolvedCssLine$spli2 = _slicedToArray(_resolvedCssLine$spli, 2),
+              originalProperty = _resolvedCssLine$spli2[0],
+              resolvedCssValues = _resolvedCssLine$spli2[1];
+            var _originalCssLine$spli = originalCssLine.split(':'),
+              _originalCssLine$spli2 = _slicedToArray(_originalCssLine$spli, 2),
+              _ = _originalCssLine$spli2[0],
+              originalCssValues = _originalCssLine$spli2[1];
+            var propertyName = convertHyphenatedNameToCamelCase(originalProperty);
+            var isFontFamily = /fontFamily/.test(propertyName);
+            var replacedValuesPerProperty = [originalProperty];
+            var domains = 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;
             }
+            if (domains.includes('color')) {
+              if (includesTokenString(resolvedCssValues.trim())) {
+                return currentSource;
+              }
+              if (includesHardCodedColor(resolvedCssValues)) {
+                context.report({
+                  messageId: 'hardCodedColor',
+                  node: node
+                });
+                return currentSource;
+              }
+            }
+            if (domains.includes('spacing') || domains.includes('typography') || domains.includes('shape')) {
+              if (!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 = getValueFromShorthand(resolvedCssValues);
-            var processedValues = splitShorthandValues(resolvedCssValues);
-            // only splits shorthand values but it does not transform NaNs so tokens are preserved
-            var originalValues = splitShorthandValues(originalCssValues);
+              // gets the values from the associated property, numeric values or NaN
+              var processedNumericValues = getValueFromShorthand(resolvedCssValues);
+              var processedValues = splitShorthandValues(resolvedCssValues);
+              // only splits shorthand values but it does not transform NaNs so tokens are preserved
+              var originalValues = splitShorthandValues(originalCssValues);
 
-            // reconstructing the string
-            // should replace what it can and preserve the raw value for everything else
+              // 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
-              emToPixels(value, globalFontSize) || value, processedValues[index], originalValues[index]];
-            }).map(function (_ref3) {
-              var _ref4 = _slicedToArray(_ref3, 3),
-                numericOrNanValue = _ref4[0],
-                pxValue = _ref4[1],
-                originalValue = _ref4[2];
-              if (!originalValue) {
-                return originalValue;
-              }
-              if (isCalc(originalValue)) {
+              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
+                emToPixels(value, globalFontSize) || value, processedValues[index], originalValues[index]];
+              }).map(function (_ref3) {
+                var _ref4 = _slicedToArray(_ref3, 3),
+                  numericOrNanValue = _ref4[0],
+                  pxValue = _ref4[1],
+                  originalValue = _ref4[2];
+                if (!originalValue) {
+                  return originalValue;
+                }
+                if (isCalc(originalValue)) {
+                  context.report({
+                    node: node,
+                    messageId: 'noCalcUsage',
+                    data: {
+                      payload: "".concat(propertyName)
+                    }
+                  });
+                  return originalValue;
+                }
+                if (isTokenValueString(originalValue)) {
+                  // if the value is already valid, nothing to report or replace
+                  return originalValue;
+                }
+
+                // do not replace 0 or auto with tokens
+                if (isZero(pxValue) || isAuto(pxValue)) {
+                  return originalValue;
+                }
+                if (isNaN(numericOrNanValue) && !isFontFamily) {
+                  // do not report if we have nothing to replace with
+                  return originalValue;
+                }
+
+                // value is numeric or fontFamily, and needs replacing we'll report first
                 context.report({
                   node: node,
-                  messageId: 'noCalcUsage',
+                  messageId: 'noRawSpacingValues',
                   data: {
-                    payload: "".concat(propertyName)
+                    payload: "".concat(propertyName, ":").concat(numericOrNanValue)
                   }
                 });
-                return originalValue;
-              }
-              if (isTokenValueString(originalValue)) {
-                // if the value is already valid, nothing to report or replace
-                return originalValue;
-              }
-
-              // do not replace 0 or auto with tokens
-              if (isZero(pxValue) || isAuto(pxValue)) {
-                return originalValue;
-              }
-              if (isNaN(numericOrNanValue) && !isFontFamily) {
-                // do not report if we have nothing to replace with
-                return originalValue;
-              }
 
-              // 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 = 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);
+              }
 
-              // from here on we know value is numeric or a font family, so it might or might not have a token equivalent
-              var replacementNode = getTokenReplacement(propertyName, numericOrNanValue);
-              if (!replacementNode) {
-                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;
               }
-              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 replacedCssLine;
             }
+            return currentSource;
+          }, textForSource);
+          if (completeSource !== textForSource) {
+            // means we found some replacement values, we'll give the option to fix them
 
-            // 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;
+            context.report({
+              node: node,
+              messageId: 'autofixesPossible',
+              fix: function fix(fixer) {
+                return (!tokenNode && config.applyImport ? [insertTokensImport(fixer)] : []).concat([fixer.replaceText(node.quasi, completeSource)]);
+              }
+            });
           }
-          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 ? [insertTokensImport(fixer)] : []).concat([fixer.replaceText(node.quasi, completeSource)]);
-            }
-          });
-        }
+        }, {
+          config: config
+        });
       },
       // For inline JSX styles - literals (e.g. <Test color="red"/>) - color only
       'JSXAttribute > Literal': function JSXAttributeLiteral(node) {
-        return lintJSXLiteralForColor(node, context, config);
+        return errorBoundary(function () {
+          return lintJSXLiteralForColor(node, context, config);
+        }, {
+          config: config
+        });
       },
       // For inline JSX styles - members (e.g. <Test color={color.red}/>) - color only
       'JSXExpressionContainer > MemberExpression': function JSXExpressionContainerMemberExpression(node) {
-        return lintJSXMemberForColor(node, context, config);
+        return errorBoundary(function () {
+          return lintJSXMemberForColor(node, context, config);
+        }, {
+          config: config
+        });
       },
       // For inline JSX styles - identifiers (e.g. <Test color={red}/>) - color only
       'JSXExpressionContainer > Identifier': function JSXExpressionContainerIdentifier(node) {
-        return lintJSXIdentifierForColor(node, context, config);
+        return errorBoundary(function () {
+          return lintJSXIdentifierForColor(node, context, config);
+        }, {
+          config: config
+        });
       }
     };
   };

package/dist/esm/rules/use-primitives/index.js

@@ -1,8 +1,9 @@
-import { getIdentifierInParentScope, isNodeOfType } from 'eslint-codemod-utils';
+import { isNodeOfType } from 'eslint-codemod-utils';
 import { createLintRule } from '../utils/create-rule';
 import { getConfig } from './config';
-import { jsxElementToBoxTransformer, styledComponentToPrimitive } from './transformers';
-import { containsOnlySupportedAttrs, findValidJsxUsageToTransform, findValidStyledComponentCall, getAttributeValueIdentifier, getJSXAttributeByName, getVariableDefinitionValue, getVariableUsagesCount, isFunctionNamed, isValidCssPropertiesToTransform, isValidTagName } from './utils';
+import { styledComponentToPrimitive } from './transformers';
+import { EmotionCSS } from './transformers/emotion-css';
+import { findValidJsxUsageToTransform, findValidStyledComponentCall, isValidCssPropertiesToTransform } from './utils';
 var boxDocsUrl = 'https://atlassian.design/components/primitives/box';
 var rule = createLintRule({
   meta: {
@@ -53,84 +54,13 @@ var rule = createLintRule({
         });
       },
       // transforms <div css={...}> usages
-      JSXOpeningElement: function JSXOpeningElement(node) {
-        if (!config.patterns.includes('compiled-css-function')) {
-          return false;
-        }
-        if (!isNodeOfType(node, 'JSXOpeningElement')) {
-          return;
-        }
-        if (!isNodeOfType(node.name, 'JSXIdentifier')) {
-          return;
-        }
-        if (!isNodeOfType(node.parent, 'JSXElement')) {
-          return;
-        }
-        var suggestBox = shouldSuggestBox(node.parent, context, config);
-        if (suggestBox) {
-          context.report({
-            node: node,
-            messageId: 'preferPrimitivesBox',
-            data: {
-              element: node.name.name
-            },
-            suggest: [{
-              desc: "Convert to Box",
-              fix: jsxElementToBoxTransformer(node.parent, context)
-            }]
-          });
-        }
+      JSXElement: function JSXElement(node) {
+        EmotionCSS.lint(node, {
+          context: context,
+          config: config
+        });
       }
     };
   }
 });
-var shouldSuggestBox = function shouldSuggestBox(node, context, config
-// scope: Scope.Scope,
-) {
-  if (!node) {
-    return false;
-  }
-
-  // Currently we only support `div`, but possibly more in future
-  if (!isValidTagName(node)) {
-    return false;
-  }
-
-  // Currently we only support elements that contain only a `css` attr, possibly more in future
-  if (!containsOnlySupportedAttrs(node)) {
-    return false;
-  }
-
-  // Get the `css` attr
-  var cssAttr = getJSXAttributeByName(node.openingElement, 'css');
-
-  // Get the prop value, e.g. `myStyles` in `css={myStyles}`
-  var cssVariableName = getAttributeValueIdentifier(cssAttr);
-
-  // `cssVariableName` could be undefined if the maker has
-  // done something like `css={[styles1, styles2]}`, `css={...styles}`, etc
-  if (!cssVariableName) {
-    return false;
-  }
-
-  /**
-   * Make sure the variable is not used in multiple JSX elements:
-   * ```
-   *    <div css={paddingStyles}></div>
-   *    <input css={paddingStyles}></input>
-   * ```
-   */
-  if (getVariableUsagesCount(cssVariableName, context) !== 1) {
-    return false;
-  }
-
-  // Find where `cssVariableName` is defined. We're looking for `const myStyles = css({...})`
-  var cssVariableDefinition = getIdentifierInParentScope(context.getScope(), cssVariableName);
-  var cssVariableValue = getVariableDefinitionValue(cssVariableDefinition);
-  // Check if `cssVariableValue` is a function called `css()`
-  if (!cssVariableValue || !isFunctionNamed(cssVariableValue, 'css')) {
-    return false;
-  }
-  return isValidCssPropertiesToTransform(cssVariableValue.node.init, config);
-};
 export default rule;