@atlaskit/eslint-plugin-design-system 4.16.4 → 4.16.5

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 4.16.5
+
+### Patch Changes
+
+- [`c82e6ef389c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c82e6ef389c) - Fix bug when replacing shorthand css property values with tokens, values without corresponding token won't be replaced. Also, allow styled2 alias to be matched in object styles for the spacing rule, given Jira frontend uses that alias extensively
+
 ## 4.16.4
 
 ### Patch Changes

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

@@ -68,7 +68,7 @@ var rule = (0, _createRule.createRule)({
       },
       // CSSObjectExpression
       // const styles = css({ color: 'red', margin: '4px' }), styled.div({ color: 'red', margin: '4px' })
-      'CallExpression[callee.name=css] > ObjectExpression, CallExpression[callee.object.name=styled] > ObjectExpression': function CallExpressionCalleeNameCssObjectExpressionCallExpressionCalleeObjectNameStyledObjectExpression(parentNode) {
+      'CallExpression[callee.name=css] > ObjectExpression, CallExpression[callee.object.name=styled] > ObjectExpression, CallExpression[callee.object.name=styled2] > ObjectExpression': function CallExpressionCalleeNameCssObjectExpressionCallExpressionCalleeObjectNameStyledObjectExpressionCallExpressionCalleeObjectNameStyled2ObjectExpression(parentNode) {
         if (!(0, _eslintCodemodUtils.isNodeOfType)(parentNode, 'ObjectExpression')) {
           return;
         }
@@ -187,10 +187,34 @@ var rule = (0, _createRule.createRule)({
                 if (!allResolvableValues) {
                   return null;
                 }
-                return (!tokenNode && ruleConfig.applyImport ? [(0, _utils.insertTokensImport)(fixer)] : []).concat([fixer.replaceText(node.value, "`".concat(values.map(function (value) {
+                var valuesWithTokenReplacement = values.filter(function (value) {
+                  return (0, _utils.findTokenNameByPropertyValue)(propertyName, value);
+                });
+                if (valuesWithTokenReplacement.length === 0) {
+                  // all values could be replaceable but that just means they're numeric
+                  // if none of the values have token replacement we bail
+                  return null;
+                }
+                var originalCssString = (0, _utils.getRawExpression)(node.value, context);
+                if (!originalCssString) {
+                  return null;
+                }
+                /**
+                 * at this stage none of the values are tokens or irreplaceable values
+                 * since we know this is shorthand, there will be multiple values
+                 * we'll need to remove all quote chars since `getRawExpression` will return those as part of the string
+                 * given they're part of the substring of the current node
+                 */
+                var originalValues = (0, _utils.splitShorthandValues)(originalCssString.replace(/`|'|"/g, ''));
+                if (originalValues.length !== values.length) {
+                  // we bail just in case original values don't correspond to the replaced values
+                  return null;
+                }
+                return (!tokenNode && ruleConfig.applyImport ? [(0, _utils.insertTokensImport)(fixer)] : []).concat([fixer.replaceText(node.value, "`".concat(values.map(function (value, index) {
                   var pixelValue = (0, _utils.emToPixels)(value, fontSize);
                   var pixelValueString = "".concat(pixelValue, "px");
-                  return "${".concat((0, _utils.getTokenNodeForValue)(propertyName, pixelValueString), "}");
+                  // if there is a token we take it, otherwise we go with the original value
+                  return (0, _utils.findTokenNameByPropertyValue)(propertyName, value) ? "${".concat((0, _utils.getTokenNodeForValue)(propertyName, pixelValueString), "}") : originalValues[index];
                 }).join(' '), "`"))]);
               } : undefined
             });

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

@@ -8,6 +8,7 @@ exports.cleanComments = cleanComments;
 exports.emToPixels = exports.convertHyphenatedNameToCamelCase = void 0;
 exports.findIdentifierInParentScope = findIdentifierInParentScope;
 exports.findParentNodeForLine = void 0;
+exports.findTokenNameByPropertyValue = findTokenNameByPropertyValue;
 exports.getFontSizeValueInScope = getFontSizeValueInScope;
 exports.getRawExpression = void 0;
 exports.getTokenNodeForValue = getTokenNodeForValue;
