@atlaskit/eslint-plugin-design-system 4.7.1 → 4.7.2

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 4.7.2
+
+### Patch Changes
+
+- [`9f64ab9d5ea`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9f64ab9d5ea) - Improvements / added robustness to edge cases previously unhandled.
+- [`8e848e3a4a6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8e848e3a4a6) - Internal updates to a number of rules. Introduced a custom formatter for the rule 'no-raw-spacing-values'.
+- [`31494c13aaa`](https://bitbucket.org/atlassian/atlassian-frontend/commits/31494c13aaa) - Type fixes to the internals of a number of rules.
+
 ## 4.7.1
 
 ### Patch Changes

package/dist/cjs/index.js

@@ -19,6 +19,8 @@ var _noDeprecatedDesignTokenUsage = _interopRequireDefault(require("./rules/no-d
 
 var _noDeprecatedImports = _interopRequireDefault(require("./rules/no-deprecated-imports"));
 
+var _noRawSpacingValues = _interopRequireDefault(require("./rules/no-raw-spacing-values"));
+
 var _noUnsafeDesignTokenUsage = _interopRequireDefault(require("./rules/no-unsafe-design-token-usage"));
 
 var _useVisuallyHidden = _interopRequireDefault(require("./rules/use-visually-hidden"));
@@ -31,7 +33,8 @@ var rules = {
   'no-deprecated-imports': _noDeprecatedImports.default,
   'no-banned-imports': _noBannedImports.default,
   'no-unsafe-design-token-usage': _noUnsafeDesignTokenUsage.default,
-  'use-visually-hidden': _useVisuallyHidden.default
+  'use-visually-hidden': _useVisuallyHidden.default,
+  'no-raw-spacing-values': _noRawSpacingValues.default
 };
 exports.rules = rules;
 var configs = {
@@ -53,7 +56,8 @@ var configs = {
       '@atlaskit/design-system/no-deprecated-imports': 'error',
       '@atlaskit/design-system/use-visually-hidden': 'error',
       '@atlaskit/design-system/ensure-design-token-usage': 'error',
-      '@atlaskit/design-system/no-banned-imports': 'error'
+      '@atlaskit/design-system/no-banned-imports': 'error',
+      '@atlaskit/design-system/no-raw-spacing-values': 'error'
     }
   }
 };

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

@@ -45,7 +45,6 @@ var filterSuggestion = function filterSuggestion(_ref) {
 var rule = {
   meta: {
     // We need to upgrade the version of ESLint.
-    // @ts-expect-error
     hasSuggestions: true,
     docs: {
       recommended: true

package/dist/cjs/rules/icon-label/index.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+
 var _jsx = require("../utils/jsx");
 
 var elements = ['AkButton', 'AKButton', 'Button', 'MenuItem', 'ButtonItem', 'CustomItem', 'CustomThemeButton', 'LoadingButton', 'BreadcrumbsItem'];
@@ -59,7 +61,11 @@ var rule = {
 
         return JSXElement;
       }(function (node) {
-        if (node.openingElement.name.type !== 'JSXIdentifier') {
+        if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'JSXElement')) {
+          return;
+        }
+
+        if (!(0, _eslintCodemodUtils.isNodeOfType)(node.openingElement.name, 'JSXIdentifier')) {
           return;
         }
 

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

@@ -30,19 +30,13 @@ var rule = {
   create: function create(context) {
     return {
       // find JSX atribute - find name of attribute - get source and find relevant identifiers.
-      JSXAttribute: function (_JSXAttribute) {
-        function JSXAttribute(_x) {
-          return _JSXAttribute.apply(this, arguments);
-        }
-
-        JSXAttribute.toString = function () {
-          return _JSXAttribute.toString();
-        };
-
-        return JSXAttribute;
-      }(function (node) {
+      JSXAttribute: function JSXAttribute(node) {
         var _node$name;
 
+        if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'JSXAttribute')) {
+          return;
+        }
+
         if (!unsafeOverrides.includes(node === null || node === void 0 ? void 0 : (_node$name = node.name) === null || _node$name === void 0 ? void 0 : _node$name.name)) {
           return;
         }
@@ -83,7 +77,7 @@ var rule = {
             }
           });
         });
-      })
+      }
     };
   }
 };

package/dist/cjs/rules/no-raw-spacing-values/index.js

@@ -0,0 +1,135 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+
+var _utils = require("./utils");
+
+var rule = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'No raw spacing values',
+      recommended: true
+    },
+    messages: {
+      noRawSpacingValues: 'Prefer the use of spacing primitives over the direct application of spacing properties.\n\n@meta <<{{payload}}>>'
+    }
+  },
+  create: function create(context) {
+    return {
+      // CSSObjectExpression
+      // const styles = css({ color: 'red', margin: '4px' })
+      'CallExpression[callee.name=css] > ObjectExpression': function CallExpressionCalleeNameCssObjectExpression(parentNode) {
+        if (!(0, _eslintCodemodUtils.isNodeOfType)(parentNode, 'ObjectExpression')) {
+          return;
+        }
+        /**
+         * We do this in case we the fontSize for a style object is declared alongside the `em` or `lineHeight` declaration
+         */
+
+
+        var fontSizeNode = parentNode.properties.find(function (node) {
+          if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'Property')) {
+            return;
+          }
+
+          if (!(0, _eslintCodemodUtils.isNodeOfType)(node.key, 'Identifier')) {
+            return;
+          }
+
+          return node.key.name === 'fontSize';
+        });
+        var fontSizeValue = (0, _utils.getValue)( // @ts-ignore
+        (fontSizeNode === null || fontSizeNode === void 0 ? void 0 : fontSizeNode.type) === 'Property' && fontSizeNode.value, context);
+        var fontSize = Array.isArray(fontSizeValue) ? fontSizeValue[0] : fontSizeValue;
+        parentNode.properties.forEach(function (node) {
+          if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'Property')) {
+            return;
+          }
+
+          if (!(0, _eslintCodemodUtils.isNodeOfType)(node.key, 'Identifier')) {
+            return;
+          }
+
+          if (!(0, _utils.isSpacingProperty)(node.key.name)) {
+            return;
+          }
+
+          var value = (0, _utils.getValue)(node.value, context);
+
+          if (value) {
+            var values = typeof value === 'number' || typeof value === 'string' ? [value] : value;
+            values.forEach(function (value) {
+              context.report({
+                node: node,
+                messageId: 'noRawSpacingValues',
+                data: {
+                  payload: "".concat(node.key.name, ":").concat((0, _utils.emToPixels)(value, fontSize))
+                }
+              });
+            });
+            return;
+          } else {
+            context.report({
+              node: node,
+              messageId: 'noRawSpacingValues',
+              data: {
+                payload: "".concat(node.key.name, ":NaN")
+              }
+            });
+          }
+        });
+      },
+      // 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"]': function TaggedTemplateExpressionTagNameCssTaggedTemplateExpressionTagObjectNameStyled(node) {
+        if (node.type !== 'TaggedTemplateExpression') {
+          return;
+        }
+
+        var combinedString = node.quasi.quasis.map(function (q, i) {
+          return "".concat(q.value.raw).concat(node.quasi.expressions[i] ? (0, _utils.getValue)(node.quasi.expressions[i], context) : '');
+        }).join('');
+        /**
+         * Attempts to remove all non-essential words & characters from a style block.
+         * Including selectors and queries
+         * Adapted from ensure-design-token-usage
+         */
+
+        var cssProperties = combinedString.replace(/\n/g, '').split(/;|{|}/).map(function (el) {
+          return el.trim() || '';
+        });
+        cssProperties.map(function (style) {
+          var _style$split = style.split(':'),
+              _style$split2 = (0, _slicedToArray2.default)(_style$split, 2),
+              property = _style$split2[0],
+              value = _style$split2[1];
+
+          if ((0, _utils.isSpacingProperty)(property)) {
+            context.report({
+              node: node,
+              messageId: 'noRawSpacingValues',
+              data: {
+                payload: "".concat(property, ":").concat((0, _utils.removePixelSuffix)(value.trim()))
+              }
+            });
+          }
+
+          return;
+        });
+      }
+    };
+  }
+};
+var _default = rule;
+exports.default = _default;

package/dist/cjs/rules/no-raw-spacing-values/utils.js

@@ -0,0 +1,223 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.emToPixels = void 0;
+exports.findIdentifierInParentScope = findIdentifierInParentScope;
+exports.removePixelSuffix = exports.isSpacingProperty = exports.getValueFromShorthand = exports.getValue = void 0;
+
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+
+var properties = ['padding', 'paddingLeft', 'paddingTop', 'paddingRight', 'paddingBottom', 'marginLeft', 'marginTop', 'marginRight', 'marginBottom', 'margin', 'gap', 'fontSize', 'lineHeight', 'width', 'height'];
+
+function findIdentifierInParentScope(_ref) {
+  var scope = _ref.scope,
+      identifierName = _ref.identifierName;
+  var traversingScope = scope;
+
+  while (traversingScope && traversingScope.type !== 'global') {
+    var matchedVariable = traversingScope.variables.find(function (variable) {
+      return variable.name === identifierName;
+    });
+
+    if (matchedVariable) {
+      return matchedVariable;
+    }
+
+    traversingScope = traversingScope.upper;
+  }
+
+  return null;
+}
+
+var isSpacingProperty = function isSpacingProperty(prop) {
+  return properties.includes(prop);
+};
+
+exports.isSpacingProperty = isSpacingProperty;
+
+var getValueFromShorthand = function getValueFromShorthand(str) {
+  // If we want to filter out NaN just add .filter(Boolean)
+  return String(str).trim().split(' ').map(removePixelSuffix);
+};
+
+exports.getValueFromShorthand = getValueFromShorthand;
+
+var isGridSize = function isGridSize(node) {
+  return (0, _eslintCodemodUtils.isNodeOfType)(node, 'CallExpression') && (0, _eslintCodemodUtils.isNodeOfType)(node.callee, 'Identifier') && (node.callee.name === 'gridSize' || node.callee.name === 'getGridSize');
+};
+
+var isFontSize = function isFontSize(node) {
+  return (0, _eslintCodemodUtils.isNodeOfType)(node, 'CallExpression') && (0, _eslintCodemodUtils.isNodeOfType)(node.callee, 'Identifier') && (node.callee.name === 'fontSize' || node.callee.name === 'getFontSize');
+};
+
+var isFontSizeSmall = function isFontSizeSmall(node) {
+  return (0, _eslintCodemodUtils.isNodeOfType)(node, 'CallExpression') && (0, _eslintCodemodUtils.isNodeOfType)(node.callee, 'Identifier') && node.callee.name === 'fontSizeSmall';
+};
+
+var getValueFromCallExpression = function getValueFromCallExpression(node, context) {
+  if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'CallExpression')) {
+    return null;
+  }
+
+  if (isGridSize(node)) {
+    return 8;
+  }
+
+  if (isFontSize(node)) {
+    return 14;
+  }
+
+  if (isFontSizeSmall(node)) {
+    return 11;
+  }
+
+  return null;
+};
+
+var getValue = function getValue(node, context) {
+  if ((0, _eslintCodemodUtils.isNodeOfType)(node, 'Literal')) {
+    return getValueFromShorthand(node.value);
+  }
+
+  if ((0, _eslintCodemodUtils.isNodeOfType)(node, 'BinaryExpression')) {
+    return getValueFromBinaryExpression(node, context);
+  }
+
+  if ((0, _eslintCodemodUtils.isNodeOfType)(node, 'UnaryExpression')) {
+    return getValueFromUnaryExpression(node, context);
+  }
+
+  if ((0, _eslintCodemodUtils.isNodeOfType)(node, 'CallExpression')) {
+    return getValueFromCallExpression(node, context);
+  }
+
+  if ((0, _eslintCodemodUtils.isNodeOfType)(node, 'Identifier')) {
+    return getValueFromIdentifier(node, context);
+  }
+
+  if ((0, _eslintCodemodUtils.isNodeOfType)(node, 'TemplateLiteral')) {
+    return getValueFromTemplateLiteral(node, context);
+  }
+
+  return null;
+};
+
+exports.getValue = getValue;
+
+var getValueFromIdentifier = function getValueFromIdentifier(node, context) {
+  if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'Identifier')) {
+    return null;
+  }
+
+  var scope = context.getScope();
+  var variable = findIdentifierInParentScope({
+    scope: scope,
+    identifierName: node.name
+  });
+
+  if (!variable) {
+    return null;
+  }
+
+  var definition = variable.defs[0];
+
+  if (!(0, _eslintCodemodUtils.isNodeOfType)(definition.node, 'VariableDeclarator')) {
+    return null;
+  }
+
+  if (!definition.node.init) {
+    return null;
+  }
+
+  return getValue(definition.node.init, context);
+};
+
+var getValueFromUnaryExpression = function getValueFromUnaryExpression(node, context) {
+  if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'UnaryExpression')) {
+    return null;
+  }
+
+  var value = getValue(node.argument, context);
+
+  if (!value) {
+    return null;
+  } // eslint-disable-next-line no-eval
+
+
+  return eval("".concat(node.operator).concat(value));
+};
+/**
+ * @example
+ * ```js
+ * `2 ${variable} 0`
+ *
+ * // results in [2, NaN, 0]
+ * ```
+ * ```js
+ * const variable = 4;
+ * `2 ${variable} 0`
+ *
+ * // results in [2, 4, 0]
+ * ```
+ */
+
+
+var getValueFromTemplateLiteral = function getValueFromTemplateLiteral(node, context) {
+  if (!(0, _eslintCodemodUtils.isNodeOfType)(node, "TemplateLiteral")) {
+    return null;
+  }
+
+  var combinedString = node.quasis.map(function (q, i) {
+    return "".concat(q.value.raw).concat(node.expressions[i] ? getValue(node.expressions[i], context) : '');
+  }).join('').trim().split(' ');
+  return combinedString.map(removePixelSuffix);
+};
+
+var getValueFromBinaryExpression = function getValueFromBinaryExpression(node, context) {
+  if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'BinaryExpression')) {
+    return null;
+  }
+
+  var left = node.left,
+      right = node.right,
+      operator = node.operator;
+  var leftValue = getValue(left, context);
+  var rightValue = getValue(right, context);
+  var final = rightValue && leftValue ? // eslint-disable-next-line no-eval
+  eval("".concat(leftValue).concat(operator).concat(rightValue)) : null;
+  return final;
+};
+
+var emRegex = /(.*\d+)em$/;
+
+var emToPixels = function emToPixels(value, fontSize) {
+  if (typeof value === 'string') {
+    var match = value.match(emRegex);
+
+    if (match && typeof fontSize === 'number') {
+      return Number(match[1]) * fontSize;
+    }
+
+    return 'NaN';
+  }
+
+  return value;
+};
+
+exports.emToPixels = emToPixels;
+var percentageOrEm = /(%$)|(\d+em$)/;
+
+var removePixelSuffix = function removePixelSuffix(value) {
+  var isString = typeof value === 'string'; // @ts-ignore This shouldn't be a type error but CI is complaining
+
+  if (isString && percentageOrEm.test(value)) {
+    return value;
+  } // @ts-ignore This shouldn't be a type error but CI is complaining
+
+
+  return Number(isString ? value.replace('px', '') : value);
+};
+
+exports.removePixelSuffix = removePixelSuffix;

package/dist/cjs/rules/use-visually-hidden/utils.js

@@ -4,7 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.makeTemplateLiteralIntoEntries = exports.getObjectLikeness = exports.getFirstImport = exports.countMatchingKeyValues = void 0;
-// eslint-disable-next-line import/no-unresolved
+
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+
 // eslint-disable-next-line @atlaskit/design-system/use-visually-hidden
 var referenceObject = {
   width: '1px',
@@ -53,12 +55,13 @@ var makeTemplateLiteralIntoEntries = function makeTemplateLiteralIntoEntries(tem
 exports.makeTemplateLiteralIntoEntries = makeTemplateLiteralIntoEntries;
 
 var getObjectLikeness = function getObjectLikeness(node) {
-  var styleEntries = node.properties.map(function (_ref) {
-    var type = _ref.type,
-        key = _ref.key,
+  var styleEntries = node.properties.filter(function (node) {
+    return (0, _eslintCodemodUtils.isNodeOfType)(node, 'Property');
+  }).map(function (_ref) {
+    var key = _ref.key,
         value = _ref.value;
 
-    if (type === 'Property' && key.type === 'Identifier') {
+    if (key.type === 'Identifier') {
       return {
         key: key.name,
         value: value.type === 'Literal' && value.value

package/dist/cjs/version.json

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

package/dist/es2019/index.js

@@ -4,6 +4,7 @@ import noBannedImports from './rules/no-banned-imports';
 import noDeprecatedAPIs from './rules/no-deprecated-apis';
 import noDeprecatedUsage from './rules/no-deprecated-design-token-usage';
 import noDeprecatedImports from './rules/no-deprecated-imports';
+import noRawSpacingValues from './rules/no-raw-spacing-values';
 import noUnsafeUsage from './rules/no-unsafe-design-token-usage';
 import useVisuallyHidden from './rules/use-visually-hidden';
 export const rules = {
@@ -14,7 +15,8 @@ export const rules = {
   'no-deprecated-imports': noDeprecatedImports,
   'no-banned-imports': noBannedImports,
   'no-unsafe-design-token-usage': noUnsafeUsage,
-  'use-visually-hidden': useVisuallyHidden
+  'use-visually-hidden': useVisuallyHidden,
+  'no-raw-spacing-values': noRawSpacingValues
 };
 export const configs = {
   recommended: {
@@ -35,7 +37,8 @@ export const configs = {
       '@atlaskit/design-system/no-deprecated-imports': 'error',
       '@atlaskit/design-system/use-visually-hidden': 'error',
       '@atlaskit/design-system/ensure-design-token-usage': 'error',
-      '@atlaskit/design-system/no-banned-imports': 'error'
+      '@atlaskit/design-system/no-banned-imports': 'error',
+      '@atlaskit/design-system/no-raw-spacing-values': 'error'
     }
   }
 };

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

@@ -25,7 +25,6 @@ const filterSuggestion = ({
 const rule = {
   meta: {
     // We need to upgrade the version of ESLint.
-    // @ts-expect-error
     hasSuggestions: true,
     docs: {
       recommended: true

package/dist/es2019/rules/icon-label/index.js

@@ -1,3 +1,4 @@
+import { isNodeOfType } from 'eslint-codemod-utils';
 import { findProp } from '../utils/jsx';
 const elements = ['AkButton', 'AKButton', 'Button', 'MenuItem', 'ButtonItem', 'CustomItem', 'CustomThemeButton', 'LoadingButton', 'BreadcrumbsItem'];
 const elementsIconProps = ['iconBefore', 'iconAfter', 'icon'];
@@ -39,7 +40,11 @@ const rule = {
       },
 
       JSXElement(node) {
-        if (node.openingElement.name.type !== 'JSXIdentifier') {
+        if (!isNodeOfType(node, 'JSXElement')) {
+          return;
+        }
+
+        if (!isNodeOfType(node.openingElement.name, 'JSXIdentifier')) {
           return;
         }
 

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

@@ -25,6 +25,10 @@ const rule = {
       JSXAttribute(node) {
         var _node$name;
 
+        if (!isNodeOfType(node, 'JSXAttribute')) {
+          return;
+        }
+
         if (!unsafeOverrides.includes(node === null || node === void 0 ? void 0 : (_node$name = node.name) === null || _node$name === void 0 ? void 0 : _node$name.name)) {
           return;
         }