@atlaskit/eslint-plugin-design-system 13.2.0 → 13.4.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 13.4.0
+
+### Minor Changes
+
+- [#133012](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/133012)
+  [`767ec60923d2e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/767ec60923d2e) -
+  Adds a new eslint rule to ensure that the cx function is used properly in xcss props. This is
+  required for smooth primitives migration onto compiled styles from emotion.
+
+## 13.3.0
+
+### Minor Changes
+
+- [#131514](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/131514)
+  [`74ddca032fe0f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/74ddca032fe0f) -
+  Fixes @atlaskit/eslint-plugin-ui-styling-standard/consistent-css-prop-usage to allow aliased
+  imports, eg., import { css as css2 } from '@compiled/react'
+
 ## 13.2.0
 
 ### Minor Changes

package/README.md

@@ -81,6 +81,7 @@ module.exports = {
 | <a href="./packages/design-system/eslint-plugin/src/rules/no-unsupported-drag-and-drop-libraries/README.md">no-unsupported-drag-and-drop-libraries</a>           | Disallow importing unsupported drag and drop modules.                                                                                                                                                                                                                                                               | Yes         |         |             |
 | <a href="./packages/design-system/eslint-plugin/src/rules/prefer-primitives/README.md">prefer-primitives</a>                                                     | Increase awareness of primitive components via code hints. Strictly used for education purposes and discoverability. To enforce usage please refer to the `use-primitives` rule.                                                                                                                                    |             |         |             |
 | <a href="./packages/design-system/eslint-plugin/src/rules/use-button-group-label/README.md">use-button-group-label</a>                                           | Ensures button groups are described to assistive technology by a direct label or by another element.                                                                                                                                                                                                                | Yes         |         | Yes         |
+| <a href="./packages/design-system/eslint-plugin/src/rules/use-cx-function-in-xcss/README.md">use-cx-function-in-xcss</a>                                         | Enforces cx function use to combine styles in xcss.                                                                                                                                                                                                                                                                 | Yes         | Yes     | Yes         |
 | <a href="./packages/design-system/eslint-plugin/src/rules/use-datetime-picker-calendar-button/README.md">use-datetime-picker-calendar-button</a>                 | Encourages makers to use calendar button in Atlassian Design System's date picker and datetime picker components.                                                                                                                                                                                                   | Yes         | Yes     | Yes         |
 | <a href="./packages/design-system/eslint-plugin/src/rules/use-drawer-label/README.md">use-drawer-label</a>                                                       | Encourages to provide accessible name for Atlassian Design System Drawer component.                                                                                                                                                                                                                                 | Yes         |         | Yes         |
 | <a href="./packages/design-system/eslint-plugin/src/rules/use-heading/README.md">use-heading</a>                                                                 | Encourage the usage of heading components.                                                                                                                                                                                                                                                                          |             | Yes     | Yes         |

package/dist/cjs/presets/all-flat.codegen.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::f468eaa1b0e61e0eba404cafc58f6977>>
+ * @codegen <<SignedSource::9b616276b6c3b9db3c1d886bf8de4fc4>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = exports.default = {
@@ -44,6 +44,7 @@ var _default = exports.default = {
     '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': 'error',
     '@atlaskit/design-system/prefer-primitives': 'warn',
     '@atlaskit/design-system/use-button-group-label': 'warn',
+    '@atlaskit/design-system/use-cx-function-in-xcss': 'error',
     '@atlaskit/design-system/use-datetime-picker-calendar-button': 'warn',
     '@atlaskit/design-system/use-drawer-label': 'warn',
     '@atlaskit/design-system/use-heading': 'warn',

package/dist/cjs/presets/all.codegen.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::29cc321a798c65c8464afd9e46366540>>
+ * @codegen <<SignedSource::96ec2e315f96de68a6448317cce334ce>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = exports.default = {
@@ -43,6 +43,7 @@ var _default = exports.default = {
     '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': 'error',
     '@atlaskit/design-system/prefer-primitives': 'warn',
     '@atlaskit/design-system/use-button-group-label': 'warn',
+    '@atlaskit/design-system/use-cx-function-in-xcss': 'error',
     '@atlaskit/design-system/use-datetime-picker-calendar-button': 'warn',
     '@atlaskit/design-system/use-drawer-label': 'warn',
     '@atlaskit/design-system/use-heading': 'warn',

package/dist/cjs/presets/recommended-flat.codegen.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::76f6f7b7602ea240cbcfc6bc98a781af>>
+ * @codegen <<SignedSource::4f6ee2ae56e1c0534f0f8e3fde314cc7>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = exports.default = {
@@ -33,6 +33,7 @@ var _default = exports.default = {
     '@atlaskit/design-system/no-unsafe-style-overrides': 'warn',
     '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': 'error',
     '@atlaskit/design-system/use-button-group-label': 'warn',
+    '@atlaskit/design-system/use-cx-function-in-xcss': 'error',
     '@atlaskit/design-system/use-datetime-picker-calendar-button': 'warn',
     '@atlaskit/design-system/use-drawer-label': 'warn',
     '@atlaskit/design-system/use-heading-level-in-spotlight-card': 'warn',

package/dist/cjs/presets/recommended.codegen.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::98f3a7e3c7f8f8532248994786f11c98>>
+ * @codegen <<SignedSource::85c1f4ada9dac0f66e87e3734a36cb6b>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = exports.default = {
@@ -32,6 +32,7 @@ var _default = exports.default = {
     '@atlaskit/design-system/no-unsafe-style-overrides': 'warn',
     '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': 'error',
     '@atlaskit/design-system/use-button-group-label': 'warn',
+    '@atlaskit/design-system/use-cx-function-in-xcss': 'error',
     '@atlaskit/design-system/use-datetime-picker-calendar-button': 'warn',
     '@atlaskit/design-system/use-drawer-label': 'warn',
     '@atlaskit/design-system/use-heading-level-in-spotlight-card': 'warn',

package/dist/cjs/rules/consistent-css-prop-usage/index.js

@@ -24,9 +24,19 @@ var _getImportNodeBySource = require("../utils/get-import-node-by-source");
 var isDOMElementName = function isDOMElementName(elementName) {
   return elementName.charAt(0) !== elementName.charAt(0).toUpperCase() && elementName.charAt(0) === elementName.charAt(0).toLowerCase();
 };
-function isCssCallExpression(node, cssFunctions) {
+function isCssCallExpression(node, cssFunctions, context) {
   cssFunctions = [].concat((0, _toConsumableArray2.default)(cssFunctions), ['cssMap']);
-  return !!((0, _eslintCodemodUtils.isNodeOfType)(node, 'CallExpression') && node.callee && node.callee.type === 'Identifier' && cssFunctions.includes(node.callee.name) && node.arguments.length && node.arguments[0].type === 'ObjectExpression');
+  if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'CallExpression') || !(0, _eslintCodemodUtils.isNodeOfType)(node.callee, 'Identifier')) {
+    return false;
+  }
+  var module = (0, _getImportNodeBySource.getModuleOfIdentifier)((0, _contextCompat.getSourceCode)(context), node.callee.name);
+  if (!module) {
+    return false;
+  }
+  if (!cssFunctions.includes(module.importName)) {
+    return false;
+  }
+  return node.arguments.length > 0 && node.arguments[0].type === 'ObjectExpression';
 }
 function findSpreadProperties(node) {
   return node.properties.filter(function (property) {
@@ -161,7 +171,7 @@ var JSXExpressionLinter = /*#__PURE__*/function () {
         });
         return;
       }
-      if (identifier.parent && identifier.parent.init && !isCssCallExpression(identifier.parent.init, this.configuration.cssFunctions)) {
+      if (identifier.parent && identifier.parent.init && !isCssCallExpression(identifier.parent.init, this.configuration.cssFunctions, this.context)) {
         // When variable value is not of type css({})
         var value = identifier.parent.init;
         if (!value) {
@@ -473,7 +483,7 @@ var JSXExpressionLinter = /*#__PURE__*/function () {
               }
 
               // Don't fix CallExpressions unless they're from cssFunctions or cssMap
-              if (expression.type === 'CallExpression' && !isCssCallExpression(expression, _this3.configuration.cssFunctions)) {
+              if (expression.type === 'CallExpression' && !isCssCallExpression(expression, _this3.configuration.cssFunctions, _this3.context)) {
                 return [];
               }
               if (expression.type === 'ObjectExpression') {

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

@@ -27,6 +27,7 @@ var defaultConfig = {
 };
 var createWithConfig = exports.createWithConfig = function createWithConfig(initialConfig) {
   return function (context) {
+    // TODO: JFP-2823 - this type cast was added due to Jira's ESLint v9 migration
     var userConfig = context.options[0];
     // merge configs
     var config = {

package/dist/cjs/rules/index.codegen.js

@@ -37,6 +37,7 @@ var _noUnsafeStyleOverrides = _interopRequireDefault(require("./no-unsafe-style-
 var _noUnsupportedDragAndDropLibraries = _interopRequireDefault(require("./no-unsupported-drag-and-drop-libraries"));
 var _preferPrimitives = _interopRequireDefault(require("./prefer-primitives"));
 var _useButtonGroupLabel = _interopRequireDefault(require("./use-button-group-label"));
+var _useCxFunctionInXcss = _interopRequireDefault(require("./use-cx-function-in-xcss"));
 var _useDatetimePickerCalendarButton = _interopRequireDefault(require("./use-datetime-picker-calendar-button"));
 var _useDrawerLabel = _interopRequireDefault(require("./use-drawer-label"));
 var _useHeading = _interopRequireDefault(require("./use-heading"));
@@ -56,7 +57,7 @@ var _useTokensTypography = _interopRequireDefault(require("./use-tokens-typograp
 var _useVisuallyHidden = _interopRequireDefault(require("./use-visually-hidden"));
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::551d1887446166d5a78fc51663d43e9c>>
+ * @codegen <<SignedSource::66749852497ab0f2dc3214dd47aaf598>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -93,6 +94,7 @@ var rules = exports.rules = {
   'no-unsupported-drag-and-drop-libraries': _noUnsupportedDragAndDropLibraries.default,
   'prefer-primitives': _preferPrimitives.default,
   'use-button-group-label': _useButtonGroupLabel.default,
+  'use-cx-function-in-xcss': _useCxFunctionInXcss.default,
   'use-datetime-picker-calendar-button': _useDatetimePickerCalendarButton.default,
   'use-drawer-label': _useDrawerLabel.default,
   'use-heading': _useHeading.default,

package/dist/cjs/rules/no-custom-icons/index.js

@@ -38,6 +38,8 @@ var rule = (0, _createRule.createLintRule)({
   create: function create(context) {
     var _context$options$;
     var isIconBase = (0, _isFromImportSource.createIsFromImportSourceFor)('@atlaskit/icon', '@atlaskit/icon/base');
+
+    // TODO: JFP-2823 - this type cast was added due to Jira's ESLint v9 migration
     var _ref = (_context$options$ = context.options[0]) !== null && _context$options$ !== void 0 ? _context$options$ : {},
       _ref$centralLocation = _ref.centralLocation,
       centralLocation = _ref$centralLocation === void 0 ? '' : _ref$centralLocation,

package/dist/cjs/rules/no-deprecated-apis/index.js

@@ -73,7 +73,9 @@ var rule = (0, _createRule.createLintRule)({
     var _context$options$;
     // Get the rule configuration specified otherwise use default config.
     // A bit confusing as it seems that the default options have precedence over the user specified options.
-    var deprecatedConfig = ((_context$options$ = context.options[0]) === null || _context$options$ === void 0 ? void 0 : _context$options$.deprecatedConfig) || (0, _getDeprecatedConfig.getConfig)('jsxAttributes');
+    var deprecatedConfig =
+    // TODO: JFP-2823 - this type cast was added due to Jira's ESLint v9 migration
+    ((_context$options$ = context.options[0]) === null || _context$options$ === void 0 ? void 0 : _context$options$.deprecatedConfig) || (0, _getDeprecatedConfig.getConfig)('jsxAttributes');
     return {
       // find JSX attribute - find name of attribute - get source and find relevant identifiers.
       JSXAttribute: function JSXAttribute(node) {

package/dist/cjs/rules/no-deprecated-imports/checks.js

@@ -38,7 +38,9 @@ var createChecks = exports.createChecks = function createChecks(context) {
       type = _ref.type,
       node = _ref.node,
       importNames = _ref.importNames;
-    var restrictedPathMessages = ((_context$options$ = context.options[0]) === null || _context$options$ === void 0 ? void 0 : _context$options$.deprecatedConfig) || (0, _getDeprecatedConfig.getConfig)('imports');
+    var restrictedPathMessages =
+    // TODO: JFP-2823 - this type cast was added due to Jira's ESLint v9 migration
+    ((_context$options$ = context.options[0]) === null || _context$options$ === void 0 ? void 0 : _context$options$.deprecatedConfig) || (0, _getDeprecatedConfig.getConfig)('imports');
     if (!(0, _types.isDeprecatedImportConfig)(restrictedPathMessages)) {
       throw new Error('Config is invalid for deprecated imports');
     }

package/dist/cjs/rules/no-legacy-icons/helpers.js

@@ -321,7 +321,9 @@ var getLiteralStringValue = function getLiteralStringValue(value) {
   }
   return;
 };
-var createHelpers = exports.createHelpers = function createHelpers(context) {
+var createHelpers = exports.createHelpers = function createHelpers(ctx) {
+  // TODO: JFP-2823 - this type cast was added due to Jira's ESLint v9 migration
+  var context = ctx;
   /**
    * Extracts the token name of a token() call from a JSXExpressionContainer
    * @param value The JSXExpressionContainer to extract the token call from

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

@@ -54,6 +54,7 @@ var rule = (0, _createRule.createLintRule)({
     }]
   },
   create: function create(context) {
+    // TODO: JFP-2823 - this type cast was added due to Jira's ESLint v9 migration
     var config = _objectSpread({}, context.options[0]);
     if (!config.fallbackUsage) {
       config.fallbackUsage = config.shouldEnforceFallbacks ? 'forced' : 'none';

package/dist/cjs/rules/use-cx-function-in-xcss/index.js

@@ -0,0 +1,97 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+var _createRule = require("../utils/create-rule");
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+var rule = (0, _createRule.createLintRule)({
+  meta: {
+    name: 'use-cx-function-in-xcss',
+    fixable: 'code',
+    hasSuggestions: true,
+    type: 'problem',
+    docs: {
+      description: 'Enforces cx function use to combine styles in xcss.',
+      recommended: true,
+      severity: 'error'
+    },
+    messages: {
+      useCxFunc: "Use the cx function when combining styles in the xcss prop."
+    }
+  },
+  create: function create(context) {
+    var importStatement = null;
+    var primitiveNames = new Set();
+    return {
+      "ImportDeclaration[source.value='@atlaskit/css']": function ImportDeclarationSourceValueAtlaskit_css(node) {
+        importStatement = {
+          node: node
+        };
+        var _iterator = _createForOfIteratorHelper(node.specifiers),
+          _step;
+        try {
+          for (_iterator.s(); !(_step = _iterator.n()).done;) {
+            var specifier = _step.value;
+            if (specifier.type === 'ImportSpecifier' && specifier.imported.name === 'cx') {
+              importStatement.cxFuncLocalName = specifier.local.name;
+            }
+          }
+        } catch (err) {
+          _iterator.e(err);
+        } finally {
+          _iterator.f();
+        }
+      },
+      'ImportDeclaration[source.value="@atlaskit/primitives/compiled"]': function ImportDeclarationSourceValueAtlaskit_primitives_compiled(node) {
+        var _iterator2 = _createForOfIteratorHelper(node.specifiers),
+          _step2;
+        try {
+          for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+            var specifier = _step2.value;
+            primitiveNames.add(specifier.local.name);
+          }
+        } catch (err) {
+          _iterator2.e(err);
+        } finally {
+          _iterator2.f();
+        }
+      },
+      'JSXAttribute > JSXIdentifier[name=/[xX]css$/]': function JSXAttribute__JSXIdentifierName_XXCss$_(node) {
+        var xcssValue = node.parent && (0, _eslintCodemodUtils.isNodeOfType)(node.parent, 'JSXAttribute') && node.parent.value && (0, _eslintCodemodUtils.isNodeOfType)(node.parent.value, 'JSXExpressionContainer') ? node.parent.value : undefined;
+        if (!xcssValue) {
+          return;
+        }
+        var jsxElementName = node.parent.parent && (0, _eslintCodemodUtils.isNodeOfType)(node.parent.parent, 'JSXOpeningElement') && node.parent.parent.name && (0, _eslintCodemodUtils.isNodeOfType)(node.parent.parent.name, 'JSXIdentifier') ? node.parent.parent.name.name : undefined;
+        if (!jsxElementName) {
+          return;
+        }
+        // check if this JSX element is from the primitives entry point and if prop value is an array
+        if (primitiveNames.has(jsxElementName) && xcssValue.expression.type === 'ArrayExpression') {
+          context.report({
+            node: xcssValue,
+            messageId: 'useCxFunc',
+            fix: function fix(fixer) {
+              var fixes = [];
+              var sourceCode = context.sourceCode;
+              var styles = sourceCode.getText(xcssValue.expression);
+              fixes.push(fixer.replaceText(xcssValue, (importStatement && importStatement.cxFuncLocalName ? "{".concat(importStatement.cxFuncLocalName) : "{cx") + "(".concat(styles.replace(/^\[/, '').replace(/\]$/, ''), ")}")));
+              if (!importStatement) {
+                fixes.push(fixer.insertTextBeforeRange([0, 0], "import { cx } from '@atlaskit/css';\n"));
+              } else if (!importStatement.cxFuncLocalName) {
+                var importText = sourceCode.getText(importStatement.node);
+                fixes.push(fixer.replaceText(importStatement.node, importText.includes('{') ? importText.replace(/import(.*) {\s?/, "import$1 { cx, ") : importText.replace(/ from /, ", { cx } from ")));
+              }
+              return fixes;
+            }
+          });
+        }
+      }
+    };
+  }
+});
+var _default = exports.default = rule;

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

@@ -37,6 +37,7 @@ var rule = (0, _createRule.createLintRule)({
     }
   },
   create: function create(context) {
+    // TODO: JFP-2823 - this type cast was added due to Jira's ESLint v9 migration
     var config = (0, _config.getConfig)(context.options[0]);
     return (0, _errorBoundary.errorBoundary)({
       // transforms <h1>...</h1> usages

package/dist/cjs/rules/use-latest-xcss-syntax-typography/index.js

@@ -46,6 +46,7 @@ var rule = (0, _createRule.createLintRule)({
     }
   },
   create: function create(context) {
+    // TODO: JFP-2823 - this type cast was added due to Jira's ESLint v9 migration
     var config = (0, _config.getConfig)(context.options[0]);
     return (0, _errorBoundary.errorBoundary)({
       'CallExpression[callee.name="xcss"] ObjectExpression > Property > Identifier[name=/(fontSize|lineHeight|fontWeight|letterSpacing)/]': function CallExpressionCalleeNameXcss_ObjectExpression__Property__IdentifierName_FontSizeLineHeightFontWeightLetterSpacing_(node) {

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

@@ -38,6 +38,7 @@ var rule = (0, _createRule.createLintRule)({
     }
   },
   create: function create(context) {
+    // TODO: JFP-2823 - this type cast was added due to Jira's ESLint v9 migration
     var config = (0, _config.getConfig)(context.options[0]);
     return {
       // transforms styled.<html>(...) usages

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

@@ -53,6 +53,7 @@ var rule = (0, _createRule.createLintRule)({
     }
   },
   create: function create(context) {
+    // TODO: JFP-2823 - this type cast was added due to Jira's ESLint v9 migration
     var config = (0, _config.getConfig)(context.options[0]);
     return (0, _errorBoundary.errorBoundary)({
       'JSXElement[openingElement.name.name=span]': function JSXElementOpeningElementNameNameSpan(node) {

package/dist/cjs/rules/use-tokens-typography/index.js

@@ -14,6 +14,7 @@ var _restrictedCapitalisation = require("./transformers/restricted-capitalisatio
 var _styleObject = require("./transformers/style-object");
 var _untokenizedProperties = require("./transformers/untokenized-properties");
 var create = function create(context) {
+  // TODO: JFP-2823 - this type cast was added due to Jira's ESLint v9 migration
   var config = (0, _config.getConfig)(context.options[0]);
   return (0, _errorBoundary.errorBoundary)({
     // const styles = css({ fontSize: '14px', ... }), styled.div({ fontSize: 14, ... })

package/dist/es2019/presets/all-flat.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::f468eaa1b0e61e0eba404cafc58f6977>>
+ * @codegen <<SignedSource::9b616276b6c3b9db3c1d886bf8de4fc4>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -39,6 +39,7 @@ export default {
     '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': 'error',
     '@atlaskit/design-system/prefer-primitives': 'warn',
     '@atlaskit/design-system/use-button-group-label': 'warn',
+    '@atlaskit/design-system/use-cx-function-in-xcss': 'error',
     '@atlaskit/design-system/use-datetime-picker-calendar-button': 'warn',
     '@atlaskit/design-system/use-drawer-label': 'warn',
     '@atlaskit/design-system/use-heading': 'warn',

package/dist/es2019/presets/all.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::29cc321a798c65c8464afd9e46366540>>
+ * @codegen <<SignedSource::96ec2e315f96de68a6448317cce334ce>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -38,6 +38,7 @@ export default {
     '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': 'error',
     '@atlaskit/design-system/prefer-primitives': 'warn',
     '@atlaskit/design-system/use-button-group-label': 'warn',
+    '@atlaskit/design-system/use-cx-function-in-xcss': 'error',
     '@atlaskit/design-system/use-datetime-picker-calendar-button': 'warn',
     '@atlaskit/design-system/use-drawer-label': 'warn',
     '@atlaskit/design-system/use-heading': 'warn',

package/dist/es2019/presets/recommended-flat.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::76f6f7b7602ea240cbcfc6bc98a781af>>
+ * @codegen <<SignedSource::4f6ee2ae56e1c0534f0f8e3fde314cc7>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -28,6 +28,7 @@ export default {
     '@atlaskit/design-system/no-unsafe-style-overrides': 'warn',
     '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': 'error',
     '@atlaskit/design-system/use-button-group-label': 'warn',
+    '@atlaskit/design-system/use-cx-function-in-xcss': 'error',
     '@atlaskit/design-system/use-datetime-picker-calendar-button': 'warn',
     '@atlaskit/design-system/use-drawer-label': 'warn',
     '@atlaskit/design-system/use-heading-level-in-spotlight-card': 'warn',

package/dist/es2019/presets/recommended.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::98f3a7e3c7f8f8532248994786f11c98>>
+ * @codegen <<SignedSource::85c1f4ada9dac0f66e87e3734a36cb6b>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -27,6 +27,7 @@ export default {
     '@atlaskit/design-system/no-unsafe-style-overrides': 'warn',
     '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': 'error',
     '@atlaskit/design-system/use-button-group-label': 'warn',
+    '@atlaskit/design-system/use-cx-function-in-xcss': 'error',
     '@atlaskit/design-system/use-datetime-picker-calendar-button': 'warn',
     '@atlaskit/design-system/use-drawer-label': 'warn',
     '@atlaskit/design-system/use-heading-level-in-spotlight-card': 'warn',

package/dist/es2019/rules/consistent-css-prop-usage/index.js

@@ -11,9 +11,19 @@ import { createLintRule } from '../utils/create-rule';
 import { getFirstSupportedImport } from '../utils/get-first-supported-import';
 import { getModuleOfIdentifier } from '../utils/get-import-node-by-source';
 const isDOMElementName = elementName => elementName.charAt(0) !== elementName.charAt(0).toUpperCase() && elementName.charAt(0) === elementName.charAt(0).toLowerCase();
-function isCssCallExpression(node, cssFunctions) {
+function isCssCallExpression(node, cssFunctions, context) {
   cssFunctions = [...cssFunctions, 'cssMap'];
-  return !!(isNodeOfType(node, 'CallExpression') && node.callee && node.callee.type === 'Identifier' && cssFunctions.includes(node.callee.name) && node.arguments.length && node.arguments[0].type === 'ObjectExpression');
+  if (!isNodeOfType(node, 'CallExpression') || !isNodeOfType(node.callee, 'Identifier')) {
+    return false;
+  }
+  const module = getModuleOfIdentifier(getSourceCode(context), node.callee.name);
+  if (!module) {
+    return false;
+  }
+  if (!cssFunctions.includes(module.importName)) {
+    return false;
+  }
+  return node.arguments.length > 0 && node.arguments[0].type === 'ObjectExpression';
 }
 function findSpreadProperties(node) {
   return node.properties.filter(property => property.type === 'SpreadElement' ||
@@ -135,7 +145,7 @@ class JSXExpressionLinter {
       });
       return;
     }
-    if (identifier.parent && identifier.parent.init && !isCssCallExpression(identifier.parent.init, this.configuration.cssFunctions)) {
+    if (identifier.parent && identifier.parent.init && !isCssCallExpression(identifier.parent.init, this.configuration.cssFunctions, this.context)) {
       // When variable value is not of type css({})
       const value = identifier.parent.init;
       if (!value) {
@@ -429,7 +439,7 @@ class JSXExpressionLinter {
             }
 
             // Don't fix CallExpressions unless they're from cssFunctions or cssMap
-            if (expression.type === 'CallExpression' && !isCssCallExpression(expression, this.configuration.cssFunctions)) {
+            if (expression.type === 'CallExpression' && !isCssCallExpression(expression, this.configuration.cssFunctions, this.context)) {
               return [];
             }
             if (expression.type === 'ObjectExpression') {

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

@@ -18,6 +18,7 @@ const defaultConfig = {
   failSilently: false
 };
 const createWithConfig = initialConfig => context => {
+  // TODO: JFP-2823 - this type cast was added due to Jira's ESLint v9 migration
   const userConfig = context.options[0];
   // merge configs
   const config = {

package/dist/es2019/rules/index.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::551d1887446166d5a78fc51663d43e9c>>
+ * @codegen <<SignedSource::66749852497ab0f2dc3214dd47aaf598>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import consistentCssPropUsage from './consistent-css-prop-usage';
@@ -35,6 +35,7 @@ import noUnsafeStyleOverrides from './no-unsafe-style-overrides';
 import noUnsupportedDragAndDropLibraries from './no-unsupported-drag-and-drop-libraries';
 import preferPrimitives from './prefer-primitives';
 import useButtonGroupLabel from './use-button-group-label';
+import useCxFunctionInXcss from './use-cx-function-in-xcss';
 import useDatetimePickerCalendarButton from './use-datetime-picker-calendar-button';
 import useDrawerLabel from './use-drawer-label';
 import useHeading from './use-heading';
@@ -85,6 +86,7 @@ export const rules = {
   'no-unsupported-drag-and-drop-libraries': noUnsupportedDragAndDropLibraries,
   'prefer-primitives': preferPrimitives,
   'use-button-group-label': useButtonGroupLabel,
+  'use-cx-function-in-xcss': useCxFunctionInXcss,
   'use-datetime-picker-calendar-button': useDatetimePickerCalendarButton,
   'use-drawer-label': useDrawerLabel,
   'use-heading': useHeading,

package/dist/es2019/rules/no-custom-icons/index.js

@@ -33,6 +33,8 @@ const rule = createLintRule({
   create(context) {
     var _context$options$;
     const isIconBase = createIsFromImportSourceFor('@atlaskit/icon', '@atlaskit/icon/base');
+
+    // TODO: JFP-2823 - this type cast was added due to Jira's ESLint v9 migration
     const {
       centralLocation = '',
       failSilently = false

package/dist/es2019/rules/no-deprecated-apis/index.js

@@ -67,7 +67,9 @@ const rule = createLintRule({
     var _context$options$;
     // Get the rule configuration specified otherwise use default config.
     // A bit confusing as it seems that the default options have precedence over the user specified options.
-    const deprecatedConfig = ((_context$options$ = context.options[0]) === null || _context$options$ === void 0 ? void 0 : _context$options$.deprecatedConfig) || getConfig('jsxAttributes');
+    const deprecatedConfig =
+    // TODO: JFP-2823 - this type cast was added due to Jira's ESLint v9 migration
+    ((_context$options$ = context.options[0]) === null || _context$options$ === void 0 ? void 0 : _context$options$.deprecatedConfig) || getConfig('jsxAttributes');
     return {
       // find JSX attribute - find name of attribute - get source and find relevant identifiers.
       JSXAttribute(node) {

package/dist/es2019/rules/no-deprecated-imports/checks.js

@@ -30,7 +30,9 @@ export const createChecks = context => {
     importNames
   }) {
     var _context$options$;
-    const restrictedPathMessages = ((_context$options$ = context.options[0]) === null || _context$options$ === void 0 ? void 0 : _context$options$.deprecatedConfig) || getConfig('imports');
+    const restrictedPathMessages =
+    // TODO: JFP-2823 - this type cast was added due to Jira's ESLint v9 migration
+    ((_context$options$ = context.options[0]) === null || _context$options$ === void 0 ? void 0 : _context$options$.deprecatedConfig) || getConfig('imports');
     if (!isDeprecatedImportConfig(restrictedPathMessages)) {
       throw new Error('Config is invalid for deprecated imports');
     }

package/dist/es2019/rules/no-legacy-icons/helpers.js

@@ -300,7 +300,9 @@ const getLiteralStringValue = value => {
   }
   return;
 };
-export const createHelpers = context => {
+export const createHelpers = ctx => {
+  // TODO: JFP-2823 - this type cast was added due to Jira's ESLint v9 migration
+  const context = ctx;
   /**
    * Extracts the token name of a token() call from a JSXExpressionContainer
    * @param value The JSXExpressionContainer to extract the token call from

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

@@ -68,6 +68,7 @@ token('color.background.blanket');
     }]
   },
   create(context) {
+    // TODO: JFP-2823 - this type cast was added due to Jira's ESLint v9 migration
     const config = {
       ...context.options[0]
     };