@@ -491,6 +492,18 @@ function splitCssProperties(styleString) {
 function isTokenValueString(originalValue) {
   return originalValue.startsWith('${token(') && originalValue.endsWith('}');
 }
+function findTokenNameByPropertyValue(propertyName, value) {
+  var isFontWeightOrFamily = /fontWeight|fontFamily/.test(propertyName);
+  var propertyValue = typeof value === 'string' ? value.trim() : value;
+  var pixelValue = propertyValue;
+  var pixelValueString = "".concat(propertyValue, "px");
+  var lookupValue = isFontWeightOrFamily ? pixelValue : pixelValueString;
+  var tokenName = isTypographyProperty(propertyName) ? typographyValueToToken[propertyName][lookupValue] : spacingValueToToken[lookupValue];
+  if (!tokenName) {
+    return undefined;
+  }
+  return tokenName;
+}
 
 /**
  * Returns a string with token expression corresponding to input parameters
@@ -504,7 +517,7 @@ function getTokenReplacement(propertyName, value) {
   var pixelValue = propertyValue;
   var pixelValueString = "".concat(propertyValue, "px");
   var lookupValue = isFontWeightOrFamily ? pixelValue : pixelValueString;
-  var tokenName = isTypographyProperty(propertyName) ? typographyValueToToken[propertyName][lookupValue] : spacingValueToToken[lookupValue];
+  var tokenName = findTokenNameByPropertyValue(propertyName, value);
   if (!tokenName) {
     return undefined;
   }

package/dist/cjs/version.json

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

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

@@ -3,7 +3,7 @@
 import { isNodeOfType, node as nodeFn, property } from 'eslint-codemod-utils';
 import { createRule } from '../utils/create-rule';
 import { isDecendantOfGlobalToken } from '../utils/is-node';
-import { convertHyphenatedNameToCamelCase, emToPixels, findParentNodeForLine, getFontSizeValueInScope, getTokenNodeForValue, getTokenReplacement, getValue, getValueFromShorthand, insertTokensImport, isTokenValueString, isTypographyProperty, isValidSpacingValue, processCssNode, shouldAnalyzeProperty, spacingValueToToken, splitShorthandValues, typographyValueToToken } from './utils';
+import { convertHyphenatedNameToCamelCase, emToPixels, findParentNodeForLine, findTokenNameByPropertyValue, getFontSizeValueInScope, getRawExpression, getTokenNodeForValue, getTokenReplacement, getValue, getValueFromShorthand, insertTokensImport, isTokenValueString, isTypographyProperty, isValidSpacingValue, processCssNode, shouldAnalyzeProperty, spacingValueToToken, splitShorthandValues, typographyValueToToken } from './utils';
 const rule = createRule({
   defaultOptions: [{
     addons: ['spacing'],
@@ -59,7 +59,7 @@ const rule = createRule({
       },
       // CSSObjectExpression
       // const styles = css({ color: 'red', margin: '4px' }), styled.div({ color: 'red', margin: '4px' })
-      'CallExpression[callee.name=css] > ObjectExpression, CallExpression[callee.object.name=styled] > ObjectExpression': parentNode => {
+      'CallExpression[callee.name=css] > ObjectExpression, CallExpression[callee.object.name=styled] > ObjectExpression, CallExpression[callee.object.name=styled2] > ObjectExpression': parentNode => {
         if (!isNodeOfType(parentNode, 'ObjectExpression')) {
           return;
         }
@@ -176,10 +176,32 @@ const rule = createRule({
                 if (!allResolvableValues) {
                   return null;
                 }
-                return (!tokenNode && ruleConfig.applyImport ? [insertTokensImport(fixer)] : []).concat([fixer.replaceText(node.value, `\`${values.map(value => {
+                const valuesWithTokenReplacement = values.filter(value => findTokenNameByPropertyValue(propertyName, value));
+                if (valuesWithTokenReplacement.length === 0) {
+                  // all values could be replaceable but that just means they're numeric
+                  // if none of the values have token replacement we bail
+                  return null;
+                }
+                const originalCssString = getRawExpression(node.value, context);
+                if (!originalCssString) {
+                  return null;
+                }
+                /**
+                 * at this stage none of the values are tokens or irreplaceable values
+                 * since we know this is shorthand, there will be multiple values
+                 * we'll need to remove all quote chars since `getRawExpression` will return those as part of the string
+                 * given they're part of the substring of the current node
+                 */
+                const originalValues = splitShorthandValues(originalCssString.replace(/`|'|"/g, ''));
+                if (originalValues.length !== values.length) {
+                  // we bail just in case original values don't correspond to the replaced values
+                  return null;
+                }
+                return (!tokenNode && ruleConfig.applyImport ? [insertTokensImport(fixer)] : []).concat([fixer.replaceText(node.value, `\`${values.map((value, index) => {
                   const pixelValue = emToPixels(value, fontSize);
                   const pixelValueString = `${pixelValue}px`;
-                  return `\${${getTokenNodeForValue(propertyName, pixelValueString)}}`;
+                  // if there is a token we take it, otherwise we go with the original value
+                  return findTokenNameByPropertyValue(propertyName, value) ? `\${${getTokenNodeForValue(propertyName, pixelValueString)}}` : originalValues[index];
                 }).join(' ')}\``)]);
               } : undefined
             });

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

