@atlaskit/eslint-plugin-design-system 4.15.5 → 4.16.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 4.16.0
+
+### Minor Changes
+
+- [`efadee8e999`](https://bitbucket.org/atlassian/atlassian-frontend/commits/efadee8e999) - Update no-deprecated-apis ESlint rule to accept configurations
+
+## 4.15.6
+
+### Patch Changes
+
+- [`6a43a780a85`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6a43a780a85) - Enhance token replacement capabilities of ensure-design-tokens-usage-spacing rule in tagged template literal strings
+
 ## 4.15.5
 
 ### Patch Changes

package/README.md

@@ -40,13 +40,67 @@ module.exports = {
 +    '@atlaskit/design-system/no-unsafe-design-token-usage': ['error', { 'shouldEnsureFallbackUsage': true }],
 +    '@atlaskit/design-system/use-visually-hidden': 'error',
 +    '@atlaskit/design-system/no-deprecated-imports': 'error',
-+    '@atlaskit/design-system/no-deprecated-api-usage': 'error'
++    '@atlaskit/design-system/no-deprecated-api': 'error',
     }
   }
 };
 ```
 
-Rules will where possible come with fixers.
+## Usage of '@atlaskit/design-system/no-deprecated-api'
+
+You can use the `@atlaskit/design-system/no-deprecated-api` rule to check for deprecated API usage in your codebase. The rule can take one option - `deprecatedConfig`, if not provided, the rule will use the default config file. If provided, the rule will override the default config file and use the config file provided.
+See the examples below:
+[Usage with default deprecated APIs config](###Usage-with-default-deprecated-APIs-config)
+[Overwrite default deprecated APIs config](###Overwrite-default-deprecated-APIs-config)
+
+### Default deprecated APIs config
+
+The default config containing the deprecated APIs config for this rule. You can import the default config file from `@atlaskit/eslint-plugin-design-system`.
+
+```js
+import { configs } from '@atlaskit/eslint-plugin-design-system';
+const { deprecatedConfig } = configs;
+```
+
+In the default config file you can find the following fields:
+
+- `deprecatedAPI`, which is the deprecated props. Each prop has the following fields:
+
+  - `moduleSpecifier`, which is the module specifier of the package in which the prop was deprecated. For example: `@atlaskit/button`.
+  - `namedSpecifier`**(optional)**, which is an array of named specifiers of the package in which the prop was deprecated. For example: `Button`.
+  - `actionableVersion`**(optional)**, which is the version of the package in which the prop can be actioned on. For example: `1.0.0`.
+
+### Usage with default deprecated APIs config
+
+Enable the rule as other rules if you want to use the default deprecated APIs config. The rule will automatically load the default config file and use it.
+
+Enable the rule in your `.eslintrc.js` file:
+
+```js
+rules: {
+  '@atlaskit/design-system/no-deprecated-api': 'error'
+}
+```
+
+### Overwrite default deprecated APIs config
+
+You can overwrite the default deprecated APIs to suits your needs. You can do this by providing the `deprecatedConfig` option to the rule. The option can be partial of the default config file, or a new config that contatins the required fields described in the [Default deprecated APIs config](###Default-deprecated-APIs-config) section.
+
+The plugin also provides a `filterActionableDeprecations` util function that accepts the `deprecated APIs config` and `your root package.json` as params, and will filter the default deprecated APIs config based on the package versions listed in the package.json file, and return a list of actionable entries.
+Example:
+
+```js
+import { configs } from '@atlaskit/eslint-plugin-design-system';
+import packageJson from '.path-to/package.json';
+
+rules: {
+  '@atlaskit/design-system/no-deprecated-api': ['error', {
+    'deprecatedConfig': filterActionableDeprecations(configs.deprecatedConfig, JSON.parse(packageJson)),
+  }]
+}
+```
+
+Rules may come with fixers to assist.
 For individual rules see the [`rules`](./src/rules) folder,
 however its strongly recommended to use the rules as above.
 You can read more about configuring eslint in their [documentation](https://eslint.org/docs/user-guide/configuring).

package/configs/deprecated.json

@@ -0,0 +1,33 @@
+{
+  "cssFn": [{
+      "moduleSpecifier": "@atlaskit/menu"
+    },
+    {
+      "moduleSpecifier": "@atlaskit/side-navigation"
+    }
+  ],
+  "overrides": [{
+      "moduleSpecifier": "@atlaskit/menu"
+    },
+    {
+      "moduleSpecifier": "@atlaskit/side-navigation"
+    }
+  ],
+  "type": [{
+    "moduleSpecifier": "@atlaskit/inline-message"
+  }],
+  "textColor": [{
+    "moduleSpecifier": "@atlaskit/logo"
+
+  }],
+  "iconColor": [{
+    "moduleSpecifier": "@atlaskit/logo"
+  }],
+  "iconGradientStart": [{
+    "moduleSpecifier": "@atlaskit/logo"
+  }],
+  "iconGradientStop": [{
+    "moduleSpecifier": "@atlaskit/logo"
+  }]
+
+}

package/dist/cjs/index.js

@@ -4,7 +4,14 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.rules = exports.configs = void 0;
+exports.configs = void 0;
+Object.defineProperty(exports, "filterActionableDeprecations", {
+  enumerable: true,
+  get: function get() {
+    return _filterActionableDeprecations.filterActionableDeprecations;
+  }
+});
+exports.rules = void 0;
 var _ensureDesignTokenUsage = _interopRequireDefault(require("./rules/ensure-design-token-usage"));
 var _ensureDesignTokenUsageSpacing = _interopRequireDefault(require("./rules/ensure-design-token-usage-spacing"));
 var _iconLabel = _interopRequireDefault(require("./rules/icon-label"));
@@ -14,6 +21,7 @@ var _noDeprecatedDesignTokenUsage = _interopRequireDefault(require("./rules/no-d
 var _noDeprecatedImports = _interopRequireDefault(require("./rules/no-deprecated-imports"));
 var _noUnsafeDesignTokenUsage = _interopRequireDefault(require("./rules/no-unsafe-design-token-usage"));
 var _useVisuallyHidden = _interopRequireDefault(require("./rules/use-visually-hidden"));
+var _filterActionableDeprecations = require("./rules/no-deprecated-apis/helpers/filter-actionable-deprecations");
 var rules = {
   'ensure-design-token-usage': _ensureDesignTokenUsage.default,
   'icon-label': _iconLabel.default,

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

@@ -8,94 +8,10 @@ exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _eslintCodemodUtils = require("eslint-codemod-utils");
-var _tokensRaw = require("@atlaskit/tokens/tokens-raw");
 var _isNode = require("../utils/is-node");
 var _utils = require("./utils");
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-/**
- * Currently we have a wide range of experimental spacing tokens that we are testing.
- * We only want transforms to apply to the stable scale values, not the rest.
- * This could be removed in the future.
- */
-var onlyScaleTokens = _tokensRaw.spacing.filter(function (token) {
-  return token.name.startsWith('space.');
-});
-var spacingValueToToken = Object.fromEntries(onlyScaleTokens.map(function (token) {
-  return [token.attributes['pixelValue'], token.name];
-}));
-var typographyValueToToken = Object.fromEntries(_tokensRaw.typography.map(function (currentToken) {
-  // Group tokens by property name (e.g. fontSize, fontFamily, lineHeight)
-  // This allows us to look up values specific to a property
-  // (so as not to mix tokens with overlapping values e.g. font size and line height both have tokens for 16px)
-  var tokenGroup = currentToken.attributes.group;
-  return [tokenGroup, Object.fromEntries(_tokensRaw.typography.map(function (token) {
-    return token.attributes.group === tokenGroup ? [token.value.replaceAll("\"", "'"), token.name] : [];
-  }).filter(function (token) {
-    return token.length;
-  }))];
-}));
-
-/**
- * Returns a token node for a given value including fallbacks.
- * @param propertyName camelCase CSS property
- * @param value string representing pixel value, or font family, or number representing font weight
- * @example
- * ```
- * propertyName: padding, value: '8px' => token('space.100', '8px')
- * propertyName: fontWeight, value: 400 => token('font.weight.regular', '400')
- * ```
- */
-function getTokenNodeForValue(propertyName, value) {
-  var token = (0, _utils.isTypographyProperty)(propertyName) ? typographyValueToToken[propertyName][value] : spacingValueToToken[value];
-  var fallbackValue = propertyName === 'fontFamily' ? {
-    value: "".concat(value),
-    raw: "\"".concat(value, "\"")
-  } : "".concat(value);
-  return (0, _eslintCodemodUtils.callExpression)({
-    callee: (0, _eslintCodemodUtils.identifier)({
-      name: 'token'
-    }),
-    arguments: [(0, _eslintCodemodUtils.literal)({
-      value: "'".concat(token !== null && token !== void 0 ? token : '', "'")
-    }), (0, _eslintCodemodUtils.literal)(fallbackValue)],
-    optional: false
-  });
-}
-
-/**
- * Returns a boolean that signals wether the current property is revelant under the current configuration
- * @param propertyName camelCase CSS property
- * @param targetOptions Array containing the types of properties that should be included in the rule
- * @example
- * ```
- * propertyName: padding, targetOptions: ['spacing']
- * propertyName: fontWeight, targetOptions: ['spacing', 'typography']
- * ```
- */
-function shouldAnalyzeProperty(propertyName, targetOptions) {
-  if ((0, _utils.isSpacingProperty)(propertyName) && targetOptions.includes('spacing')) {
-    return true;
-  }
-  if ((0, _utils.isTypographyProperty)(propertyName) && targetOptions.includes('typography')) {
-    return true;
-  }
-  return false;
-}
-/**
- * Attempts to remove all non-essential words & characters from a style block.
- * Including selectors and queries
- * Adapted from ensure-design-token-usage
- * @param styleString string of css properties
- */
-function splitCssProperties(styleString) {
-  return styleString.split('\n').filter(function (line) {
-    return !line.trim().startsWith('@');
-  }).join('\n').replace(/\n/g, '').split(/;|(?<!\$){|(?<!\${.+?)}/) // don't split on template literal expressions i.e. `${...}`
-  .map(function (el) {
-    return el.trim() || '';
-  }).filter(Boolean);
-}
 var rule = {
   meta: {
     type: 'problem',
@@ -105,7 +21,8 @@ var rule = {
       recommended: true
     },
     messages: {
-      noRawSpacingValues: 'The use of spacing primitives or tokens is preferred over the direct application of spacing properties.\n\n@meta <<{{payload}}>>'
+      noRawSpacingValues: 'The use of spacing primitives or tokens is preferred over the direct application of spacing properties.\n\n@meta <<{{payload}}>>',
+      autofixesPossible: 'Automated corrections available for spacing values. Apply autofix to replace values with appropriate tokens'
     }
   },
   create: function create(context) {
@@ -149,7 +66,7 @@ var rule = {
           if (!(0, _eslintCodemodUtils.isNodeOfType)(node.key, 'Identifier')) {
             return;
           }
-          if (!shouldAnalyzeProperty(node.key.name, targetCategories)) {
+          if (!(0, _utils.shouldAnalyzeProperty)(node.key.name, targetCategories)) {
             return;
           }
           if ((0, _isNode.isDecendantOfGlobalToken)(node.value)) {
@@ -198,16 +115,16 @@ var rule = {
               },
               fix: function fix(fixer) {
                 var _node$loc;
-                if (!shouldAnalyzeProperty(propertyName, targetCategories)) {
+                if (!(0, _utils.shouldAnalyzeProperty)(propertyName, targetCategories)) {
                   return null;
                 }
                 var pixelValueString = "".concat(pixelValue, "px");
                 var lookupValue = /fontWeight|fontFamily/.test(propertyName) ? pixelValue : pixelValueString;
-                var tokenName = (0, _utils.isTypographyProperty)(propertyName) ? typographyValueToToken[propertyName][lookupValue] : spacingValueToToken[lookupValue];
+                var tokenName = (0, _utils.isTypographyProperty)(propertyName) ? _utils.typographyValueToToken[propertyName][lookupValue] : _utils.spacingValueToToken[lookupValue];
                 if (!tokenName) {
                   return null;
                 }
-                var replacementValue = getTokenNodeForValue(propertyName, lookupValue);
+                var replacementValue = (0, _utils.getTokenNodeForValue)(propertyName, lookupValue);
                 return [fixer.insertTextBefore(node, "// TODO Delete this comment after verifying spacing token -> previous value `".concat((0, _eslintCodemodUtils.node)(node.value), "`\n").concat(' '.padStart(((_node$loc = node.loc) === null || _node$loc === void 0 ? void 0 : _node$loc.start.column) || 0))), fixer.replaceText(node, (0, _eslintCodemodUtils.property)(_objectSpread(_objectSpread({}, node), {}, {
                   value: replacementValue
                 })).toString())];
@@ -240,7 +157,7 @@ var rule = {
                 return fixer.replaceText(node.value, "`".concat(values.map(function (value) {
                   var pixelValue = (0, _utils.emToPixels)(value, fontSize);
                   var pixelValueString = "".concat(pixelValue, "px");
