@atlaskit/eslint-plugin-design-system 4.14.1 → 4.15.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 4.15.1
+
+### Patch Changes
+
+- [`18aeca8c199`](https://bitbucket.org/atlassian/atlassian-frontend/commits/18aeca8c199) - Internal change to update token references. There is no expected behaviour or visual change.
+
+## 4.15.0
+
+### Minor Changes
+
+- [`17b3c102180`](https://bitbucket.org/atlassian/atlassian-frontend/commits/17b3c102180) - ensure-design-token-usage-spacing only lints on spacing properties by default, with typography properties enabled via config
+
 ## 4.14.1
 
 ### Patch Changes

package/constellation/index/examples.mdx

@@ -9,7 +9,7 @@ import SectionMessage from '@atlaskit/section-message';
   appearance="warning"
 >
   <p>
-    This ESLint plugin includes rules to help you use <a href="/foundations/design-tokens">design tokens</a>, which will soon be the new way to use color.
+    This ESLint plugin includes rules to help you use <a href="/foundations/design-tokens">design tokens</a>, which will soon be the new way to apply color and spacing values.
     <br/><br/>Do not use the design token-related rules until design tokens are available for you to adopt.
   </p>
 </SectionMessage>

package/constellation/index/usage.mdx

@@ -5,7 +5,7 @@ order: 2
 This plugin contains rules that should be used with the Atlassian Design System.
 Where possible, these rules come with auto fixers.
 
-You can read more about configuring eslint in their [documentation](https://eslint.org/docs/user-guide/configuring).
+You can read more about configuring ESLint in their [documentation](https://eslint.org/docs/user-guide/configuring).
 
 ## Configuration
 

package/dist/cjs/index.js

@@ -1,30 +1,19 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.rules = exports.configs = 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"));
-
 var _noBannedImports = _interopRequireDefault(require("./rules/no-banned-imports"));
-
 var _noDeprecatedApis = _interopRequireDefault(require("./rules/no-deprecated-apis"));
-
 var _noDeprecatedDesignTokenUsage = _interopRequireDefault(require("./rules/no-deprecated-design-token-usage"));
-
 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 rules = {
   'ensure-design-token-usage': _ensureDesignTokenUsage.default,
   'icon-label': _iconLabel.default,

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

@@ -4,25 +4,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _eslintCodemodUtils = require("eslint-codemod-utils");
-
 var _getIsException = require("../utils/get-is-exception");
-
 var _isColor = require("../utils/is-color");
-
 var _isElevation = require("../utils/is-elevation");
-
 var _isNode = require("../utils/is-node");
-
 var defaultConfig = {
   shouldEnforceFallbacks: false
 };
-
 var getNodeColumn = function getNodeColumn(node) {
   return node.loc ? node.loc.start.column : 0;
 };
-
 var getTokenSuggestion = function getTokenSuggestion(node, reference, config) {
   return [{
     shouldReturnSuggestion: !(0, _isNode.isDecendantOfGlobalToken)(node) && config.shouldEnforceFallbacks === false,
@@ -38,12 +30,10 @@ var getTokenSuggestion = function getTokenSuggestion(node, reference, config) {
     }
   }].filter(filterSuggestion);
 };
-
 var filterSuggestion = function filterSuggestion(_ref) {
   var shouldReturnSuggestion = _ref.shouldReturnSuggestion;
   return shouldReturnSuggestion;
 };
-
 var rule = {
   meta: {
     // We need to upgrade the version of ESLint.
@@ -66,7 +56,6 @@ var rule = {
         if (!(0, _isNode.isDecendantOfStyleBlock)(node)) {
           return;
         }
-
         if (node.type === 'Identifier' && (0, _isColor.isLegacyNamedColor)(node.name) && !isException(node)) {
           context.report({
             messageId: 'hardCodedColor',
@@ -80,9 +69,7 @@ var rule = {
         if (isException(node) || (0, _isNode.isDecendantOfGlobalToken)(node) || (0, _isNode.isDecendantOfType)(node, 'ImportDeclaration') || (0, _isNode.isPropertyKey)(node) || (0, _isNode.isVariableName)(node)) {
           return;
         }
-
         var isNodeLegacyColor = (0, _isColor.isLegacyColor)(node.name);
-
         if (isNodeLegacyColor || (0, _isColor.isHardCodedColor)(node.name)) {
           if (node.parent.type === 'MemberExpression') {
             if (node.parent.object.type === 'Identifier') {
@@ -96,10 +83,8 @@ var rule = {
                 });
               }
             }
-
             return;
           }
-
           context.report({
             messageId: 'hardCodedColor',
             node: node,
@@ -107,9 +92,7 @@ var rule = {
           });
           return;
         }
-
         var elevation = (0, _isElevation.isLegacyElevation)(node.name);
-
         if (elevation) {
           context.report({
             messageId: 'legacyElevation',
@@ -121,7 +104,6 @@ var rule = {
               if ((0, _isNode.isChildOfType)(node, 'TemplateLiteral') && node.range) {
                 return fixer.replaceTextRange([node.range[0] - 2, node.range[1] + 1], "background-color: ${token('".concat(elevation.background, "')};\n").concat(' '.repeat(getNodeColumn(node) - 2), "box-shadow: ${token('").concat(elevation.shadow, "')}"));
               }
-
               return null;
             }
           });
@@ -131,16 +113,15 @@ var rule = {
         if (node.type !== 'TaggedTemplateExpression') {
           return;
         }
-
         var value = node.quasi.quasis.map(function (q) {
           return q.value.raw;
         }).join('');
+
         /**
          * Attempts to remove all non-essential words & characters from a style block.
          * Including selectors, queries and property names, leaving only values
          * This is necessary to avoid cases where a property might have a color in its name ie. "white-space"
          */
-
         var cssProperties = value.replace(/\n/g, '').split(/;|{|}/).map(function (el) {
           return el.trim().split(':').pop() || '';
         });
@@ -158,11 +139,9 @@ var rule = {
         if (node.type !== 'Literal' || typeof node.value !== 'string') {
           return;
         }
-
         if (!(0, _isNode.isDecendantOfStyleBlock)(node) && !(0, _isNode.isDecendantOfStyleJsxAttribute)(node)) {
           return;
         }
-
         if (((0, _isColor.isHardCodedColor)(node.value) || (0, _isColor.includesHardCodedColor)(node.value)) && !isException(node)) {
           context.report({
             messageId: 'hardCodedColor',
@@ -176,15 +155,12 @@ var rule = {
         if (node.type !== 'CallExpression' || node.callee.type !== 'Identifier') {
           return;
         }
-
         if (!(0, _isNode.isDecendantOfStyleBlock)(node) && !(0, _isNode.isDecendantOfStyleJsxAttribute)(node)) {
           return;
         }
-
         if (!(0, _isColor.isLegacyNamedColor)(node.callee.name) || (0, _isNode.isDecendantOfGlobalToken)(node) || isException(node)) {
           return;
         }
-
         context.report({
           messageId: 'hardCodedColor',
           node: node,
@@ -195,18 +171,14 @@ var rule = {
         if (!node.value) {
           return;
         }
-
         if (['alt', 'src', 'label'].includes(node.name.name)) {
           return;
         }
-
         if (node.value.type === 'Literal') {
           if (isException(node)) {
             return;
           }
-
           var literalValue = node.value.value;
-
           if ((0, _isColor.isHardCodedColor)(literalValue) || (0, _isColor.includesHardCodedColor)(literalValue)) {
             context.report({
               messageId: 'hardCodedColor',

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

@@ -1,28 +1,18 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 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.
@@ -31,7 +21,6 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 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];
 }));
@@ -46,17 +35,17 @@ var typographyValueToToken = Object.fromEntries(_tokensRaw.typography.map(functi
     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('spacing.scale.100', '8px')
+ * 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' ? "\"".concat(value, "\"") : "'".concat(value, "'");
@@ -71,6 +60,25 @@ function getTokenNodeForValue(propertyName, value) {
   });
 }
 
+/**
+ * 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;
+}
 var rule = {
   meta: {
     type: 'problem',
@@ -85,6 +93,12 @@ var rule = {
     }
   },
   create: function create(context) {
+    var _context$options$;
+    var targetCategories = ['spacing'];
+    var configCategories = (_context$options$ = context.options[0]) === null || _context$options$ === void 0 ? void 0 : _context$options$.addons;
+    if (Array.isArray(configCategories) && configCategories.includes('typography')) {
+      targetCategories.push('typography');
+    }
     return {
       // CSSObjectExpression
       // const styles = css({ color: 'red', margin: '4px' })
@@ -92,51 +106,42 @@ var rule = {
         if (!(0, _eslintCodemodUtils.isNodeOfType)(parentNode, 'ObjectExpression')) {
           return;
         }
+
         /**
          * We do this in case 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-expect-error
+        var fontSizeValue = (0, _utils.getValue)(
+        // @ts-expect-error
         (0, _eslintCodemodUtils.isNodeOfType)(fontSizeNode, 'Property') && fontSizeNode.value, context);
         var fontSize = Array.isArray(fontSizeValue) ? fontSizeValue[0] : fontSizeValue;
-
         function findObjectStyles(node) {
           if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'Property')) {
             return;
           }
-
           if ((0, _eslintCodemodUtils.isNodeOfType)(node.value, 'ObjectExpression')) {
             return node.value.properties.forEach(findObjectStyles);
           }
-
           if (!(0, _eslintCodemodUtils.isNodeOfType)(node.key, 'Identifier')) {
             return;
           }
-
-          if (!(0, _utils.isSpacingProperty)(node.key.name)) {
+          if (!shouldAnalyzeProperty(node.key.name, targetCategories)) {
             return;
           }
-
           if ((0, _isNode.isDecendantOfGlobalToken)(node.value)) {
             return;
           }
-
           if ((0, _eslintCodemodUtils.isNodeOfType)(node.value, 'TemplateLiteral') && node.value.expressions.some(_isNode.isDecendantOfGlobalToken)) {
             return;
           }
-
           if (node.value.type === 'Literal' && !(0, _utils.isValidSpacingValue)(node.value.value, fontSize)) {
             context.report({
               node: node,
@@ -147,11 +152,11 @@ var rule = {
             });
             return;
           }
-
           var propertyName = node.key.name;
           var isFontFamily = /fontFamily/.test(propertyName);
-          var value = (0, _utils.getValue)(node.value, context); // value is either NaN or it can't be resolved eg, em, 100% etc...
+          var value = (0, _utils.getValue)(node.value, context);
 
+          // value is either NaN or it can't be resolved eg, em, 100% etc...
           if (!(value && (0, _utils.isValidSpacingValue)(value, fontSize))) {
             return context.report({
               node: node,
@@ -161,14 +166,13 @@ var rule = {
               }
             });
           }
+          var values = Array.isArray(value) ? value : [value];
 
-          var values = Array.isArray(value) ? value : [value]; // value is a single value so we can apply a more robust approach to our fix
+          // value is a single value so we can apply a more robust approach to our fix
           // treat fontFamily as having one value
-
           if (values.length === 1 || isFontFamily) {
             var _values = (0, _slicedToArray2.default)(values, 1),
-                _value = _values[0];
-
+              _value = _values[0];
             var pixelValue = isFontFamily ? _value : (0, _utils.emToPixels)(_value, fontSize);
             return context.report({
               node: node,
@@ -178,19 +182,15 @@ var rule = {
               },
               fix: function fix(fixer) {
                 var _node$loc;
-
-                if (!(0, _utils.isSpacingProperty)(propertyName)) {
+                if (!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];
-
                 if (!tokenName) {
                   return null;
                 }
-
                 var replacementValue = 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
@@ -198,6 +198,7 @@ var rule = {
               }
             });
           }
+
           /**
            * Compound values are hard to deal with / replace because we need to find/replace strings inside an
            * estree node.
@@ -205,8 +206,6 @@ var rule = {
            * @example
            * { padding: '8px 0px' } // two values we don't try and apply the fixer
            */
-
-
           values.forEach(function (val, index) {
             var pixelValue = (0, _utils.emToPixels)(val, fontSize);
             context.report({
@@ -219,11 +218,9 @@ var rule = {
                 var allResolvableValues = values.every(function (value) {
                   return !Number.isNaN((0, _utils.emToPixels)(value, fontSize));
                 });
-
                 if (!allResolvableValues) {
                   return null;
                 }
-
                 return fixer.replaceText(node.value, "`".concat(values.map(function (value) {
                   var pixelValue = (0, _utils.emToPixels)(value, fontSize);
                   var pixelValueString = "".concat(pixelValue, "px");
@@ -233,7 +230,6 @@ var rule = {
             });
           });
         }
-
         parentNode.properties.forEach(findObjectStyles);
       },
       // CSSTemplateLiteral and StyledTemplateLiteral
@@ -243,46 +239,43 @@ var rule = {
         if (node.type !== 'TaggedTemplateExpression') {
           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('');
+
         /**
          * 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.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); // Get font size
+        }).filter(Boolean);
 
+        // 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];
-
+            _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) {
           var _style$split3 = style.split(':'),
-              _style$split4 = (0, _slicedToArray2.default)(_style$split3, 2),
-              rawProperty = _style$split4[0],
-              value = _style$split4[1];
-
+            _style$split4 = (0, _slicedToArray2.default)(_style$split3, 2),
+            rawProperty = _style$split4[0],
+            value = _style$split4[1];
           var propertyName = (0, _utils.convertHyphenatedNameToCamelCase)(rawProperty);
-
-          if (!(0, _utils.isSpacingProperty)(propertyName)) {
+          if (!shouldAnalyzeProperty(propertyName, targetCategories)) {
             return;
-          } // value is either NaN or it can't be resolved eg, em, 100% etc...
-
+          }
 
+          // 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,
@@ -292,13 +285,11 @@ var rule = {
               }
             });
           }
-
           var values = (0, _utils.getValueFromShorthand)(value);
           values.forEach(function (val, index) {
-            if (!val && val !== 0 || !(0, _utils.isSpacingProperty)(propertyName)) {
+            if (!val && val !== 0 || !shouldAnalyzeProperty(propertyName, targetCategories)) {
               return;
             }
-
             var isFontFamily = /fontFamily/.test(propertyName);
             var pixelValue = isFontFamily ? val : (0, _utils.emToPixels)(val, fontSize);
             context.report({
@@ -311,39 +302,36 @@ var rule = {
                 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);
 
-                  var replacementTokenValue = getTokenNodeForValue(propertyName, lookupValue); // ${token('...', '...')}
-
+                  // ${token('...', '...')}
                   var replacementSubValue = '${' + replacementTokenValue.toString() + '}';
                   return replacementSubValue;
-                }).join(' '); // get original source
-
-                var textForSource = context.getSourceCode().getText(node.quasi); // find `<property>: ...;` in original
+                }).join(' ');
 
-                var searchRegExp = new RegExp(style, 'g'); // replace property:val with new property:val
+                // get original source
+                var textForSource = context.getSourceCode().getText(node.quasi);
 
+                // find `<property>: ...;` in original
+                var searchRegExp = new RegExp(style, 'g');
+                // replace property:val with new property:val
                 var replacement = textForSource.replace(searchRegExp, //  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
             });