@@ -408,6 +408,18 @@ export function splitCssProperties(styleString) {
 export function isTokenValueString(originalValue) {
   return originalValue.startsWith('${token(') && originalValue.endsWith('}');
 }
+export function findTokenNameByPropertyValue(propertyName, value) {
+  const isFontWeightOrFamily = /fontWeight|fontFamily/.test(propertyName);
+  const propertyValue = typeof value === 'string' ? value.trim() : value;
+  const pixelValue = propertyValue;
+  const pixelValueString = `${propertyValue}px`;
+  const lookupValue = isFontWeightOrFamily ? pixelValue : pixelValueString;
+  const tokenName = isTypographyProperty(propertyName) ? typographyValueToToken[propertyName][lookupValue] : spacingValueToToken[lookupValue];
+  if (!tokenName) {
+    return undefined;
+  }
+  return tokenName;
+}
 
 /**
  * Returns a string with token expression corresponding to input parameters
@@ -421,7 +433,7 @@ export function getTokenReplacement(propertyName, value) {
   const pixelValue = propertyValue;
   const pixelValueString = `${propertyValue}px`;
   const lookupValue = isFontWeightOrFamily ? pixelValue : pixelValueString;
-  const tokenName = isTypographyProperty(propertyName) ? typographyValueToToken[propertyName][lookupValue] : spacingValueToToken[lookupValue];
+  const tokenName = findTokenNameByPropertyValue(propertyName, value);
   if (!tokenName) {
     return undefined;
   }

package/dist/es2019/version.json

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

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

@@ -8,7 +8,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import { isNodeOfType, node as nodeFn, property } from 'eslint-codemod-utils';
 import { createRule } from '../utils/create-rule';
 import { isDecendantOfGlobalToken } from '../utils/is-node';
-import { convertHyphenatedNameToCamelCase, emToPixels, findParentNodeForLine, getFontSizeValueInScope, getTokenNodeForValue, getTokenReplacement, getValue, getValueFromShorthand, insertTokensImport, isTokenValueString, isTypographyProperty, isValidSpacingValue, processCssNode, shouldAnalyzeProperty, spacingValueToToken, splitShorthandValues, typographyValueToToken } from './utils';
+import { convertHyphenatedNameToCamelCase, emToPixels, findParentNodeForLine, findTokenNameByPropertyValue, getFontSizeValueInScope, getRawExpression, getTokenNodeForValue, getTokenReplacement, getValue, getValueFromShorthand, insertTokensImport, isTokenValueString, isTypographyProperty, isValidSpacingValue, processCssNode, shouldAnalyzeProperty, spacingValueToToken, splitShorthandValues, typographyValueToToken } from './utils';
 var rule = createRule({
   defaultOptions: [{
     addons: ['spacing'],
@@ -63,7 +63,7 @@ var rule = createRule({
       },
       // CSSObjectExpression
       // const styles = css({ color: 'red', margin: '4px' }), styled.div({ color: 'red', margin: '4px' })
-      'CallExpression[callee.name=css] > ObjectExpression, CallExpression[callee.object.name=styled] > ObjectExpression': function CallExpressionCalleeNameCssObjectExpressionCallExpressionCalleeObjectNameStyledObjectExpression(parentNode) {
+      'CallExpression[callee.name=css] > ObjectExpression, CallExpression[callee.object.name=styled] > ObjectExpression, CallExpression[callee.object.name=styled2] > ObjectExpression': function CallExpressionCalleeNameCssObjectExpressionCallExpressionCalleeObjectNameStyledObjectExpressionCallExpressionCalleeObjectNameStyled2ObjectExpression(parentNode) {
         if (!isNodeOfType(parentNode, 'ObjectExpression')) {
           return;
         }
@@ -182,10 +182,34 @@ var rule = createRule({
                 if (!allResolvableValues) {
                   return null;
                 }
-                return (!tokenNode && ruleConfig.applyImport ? [insertTokensImport(fixer)] : []).concat([fixer.replaceText(node.value, "`".concat(values.map(function (value) {
+                var valuesWithTokenReplacement = values.filter(function (value) {
+                  return findTokenNameByPropertyValue(propertyName, value);
+                });
+                if (valuesWithTokenReplacement.length === 0) {
+                  // all values could be replaceable but that just means they're numeric
+                  // if none of the values have token replacement we bail
+                  return null;
+                }
+                var originalCssString = getRawExpression(node.value, context);
+                if (!originalCssString) {
+                  return null;
+                }
+                /**
+                 * at this stage none of the values are tokens or irreplaceable values
+                 * since we know this is shorthand, there will be multiple values
+                 * we'll need to remove all quote chars since `getRawExpression` will return those as part of the string
+                 * given they're part of the substring of the current node
+                 */
+                var originalValues = splitShorthandValues(originalCssString.replace(/`|'|"/g, ''));
+                if (originalValues.length !== values.length) {
+                  // we bail just in case original values don't correspond to the replaced values
+                  return null;
+                }
+                return (!tokenNode && ruleConfig.applyImport ? [insertTokensImport(fixer)] : []).concat([fixer.replaceText(node.value, "`".concat(values.map(function (value, index) {
                   var pixelValue = emToPixels(value, fontSize);
                   var pixelValueString = "".concat(pixelValue, "px");
-                  return "${".concat(getTokenNodeForValue(propertyName, pixelValueString), "}");
+                  // if there is a token we take it, otherwise we go with the original value
+                  return findTokenNameByPropertyValue(propertyName, value) ? "${".concat(getTokenNodeForValue(propertyName, pixelValueString), "}") : originalValues[index];
                 }).join(' '), "`"))]);
               } : undefined
             });

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

