@atlaskit/eslint-plugin-design-system 8.19.1 → 8.19.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 8.19.2
+
+### Patch Changes
+
+- [#66118](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/66118) [`93988e6fd035`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/93988e6fd035) - `use-primitives` now handles tokenised padding/margin properties. This change is guarded by a config flag and not enabled by default.
+
 ## 8.19.1
 
 ### Patch Changes

package/dist/cjs/rules/use-primitives/config/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getConfig = void 0;
 var defaults = {
-  patterns: ['div-object-css']
+  patterns: ['compiled-css-function']
 };
 var getConfig = exports.getConfig = function getConfig(overrides) {
   // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

package/dist/cjs/rules/use-primitives/index.js

@@ -37,7 +37,7 @@ var rule = (0, _createRule.createLintRule)({
           return;
         }
         var styledComponentVariableRef = (0, _utils.findValidStyledComponentCall)(node);
-        if (!styledComponentVariableRef || !(0, _eslintCodemodUtils.isNodeOfType)(styledComponentVariableRef.id, 'Identifier') || !(0, _utils.isValidCssPropertiesToTransform)(node)) {
+        if (!styledComponentVariableRef || !(0, _eslintCodemodUtils.isNodeOfType)(styledComponentVariableRef.id, 'Identifier') || !(0, _utils.isValidCssPropertiesToTransform)(node, config)) {
           return;
         }
         var styledComponentJsxRef = (0, _utils.findValidJsxUsageToTransform)(styledComponentVariableRef.id.name, context.getScope());
@@ -60,7 +60,9 @@ var rule = (0, _createRule.createLintRule)({
       },
       // transforms <div css={...}> usages
       JSXOpeningElement: function JSXOpeningElement(node) {
-        var config = (0, _config.getConfig)(context.options[0]);
+        if (!config.patterns.includes('compiled-css-function')) {
+          return false;
+        }
         if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'JSXOpeningElement')) {
           return;
         }
@@ -135,9 +137,6 @@ var shouldSuggestBox = function shouldSuggestBox(node, context, config
   if (!cssVariableValue || !(0, _utils.isFunctionNamed)(cssVariableValue, 'css')) {
     return false;
   }
-  if (!config.patterns.includes('div-object-css')) {
-    return false;
-  }
-  return (0, _utils.isValidCssPropertiesToTransform)(cssVariableValue.node.init);
+  return (0, _utils.isValidCssPropertiesToTransform)(cssVariableValue.node.init, config);
 };
 var _default = exports.default = rule;

package/dist/cjs/rules/use-primitives/transformers/css-to-xcss.js

@@ -39,7 +39,7 @@ var cssToXcssTransformer = exports.cssToXcssTransformer = function cssToXcssTran
   fixer.replaceText(cssVariableValue.node.init.callee, (0, _eslintCodemodUtils.identifier)('xcss').toString())].concat((0, _toConsumableArray2.default)(styledObjectToXcssTokens(cssObjectExpression, fixer)));
 };
 
-// Update css object values to xcss values. e.g. `'8px'` -> `'space.100'`
+// Update css object values to xcss values
 // Note: `properties` in this context is a group of AST nodes that make up a key/value pair in an object.
 // e.g. `padding: '8px'`. For clarity, it's renamed to `entry` inside the `.map()`.
 var styledObjectToXcssTokens = exports.styledObjectToXcssTokens = function styledObjectToXcssTokens(styles, fixer) {
@@ -50,16 +50,30 @@ var styledObjectToXcssTokens = exports.styledObjectToXcssTokens = function style
     if (!(0, _eslintCodemodUtils.isNodeOfType)(entry.key, 'Identifier')) {
       return;
     }
-    if (!(0, _eslintCodemodUtils.isNodeOfType)(entry.value, 'Literal')) {
-      return;
+
+    // maps literal values like: 8px to 'space.100'
+    if ((0, _eslintCodemodUtils.isNodeOfType)(entry.value, 'Literal')) {
+      var value = entry.value.value;
+      if (typeof value !== 'string') {
+        return;
+      }
+      return fixer.replaceText(entry.value, (0, _eslintCodemodUtils.literal)("'".concat(supportedStylesMap[entry.key.name][value], "'")).toString());
     }
-    var value = entry.value.value;
-    if (typeof value !== 'string') {
-      return;
+    // maps token calls like: token('space.100') to 'space.100'
+    if ((0, _eslintCodemodUtils.isNodeOfType)(entry.value, 'CallExpression')) {
+      var callExpression = entry.value;
+      // skip if not a call to `token`
+      if (!(0, _eslintCodemodUtils.isNodeOfType)(callExpression.callee, 'Identifier') || callExpression.callee.name !== 'token' || !(0, _eslintCodemodUtils.isNodeOfType)(callExpression.arguments[0], 'Literal')) {
+        return;
+      }
+      // the first argument of `token` is the token name and
+      // can be given directly to `xcss` as it has been validated already.
+      return fixer.replaceText(entry.value, (0, _eslintCodemodUtils.literal)("'".concat(callExpression.arguments[0].value, "'")).toString());
     }
-    return fixer.replaceText(entry.value, (0, _eslintCodemodUtils.literal)("'".concat(supportedStylesMap[entry.key.name][value], "'")).toString());
   });
 };
+
+// TODO: https://product-fabric.atlassian.net/browse/DSP-16054
 var spaceTokenMap = exports.spaceTokenMap = {
   '0px': 'space.0',
   '2px': 'space.025',

package/dist/cjs/rules/use-primitives/utils/convert-ast-object-expression-to-js-object.js

@@ -20,28 +20,49 @@ var convertASTObjectExpressionToJSObject = exports.convertASTObjectExpressionToJ
     return false;
   }
 
-  // TODO: We need to harden this logic.
+  // TODO: https://product-fabric.atlassian.net/browse/DSP-16055
+  // We need to harden this logic asap.
   // It currently generates a false positive for:
   // styled.div({
   //  marginTop: "0px",
-  //  marginBottom: token("space.100", "8px"),
+  //  marginBottom: blah(...),
   // })
-  // as the value for `marginBottom` is not a string, so it is just skipped
-  // from the resulting map and this causes the rule to trigger when it shouldn't
+  // as the value for `marginBottom` is not a string nor a `token` call, it is just skipped
+  // from the resulting map and this is inaccurate.
   styles.properties.forEach(function (prop) {
+    // cases we want to skip (see note above)
     if (!(0, _eslintCodemodUtils.isNodeOfType)(prop, 'Property')) {
       return;
     }
     if (!(0, _eslintCodemodUtils.isNodeOfType)(prop.key, 'Identifier')) {
       return;
     }
-    if (!(0, _eslintCodemodUtils.isNodeOfType)(prop.value, 'Literal')) {
-      return;
+
+    // a literal string value, the base case
+    if ((0, _eslintCodemodUtils.isNodeOfType)(prop.value, 'Literal') && typeof prop.value.value === 'string') {
+      styleObj[prop.key.name] = prop.value.value;
     }
-    if (typeof prop.value.value !== 'string') {
-      return;
+
+    // try to handle a direct call to `token`
+    if ((0, _eslintCodemodUtils.isNodeOfType)(prop.value, 'CallExpression')) {
+      var _callExpression$argum;
+      var callExpression = prop.value;
+      // skip if not a call to `token`
+      if (!(0, _eslintCodemodUtils.isNodeOfType)(callExpression.callee, 'Identifier') || callExpression.callee.name !== 'token') {
+        return;
+      }
+
+      // only two valid cases are supported
+      // one argument  => token('space.100')
+      // two arguments => token('space.100', '8px')
+      if (callExpression.arguments.length !== 1 && callExpression.arguments.length !== 2 || !(0, _eslintCodemodUtils.isNodeOfType)(callExpression.arguments[0], 'Literal') || callExpression.arguments[1] && !(0, _eslintCodemodUtils.isNodeOfType)(callExpression.arguments[1], 'Literal')) {
+        return;
+      }
+      styleObj[prop.key.name] = {
+        tokenName: String(callExpression.arguments[0].value),
+        fallbackValue: (_callExpression$argum = callExpression.arguments[1]) !== null && _callExpression$argum !== void 0 && _callExpression$argum.value ? String(callExpression.arguments[1].value) : undefined
+      };
     }
-    styleObj[prop.key.name] = prop.value.value;
   });
   return styleObj;
 };

package/dist/cjs/rules/use-primitives/utils/find-valid-styled-component-call.js

@@ -34,6 +34,7 @@ var findValidStyledComponentCall = exports.findValidStyledComponentCall = functi
  *
  * In the future it could be enhanced to double check `styled` and `styled2`
  * are Compiled imports but as is should work for the majority of use cases
+ * https://product-fabric.atlassian.net/browse/DSP-16058
  */
 var isStyledCallExpression = function isStyledCallExpression(call) {
   if (!(0, _eslintCodemodUtils.isNodeOfType)(call, 'CallExpression')) {

package/dist/cjs/rules/use-primitives/utils/get-variable-usage-count.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getVariableUsagesCount = void 0;
 /**
+ * TODO: Update this logic: https://product-fabric.atlassian.net/browse/DSP-16059
  * Using Regex here because otherwise we'd need to traverse the entire AST
  * We should harden this logic as we go.
  */

package/dist/cjs/rules/use-primitives/utils/is-valid-css-properties-to-transform.js

@@ -1,13 +1,15 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.isValidCssPropertiesToTransform = void 0;
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _eslintCodemodUtils = require("eslint-codemod-utils");
 var _cssToXcss = require("../transformers/css-to-xcss");
 var _convertAstObjectExpressionToJsObject = require("./convert-ast-object-expression-to-js-object");
-var isValidCssPropertiesToTransform = exports.isValidCssPropertiesToTransform = function isValidCssPropertiesToTransform(node) {
+var isValidCssPropertiesToTransform = exports.isValidCssPropertiesToTransform = function isValidCssPropertiesToTransform(node, config) {
   var cssObjectExpression = node.arguments[0];
   // Bail on empty object calls
   if (!cssObjectExpression || !(0, _eslintCodemodUtils.isNodeOfType)(cssObjectExpression, 'ObjectExpression')) {
@@ -18,6 +20,12 @@ var isValidCssPropertiesToTransform = exports.isValidCssPropertiesToTransform =
   if (!cssObject || Object.keys(cssObject).length !== 1) {
     return false;
   }
+  // Short-circuit when token calls are found but pattern is not enabled in config
+  if (!config.patterns.includes('css-property-with-tokens') && Object.values(cssObject).some(function (value) {
+    return (0, _typeof2.default)(value) === 'object' && value.tokenName;
+  })) {
+    return false;
+  }
 
   // NOTE: Our approach with this lint rule is to strictly whitelist css properties we can map.
   // It means we have to provide mappings for everything (e.g. `display: block`).
@@ -25,10 +33,22 @@ var isValidCssPropertiesToTransform = exports.isValidCssPropertiesToTransform =
   // than the rule reporting on things that can't be mapped.
   var containsOnlyValidStyles = Object.keys(cssObject).every(function (styleProperty) {
     var styleValue = cssObject[styleProperty];
-    return _cssToXcss.supportedStylesMap[styleProperty] &&
-    // Is the key something we can map
-    _cssToXcss.supportedStylesMap[styleProperty][styleValue] // Is the value something we can map
-    ;
+
+    // token function call
+    if ((0, _typeof2.default)(styleValue) === 'object') {
+      // if there is no fallback value, we just map to the token name, if one is found
+      if (!styleValue.fallbackValue) {
+        return _cssToXcss.supportedStylesMap[styleProperty] && Object.values(_cssToXcss.supportedStylesMap[styleProperty]).includes(styleValue.tokenName);
+      }
+      // token with fallback
+      return _cssToXcss.supportedStylesMap[styleProperty] && _cssToXcss.supportedStylesMap[styleProperty][styleValue.fallbackValue] === styleValue.tokenName;
+    } else {
+      // direct value used
+      return _cssToXcss.supportedStylesMap[styleProperty] &&
+      // Is the key something we can map
+      _cssToXcss.supportedStylesMap[styleProperty][styleValue] // Is the value something we can map
+      ;
+    }
   });
 
   if (!containsOnlyValidStyles) {

package/dist/es2019/rules/use-primitives/config/index.js

@@ -1,5 +1,5 @@
 const defaults = {
-  patterns: ['div-object-css']
+  patterns: ['compiled-css-function']
 };
 export const getConfig = overrides => {
   // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

package/dist/es2019/rules/use-primitives/index.js

@@ -31,7 +31,7 @@ const rule = createLintRule({
           return;
         }
         const styledComponentVariableRef = findValidStyledComponentCall(node);
-        if (!styledComponentVariableRef || !isNodeOfType(styledComponentVariableRef.id, 'Identifier') || !isValidCssPropertiesToTransform(node)) {
+        if (!styledComponentVariableRef || !isNodeOfType(styledComponentVariableRef.id, 'Identifier') || !isValidCssPropertiesToTransform(node, config)) {
           return;
         }
         const styledComponentJsxRef = findValidJsxUsageToTransform(styledComponentVariableRef.id.name, context.getScope());
@@ -54,7 +54,9 @@ const rule = createLintRule({
       },
       // transforms <div css={...}> usages
       JSXOpeningElement(node) {
-        const config = getConfig(context.options[0]);
+        if (!config.patterns.includes('compiled-css-function')) {
+          return false;
+        }
         if (!isNodeOfType(node, 'JSXOpeningElement')) {
           return;
         }
@@ -129,9 +131,6 @@ const shouldSuggestBox = (node, context, config
   if (!cssVariableValue || !isFunctionNamed(cssVariableValue, 'css')) {
     return false;
   }
-  if (!config.patterns.includes('div-object-css')) {
-    return false;
-  }
-  return isValidCssPropertiesToTransform(cssVariableValue.node.init);
+  return isValidCssPropertiesToTransform(cssVariableValue.node.init, config);
 };
 export default rule;

package/dist/es2019/rules/use-primitives/transformers/css-to-xcss.js

@@ -31,7 +31,7 @@ export const cssToXcssTransformer = (node, context, fixer) => {
   fixer.replaceText(cssVariableValue.node.init.callee, identifier('xcss').toString()), ...styledObjectToXcssTokens(cssObjectExpression, fixer)];
 };
 
-// Update css object values to xcss values. e.g. `'8px'` -> `'space.100'`
+// Update css object values to xcss values
 // Note: `properties` in this context is a group of AST nodes that make up a key/value pair in an object.
 // e.g. `padding: '8px'`. For clarity, it's renamed to `entry` inside the `.map()`.
 export const styledObjectToXcssTokens = (styles, fixer) => {
@@ -42,16 +42,30 @@ export const styledObjectToXcssTokens = (styles, fixer) => {
     if (!isNodeOfType(entry.key, 'Identifier')) {
       return;
     }
-    if (!isNodeOfType(entry.value, 'Literal')) {
-      return;
+
+    // maps literal values like: 8px to 'space.100'
+    if (isNodeOfType(entry.value, 'Literal')) {
+      const value = entry.value.value;
+      if (typeof value !== 'string') {
+        return;
+      }
+      return fixer.replaceText(entry.value, literal(`'${supportedStylesMap[entry.key.name][value]}'`).toString());
     }
-    const value = entry.value.value;
-    if (typeof value !== 'string') {
-      return;
+    // maps token calls like: token('space.100') to 'space.100'
+    if (isNodeOfType(entry.value, 'CallExpression')) {
+      const callExpression = entry.value;
+      // skip if not a call to `token`
+      if (!isNodeOfType(callExpression.callee, 'Identifier') || callExpression.callee.name !== 'token' || !isNodeOfType(callExpression.arguments[0], 'Literal')) {
+        return;
+      }
+      // the first argument of `token` is the token name and
+      // can be given directly to `xcss` as it has been validated already.
+      return fixer.replaceText(entry.value, literal(`'${callExpression.arguments[0].value}'`).toString());
     }
-    return fixer.replaceText(entry.value, literal(`'${supportedStylesMap[entry.key.name][value]}'`).toString());
   });
 };
+
+// TODO: https://product-fabric.atlassian.net/browse/DSP-16054
 export const spaceTokenMap = {
   '0px': 'space.0',
   '2px': 'space.025',

package/dist/es2019/rules/use-primitives/utils/convert-ast-object-expression-to-js-object.js

@@ -13,28 +13,49 @@ export const convertASTObjectExpressionToJSObject = styles => {
     return false;
   }
 
-  // TODO: We need to harden this logic.
+  // TODO: https://product-fabric.atlassian.net/browse/DSP-16055
+  // We need to harden this logic asap.
   // It currently generates a false positive for:
   // styled.div({
   //  marginTop: "0px",
-  //  marginBottom: token("space.100", "8px"),
+  //  marginBottom: blah(...),
   // })
-  // as the value for `marginBottom` is not a string, so it is just skipped
-  // from the resulting map and this causes the rule to trigger when it shouldn't
+  // as the value for `marginBottom` is not a string nor a `token` call, it is just skipped
+  // from the resulting map and this is inaccurate.
   styles.properties.forEach(prop => {
+    // cases we want to skip (see note above)
     if (!isNodeOfType(prop, 'Property')) {
       return;
     }
     if (!isNodeOfType(prop.key, 'Identifier')) {
       return;
     }
-    if (!isNodeOfType(prop.value, 'Literal')) {
-      return;
+
+    // a literal string value, the base case
+    if (isNodeOfType(prop.value, 'Literal') && typeof prop.value.value === 'string') {
+      styleObj[prop.key.name] = prop.value.value;
     }
-    if (typeof prop.value.value !== 'string') {
-      return;
+
+    // try to handle a direct call to `token`
+    if (isNodeOfType(prop.value, 'CallExpression')) {
+      var _callExpression$argum;
+      const callExpression = prop.value;
+      // skip if not a call to `token`
+      if (!isNodeOfType(callExpression.callee, 'Identifier') || callExpression.callee.name !== 'token') {
+        return;
+      }
+
+      // only two valid cases are supported
+      // one argument  => token('space.100')
+      // two arguments => token('space.100', '8px')
+      if (callExpression.arguments.length !== 1 && callExpression.arguments.length !== 2 || !isNodeOfType(callExpression.arguments[0], 'Literal') || callExpression.arguments[1] && !isNodeOfType(callExpression.arguments[1], 'Literal')) {
+        return;
+      }
+      styleObj[prop.key.name] = {
+        tokenName: String(callExpression.arguments[0].value),
+        fallbackValue: (_callExpression$argum = callExpression.arguments[1]) !== null && _callExpression$argum !== void 0 && _callExpression$argum.value ? String(callExpression.arguments[1].value) : undefined
+      };
     }
-    styleObj[prop.key.name] = prop.value.value;
   });
   return styleObj;
 };

package/dist/es2019/rules/use-primitives/utils/find-valid-styled-component-call.js

@@ -29,6 +29,7 @@ export const findValidStyledComponentCall = node => {
  *
  * In the future it could be enhanced to double check `styled` and `styled2`
  * are Compiled imports but as is should work for the majority of use cases
+ * https://product-fabric.atlassian.net/browse/DSP-16058
  */
 const isStyledCallExpression = call => {
   if (!isNodeOfType(call, 'CallExpression')) {

package/dist/es2019/rules/use-primitives/utils/get-variable-usage-count.js

@@ -1,4 +1,5 @@
 /**
+ * TODO: Update this logic: https://product-fabric.atlassian.net/browse/DSP-16059
  * Using Regex here because otherwise we'd need to traverse the entire AST
  * We should harden this logic as we go.
  */

package/dist/es2019/rules/use-primitives/utils/is-valid-css-properties-to-transform.js

@@ -1,7 +1,7 @@
 import { isNodeOfType } from 'eslint-codemod-utils';
 import { supportedStylesMap } from '../transformers/css-to-xcss';
 import { convertASTObjectExpressionToJSObject } from './convert-ast-object-expression-to-js-object';
-export const isValidCssPropertiesToTransform = node => {
+export const isValidCssPropertiesToTransform = (node, config) => {
   const cssObjectExpression = node.arguments[0];
   // Bail on empty object calls
   if (!cssObjectExpression || !isNodeOfType(cssObjectExpression, 'ObjectExpression')) {
@@ -12,6 +12,10 @@ export const isValidCssPropertiesToTransform = node => {
   if (!cssObject || Object.keys(cssObject).length !== 1) {
     return false;
   }
+  // Short-circuit when token calls are found but pattern is not enabled in config
+  if (!config.patterns.includes('css-property-with-tokens') && Object.values(cssObject).some(value => typeof value === 'object' && value.tokenName)) {
+    return false;
+  }
 
   // NOTE: Our approach with this lint rule is to strictly whitelist css properties we can map.
   // It means we have to provide mappings for everything (e.g. `display: block`).
@@ -19,10 +23,22 @@ export const isValidCssPropertiesToTransform = node => {
   // than the rule reporting on things that can't be mapped.
   const containsOnlyValidStyles = Object.keys(cssObject).every(styleProperty => {
     const styleValue = cssObject[styleProperty];
-    return supportedStylesMap[styleProperty] &&
-    // Is the key something we can map
-    supportedStylesMap[styleProperty][styleValue] // Is the value something we can map
-    ;
+
+    // token function call
+    if (typeof styleValue === 'object') {
+      // if there is no fallback value, we just map to the token name, if one is found
+      if (!styleValue.fallbackValue) {
+        return supportedStylesMap[styleProperty] && Object.values(supportedStylesMap[styleProperty]).includes(styleValue.tokenName);
+      }
+      // token with fallback
+      return supportedStylesMap[styleProperty] && supportedStylesMap[styleProperty][styleValue.fallbackValue] === styleValue.tokenName;
+    } else {
+      // direct value used
+      return supportedStylesMap[styleProperty] &&
+      // Is the key something we can map
+      supportedStylesMap[styleProperty][styleValue] // Is the value something we can map
+      ;
+    }
   });
 
   if (!containsOnlyValidStyles) {

package/dist/esm/rules/use-primitives/config/index.js

@@ -1,5 +1,5 @@
 var defaults = {
-  patterns: ['div-object-css']
+  patterns: ['compiled-css-function']
 };
 export var getConfig = function getConfig(overrides) {
   // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

package/dist/esm/rules/use-primitives/index.js

@@ -31,7 +31,7 @@ var rule = createLintRule({
           return;
         }
         var styledComponentVariableRef = findValidStyledComponentCall(node);
-        if (!styledComponentVariableRef || !isNodeOfType(styledComponentVariableRef.id, 'Identifier') || !isValidCssPropertiesToTransform(node)) {
+        if (!styledComponentVariableRef || !isNodeOfType(styledComponentVariableRef.id, 'Identifier') || !isValidCssPropertiesToTransform(node, config)) {
           return;
         }
         var styledComponentJsxRef = findValidJsxUsageToTransform(styledComponentVariableRef.id.name, context.getScope());
@@ -54,7 +54,9 @@ var rule = createLintRule({
       },
       // transforms <div css={...}> usages
       JSXOpeningElement: function JSXOpeningElement(node) {
-        var config = getConfig(context.options[0]);
+        if (!config.patterns.includes('compiled-css-function')) {
+          return false;
+        }
         if (!isNodeOfType(node, 'JSXOpeningElement')) {
           return;
         }
@@ -129,9 +131,6 @@ var shouldSuggestBox = function shouldSuggestBox(node, context, config
   if (!cssVariableValue || !isFunctionNamed(cssVariableValue, 'css')) {
     return false;
   }
-  if (!config.patterns.includes('div-object-css')) {
-    return false;
-  }
-  return isValidCssPropertiesToTransform(cssVariableValue.node.init);
+  return isValidCssPropertiesToTransform(cssVariableValue.node.init, config);
 };
 export default rule;

package/dist/esm/rules/use-primitives/transformers/css-to-xcss.js

@@ -32,7 +32,7 @@ export var cssToXcssTransformer = function cssToXcssTransformer(node, context, f
   fixer.replaceText(cssVariableValue.node.init.callee, identifier('xcss').toString())].concat(_toConsumableArray(styledObjectToXcssTokens(cssObjectExpression, fixer)));
 };
 
-// Update css object values to xcss values. e.g. `'8px'` -> `'space.100'`
+// Update css object values to xcss values
 // Note: `properties` in this context is a group of AST nodes that make up a key/value pair in an object.
 // e.g. `padding: '8px'`. For clarity, it's renamed to `entry` inside the `.map()`.
 export var styledObjectToXcssTokens = function styledObjectToXcssTokens(styles, fixer) {
@@ -43,16 +43,30 @@ export var styledObjectToXcssTokens = function styledObjectToXcssTokens(styles,
     if (!isNodeOfType(entry.key, 'Identifier')) {
       return;
     }
-    if (!isNodeOfType(entry.value, 'Literal')) {
-      return;
+
+    // maps literal values like: 8px to 'space.100'
+    if (isNodeOfType(entry.value, 'Literal')) {
+      var value = entry.value.value;
+      if (typeof value !== 'string') {
+        return;
+      }
+      return fixer.replaceText(entry.value, literal("'".concat(supportedStylesMap[entry.key.name][value], "'")).toString());
     }
-    var value = entry.value.value;
-    if (typeof value !== 'string') {
-      return;
+    // maps token calls like: token('space.100') to 'space.100'
+    if (isNodeOfType(entry.value, 'CallExpression')) {
+      var callExpression = entry.value;
+      // skip if not a call to `token`
+      if (!isNodeOfType(callExpression.callee, 'Identifier') || callExpression.callee.name !== 'token' || !isNodeOfType(callExpression.arguments[0], 'Literal')) {
+        return;
+      }
+      // the first argument of `token` is the token name and
+      // can be given directly to `xcss` as it has been validated already.
+      return fixer.replaceText(entry.value, literal("'".concat(callExpression.arguments[0].value, "'")).toString());
     }
-    return fixer.replaceText(entry.value, literal("'".concat(supportedStylesMap[entry.key.name][value], "'")).toString());
   });
 };
+
+// TODO: https://product-fabric.atlassian.net/browse/DSP-16054
 export var spaceTokenMap = {
   '0px': 'space.0',
   '2px': 'space.025',

package/dist/esm/rules/use-primitives/utils/convert-ast-object-expression-to-js-object.js

@@ -15,28 +15,49 @@ export var convertASTObjectExpressionToJSObject = function convertASTObjectExpre
     return false;
   }
 
-  // TODO: We need to harden this logic.
+  // TODO: https://product-fabric.atlassian.net/browse/DSP-16055
+  // We need to harden this logic asap.
   // It currently generates a false positive for:
   // styled.div({
   //  marginTop: "0px",
-  //  marginBottom: token("space.100", "8px"),
+  //  marginBottom: blah(...),
   // })
-  // as the value for `marginBottom` is not a string, so it is just skipped
-  // from the resulting map and this causes the rule to trigger when it shouldn't
+  // as the value for `marginBottom` is not a string nor a `token` call, it is just skipped
+  // from the resulting map and this is inaccurate.
   styles.properties.forEach(function (prop) {
+    // cases we want to skip (see note above)
     if (!isNodeOfType(prop, 'Property')) {
       return;
     }
     if (!isNodeOfType(prop.key, 'Identifier')) {
       return;
     }
-    if (!isNodeOfType(prop.value, 'Literal')) {
-      return;
+
+    // a literal string value, the base case
+    if (isNodeOfType(prop.value, 'Literal') && typeof prop.value.value === 'string') {
+      styleObj[prop.key.name] = prop.value.value;
     }
-    if (typeof prop.value.value !== 'string') {
-      return;
+
+    // try to handle a direct call to `token`
+    if (isNodeOfType(prop.value, 'CallExpression')) {
+      var _callExpression$argum;
+      var callExpression = prop.value;
+      // skip if not a call to `token`
+      if (!isNodeOfType(callExpression.callee, 'Identifier') || callExpression.callee.name !== 'token') {
+        return;
+      }
+
+      // only two valid cases are supported
+      // one argument  => token('space.100')
+      // two arguments => token('space.100', '8px')
+      if (callExpression.arguments.length !== 1 && callExpression.arguments.length !== 2 || !isNodeOfType(callExpression.arguments[0], 'Literal') || callExpression.arguments[1] && !isNodeOfType(callExpression.arguments[1], 'Literal')) {
+        return;
+      }
+      styleObj[prop.key.name] = {
+        tokenName: String(callExpression.arguments[0].value),
+        fallbackValue: (_callExpression$argum = callExpression.arguments[1]) !== null && _callExpression$argum !== void 0 && _callExpression$argum.value ? String(callExpression.arguments[1].value) : undefined
+      };
     }
-    styleObj[prop.key.name] = prop.value.value;
   });
   return styleObj;
 };

package/dist/esm/rules/use-primitives/utils/find-valid-styled-component-call.js

@@ -29,6 +29,7 @@ export var findValidStyledComponentCall = function findValidStyledComponentCall(
  *
  * In the future it could be enhanced to double check `styled` and `styled2`
  * are Compiled imports but as is should work for the majority of use cases
+ * https://product-fabric.atlassian.net/browse/DSP-16058
  */
 var isStyledCallExpression = function isStyledCallExpression(call) {
   if (!isNodeOfType(call, 'CallExpression')) {

package/dist/esm/rules/use-primitives/utils/get-variable-usage-count.js

@@ -1,4 +1,5 @@
 /**
+ * TODO: Update this logic: https://product-fabric.atlassian.net/browse/DSP-16059
  * Using Regex here because otherwise we'd need to traverse the entire AST
  * We should harden this logic as we go.
  */

package/dist/esm/rules/use-primitives/utils/is-valid-css-properties-to-transform.js

@@ -1,7 +1,8 @@
+import _typeof from "@babel/runtime/helpers/typeof";
 import { isNodeOfType } from 'eslint-codemod-utils';
 import { supportedStylesMap } from '../transformers/css-to-xcss';
 import { convertASTObjectExpressionToJSObject } from './convert-ast-object-expression-to-js-object';
-export var isValidCssPropertiesToTransform = function isValidCssPropertiesToTransform(node) {
+export var isValidCssPropertiesToTransform = function isValidCssPropertiesToTransform(node, config) {
   var cssObjectExpression = node.arguments[0];
   // Bail on empty object calls
   if (!cssObjectExpression || !isNodeOfType(cssObjectExpression, 'ObjectExpression')) {
@@ -12,6 +13,12 @@ export var isValidCssPropertiesToTransform = function isValidCssPropertiesToTran
   if (!cssObject || Object.keys(cssObject).length !== 1) {
     return false;
   }
+  // Short-circuit when token calls are found but pattern is not enabled in config
+  if (!config.patterns.includes('css-property-with-tokens') && Object.values(cssObject).some(function (value) {
+    return _typeof(value) === 'object' && value.tokenName;
+  })) {
+    return false;
+  }
 
   // NOTE: Our approach with this lint rule is to strictly whitelist css properties we can map.
   // It means we have to provide mappings for everything (e.g. `display: block`).
@@ -19,10 +26,22 @@ export var isValidCssPropertiesToTransform = function isValidCssPropertiesToTran
   // than the rule reporting on things that can't be mapped.
   var containsOnlyValidStyles = Object.keys(cssObject).every(function (styleProperty) {
     var styleValue = cssObject[styleProperty];
-    return supportedStylesMap[styleProperty] &&
-    // Is the key something we can map
-    supportedStylesMap[styleProperty][styleValue] // Is the value something we can map
-    ;
+
+    // token function call
+    if (_typeof(styleValue) === 'object') {
+      // if there is no fallback value, we just map to the token name, if one is found
+      if (!styleValue.fallbackValue) {
+        return supportedStylesMap[styleProperty] && Object.values(supportedStylesMap[styleProperty]).includes(styleValue.tokenName);
+      }
+      // token with fallback
+      return supportedStylesMap[styleProperty] && supportedStylesMap[styleProperty][styleValue.fallbackValue] === styleValue.tokenName;
+    } else {
+      // direct value used
+      return supportedStylesMap[styleProperty] &&
+      // Is the key something we can map
+      supportedStylesMap[styleProperty][styleValue] // Is the value something we can map
+      ;
+    }
   });
 
   if (!containsOnlyValidStyles) {

package/dist/types/rules/use-primitives/config/index.d.ts

@@ -1,4 +1,6 @@
+type Pattern = 'compiled-css-function' | 'compiled-styled-object' | 'css-template-literal' | 'css-property-with-tokens' | 'css-property-multiple-values';
 export interface RuleConfig {
-    patterns: ('div-object-css' | 'compiled-styled-object' | 'compiled-template-literal' | 'div-object-css-with-tokens' | 'div-object-css-with-multiple-vals')[];
+    patterns: Pattern[];
 }
 export declare const getConfig: (overrides: Partial<RuleConfig>) => Required<RuleConfig>;
+export {};

package/dist/types/rules/use-primitives/utils/convert-ast-object-expression-to-js-object.d.ts

@@ -1,9 +1,14 @@
 import type { Rule } from 'eslint';
 import { ObjectExpression } from 'eslint-codemod-utils';
+type Token = {
+    tokenName: string;
+    fallbackValue: string | undefined;
+};
 export type CSSPropStyleObject = {
-    [key: string]: string | number;
+    [key: string]: string | number | Token;
 };
 /**
  * Note: Not recursive. Only handles top level key/value pairs
  */
 export declare const convertASTObjectExpressionToJSObject: (styles: ObjectExpression & Partial<Rule.NodeParentExtension>) => CSSPropStyleObject | false;
+export {};

package/dist/types/rules/use-primitives/utils/get-variable-usage-count.d.ts

@@ -1,5 +1,6 @@
 import type { Rule } from 'eslint';
 /**
+ * TODO: Update this logic: https://product-fabric.atlassian.net/browse/DSP-16059
  * Using Regex here because otherwise we'd need to traverse the entire AST
  * We should harden this logic as we go.
  */

package/dist/types/rules/use-primitives/utils/is-valid-css-properties-to-transform.d.ts

@@ -1,3 +1,4 @@
 import type { Rule } from 'eslint';
 import { SimpleCallExpression } from 'eslint-codemod-utils';
-export declare const isValidCssPropertiesToTransform: (node: SimpleCallExpression & Rule.NodeParentExtension) => boolean;
+import { RuleConfig } from '../config';
+export declare const isValidCssPropertiesToTransform: (node: SimpleCallExpression & Rule.NodeParentExtension, config: RuleConfig) => boolean;

package/dist/types-ts4.5/rules/use-primitives/config/index.d.ts

@@ -1,4 +1,6 @@
+type Pattern = 'compiled-css-function' | 'compiled-styled-object' | 'css-template-literal' | 'css-property-with-tokens' | 'css-property-multiple-values';
 export interface RuleConfig {
-    patterns: ('div-object-css' | 'compiled-styled-object' | 'compiled-template-literal' | 'div-object-css-with-tokens' | 'div-object-css-with-multiple-vals')[];
+    patterns: Pattern[];
 }
 export declare const getConfig: (overrides: Partial<RuleConfig>) => Required<RuleConfig>;
+export {};

package/dist/types-ts4.5/rules/use-primitives/utils/convert-ast-object-expression-to-js-object.d.ts

@@ -1,9 +1,14 @@
 import type { Rule } from 'eslint';
 import { ObjectExpression } from 'eslint-codemod-utils';
+type Token = {
+    tokenName: string;
+    fallbackValue: string | undefined;
+};
 export type CSSPropStyleObject = {
-    [key: string]: string | number;
+    [key: string]: string | number | Token;
 };
 /**
  * Note: Not recursive. Only handles top level key/value pairs
  */
 export declare const convertASTObjectExpressionToJSObject: (styles: ObjectExpression & Partial<Rule.NodeParentExtension>) => CSSPropStyleObject | false;
+export {};

package/dist/types-ts4.5/rules/use-primitives/utils/get-variable-usage-count.d.ts

@@ -1,5 +1,6 @@
 import type { Rule } from 'eslint';
 /**
+ * TODO: Update this logic: https://product-fabric.atlassian.net/browse/DSP-16059
  * Using Regex here because otherwise we'd need to traverse the entire AST
  * We should harden this logic as we go.
  */

package/dist/types-ts4.5/rules/use-primitives/utils/is-valid-css-properties-to-transform.d.ts

@@ -1,3 +1,4 @@
 import type { Rule } from 'eslint';
 import { SimpleCallExpression } from 'eslint-codemod-utils';
-export declare const isValidCssPropertiesToTransform: (node: SimpleCallExpression & Rule.NodeParentExtension) => boolean;
+import { RuleConfig } from '../config';
+export declare const isValidCssPropertiesToTransform: (node: SimpleCallExpression & Rule.NodeParentExtension, config: RuleConfig) => 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.19.1",
+  "version": "8.19.2",
   "author": "Atlassian Pty Ltd",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"