@atlaskit/eslint-plugin-design-system 8.7.1 → 8.8.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 8.8.0
+
+### Minor Changes
+
+- [`6c149f3e71d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6c149f3e71d) - The `ensure-design-token-usage` rules now report on use of the CSS `calc` function when used with padding, margin, and gap properties.
+
 ## 8.7.1
 
 ### Patch Changes

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

@@ -79,8 +79,20 @@ var createWithConfig = function createWithConfig(initialConfig) {
           if (domains.length === 0 || (0, _isNode.isDecendantOfGlobalToken)(node.value)) {
             return;
           }
-          if ((0, _eslintCodemodUtils.isNodeOfType)(node.value, 'TemplateLiteral') && node.value.expressions.some(_isNode.isDecendantOfGlobalToken)) {
-            return;
+          if ((0, _eslintCodemodUtils.isNodeOfType)(node.value, 'TemplateLiteral')) {
+            var value = (0, _utils.getValueFromTemplateLiteralRaw)(node.value, context);
+            if (Array.isArray(value) && value.some(_utils.isCalc)) {
+              return context.report({
+                node: node,
+                messageId: 'noCalcUsage',
+                data: {
+                  payload: "".concat(propertyName)
+                }
+              });
+            }
+            if (node.value.expressions.some(_isNode.isDecendantOfGlobalToken)) {
+              return;
+            }
           }
           if (domains.includes('color')) {
             return (0, _color.lintObjectForColor)(node, context, config);
@@ -172,6 +184,16 @@ var createWithConfig = function createWithConfig(initialConfig) {
               if (!originalValue) {
                 return originalValue;
               }
+              if ((0, _utils.isCalc)(originalValue)) {
+                context.report({
+                  node: node,
+                  messageId: 'noCalcUsage',
+                  data: {
+                    payload: "".concat(propertyName)
+                  }
+                });
+                return originalValue;
+              }
               if ((0, _utils.isTokenValueString)(originalValue)) {
                 // if the value is already valid, nothing to report or replace
                 return originalValue;

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

@@ -42,6 +42,7 @@ var ruleMeta = {
     noRawRadiusValues: 'The use of shape tokens is preferred over the direct application of border 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',
+    noCalcUsage: 'The use of space tokens is preferred over using the CSS calc function. If using a value that is not aligned to the spacing scale, consider aligning to the scale and using tokens instead.',
     hardCodedColor: "Colors can be sourced from the global theme using the token function.",
     legacyElevation: "Elevations can be sourced from the global theme using the token function made of both a background and shadow. Use \"card\" for card elevations, and \"overlay\" for anything else that should appear elevated."
   }

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

@@ -22,13 +22,19 @@ var lintObjectForSpacing = function lintObjectForSpacing(node, context, ruleConf
     });
     return;
   }
+  var propertyName = node.key.name;
+  var isFontFamily = /fontFamily/.test(propertyName);
 
-  // Don't report on CSS calc function
+  // Report on CSS calc function for strings
   if ((0, _eslintCodemodUtils.isNodeOfType)(node.value, 'Literal') && (0, _utils.isCalc)(node.value.value)) {
-    return;
+    return context.report({
+      node: node,
+      messageId: 'noCalcUsage',
+      data: {
+        payload: "".concat(propertyName)
+      }
+    });
   }
-  var propertyName = node.key.name;
-  var isFontFamily = /fontFamily/.test(propertyName);
   var value = (0, _utils.getValue)(node.value, context);
 
   // Value is a token string (e.g. set via a variable)
@@ -87,6 +93,15 @@ var lintObjectForSpacing = function lintObjectForSpacing(node, context, ruleConf
    * { padding: '8px 0px' }
    */
   valuesForProperty.forEach(function (val) {
+    if ((0, _utils.isCalc)(val)) {
+      return context.report({
+        node: node,
+        messageId: 'noCalcUsage',
+        data: {
+          payload: "".concat(propertyName, ":").concat(val)
+        }
+      });
+    }
     var pixelValue = (0, _utils.emToPixels)(val, fontSize);
 
     // Do not report or suggest a token to replace 0 or auto

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

@@ -13,7 +13,7 @@ exports.getFontSizeValueInScope = getFontSizeValueInScope;
 exports.getRawExpression = void 0;
 exports.getTokenNodeForValue = getTokenNodeForValue;
 exports.getTokenReplacement = getTokenReplacement;
-exports.getValueFromShorthand = exports.getValue = void 0;
+exports.getValueFromTemplateLiteralRaw = exports.getValueFromShorthand = exports.getValue = void 0;
 exports.includesTokenString = includesTokenString;
 exports.insertTokensImport = insertTokensImport;
 exports.isSpacingProperty = exports.isCalc = exports.isAuto = void 0;
@@ -207,7 +207,7 @@ var getValueFromUnaryExpression = function getValueFromUnaryExpression(node, con
  * // results in [2, 4, 0]
  * ```
  */
-var getValueFromTemplateLiteral = function getValueFromTemplateLiteral(node, context) {
+var getValueFromTemplateLiteralRaw = function getValueFromTemplateLiteralRaw(node, context) {
   if (!(0, _eslintCodemodUtils.isNodeOfType)(node, "TemplateLiteral")) {
     return null;
   }
@@ -218,7 +218,12 @@ var getValueFromTemplateLiteral = function getValueFromTemplateLiteral(node, con
   if (fontFamily.test(combinedString)) {
     return combinedString;
   }
-  return combinedString.split(' ').map(removePixelSuffix);
+  return combinedString.split(' ');
+};
+exports.getValueFromTemplateLiteralRaw = getValueFromTemplateLiteralRaw;
+var getValueFromTemplateLiteral = function getValueFromTemplateLiteral(node, context) {
+  var value = getValueFromTemplateLiteralRaw(node, context);
+  return Array.isArray(value) ? value.map(removePixelSuffix) : value;
 };
 var getValueFromBinaryExpression = function getValueFromBinaryExpression(node, context) {
   if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'BinaryExpression')) {
@@ -252,7 +257,7 @@ var emToPixels = function emToPixels(value, fontSize) {
 exports.emToPixels = emToPixels;
 var percentageOrEmOrAuto = /(%$)|(\d+em$)|(auto$)/;
 var removePixelSuffix = function removePixelSuffix(value) {
-  if (typeof value === 'string' && percentageOrEmOrAuto.test(value)) {
+  if (typeof value === 'string' && (percentageOrEmOrAuto.test(value) || isCalc(value))) {
     return value;
   }
   return Number(typeof value === 'string' ? value.replace('px', '') : value);

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

@@ -5,7 +5,7 @@ import { isDecendantOfGlobalToken, isDecendantOfStyleBlock, isDecendantOfType }
 import { lintJSXIdentifierForColor, lintJSXLiteralForColor, lintJSXMemberForColor, lintObjectForColor, lintTemplateIdentifierForColor } from './color';
 import ruleMeta from './rule-meta';
 import { lintObjectForSpacing } from './spacing';
-import { convertHyphenatedNameToCamelCase, emToPixels, getDomainsForProperty, getFontSizeFromNode, getFontSizeValueInScope, getTokenReplacement, getValueFromShorthand, includesTokenString, insertTokensImport, isAuto, isTokenValueString, isValidSpacingValue, isZero, processCssNode, splitShorthandValues } from './utils';
+import { convertHyphenatedNameToCamelCase, emToPixels, getDomainsForProperty, getFontSizeFromNode, getFontSizeValueInScope, getTokenReplacement, getValueFromShorthand, getValueFromTemplateLiteralRaw, includesTokenString, insertTokensImport, isAuto, isCalc, isTokenValueString, isValidSpacingValue, isZero, processCssNode, splitShorthandValues } from './utils';
 const defaultConfig = {
   domains: ['color', 'spacing'],
   applyImport: true,
@@ -62,8 +62,20 @@ const createWithConfig = initialConfig => context => {
         if (domains.length === 0 || isDecendantOfGlobalToken(node.value)) {
           return;
         }
-        if (isNodeOfType(node.value, 'TemplateLiteral') && node.value.expressions.some(isDecendantOfGlobalToken)) {
-          return;
+        if (isNodeOfType(node.value, 'TemplateLiteral')) {
+          const value = getValueFromTemplateLiteralRaw(node.value, context);
+          if (Array.isArray(value) && value.some(isCalc)) {
+            return context.report({
+              node,
+              messageId: 'noCalcUsage',
+              data: {
+                payload: `${propertyName}`
+              }
+            });
+          }
+          if (node.value.expressions.some(isDecendantOfGlobalToken)) {
+            return;
+          }
         }
         if (domains.includes('color')) {
           return lintObjectForColor(node, context, config);
@@ -140,6 +152,16 @@ const createWithConfig = initialConfig => context => {
             if (!originalValue) {
               return originalValue;
             }
+            if (isCalc(originalValue)) {
+              context.report({
+                node,
+                messageId: 'noCalcUsage',
+                data: {
+                  payload: `${propertyName}`
+                }
+              });
+              return originalValue;
+            }
             if (isTokenValueString(originalValue)) {
               // if the value is already valid, nothing to report or replace
               return originalValue;

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

@@ -36,6 +36,7 @@ const ruleMeta = {
     noRawRadiusValues: 'The use of shape tokens is preferred over the direct application of border 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',
+    noCalcUsage: 'The use of space tokens is preferred over using the CSS calc function. If using a value that is not aligned to the spacing scale, consider aligning to the scale and using tokens instead.',
     hardCodedColor: `Colors can be sourced from the global theme using the token function.`,
     legacyElevation: `Elevations can be sourced from the global theme using the token function made of both a background and shadow. Use "card" for card elevations, and "overlay" for anything else that should appear elevated.`
   }

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

@@ -11,13 +11,19 @@ export const lintObjectForSpacing = (node, context, ruleConfig, fontSize, tokenN
     });
     return;
   }
+  const propertyName = node.key.name;
+  const isFontFamily = /fontFamily/.test(propertyName);
 
-  // Don't report on CSS calc function
+  // Report on CSS calc function for strings
   if (isNodeOfType(node.value, 'Literal') && isCalc(node.value.value)) {
-    return;
+    return context.report({
+      node,
+      messageId: 'noCalcUsage',
+      data: {
+        payload: `${propertyName}`
+      }
+    });
   }
-  const propertyName = node.key.name;
-  const isFontFamily = /fontFamily/.test(propertyName);
   const value = getValue(node.value, context);
 
   // Value is a token string (e.g. set via a variable)
@@ -76,6 +82,15 @@ export const lintObjectForSpacing = (node, context, ruleConfig, fontSize, tokenN
    * { padding: '8px 0px' }
    */
   valuesForProperty.forEach(val => {
+    if (isCalc(val)) {
+      return context.report({
+        node,
+        messageId: 'noCalcUsage',
+        data: {
+          payload: `${propertyName}:${val}`
+        }
+      });
+    }
     const pixelValue = emToPixels(val, fontSize);
 
     // Do not report or suggest a token to replace 0 or auto

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

@@ -167,7 +167,7 @@ const getValueFromUnaryExpression = (node, context) => {
  * // results in [2, 4, 0]
  * ```
  */
-const getValueFromTemplateLiteral = (node, context) => {
+export const getValueFromTemplateLiteralRaw = (node, context) => {
   if (!isNodeOfType(node, `TemplateLiteral`)) {
     return null;
   }
@@ -178,7 +178,11 @@ const getValueFromTemplateLiteral = (node, context) => {
   if (fontFamily.test(combinedString)) {
     return combinedString;
   }
-  return combinedString.split(' ').map(removePixelSuffix);
+  return combinedString.split(' ');
+};
+const getValueFromTemplateLiteral = (node, context) => {
+  const value = getValueFromTemplateLiteralRaw(node, context);
+  return Array.isArray(value) ? value.map(removePixelSuffix) : value;
 };
 const getValueFromBinaryExpression = (node, context) => {
   if (!isNodeOfType(node, 'BinaryExpression')) {
@@ -213,7 +217,7 @@ export const emToPixels = (value, fontSize) => {
 };
 const percentageOrEmOrAuto = /(%$)|(\d+em$)|(auto$)/;
 export const removePixelSuffix = value => {
-  if (typeof value === 'string' && percentageOrEmOrAuto.test(value)) {
+  if (typeof value === 'string' && (percentageOrEmOrAuto.test(value) || isCalc(value))) {
     return value;
   }
   return Number(typeof value === 'string' ? value.replace('px', '') : value);

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

@@ -6,7 +6,7 @@ import { isDecendantOfGlobalToken, isDecendantOfStyleBlock, isDecendantOfType }
 import { lintJSXIdentifierForColor, lintJSXLiteralForColor, lintJSXMemberForColor, lintObjectForColor, lintTemplateIdentifierForColor } from './color';
 import ruleMeta from './rule-meta';
 import { lintObjectForSpacing } from './spacing';
-import { convertHyphenatedNameToCamelCase, emToPixels, getDomainsForProperty, getFontSizeFromNode, getFontSizeValueInScope, getTokenReplacement, getValueFromShorthand, includesTokenString, insertTokensImport, isAuto, isTokenValueString, isValidSpacingValue, isZero, processCssNode, splitShorthandValues } from './utils';
+import { convertHyphenatedNameToCamelCase, emToPixels, getDomainsForProperty, getFontSizeFromNode, getFontSizeValueInScope, getTokenReplacement, getValueFromShorthand, getValueFromTemplateLiteralRaw, includesTokenString, insertTokensImport, isAuto, isCalc, isTokenValueString, isValidSpacingValue, isZero, processCssNode, splitShorthandValues } from './utils';
 var defaultConfig = {
   domains: ['color', 'spacing'],
   applyImport: true,
@@ -72,8 +72,20 @@ var createWithConfig = function createWithConfig(initialConfig) {
           if (domains.length === 0 || isDecendantOfGlobalToken(node.value)) {
             return;
           }
-          if (isNodeOfType(node.value, 'TemplateLiteral') && node.value.expressions.some(isDecendantOfGlobalToken)) {
-            return;
+          if (isNodeOfType(node.value, 'TemplateLiteral')) {
+            var value = getValueFromTemplateLiteralRaw(node.value, context);
+            if (Array.isArray(value) && value.some(isCalc)) {
+              return context.report({
+                node: node,
+                messageId: 'noCalcUsage',
+                data: {
+                  payload: "".concat(propertyName)
+                }
+              });
+            }
+            if (node.value.expressions.some(isDecendantOfGlobalToken)) {
+              return;
+            }
           }
           if (domains.includes('color')) {
             return lintObjectForColor(node, context, config);
@@ -165,6 +177,16 @@ var createWithConfig = function createWithConfig(initialConfig) {
               if (!originalValue) {
                 return originalValue;
               }
+              if (isCalc(originalValue)) {
+                context.report({
+                  node: node,
+                  messageId: 'noCalcUsage',
+                  data: {
+                    payload: "".concat(propertyName)
+                  }
+                });
+                return originalValue;
+              }
               if (isTokenValueString(originalValue)) {
                 // if the value is already valid, nothing to report or replace
                 return originalValue;

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

@@ -36,6 +36,7 @@ var ruleMeta = {
     noRawRadiusValues: 'The use of shape tokens is preferred over the direct application of border 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',
+    noCalcUsage: 'The use of space tokens is preferred over using the CSS calc function. If using a value that is not aligned to the spacing scale, consider aligning to the scale and using tokens instead.',
     hardCodedColor: "Colors can be sourced from the global theme using the token function.",
     legacyElevation: "Elevations can be sourced from the global theme using the token function made of both a background and shadow. Use \"card\" for card elevations, and \"overlay\" for anything else that should appear elevated."
   }

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

@@ -15,13 +15,19 @@ export var lintObjectForSpacing = function lintObjectForSpacing(node, context, r
     });
     return;
   }
+  var propertyName = node.key.name;
+  var isFontFamily = /fontFamily/.test(propertyName);
 
-  // Don't report on CSS calc function
+  // Report on CSS calc function for strings
   if (isNodeOfType(node.value, 'Literal') && isCalc(node.value.value)) {
-    return;
+    return context.report({
+      node: node,
+      messageId: 'noCalcUsage',
+      data: {
+        payload: "".concat(propertyName)
+      }
+    });
   }
-  var propertyName = node.key.name;
-  var isFontFamily = /fontFamily/.test(propertyName);
   var value = getValue(node.value, context);
 
   // Value is a token string (e.g. set via a variable)
@@ -80,6 +86,15 @@ export var lintObjectForSpacing = function lintObjectForSpacing(node, context, r
    * { padding: '8px 0px' }
    */
   valuesForProperty.forEach(function (val) {
+    if (isCalc(val)) {
+      return context.report({
+        node: node,
+        messageId: 'noCalcUsage',
+        data: {
+          payload: "".concat(propertyName, ":").concat(val)
+        }
+      });
+    }
     var pixelValue = emToPixels(val, fontSize);
 
     // Do not report or suggest a token to replace 0 or auto

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

@@ -176,7 +176,7 @@ var getValueFromUnaryExpression = function getValueFromUnaryExpression(node, con
  * // results in [2, 4, 0]
  * ```
  */
-var getValueFromTemplateLiteral = function getValueFromTemplateLiteral(node, context) {
+export var getValueFromTemplateLiteralRaw = function getValueFromTemplateLiteralRaw(node, context) {
   if (!isNodeOfType(node, "TemplateLiteral")) {
     return null;
   }
@@ -187,7 +187,11 @@ var getValueFromTemplateLiteral = function getValueFromTemplateLiteral(node, con
   if (fontFamily.test(combinedString)) {
     return combinedString;
   }
-  return combinedString.split(' ').map(removePixelSuffix);
+  return combinedString.split(' ');
+};
+var getValueFromTemplateLiteral = function getValueFromTemplateLiteral(node, context) {
+  var value = getValueFromTemplateLiteralRaw(node, context);
+  return Array.isArray(value) ? value.map(removePixelSuffix) : value;
 };
 var getValueFromBinaryExpression = function getValueFromBinaryExpression(node, context) {
   if (!isNodeOfType(node, 'BinaryExpression')) {
@@ -220,7 +224,7 @@ export var emToPixels = function emToPixels(value, fontSize) {
 };
 var percentageOrEmOrAuto = /(%$)|(\d+em$)|(auto$)/;
 export var removePixelSuffix = function removePixelSuffix(value) {
-  if (typeof value === 'string' && percentageOrEmOrAuto.test(value)) {
+  if (typeof value === 'string' && (percentageOrEmOrAuto.test(value) || isCalc(value))) {
     return value;
   }
   return Number(typeof value === 'string' ? value.replace('px', '') : value);

package/dist/types/rules/ensure-design-token-usage/utils.d.ts

@@ -19,6 +19,21 @@ export declare const splitShorthandValues: (str: string) => string[];
 export declare const getValueFromShorthand: (str: unknown) => any[];
 export declare const getValue: (node: EslintNode, context: Rule.RuleContext) => string | number | any[] | null | undefined;
 export declare const getRawExpression: (node: EslintNode, context: Rule.RuleContext) => string | null;
+/**
+ * @example
+ * ```js
+ * `2 ${variable} 0`
+ *
+ * // results in [2, NaN, 0]
+ * ```
+ * ```js
+ * const variable = 4;
+ * `2 ${variable} 0`
+ *
+ * // results in [2, 4, 0]
+ * ```
+ */
+export declare const getValueFromTemplateLiteralRaw: (node: EslintNode, context: Rule.RuleContext) => string[] | string | null;
 export declare const emToPixels: <T extends unknown>(value: T, fontSize: number | null | undefined) => number | T | null;
 export declare const removePixelSuffix: (value: string | number) => string | number;
 export declare const isValidSpacingValue: (value: string | number | boolean | RegExp | null | undefined | any[] | bigint, fontSize?: number | null | undefined) => boolean;

package/dist/types-ts4.5/rules/ensure-design-token-usage/utils.d.ts

@@ -22,6 +22,21 @@ export declare const splitShorthandValues: (str: string) => string[];
 export declare const getValueFromShorthand: (str: unknown) => any[];
 export declare const getValue: (node: EslintNode, context: Rule.RuleContext) => string | number | any[] | null | undefined;
 export declare const getRawExpression: (node: EslintNode, context: Rule.RuleContext) => string | null;
+/**
+ * @example
+ * ```js
+ * `2 ${variable} 0`
+ *
+ * // results in [2, NaN, 0]
+ * ```
+ * ```js
+ * const variable = 4;
+ * `2 ${variable} 0`
+ *
+ * // results in [2, 4, 0]
+ * ```
+ */
+export declare const getValueFromTemplateLiteralRaw: (node: EslintNode, context: Rule.RuleContext) => string[] | string | null;
 export declare const emToPixels: <T extends unknown>(value: T, fontSize: number | null | undefined) => number | T | null;
 export declare const removePixelSuffix: (value: string | number) => string | number;
 export declare const isValidSpacingValue: (value: string | number | boolean | RegExp | null | undefined | any[] | bigint, fontSize?: number | null | undefined) => boolean;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@atlaskit/eslint-plugin-design-system",
   "description": "The essential plugin for use with the Atlassian Design System.",
-  "version": "8.7.1",
+  "version": "8.8.0",
   "author": "Atlassian Pty Ltd",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"