npm - @atlaskit/eslint-plugin-design-system - Versions diffs - 8.19.0 → 8.19.2 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (31) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,17 @@
 # @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
+- [#65221](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/65221) [`a2ba22904ca0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a2ba22904ca0) - Allow for @atlaskit/design-system/use-primitives lint rule to take a configuration object.
 ## 8.19.0
 ### Minor Changes

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

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getConfig = void 0;
+var defaults = {
+  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
+  // start with an empty object, then merge in the defaults, then merge in overrides.
+  // The empty object is returned, as well as modified in place
+  return Object.assign({}, defaults, overrides);
+};

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

@@ -1,19 +1,15 @@
 "use strict";
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 var _eslintCodemodUtils = require("eslint-codemod-utils");
-var _assign = _interopRequireDefault(require("lodash/assign"));
 var _createRule = require("../utils/create-rule");
+var _config = require("./config");
 var _transformers = require("./transformers");
 var _utils = require("./utils");
 var boxDocsUrl = 'https://atlassian.design/components/primitives/box';
-var defaultConfig = {
-  preview: false
-};
 var rule = (0, _createRule.createLintRule)({
   meta: {
     name: 'use-primitives',
@@ -30,18 +26,18 @@ var rule = (0, _createRule.createLintRule)({
     }
   },
   create: function create(context) {
-    var mergedConfig = (0, _assign.default)({}, defaultConfig, context.options[0]);
+    var config = (0, _config.getConfig)(context.options[0]);
     return {
       // transforms styled.<html>(...) usages
       CallExpression: function CallExpression(node) {
-        if (!mergedConfig.preview) {
+        if (!config.patterns.includes('compiled-styled-object')) {
           return;
         }
         if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'CallExpression')) {
           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());
@@ -64,6 +60,9 @@ var rule = (0, _createRule.createLintRule)({
       },
       // transforms <div css={...}> usages
       JSXOpeningElement: function JSXOpeningElement(node) {
+        if (!config.patterns.includes('compiled-css-function')) {
+          return false;
+        }
         if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'JSXOpeningElement')) {
           return;
         }
@@ -73,7 +72,7 @@ var rule = (0, _createRule.createLintRule)({
         if (!(0, _eslintCodemodUtils.isNodeOfType)(node.parent, 'JSXElement')) {
           return;
         }
-        var suggestBox = shouldSuggestBox(node.parent, context);
+        var suggestBox = shouldSuggestBox(node.parent, context, config);
         if (suggestBox) {
           context.report({
             node: node,
@@ -91,7 +90,7 @@ var rule = (0, _createRule.createLintRule)({
     };
   }
 });
-var shouldSuggestBox = function shouldSuggestBox(node, context
+var shouldSuggestBox = function shouldSuggestBox(node, context, config
 // scope: Scope.Scope,
 ) {
   if (!node) {
@@ -138,6 +137,6 @@ var shouldSuggestBox = function shouldSuggestBox(node, context
   if (!cssVariableValue || !(0, _utils.isFunctionNamed)(cssVariableValue, '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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

@@ -0,0 +1,9 @@
+const defaults = {
+  patterns: ['compiled-css-function']
+};
+export const getConfig = overrides => {
+  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
+  // start with an empty object, then merge in the defaults, then merge in overrides.
+  // The empty object is returned, as well as modified in place
+  return Object.assign({}, defaults, overrides);
+};

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

@@ -1,12 +1,9 @@
 import { getIdentifierInParentScope, isNodeOfType } from 'eslint-codemod-utils';
-import assign from 'lodash/assign';
 import { createLintRule } from '../utils/create-rule';
+import { getConfig } from './config';
 import { jsxElementToBoxTransformer, styledComponentToPrimitive } from './transformers';
 import { containsOnlySupportedAttrs, findValidJsxUsageToTransform, findValidStyledComponentCall, getAttributeValueIdentifier, getJSXAttributeByName, getVariableDefinitionValue, getVariableUsagesCount, isFunctionNamed, isValidCssPropertiesToTransform, isValidTagName } from './utils';
 const boxDocsUrl = 'https://atlassian.design/components/primitives/box';
-const defaultConfig = {
-  preview: false
-};
 const rule = createLintRule({
   meta: {
     name: 'use-primitives',
@@ -23,18 +20,18 @@ const rule = createLintRule({
     }
   },
   create(context) {
-    const mergedConfig = assign({}, defaultConfig, context.options[0]);
+    const config = getConfig(context.options[0]);
     return {
       // transforms styled.<html>(...) usages
       CallExpression(node) {
-        if (!mergedConfig.preview) {
+        if (!config.patterns.includes('compiled-styled-object')) {
           return;
         }
         if (!isNodeOfType(node, 'CallExpression')) {
           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());
@@ -57,6 +54,9 @@ const rule = createLintRule({
       },
       // transforms <div css={...}> usages
       JSXOpeningElement(node) {
+        if (!config.patterns.includes('compiled-css-function')) {
+          return false;
+        }
         if (!isNodeOfType(node, 'JSXOpeningElement')) {
           return;
         }
@@ -66,7 +66,7 @@ const rule = createLintRule({
         if (!isNodeOfType(node.parent, 'JSXElement')) {
           return;
         }
-        const suggestBox = shouldSuggestBox(node.parent, context);
+        const suggestBox = shouldSuggestBox(node.parent, context, config);
         if (suggestBox) {
           context.report({
             node: node,
@@ -84,7 +84,7 @@ const rule = createLintRule({
     };
   }
 });
-const shouldSuggestBox = (node, context
+const shouldSuggestBox = (node, context, config
 // scope: Scope.Scope,
 ) => {
   if (!node) {
@@ -131,6 +131,6 @@ const shouldSuggestBox = (node, context
   if (!cssVariableValue || !isFunctionNamed(cssVariableValue, '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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

@@ -0,0 +1,9 @@
+var defaults = {
+  patterns: ['compiled-css-function']
+};
+export var getConfig = function getConfig(overrides) {
+  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
+  // start with an empty object, then merge in the defaults, then merge in overrides.
+  // The empty object is returned, as well as modified in place
+  return Object.assign({}, defaults, overrides);
+};

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

@@ -1,12 +1,9 @@
 import { getIdentifierInParentScope, isNodeOfType } from 'eslint-codemod-utils';
-import assign from 'lodash/assign';
 import { createLintRule } from '../utils/create-rule';
+import { getConfig } from './config';
 import { jsxElementToBoxTransformer, styledComponentToPrimitive } from './transformers';
 import { containsOnlySupportedAttrs, findValidJsxUsageToTransform, findValidStyledComponentCall, getAttributeValueIdentifier, getJSXAttributeByName, getVariableDefinitionValue, getVariableUsagesCount, isFunctionNamed, isValidCssPropertiesToTransform, isValidTagName } from './utils';
 var boxDocsUrl = 'https://atlassian.design/components/primitives/box';
-var defaultConfig = {
-  preview: false
-};
 var rule = createLintRule({
   meta: {
     name: 'use-primitives',
@@ -23,18 +20,18 @@ var rule = createLintRule({
     }
   },
   create: function create(context) {
-    var mergedConfig = assign({}, defaultConfig, context.options[0]);
+    var config = getConfig(context.options[0]);
     return {
       // transforms styled.<html>(...) usages
       CallExpression: function CallExpression(node) {
-        if (!mergedConfig.preview) {
+        if (!config.patterns.includes('compiled-styled-object')) {
           return;
         }
         if (!isNodeOfType(node, 'CallExpression')) {
           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());
@@ -57,6 +54,9 @@ var rule = createLintRule({
       },
       // transforms <div css={...}> usages
       JSXOpeningElement: function JSXOpeningElement(node) {
+        if (!config.patterns.includes('compiled-css-function')) {
+          return false;
+        }
         if (!isNodeOfType(node, 'JSXOpeningElement')) {
           return;
         }
@@ -66,7 +66,7 @@ var rule = createLintRule({
         if (!isNodeOfType(node.parent, 'JSXElement')) {
           return;
         }
-        var suggestBox = shouldSuggestBox(node.parent, context);
+        var suggestBox = shouldSuggestBox(node.parent, context, config);
         if (suggestBox) {
           context.report({
             node: node,
@@ -84,7 +84,7 @@ var rule = createLintRule({
     };
   }
 });
-var shouldSuggestBox = function shouldSuggestBox(node, context
+var shouldSuggestBox = function shouldSuggestBox(node, context, config
 // scope: Scope.Scope,
 ) {
   if (!node) {
@@ -131,6 +131,6 @@ var shouldSuggestBox = function shouldSuggestBox(node, context
   if (!cssVariableValue || !isFunctionNamed(cssVariableValue, '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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

@@ -0,0 +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: 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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

@@ -0,0 +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: 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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

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