@atlaskit/eslint-plugin-design-system 10.17.3 → 10.18.1

package/dist/cjs/rules/use-latest-xcss-syntax-typography/config/index.js

@@ -5,7 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getConfig = void 0;
 var defaults = {
-  failSilently: false
+  failSilently: false,
+  patterns: ['restricted-property', 'wrapped-token-value']
 };
 var getConfig = exports.getConfig = function getConfig(overrides) {
   return Object.assign({}, defaults, overrides);

package/dist/cjs/rules/use-latest-xcss-syntax-typography/index.js

@@ -8,6 +8,7 @@ var _createRule = require("../utils/create-rule");
 var _errorBoundary = require("../utils/error-boundary");
 var _config = require("./config");
 var _linters = require("./linters");
+var typescriptErrorMessage = 'There is ongoing work to make this a TypeScript error. Once that happens, you will have to delete/refactor anyway.';
 var rule = (0, _createRule.createLintRule)({
   meta: {
     name: 'use-latest-xcss-syntax-typography',
@@ -20,20 +21,36 @@ var rule = (0, _createRule.createLintRule)({
       severity: 'warn'
     },
     messages: {
-      noUnsafeTypographyProperties: "Don't set '{{ property }}' on xcss. They are unsafe as they allow invalid combinations of typography tokens. There is ongoing work to make this a TypeScript error. Once that happens, you will have to delete/refactor anyway."
+      noRestrictedTypographyProperties: "Don't set '{{ property }}' on xcss as it allows invalid combinations of typography tokens. ".concat(typescriptErrorMessage),
+      noRestrictedTypographyPropertiesHeading: "Don't set '{{ property }}' on xcss in combination with 'font' heading tokens. ".concat(typescriptErrorMessage),
+      noWrappedTokenTypographyValues: "Don't wrap typography tokens in xcss. ".concat(typescriptErrorMessage)
     }
   },
   create: function create(context) {
     var config = (0, _config.getConfig)(context.options[0]);
     return (0, _errorBoundary.errorBoundary)({
       'CallExpression[callee.name="xcss"] ObjectExpression > Property > Identifier[name=/(fontSize|lineHeight|fontWeight|letterSpacing)/]': function CallExpressionCalleeNameXcssObjectExpressionPropertyIdentifierNameFontSizeLineHeightFontWeightLetterSpacing(node) {
-        return _linters.BannedProperty.lint(node, {
-          context: context
+        return _linters.RestrictedProperty.lint(node, {
+          context: context,
+          config: config
         });
       },
       'CallExpression[callee.name="xcss"] ObjectExpression > Property > Literal[value=/(fontSize|lineHeight|fontWeight|letterSpacing)/]': function CallExpressionCalleeNameXcssObjectExpressionPropertyLiteralValueFontSizeLineHeightFontWeightLetterSpacing(node) {
-        return _linters.BannedProperty.lint(node, {
-          context: context
+        return _linters.RestrictedProperty.lint(node, {
+          context: context,
+          config: config
+        });
+      },
+      'CallExpression[callee.name="xcss"] ObjectExpression > Property > Identifier[name=/(font|fontFamily|fontWeight)/]': function CallExpressionCalleeNameXcssObjectExpressionPropertyIdentifierNameFontFontFamilyFontWeight(node) {
+        return _linters.WrappedTokenValue.lint(node, {
+          context: context,
+          config: config
+        });
+      },
+      'CallExpression[callee.name="xcss"] ObjectExpression > Property > Literal[value=/(font|fontFamily|fontWeight)/]': function CallExpressionCalleeNameXcssObjectExpressionPropertyLiteralValueFontFontFamilyFontWeight(node) {
+        return _linters.WrappedTokenValue.lint(node, {
+          context: context,
+          config: config
         });
       }
     }, config);

package/dist/cjs/rules/use-latest-xcss-syntax-typography/linters/common.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/rules/use-latest-xcss-syntax-typography/linters/index.js

@@ -3,10 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "BannedProperty", {
+Object.defineProperty(exports, "RestrictedProperty", {
   enumerable: true,
   get: function get() {
-    return _bannedProperty.BannedProperty;
+    return _restrictedProperty.RestrictedProperty;
   }
 });
-var _bannedProperty = require("./banned-property");
+Object.defineProperty(exports, "WrappedTokenValue", {
+  enumerable: true,
+  get: function get() {
+    return _wrappedTokenValue.WrappedTokenValue;
+  }
+});
+var _restrictedProperty = require("./restricted-property");
+var _wrappedTokenValue = require("./wrapped-token-value");

package/dist/cjs/rules/use-latest-xcss-syntax-typography/linters/{banned-property/index.js → restricted-property.js}

@@ -3,15 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.BannedProperty = void 0;
+exports.RestrictedProperty = void 0;
 var _eslintCodemodUtils = require("eslint-codemod-utils");
 function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; } /* eslint-disable @repo/internal/react/require-jsdoc */
-var BannedProperty = exports.BannedProperty = {
+var RestrictedProperty = exports.RestrictedProperty = {
   lint: function lint(node, _ref) {
-    var context = _ref.context;
-    if (BannedProperty._check(node)) {
+    var context = _ref.context,
+      config = _ref.config;
+    if (RestrictedProperty._check(node, {
+      context: context,
+      config: config
+    })) {
       var property = 'fontSize, lineHeight, fontWeight or letterSpacing';
       if ((0, _eslintCodemodUtils.isNodeOfType)(node, 'Identifier')) {
         property = node.name;
@@ -20,14 +24,19 @@ var BannedProperty = exports.BannedProperty = {
       }
       context.report({
         node: node,
-        messageId: 'noUnsafeTypographyProperties',
+        messageId: property === 'fontWeight' ? 'noRestrictedTypographyPropertiesHeading' : 'noRestrictedTypographyProperties',
         data: {
           property: property
         }
       });
     }
   },
-  _check: function _check(node) {
+  _check: function _check(node, _ref2) {
+    var config = _ref2.config;
+    if (!config.patterns.includes('restricted-property')) {
+      return false;
+    }
+
     // Prevent font weight being used in combination with heading tokens
     if ((0, _eslintCodemodUtils.isNodeOfType)(node, 'Identifier') && node.name === 'fontWeight' || (0, _eslintCodemodUtils.isNodeOfType)(node, 'Literal') && node.value === 'fontWeight') {
       if ((0, _eslintCodemodUtils.isNodeOfType)(node.parent.parent, 'ObjectExpression')) {
@@ -35,11 +44,22 @@ var BannedProperty = exports.BannedProperty = {
           _step;
         try {
           for (_iterator.s(); !(_step = _iterator.n()).done;) {
+            var _property$value$value;
             var property = _step.value;
-            if ((0, _eslintCodemodUtils.isNodeOfType)(property, 'Property') && (0, _eslintCodemodUtils.isNodeOfType)(property.value, 'CallExpression') && (0, _eslintCodemodUtils.isNodeOfType)(property.value.callee, 'Identifier') && (0, _eslintCodemodUtils.isNodeOfType)(property.value.arguments[0], 'Literal')) {
-              if (property.value.callee.name === 'token' && typeof property.value.arguments[0].value === 'string' && property.value.arguments[0].value.includes('font.heading')) {
-                return true;
-              }
+            // Only looking for heading token on `font` property
+            var isFontProperty = (0, _eslintCodemodUtils.isNodeOfType)(property, 'Property') && ((0, _eslintCodemodUtils.isNodeOfType)(property.key, 'Literal') && property.key.value === 'font' || (0, _eslintCodemodUtils.isNodeOfType)(property.key, 'Identifier') && property.key.name === 'font');
+            if (!isFontProperty) {
+              continue;
+            }
+
+            // Checking for heading token string, for example xcss({ font: 'font.heading.medium' })
+            if ((0, _eslintCodemodUtils.isNodeOfType)(property.value, 'Literal') && typeof property.value.value === 'string' && (_property$value$value = property.value.value) !== null && _property$value$value !== void 0 && _property$value$value.startsWith('font.heading')) {
+              return true;
+            }
+
+            // Checking for wrapped heading token, for example xcss({ font: token('font.heading.medium') })
+            if ((0, _eslintCodemodUtils.isNodeOfType)(property.value, 'CallExpression') && (0, _eslintCodemodUtils.isNodeOfType)(property.value.callee, 'Identifier') && property.value.callee.name === 'token' && (0, _eslintCodemodUtils.isNodeOfType)(property.value.arguments[0], 'Literal') && typeof property.value.arguments[0].value === 'string' && property.value.arguments[0].value.startsWith('font.heading')) {
+              return true;
             }
           }
         } catch (err) {

package/dist/cjs/rules/use-latest-xcss-syntax-typography/linters/wrapped-token-value.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WrappedTokenValue = void 0;
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+/* eslint-disable @repo/internal/react/require-jsdoc */
+
+var messageId = 'noWrappedTokenTypographyValues';
+var WrappedTokenValue = exports.WrappedTokenValue = {
+  lint: function lint(node, _ref) {
+    var context = _ref.context,
+      config = _ref.config;
+    if (WrappedTokenValue._check(node, {
+      context: context,
+      config: config
+    })) {
+      context.report({
+        node: node,
+        messageId: messageId,
+        fix: WrappedTokenValue._fix(node)
+      });
+    }
+  },
+  _check: function _check(node, _ref2) {
+    var config = _ref2.config;
+    if (!config.patterns.includes('wrapped-token-value')) {
+      return false;
+    }
+    if ((0, _eslintCodemodUtils.isNodeOfType)(node.parent, 'Property') && (0, _eslintCodemodUtils.isNodeOfType)(node.parent.value, 'CallExpression') && (0, _eslintCodemodUtils.isNodeOfType)(node.parent.value.callee, 'Identifier') && node.parent.value.callee.name === 'token' && node.parent.value.arguments.length >= 1) {
+      return true;
+    }
+    return false;
+  },
+  _fix: function _fix(node) {
+    return function (fixer) {
+      var wrappedTokenFix;
+      if ((0, _eslintCodemodUtils.isNodeOfType)(node.parent, 'Property') && (0, _eslintCodemodUtils.isNodeOfType)(node.parent.value, 'CallExpression') && node.parent.value.arguments.length >= 1) {
+        var firstArg = node.parent.value.arguments[0];
+        if ((0, _eslintCodemodUtils.isNodeOfType)(firstArg, 'Literal') && typeof firstArg.value === 'string') {
+          wrappedTokenFix = fixer.replaceText(node.parent.value, "'".concat(firstArg.value, "'"));
+        }
+      }
+      return [wrappedTokenFix].filter(function (fix) {
+        return Boolean(fix);
+      }); // Some of the transformers can return arrays with undefined, so filter them out
+    };
+  }
+};

package/dist/es2019/rules/no-legacy-icons/checks.js

@@ -1,5 +1,5 @@
 import { isNodeOfType } from 'eslint-codemod-utils';
-import { addToListOfRanges, canAutoMigrateNewIconBasedOnSize, canMigrateColor, checkIfNewIconExist, createAutoMigrationError, createCantFindSuitableReplacementError, createCantMigrateColorError, createCantMigrateFunctionUnknownError, createCantMigrateIdentifierError, createCantMigrateIdentifierMapOrArrayError, createCantMigrateReExportError, createCantMigrateSizeUnknown, createCantMigrateSpreadPropsError, createGuidance, createHelpers, createImportFix, createPropFixes, getMigrationMapObject, getUpcomingIcons, isInRangeList, isInsideLegacyButton, isInsideNewButton, isSize, locToString } from './helpers';
+import { addToListOfRanges, canAutoMigrateNewIconBasedOnSize, canMigrateColor, createAutoMigrationError, createCantFindSuitableReplacementError, createCantMigrateColorError, createCantMigrateFunctionUnknownError, createCantMigrateIdentifierError, createCantMigrateIdentifierMapOrArrayError, createCantMigrateReExportError, createCantMigrateSizeUnknown, createCantMigrateSpreadPropsError, createGuidance, createHelpers, getMigrationMapObject, getUpcomingIcons, isInsideLegacyButton, isInsideNewButton, isSize, locToString, throwAutoErrors, throwManualErrors } from './helpers';
 export const createChecks = context => {
   //create global variables to be shared by the checks
   const {
@@ -13,7 +13,6 @@ export const createChecks = context => {
   const errorsManual = {};
   const errorsAuto = {};
   let guidance = {};
-  let autoIconJSXElementOccurrenceCount = 0;
 
   // Extract parameters
   const shouldErrorForManualMigration = getConfigFlag('shouldErrorForManualMigration', true);
@@ -38,7 +37,8 @@ export const createChecks = context => {
           legacyIconImports[spec.local.name] = {
             packageName: moduleSource,
             exported: false,
-            importNode: node
+            importNode: node,
+            importSpecifier: spec.local.name
           };
         }
       }
@@ -51,7 +51,8 @@ export const createChecks = context => {
           migrationIconImports[spec.local.name] = {
             packageName: moduleSource,
             exported: false,
-            importNode: node
+            importNode: node,
+            importSpecifier: spec.local.name
           };
         }
       });
@@ -90,7 +91,9 @@ export const createChecks = context => {
           if (Object.keys(legacyIconImports).includes(decl.init.name)) {
             legacyIconImports[decl.id.name] = {
               packageName: legacyIconImports[decl.init.name].packageName,
-              exported: legacyIconImports[decl.init.name].exported || isExported
+              exported: legacyIconImports[decl.init.name].exported || isExported,
+              importNode: legacyIconImports[decl.init.name].importNode,
+              importSpecifier: legacyIconImports[decl.init.name].importSpecifier
             };
           } else if (newButtonImports.has(decl.init.name)) {
             newButtonImports.add(decl.id.name);
@@ -129,7 +132,7 @@ export const createChecks = context => {
    * @param node The named export node found by ESLint
    */
   const checkExportNamedVariables = node => {
-    // export {default as AddIcon} from '@atlaskit/icon/glyph/add';
+    // Case: export {default as AddIcon} from '@atlaskit/icon/glyph/add';
     if (node.source && isNodeOfType(node.source, 'Literal') && Object.keys(node.source).includes('value')) {
       const moduleSource = node.source.value;
       if (typeof moduleSource === 'string' && ['@atlaskit/icon/glyph/', '@atlaskit/icon-object/glyph/'].find(val => moduleSource.startsWith(val)) && node.specifiers.length) {
@@ -143,7 +146,7 @@ export const createChecks = context => {
         }
       }
     } else if (node.declaration && isNodeOfType(node.declaration, 'VariableDeclaration')) {
-      // export const Icon = AddIcon;
+      // Case: export const Icon = AddIcon;
       for (const decl of node.declaration.declarations) {
         if (isNodeOfType(decl, 'VariableDeclarator') && Object.keys(decl).includes('init') && decl.init && isNodeOfType(decl.init, 'Identifier') && Object.keys(legacyIconImports).includes(decl.init.name)) {
           createCantMigrateReExportError(node, legacyIconImports[decl.init.name].packageName, decl.init.name, errorsManual);
@@ -166,7 +169,9 @@ export const createChecks = context => {
           //update legacy imports to be exported
           legacyIconImports[spec.local.name] = {
             packageName: legacyIconImports[spec.local.name].packageName,
-            exported: true
+            exported: true,
+            importNode: legacyIconImports[spec.local.name].importNode,
+            importSpecifier: legacyIconImports[spec.local.name].importSpecifier
           };
           createCantMigrateReExportError(spec, legacyIconImports[spec.local.name].packageName, spec.exported.name, errorsManual);
           addToListOfRanges(spec, errorRanges);
@@ -399,7 +404,6 @@ export const createChecks = context => {
       const sizeProp = node.openingElement.attributes.find(attribute => attribute.type === 'JSXAttribute' && (attribute.name.name === 'size' || attribute.name.name === 'LEGACY_size'));
       const shouldAddSpaciousSpacing = (sizeProp && sizeProp.type === 'JSXAttribute' && ((_sizeProp$value2 = sizeProp.value) === null || _sizeProp$value2 === void 0 ? void 0 : _sizeProp$value2.type) === 'Literal' && sizeProp.value.value === 'medium' || !sizeProp) && !insideNewButton && !insideLegacyButton;
       if (!hasManualMigration && (newIcon || upcomingIcon) && isNewIconMigratable) {
-        autoIconJSXElementOccurrenceCount++;
         createAutoMigrationError({
           node,
           importSource: legacyIconImports[name].packageName,
@@ -444,108 +448,26 @@ export const createChecks = context => {
    * Throws the relevant errors in the correct order based on configs.
    */
   const throwErrors = () => {
+    // Throw manual errors
     if (shouldErrorForManualMigration) {
-      for (const [key, errorList] of Object.entries(errorsManual)) {
-        const node = 'node' in errorList.errors[0] ? errorList.errors[0].node : null;
-        const cantMigrateIdentifierError = errorList.errors.find(x => 'messageId' in x && x.messageId === 'cantMigrateIdentifier');
-        if (node) {
-          let isInRange = false;
-          if (cantMigrateIdentifierError && isInRangeList(node, errorRanges)) {
-            isInRange = true;
-          }
-          if (isInRange && errorList.errors.length - 1 > 0 || !isInRange && errorList.errors.length > 0) {
-            const guidanceMessage = Object.keys(guidance).includes(key) ? guidance[key] : '';
-            context.report({
-              node,
-              messageId: 'noLegacyIconsManualMigration',
-              data: {
-                iconName: errorList.iconName,
-                importSource: errorList.importSource,
-                guidance: isQuietMode ? guidanceMessage : `${guidanceMessage}For more information see the below errors.\n`
-              }
-            });
-            if (!isQuietMode) {
-              for (const error of errorList.errors) {
-                if ('messageId' in error && (error.messageId !== 'cantMigrateIdentifier' || error.messageId === 'cantMigrateIdentifier' && !isInRange)) {
-                  context.report(error);
-                }
-              }
-            }
-          }
-        }
-      }
+      throwManualErrors({
+        errorsManual,
+        errorRanges,
+        guidance,
+        context,
+        isQuietMode
+      });
     }
     if (shouldErrorForAutoMigration) {
-      for (const [key, error] of Object.entries(errorsAuto)) {
-        // If there's a manual error that exists for this same component,
-        // don't throw the auto error
-        if (Object.keys(errorsManual).includes(key)) {
-          const cantMigrateIdentifierError = errorsManual[key].errors.find(x => 'messageId' in x && x.messageId === 'cantMigrateIdentifier');
-          if (!cantMigrateIdentifierError || cantMigrateIdentifierError && errorsManual[key].errors.length > 1) {
-            delete errorsAuto[key];
-            continue;
-          }
-        }
-        const node = 'node' in error ? error.node : null;
-        if (node) {
-          const guidanceMessage = Object.keys(guidance).includes(key) ? guidance[key] : '';
-          if (Object.keys(error).includes('data') && error.data) {
-            error.data.guidance = guidanceMessage;
-          }
-          context.report({
-            ...error,
-            fix: fixer => {
-              var _legacyIconImports$er, _migrationIconImports;
-              // don't migration if the new icon is not available
-              if (!error.data || shouldUseMigrationPath && !checkIfNewIconExist(error)) {
-                return [];
-              }
-              const fixArguments = {
-                metadata: error.data,
-                legacyImportNode: (_legacyIconImports$er = legacyIconImports[error.data.iconName]) === null || _legacyIconImports$er === void 0 ? void 0 : _legacyIconImports$er.importNode,
-                migrationImportNode: (_migrationIconImports = migrationIconImports[error.data.iconName]) === null || _migrationIconImports === void 0 ? void 0 : _migrationIconImports.importNode,
-                shouldUseMigrationPath
-              };
-              const propsFixes = createPropFixes({
-                ...fixArguments,
-                node,
-                fixer
-              });
-              let importFixes = [];
-              // Otherwise if there are multiple occurrences of the icon, import path will be handled after the prop fix
-              if (autoIconJSXElementOccurrenceCount <= 1) {
-                importFixes = createImportFix({
-                  ...fixArguments,
-                  fixer
-                });
-              }
-              return [...propsFixes, ...importFixes];
-            }
-          });
-        }
-      }
-
-      // Update import path at the end if there are multiple occurrences of the icon
-      if (autoIconJSXElementOccurrenceCount > 1) {
-        for (const [_, error] of Object.entries(errorsAuto)) {
-          context.report({
-            ...error,
-            fix: fixer => {
-              var _legacyIconImports$er2, _migrationIconImports2;
-              if (!error.data || shouldUseMigrationPath && !checkIfNewIconExist(error)) {
-                return [];
-              }
-              return createImportFix({
-                metadata: error.data,
-                fixer,
-                legacyImportNode: (_legacyIconImports$er2 = legacyIconImports[error.data.iconName]) === null || _legacyIconImports$er2 === void 0 ? void 0 : _legacyIconImports$er2.importNode,
-                migrationImportNode: (_migrationIconImports2 = migrationIconImports[error.data.iconName]) === null || _migrationIconImports2 === void 0 ? void 0 : _migrationIconImports2.importNode,
-                shouldUseMigrationPath
-              });
-            }
-          });
-        }
-      }
+      throwAutoErrors({
+        errorsManual,
+        errorsAuto,
+        legacyIconImports,
+        guidance,
+        migrationIconImports,
+        shouldUseMigrationPath,
+        context
+      });
     }
   };
   return {