@atlaskit/eslint-plugin-design-system 13.3.0 → 13.4.1

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 13.4.1
+
+### Patch Changes
+
+- [#136299](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/136299)
+  [`4da98e435c8da`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4da98e435c8da) -
+  Add better logic to `use-modal-dialog-close-button` rule.
+
+## 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

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/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-modal-dialog-close-button/index.js

@@ -72,7 +72,7 @@ var rule = (0, _createRule.createLintRule)({
           return;
         }
         var name = node.openingElement.name.name;
-        if (name !== defaultImportLocalName) {
+        if (![defaultImportLocalName, modalHeaderLocalName].includes(name)) {
           return;
         }
         var modalHeaderNode = null;
@@ -136,13 +136,31 @@ var rule = (0, _createRule.createLintRule)({
             _iterator.f();
           }
         };
-        searchNode(node);
+        if (name === defaultImportLocalName) {
+          searchNode(node);
+
+          // If there is a close button, skip the rest, as this satisfies the
+          // rule. If there is a modal header, it will be recognized in later
+          // scans, so don't add duplicate errors
+          if (closeButtonNode || modalHeaderNode) {
+            return;
+            // No close button or modal header exists
+          } else {
+            return context.report({
+              node: node,
+              messageId: 'noCloseButtonExists'
+            });
+          }
+        } else if (name === modalHeaderLocalName) {
+          modalHeaderNode = node;
+          searchNode(node);
+
+          // If there is a close button, skip the rest, as this satisfies the rule.
+          if (closeButtonNode) {
+            return;
+          }
 
-        // If there is a close button, skip the rest, as this satisfies the rule.
-        if (closeButtonNode) {
-          return;
           // No close button exists, so check the modal header
-        } else if (modalHeaderNode !== null) {
           var prop = _jsxElement.JSXElementHelper.getAttributeByName(modalHeaderNode, PROP_NAME);
 
           // If the prop exists
@@ -175,12 +193,6 @@ var rule = (0, _createRule.createLintRule)({
               }]
             });
           }
-          // No close button or modal header exists
-        } else {
-          return context.report({
-            node: node,
-            messageId: 'noCloseButtonExists'
-          });
         }
       }
     };

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/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]
     };

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

@@ -0,0 +1,70 @@
+import { isNodeOfType } from 'eslint-codemod-utils';
+import { createLintRule } from '../utils/create-rule';
+const rule = 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(context) {
+    let importStatement = null;
+    const primitiveNames = new Set();
+    return {
+      "ImportDeclaration[source.value='@atlaskit/css']"(node) {
+        importStatement = {
+          node
+        };
+        for (const specifier of node.specifiers) {
+          if (specifier.type === 'ImportSpecifier' && specifier.imported.name === 'cx') {
+            importStatement.cxFuncLocalName = specifier.local.name;
+          }
+        }
+      },
+      'ImportDeclaration[source.value="@atlaskit/primitives/compiled"]'(node) {
+        for (const specifier of node.specifiers) {
+          primitiveNames.add(specifier.local.name);
+        }
+      },
+      'JSXAttribute > JSXIdentifier[name=/[xX]css$/]'(node) {
+        const xcssValue = node.parent && isNodeOfType(node.parent, 'JSXAttribute') && node.parent.value && isNodeOfType(node.parent.value, 'JSXExpressionContainer') ? node.parent.value : undefined;
+        if (!xcssValue) {
+          return;
+        }
+        const jsxElementName = node.parent.parent && isNodeOfType(node.parent.parent, 'JSXOpeningElement') && node.parent.parent.name && 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: fixer => {
+              const fixes = [];
+              const sourceCode = context.sourceCode;
+              const styles = sourceCode.getText(xcssValue.expression);
+              fixes.push(fixer.replaceText(xcssValue, (importStatement && importStatement.cxFuncLocalName ? `{${importStatement.cxFuncLocalName}` : `{cx`) + `(${styles.replace(/^\[/, '').replace(/\]$/, '')})}`));
+              if (!importStatement) {
+                fixes.push(fixer.insertTextBeforeRange([0, 0], `import { cx } from '@atlaskit/css';\n`));
+              } else if (!importStatement.cxFuncLocalName) {
+                const 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;
+            }
+          });
+        }
+      }
+    };
+  }
+});
+export default rule;