-                  return "${".concat(getTokenNodeForValue(propertyName, pixelValueString), "}");
+                  return "${".concat((0, _utils.getTokenNodeForValue)(propertyName, pixelValueString), "}");
                 }).join(' '), "`"));
               } : undefined
             });
@@ -256,96 +173,115 @@ var rule = {
           return;
         }
         var parentNode = (0, _utils.findParentNodeForLine)(node);
-        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('');
-        var rawString = node.quasi.quasis.map(function (q, i) {
-          return "".concat(q.value.raw).concat(node.quasi.expressions[i] ? "${".concat((0, _utils.getRawExpression)(node.quasi.expressions[i], context), "}") : '');
-        }).join('');
-        var cssProperties = splitCssProperties(combinedString);
-        var unalteredCssProperties = splitCssProperties(rawString);
-
-        // Get font size
-        var fontSizeNode = cssProperties.find(function (style) {
-          var _style$split = style.split(':'),
-            _style$split2 = (0, _slicedToArray2.default)(_style$split, 2),
-            rawProperty = _style$split2[0],
-            value = _style$split2[1];
-          return /font-size/.test(rawProperty) ? value : null;
-        });
-        var fontSize = (0, _utils.getValueFromShorthand)(fontSizeNode)[0];
-        cssProperties.forEach(function (style, currentPropIndex) {
-          var _style$split3 = style.split(':'),
-            _style$split4 = (0, _slicedToArray2.default)(_style$split3, 2),
-            rawProperty = _style$split4[0],
-            value = _style$split4[1];
-          var propertyName = (0, _utils.convertHyphenatedNameToCamelCase)(rawProperty);
-          if (!shouldAnalyzeProperty(propertyName, targetCategories)) {
-            return;
+        var processedCssLines = (0, _utils.processCssNode)(node, context);
+        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];
+          if (!(0, _utils.shouldAnalyzeProperty)(propertyName, targetCategories) || !resolvedCssValues || !(0, _utils.isValidSpacingValue)(resolvedCssValues, globalFontSize)) {
+            // in all of these cases no changes should be made to the current property
+            return currentSource;
           }
 
-          // value is either NaN or it can't be resolved eg, em, 100% etc...
-          if (!(0, _utils.isValidSpacingValue)(value, fontSize)) {
-            return context.report({
-              node: node,
-              messageId: 'noRawSpacingValues',
-              data: {
-                payload: "NaN:".concat(value)
-              }
-            });
-          }
-          var values = (0, _utils.getValueFromShorthand)(value);
-          values.forEach(function (val, index) {
-            if (!val && val !== 0 || !shouldAnalyzeProperty(propertyName, targetCategories)) {
-              return;
+          // 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 ((0, _utils.isTokenValueString)(originalValue)) {
+              // if the value is already valid, nothing to report or replace
+              return originalValue;
+            }
+            if (isNaN(numericOrNanValue) && !isFontFamily) {
+              // this can be either a weird expression or a fontsize declaration
+
+              // we can't replace a NaN but we can alert what the offending value is
+              context.report({
+                node: node,
+                messageId: 'noRawSpacingValues',
+                data: {
+                  payload: "".concat(propertyName, ":").concat(originalValue)
+                }
+              });
+              return originalValue;
             }
-            var isFontFamily = /fontFamily/.test(propertyName);
-            var pixelValue = isFontFamily ? val : (0, _utils.emToPixels)(val, fontSize);
+
+            // value is numeric or fontFamily, and needs replacing we'll report first
             context.report({
               node: node,
               messageId: 'noRawSpacingValues',
               data: {
-                payload: "".concat(propertyName, ":").concat(pixelValue)
-              },
-              fix: index === 0 ? function (fixer) {
-                var allResolvableValues = values.every(function (value) {
-                  return !Number.isNaN((0, _utils.emToPixels)(value, fontSize));
-                });
-                if (!allResolvableValues) {
-                  return null;
-                }
-                var replacementValue = values.map(function (value) {
-                  var propertyValue = typeof value === 'string' ? value.trim() : value;
-                  var pixelValue = isFontFamily ? propertyValue : (0, _utils.emToPixels)(propertyValue, fontSize);
-                  var pixelValueString = "".concat(pixelValue, "px");
-                  var lookupValue = /fontWeight|fontFamily/.test(propertyName) ? pixelValue : pixelValueString;
-                  var tokenName = (0, _utils.isTypographyProperty)(propertyName) ? typographyValueToToken[propertyName][lookupValue] : spacingValueToToken[lookupValue];
-                  if (!tokenName) {
-                    return pixelValueString;
-                  }
-                  var replacementTokenValue = getTokenNodeForValue(propertyName, lookupValue);
+                payload: "".concat(propertyName, ":").concat(numericOrNanValue)
+              }
+            });
 
-                  // ${token('...', '...')}
-                  var replacementSubValue = '${' + replacementTokenValue.toString() + '}';
-                  return replacementSubValue;
-                }).join(' ');
+            // from here on we know value is numeric or a font family, so it might or might not have a token equivalent
+            var replacementToken = (0, _utils.getTokenReplacement)(propertyName, numericOrNanValue);
+            if (!replacementToken) {
+              return originalValue;
+            }
+            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);
+          }
 
-                // get original source
-                var textForSource = context.getSourceCode().getText(node.quasi);
+          // 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;
+        }, textForSource);
+        if (completeSource !== textForSource) {
+          // means we found some replacement values, well give the option to fix them
 
-                // find `<property>: ...;` in original
-                var styleString = unalteredCssProperties[currentPropIndex];
-                // replace property:val with new property:val
-                var replacement = textForSource.replace(styleString, //  padding: ${gridSize()}px;
-                "".concat(rawProperty, ": ").concat(replacementValue));
-                if (!replacement) {
-                  return [];
-                }
-                return [fixer.insertTextBefore(parentNode, "// TODO Delete this comment after verifying spacing token -> previous value `".concat(value.trim(), "`\n")), fixer.replaceText(node.quasi, replacement)];
-              } : undefined
-            });
+          var replacementComments = "".concat(allReplacedValues.map(function (replacedProperties) {
+            var _replacedProperties = (0, _slicedToArray2.default)(replacedProperties, 1),
+              propertyName = _replacedProperties[0];
+            var replacedValues = replacedProperties.slice(1).join(' ');
+            return "// TODO Delete this comment after verifying spacing token -> previous value `".concat(propertyName, ": ").concat(replacedValues, "`");
+          }).join('\n'), "\n");
+          context.report({
+            node: node,
+            messageId: 'autofixesPossible',
+            fix: function fix(fixer) {
+              return [fixer.insertTextBefore(parentNode, replacementComments), fixer.replaceText(node.quasi, completeSource)];
+            }
           });
-        });
+        }
       }
     };
   }