@@ -452,6 +452,18 @@ export function splitCssProperties(styleString) {
 export function isTokenValueString(originalValue) {
   return originalValue.startsWith('${token(') && originalValue.endsWith('}');
 }
+export function findTokenNameByPropertyValue(propertyName, value) {
+  var isFontWeightOrFamily = /fontWeight|fontFamily/.test(propertyName);
+  var propertyValue = typeof value === 'string' ? value.trim() : value;
+  var pixelValue = propertyValue;
+  var pixelValueString = "".concat(propertyValue, "px");
+  var lookupValue = isFontWeightOrFamily ? pixelValue : pixelValueString;
+  var tokenName = isTypographyProperty(propertyName) ? typographyValueToToken[propertyName][lookupValue] : spacingValueToToken[lookupValue];
+  if (!tokenName) {
+    return undefined;
+  }
+  return tokenName;
+}
 
 /**
  * Returns a string with token expression corresponding to input parameters
@@ -465,7 +477,7 @@ export function getTokenReplacement(propertyName, value) {
   var pixelValue = propertyValue;
   var pixelValueString = "".concat(propertyValue, "px");
   var lookupValue = isFontWeightOrFamily ? pixelValue : pixelValueString;
-  var tokenName = isTypographyProperty(propertyName) ? typographyValueToToken[propertyName][lookupValue] : spacingValueToToken[lookupValue];
+  var tokenName = findTokenNameByPropertyValue(propertyName, value);
   if (!tokenName) {
     return undefined;
   }

package/dist/esm/version.json

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

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

@@ -150,6 +150,7 @@ export declare function splitCssProperties(styleString: string): string[];
  * @param originalVaue string representing a css property value e.g 1em, 12px
  */
 export declare function isTokenValueString(originalValue: string): boolean;
+export declare function findTokenNameByPropertyValue(propertyName: string, value: string): string | undefined;
 /**
  * Returns a string with token expression corresponding to input parameters
  * if no token found for the pair the function returns undefined

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": "4.16.4",
+  "version": "4.16.5",
   "author": "Atlassian Pty Ltd",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"