@atlaskit/eslint-plugin-platform 2.9.1 → 2.9.2

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/eslint-plugin-platform
 
+## 2.9.2
+
+### Patch Changes
+
+- [`48fa19b8ba41a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/48fa19b8ba41a) -
+  Add `no-xcss-in-cx` ESLint rule to prevent `xcss()` from `@atlaskit/primitives` being called
+  inline inside `cx()` in an `xcss` prop. Calling `xcss()` inline produces a StyleRule opaque object
+  rather than a Compiled atomic class string, which causes runtime errors. The rule is import-aware
+  and recurses into logical (`&&`) and conditional (`?:`) expressions.
+
 ## 2.9.1
 
 ### Patch Changes

package/dist/cjs/index.js

@@ -32,6 +32,7 @@ var _useRecommendedUtils = _interopRequireDefault(require("./rules/feature-gatin
 var _validGateName = _interopRequireDefault(require("./rules/feature-gating/valid-gate-name"));
 var _expandBackgroundShorthand = _interopRequireDefault(require("./rules/compiled/expand-background-shorthand"));
 var _expandSpacingShorthand = _interopRequireDefault(require("./rules/compiled/expand-spacing-shorthand"));
+var _noCssPropInObjectSpread = _interopRequireDefault(require("./rules/compiled/no-css-prop-in-object-spread"));
 var _noSparseCheckout = _interopRequireDefault(require("./rules/no-sparse-checkout"));
 var _noDirectDocumentUsage = _interopRequireDefault(require("./rules/no-direct-document-usage"));
 var _noSetImmediate = _interopRequireDefault(require("./rules/no-set-immediate"));
@@ -44,6 +45,7 @@ var _noRelativeBarrelFileImports = _interopRequireDefault(require("./rules/impor
 var _noConversationAssistantBarrelImports = _interopRequireDefault(require("./rules/import/no-conversation-assistant-barrel-imports"));
 var _visitExampleTypeImportRequired = _interopRequireDefault(require("./rules/visit-example-type-import-required"));
 var _ensureUseSyncExternalStoreServerSnapshot = _interopRequireDefault(require("./rules/ensure-use-sync-external-store-server-snapshot"));
+var _noXcssInCx = _interopRequireDefault(require("./rules/no-xcss-in-cx"));
 var _nodePath = require("node:path");
 var _nodeFs = require("node:fs");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -76,6 +78,7 @@ var rules = exports.rules = {
   'expand-border-shorthand': _expandBorderShorthand.default,
   'expand-background-shorthand': _expandBackgroundShorthand.default,
   'expand-spacing-shorthand': _expandSpacingShorthand.default,
+  'no-css-prop-in-object-spread': _noCssPropInObjectSpread.default,
   'no-duplicate-dependencies': _noDuplicateDependencies.default,
   'no-invalid-feature-flag-usage': _noInvalidFeatureFlagUsage.default,
   'no-pre-post-install-scripts': _noPrePostInstalls.default,
@@ -102,6 +105,7 @@ var rules = exports.rules = {
   'no-relative-barrel-file-imports': _noRelativeBarrelFileImports.default,
   'no-conversation-assistant-barrel-imports': _noConversationAssistantBarrelImports.default,
   'visit-example-type-import-required': _visitExampleTypeImportRequired.default,
+  'no-xcss-in-cx': _noXcssInCx.default,
   'ensure-use-sync-external-store-server-snapshot': _ensureUseSyncExternalStoreServerSnapshot.default
 };
 var commonConfig = {
@@ -114,10 +118,12 @@ var commonConfig = {
   '@atlaskit/platform/no-module-level-eval-nav4': 'error',
   '@atlaskit/platform/no-direct-document-usage': 'warn',
   '@atlaskit/platform/no-set-immediate': 'error',
+  '@atlaskit/platform/no-xcss-in-cx': 'error',
   // Compiled: rules that are not included via `@compiled/recommended
   '@atlaskit/platform/expand-border-shorthand': 'error',
   '@atlaskit/platform/expand-background-shorthand': 'error',
   '@atlaskit/platform/expand-spacing-shorthand': 'error',
+  '@atlaskit/platform/no-css-prop-in-object-spread': 'error',
   '@compiled/jsx-pragma': ['error', {
     importSources: ['@atlaskit/css'],
     onlyRunIfImportingCompiled: true,
@@ -159,7 +165,6 @@ var plugin = exports.plugin = {
         get '@atlaskit/platform'() {
           return plugin;
         },
-        // @ts-expect-error there's an issue with the types for @compiled/eslint-plugin ('no-css-prop-without-css-function' specifically)
         '@compiled': {
           meta: _eslintPlugin.default.meta,
           rules: _eslintPlugin.default.rules
@@ -176,7 +181,6 @@ var plugin = exports.plugin = {
         get '@atlaskit/platform'() {
           return plugin;
         },
-        // @ts-expect-error there's an issue with the types for @compiled/eslint-plugin ('no-css-prop-without-css-function' specifically)
         '@compiled': {
           meta: _eslintPlugin.default.meta,
           rules: _eslintPlugin.default.rules

package/dist/cjs/rules/compiled/no-css-prop-in-object-spread/index.js

@@ -0,0 +1,162 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.noCssPropInObjectSpread = exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _contextCompat = require("../../util/context-compat");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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; }
+/**
+ * Returns the `css` Property node from an ObjectExpression, or null if not found.
+ */
+function getCssProperty(objectExpression) {
+  var _iterator = _createForOfIteratorHelper(objectExpression.properties),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var prop = _step.value;
+      if (prop.type !== 'Property') {
+        continue;
+      }
+      var key = prop.key;
+      if (key.type === 'Identifier' && key.name === 'css' || key.type === 'Literal' && key.value === 'css') {
+        return prop;
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return null;
+}
+var noCssPropInObjectSpread = exports.noCssPropInObjectSpread = {
+  meta: {
+    docs: {
+      url: 'https://bitbucket.org/atlassian/atlassian-frontend-monorepo/src/master/platform/packages/platform/eslint-plugin/src/rules/compiled/no-css-prop-in-object-spread/',
+      description: 'Disallows `css` property inside objects spread into JSX — the Compiled JSX pragma ignores it'
+    },
+    fixable: 'code',
+    messages: {
+      noCssPropInObjectSpread: 'The `css` property inside an object spread into JSX is a no-op. The Compiled JSX pragma only processes `css` as a direct JSX attribute. Move `css` out of the spread: <El css={...} />'
+    },
+    type: 'problem'
+  },
+  create: function create(context) {
+    return {
+      JSXSpreadAttribute: function JSXSpreadAttribute(node) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        var spreadNode = node;
+        var arg = spreadNode.argument;
+
+        // Case 1: inline object literal — <div {...{ css: styles, id: 'foo' }} />
+        if (arg.type === 'ObjectExpression') {
+          var objectArg = arg;
+          var cssProp = getCssProperty(objectArg);
+          if (!cssProp) {
+            return;
+          }
+          context.report({
+            node: node,
+            messageId: 'noCssPropInObjectSpread',
+            fix: function fix(fixer) {
+              var sourceCode = (0, _contextCompat.getSourceCode)(context);
+              var cssValueText = sourceCode.getText(cssProp.value);
+              var remainingProps = objectArg.properties.filter(function (p) {
+                return p !== cssProp;
+              });
+              var directCssProp = "css={".concat(cssValueText, "}");
+              if (remainingProps.length === 0) {
+                return fixer.replaceText(node, directCssProp);
+              }
+              var remainingText = remainingProps.map(function (p) {
+                return sourceCode.getText(p);
+              }).join(', ');
+              return fixer.replaceText(node, "".concat(directCssProp, " {...{ ").concat(remainingText, " }}"));
+            }
+          });
+          return;
+        }
+
+        // Case 2: variable reference — <div {...props} />
+        if (arg.type === 'Identifier') {
+          var scope = (0, _contextCompat.getScope)(context, arg);
+          var currentScope = scope;
+          var variable = null;
+          while (currentScope) {
+            var found = currentScope.variables.find(function (v) {
+              return v.name === arg.name;
+            });
+            if (found) {
+              variable = found;
+              break;
+            }
+            currentScope = currentScope.upper;
+          }
+          if (!variable || variable.defs.length === 0) {
+            return;
+          }
+          var def = variable.defs[0];
+          if (def.type !== 'Variable' || !def.node.init || def.node.init.type !== 'ObjectExpression') {
+            return;
+          }
+          var initObject = def.node.init;
+          var _cssProp = getCssProperty(initObject);
+          if (!_cssProp) {
+            return;
+          }
+
+          // Only auto-fix when there is exactly one JSX spread site for this variable
+          var spreadCount = variable.references.filter(function (ref) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            var refParent = ref.identifier.parent;
+            return (refParent === null || refParent === void 0 ? void 0 : refParent.type) === 'JSXSpreadAttribute';
+          }).length;
+          context.report(_objectSpread({
+            node: node,
+            messageId: 'noCssPropInObjectSpread'
+          }, spreadCount === 1 ? {
+            fix: function fix(fixer) {
+              var sourceCode = (0, _contextCompat.getSourceCode)(context);
+              var cssValueText = sourceCode.getText(_cssProp.value);
+              var fixes = [];
+              var remainingProps = initObject.properties.filter(function (p) {
+                return p !== _cssProp;
+              });
+              if (remainingProps.length === 0) {
+                fixes.push(fixer.replaceText(initObject, '{}'));
+              } else {
+                var propIndex = initObject.properties.indexOf(_cssProp);
+                var isLast = propIndex === initObject.properties.length - 1;
+                var tokenBefore = sourceCode.getTokenBefore(_cssProp);
+                var tokenAfter = sourceCode.getTokenAfter(_cssProp);
+                if (!isLast && tokenAfter && tokenAfter.value === ',') {
+                  var src = sourceCode.getText();
+                  var afterEnd = tokenAfter.range[1];
+                  var end = afterEnd;
+                  while (end < src.length && src[end] === ' ') {
+                    end++;
+                  }
+                  fixes.push(fixer.removeRange([_cssProp.range[0], end]));
+                } else if (tokenBefore && tokenBefore.value === ',') {
+                  fixes.push(fixer.removeRange([tokenBefore.range[0], _cssProp.range[1]]));
+                } else {
+                  fixes.push(fixer.remove(_cssProp));
+                }
+              }
+              fixes.push(fixer.insertTextBefore(node, "css={".concat(cssValueText, "} ")));
+              return fixes;
+            }
+          } : {}));
+        }
+      }
+    };
+  }
+};
+var _default = exports.default = noCssPropInObjectSpread;

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

@@ -0,0 +1,221 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _isSupportedImport = require("@atlaskit/eslint-utils/is-supported-import");
+var _contextCompat = require("../util/context-compat");
+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; }
+/**
+ * Disallows passing xcss() results into cx() when used in an xcss prop.
+ *
+ * xcss() from @atlaskit/primitives and cx() from @atlaskit/css / @compiled/react
+ * are incompatible — xcss() produces an opaque StyleRule object, while cx()
+ * expects Compiled atomic class name strings. Mixing them causes runtime errors.
+ * xcss() results must never be passed to cx(), whether inline or pre-defined.
+ *
+ * ❌ Wrong — xcss() called inline inside cx():
+ *   xcss={cx(xcss({ color: 'red' }), xcss({ fontWeight: 'bold' }))}
+ *
+ * ❌ Also wrong — xcss() results pre-defined but still passed into cx():
+ *   const baseStyles = xcss({ color: 'red' });
+ *   const boldStyles = xcss({ fontWeight: 'bold' });
+ *   xcss={cx(baseStyles, boldStyles)}
+ *
+ * ✅ Correct — pass xcss() results directly to the xcss prop (no cx()):
+ *   const baseStyles = xcss({ color: 'red' });
+ *   xcss={baseStyles}
+ *
+ * ✅ Correct — use cssMap() + cx() (cssMap is compatible with cx()):
+ *   const styles = cssMap({ base: { color: 'red' } });
+ *   xcss={cx(styles.base, condition && styles.focused)}
+ *
+ * This rule is import-aware: it only flags xcss() calls (inline or via variable)
+ * imported from @atlaskit/primitives inside cx() calls imported from @atlaskit/css
+ * or @compiled/react that appear inside an xcss prop.
+ */
+var rule = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'Disallow calling xcss() inline inside cx() in an xcss prop. Define styles at module level instead.'
+    },
+    messages: {
+      noXcssInCx: 'Do not pass xcss() results into cx(). ' + 'xcss() produces a StyleRule object that is incompatible with cx(), which expects Compiled atomic class names. ' + 'Pass xcss() results directly to the xcss prop instead: xcss={myStyles}. ' + 'To conditionally combine styles, use cssMap() + cx(): const styles = cssMap({...}); xcss={cx(styles.base, cond && styles.active)}'
+    },
+    schema: []
+  },
+  create: function create(context) {
+    return {
+      JSXAttribute: function JSXAttribute(node) {
+        // Narrow Rule.Node to JSXAttribute (estree-jsx augments the `estree` Node
+        // union with JSX members, so this discriminated narrowing is safe).
+        if (node.type !== 'JSXAttribute') {
+          return;
+        }
+
+        // Only check `xcss` props
+        if (node.name.type !== 'JSXIdentifier' || node.name.name !== 'xcss') {
+          return;
+        }
+        if (!node.value || node.value.type !== 'JSXExpressionContainer') {
+          return;
+        }
+        var expression = node.value.expression;
+        if (expression.type === 'JSXEmptyExpression') {
+          return;
+        }
+
+        // Early-return if the expression cannot possibly contain a cx() call —
+        // avoids the cost of getImportSources/getScope on simple references like xcss={baseStyles}.
+        var isCallOrArray = expression.type === 'CallExpression' || expression.type === 'ArrayExpression';
+        if (!isCallOrArray) {
+          return;
+        }
+        var importSources = (0, _isSupportedImport.getImportSources)(context);
+        var _getScope = (0, _contextCompat.getScope)(context, node),
+          references = _getScope.references;
+
+        /**
+         * Returns true if an Identifier node resolves to a variable whose
+         * initializer is a call to xcss() imported from @atlaskit/primitives.
+         *
+         * Walks up the scope chain from the current JSXAttribute scope to find
+         * the variable definition, since module-level variables are not in the
+         * local scope's references list.
+         *
+         * e.g. `const baseStyles = xcss({ color: 'red' })` — passing `baseStyles`
+         * here returns true.
+         */
+        var isXcssVariable = function isXcssVariable(identNode) {
+          if (identNode.type !== 'Identifier') {
+            return false;
+          }
+          var name = identNode.name;
+          // Walk up the scope chain to find the variable definition
+          var currentScope = (0, _contextCompat.getScope)(context, node);
+          while (currentScope) {
+            var variable = currentScope.set.get(name);
+            if (variable) {
+              var _iterator = _createForOfIteratorHelper(variable.defs),
+                _step;
+              try {
+                for (_iterator.s(); !(_step = _iterator.n()).done;) {
+                  var _def$node$init;
+                  var def = _step.value;
+                  if (def.type === 'Variable' && def.node.type === 'VariableDeclarator' && ((_def$node$init = def.node.init) === null || _def$node$init === void 0 ? void 0 : _def$node$init.type) === 'CallExpression') {
+                    // isXcss checks the callee identifier against referencesInScope to
+                    // find the import binding. The callee lives in the same scope as the
+                    // variable definition, so use all references from that scope.
+                    var defScopeRefs = currentScope.references;
+                    if ((0, _isSupportedImport.isXcss)(def.node.init.callee, defScopeRefs, importSources)) {
+                      return true;
+                    }
+                  }
+                }
+                // Found the variable but it's not an xcss() call
+              } catch (err) {
+                _iterator.e(err);
+              } finally {
+                _iterator.f();
+              }
+              return false;
+            }
+            currentScope = currentScope.upper;
+          }
+          return false;
+        };
+
+        /**
+         * Recursively check a node that is an argument to cx() for xcss() results —
+         * both inline calls and references to variables initialised with xcss().
+         * Recurses into LogicalExpression (&&, ||) and ConditionalExpression (? :) so that
+         * patterns like cx(cond && xcss({...})) and cx(cond ? baseStyles : a) are caught.
+         */
+        var _checkArgForXcss = function checkArgForXcss(argNode) {
+          if (!argNode) {
+            return;
+          }
+          // Inline: cx(xcss({ color: 'red' }))
+          if (argNode.type === 'CallExpression' && (0, _isSupportedImport.isXcss)(argNode.callee, references, importSources)) {
+            context.report({
+              node: argNode,
+              messageId: 'noXcssInCx'
+            });
+            return;
+          }
+          // Variable reference: cx(baseStyles) where baseStyles = xcss({...})
+          if (isXcssVariable(argNode)) {
+            context.report({
+              node: argNode,
+              messageId: 'noXcssInCx'
+            });
+            return;
+          }
+          // Recurse into `cond && xcss({...})` or `cond || xcss({...})`
+          if (argNode.type === 'LogicalExpression') {
+            _checkArgForXcss(argNode.left);
+            _checkArgForXcss(argNode.right);
+          }
+          // Recurse into `cond ? xcss({...}) : fallback`
+          if (argNode.type === 'ConditionalExpression') {
+            _checkArgForXcss(argNode.consequent);
+            _checkArgForXcss(argNode.alternate);
+          }
+        };
+
+        /**
+         * Check all arguments of a cx() call for inline xcss() calls.
+         * Reports each xcss() call found as a violation.
+         */
+        var checkCxArgs = function checkCxArgs(callNode) {
+          if (callNode.type !== 'CallExpression') {
+            return;
+          }
+          if (!(0, _isSupportedImport.isCxFunction)(callNode.callee, references, importSources)) {
+            return;
+          }
+          var _iterator2 = _createForOfIteratorHelper(callNode.arguments),
+            _step2;
+          try {
+            for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+              var arg = _step2.value;
+              if (arg) {
+                _checkArgForXcss(arg.type === 'SpreadElement' ? arg.argument : arg);
+              }
+            }
+          } catch (err) {
+            _iterator2.e(err);
+          } finally {
+            _iterator2.f();
+          }
+        };
+
+        // Case 1: xcss={cx(...)} — cx() directly as the xcss value
+        checkCxArgs(expression);
+
+        // Case 2: xcss={[..., cx(...), ...]} — cx() inside an xcss array
+        if (expression.type === 'ArrayExpression') {
+          var _iterator3 = _createForOfIteratorHelper(expression.elements),
+            _step3;
+          try {
+            for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+              var element = _step3.value;
+              if (element) {
+                checkCxArgs(element.type === 'SpreadElement' ? element.argument : element);
+              }
+            }
+          } catch (err) {
+            _iterator3.e(err);
+          } finally {
+            _iterator3.f();
+          }
+        }
+      }
+    };
+  }
+};
+var _default = exports.default = rule;

package/dist/cjs/rules/visit-example-type-import-required/index.js

@@ -118,7 +118,8 @@ function resolveVariableToConstant(programBody, variableName, cache) {
  * Returns null for any argument that can't be statically resolved.
  */
 function extractCallArgs(node, programBody, variableCache) {
-  if (node.arguments.length < 3) {
+  var argOffset = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+  if (node.arguments.length < argOffset + 3) {
     return null;
   }
   function resolveArg(arg) {
@@ -130,9 +131,9 @@ function extractCallArgs(node, programBody, variableCache) {
     }
     return null;
   }
-  var groupId = resolveArg(node.arguments[0]);
-  var packageId = resolveArg(node.arguments[1]);
-  var exampleId = resolveArg(node.arguments[2]);
+  var groupId = resolveArg(node.arguments[argOffset]);
+  var packageId = resolveArg(node.arguments[argOffset + 1]);
+  var exampleId = resolveArg(node.arguments[argOffset + 2]);
   if (!groupId || !packageId || !exampleId) {
     return null;
   }
@@ -180,8 +181,13 @@ function resolveExamplePathFromArgs(groupId, packageId, exampleId, testFilePath)
   var examplesDir = _path.default.resolve(packagesBase.basePath, groupId, packageId, 'examples');
   var fallback = _path.default.resolve(examplesDir, "".concat(exampleId, ".tsx"));
 
-  // Match: exact name OR numeric-prefixed variant, with optional `.examples` infix
-  var candidateRe = new RegExp("^(?:\\d+-)?".concat(exampleId, "(?:\\.examples?)?\\.tsx$"));
+  // Phase 4: loosen candidateRe to match both pre- and post-rename filename shapes.
+  // Pre-rename:  ^(\d+-)?<id>(\.(examples?))?\.tsx$
+  // Post-rename: ^(\d+-)?<id>(\.<ident>){0,3}\.tsx$   (Volt prefix, optional .dup<N>, optional role)
+  // The {0,3} cap prevents matching arbitrary strings (e.g. 4-component names).
+  // Escape regex metacharacters in exampleId (ids are kebab-case today, but defensive).
+  var escapedId = exampleId.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  var candidateRe = new RegExp("^(?:\\d+-)?".concat(escapedId, "(?:\\.[A-Za-z][A-Za-z0-9_]*){0,3}\\.tsx$"));
   try {
     var match = _fs.default.readdirSync(examplesDir).find(function (f) {
       return candidateRe.test(f);
@@ -279,20 +285,24 @@ var rule = {
           return;
         }
         var node = estreeNode;
-        // Only handle `<anything>.visitExample(...)` calls
-        if (node.callee.type !== _utils.AST_NODE_TYPES.MemberExpression || node.callee.property.type !== _utils.AST_NODE_TYPES.Identifier || node.callee.property.name !== 'visitExample') {
+        var calleeIdentifier = null;
+        var argOffset = 0;
+        if (node.callee.type === _utils.AST_NODE_TYPES.MemberExpression && node.callee.property.type === _utils.AST_NODE_TYPES.Identifier && node.callee.property.name === 'visitExample') {
+          calleeIdentifier = node.callee.property;
+        } else if (node.callee.type === _utils.AST_NODE_TYPES.Identifier && node.callee.name === 'visitMockedExample') {
+          calleeIdentifier = node.callee;
+          argOffset = 1; // first arg is `page`
+        } else {
           return;
         }
 
-        // Narrow callee — we've confirmed property is an Identifier above
-        var callee = node.callee;
         // reportCallee is typed as estree.Node for context.report compatibility
         var reportCallee = estreeNode.callee;
         var genericType = extractGenericType(node);
 
         // ── Case 1: No generic type parameter ────────────────────────────────
         if (genericType === null) {
-          var _args = extractCallArgs(node, programBody, variableCache);
+          var _args = extractCallArgs(node, programBody, variableCache, argOffset);
           context.report({
             node: reportCallee,
             messageId: 'missingTypeofImport',
@@ -305,7 +315,7 @@ var rule = {
                 return null;
               }
               var importPath = computeRelativeImportPath(filename, examplePath);
-              var _ref2 = callee.property.range,
+              var _ref2 = calleeIdentifier.range,
                 _ref3 = (0, _slicedToArray2.default)(_ref2, 2),
                 start = _ref3[0],
                 end = _ref3[1];
@@ -367,7 +377,7 @@ var rule = {
         }
 
         // Validate that the import path matches the arguments
-        var args = extractCallArgs(node, programBody, variableCache);
+        var args = extractCallArgs(node, programBody, variableCache, argOffset);
         if (!args) {
           // Dynamic arguments — can't validate statically
           return;

package/dist/es2019/index.js

@@ -25,6 +25,7 @@ import useRecommendedUtils from './rules/feature-gating/use-recommended-utils';
 import validGateName from './rules/feature-gating/valid-gate-name';
 import expandBackgroundShorthand from './rules/compiled/expand-background-shorthand';
 import expandSpacingShorthand from './rules/compiled/expand-spacing-shorthand';
+import noCssPropInObjectSpread from './rules/compiled/no-css-prop-in-object-spread';
 import noSparseCheckout from './rules/no-sparse-checkout';
 import noDirectDocumentUsage from './rules/no-direct-document-usage';
 import noSetImmediate from './rules/no-set-immediate';
@@ -37,6 +38,7 @@ import noRelativeBarrelFileImports from './rules/import/no-relative-barrel-file-
 import noConversationAssistantBarrelImports from './rules/import/no-conversation-assistant-barrel-imports';
 import visitExampleTypeImportRequired from './rules/visit-example-type-import-required';
 import ensureUseSyncExternalStoreServerSnapshot from './rules/ensure-use-sync-external-store-server-snapshot';
+import noXcssInCx from './rules/no-xcss-in-cx';
 import { join, normalize } from 'node:path';
 import { readFileSync } from 'node:fs';
 let jiraRoot;
@@ -67,6 +69,7 @@ const rules = {
   'expand-border-shorthand': expandBorderShorthand,
   'expand-background-shorthand': expandBackgroundShorthand,
   'expand-spacing-shorthand': expandSpacingShorthand,
+  'no-css-prop-in-object-spread': noCssPropInObjectSpread,
   'no-duplicate-dependencies': noDuplicateDependencies,
   'no-invalid-feature-flag-usage': noInvalidFeatureFlagUsage,
   'no-pre-post-install-scripts': noPreAndPostInstallScripts,
@@ -93,6 +96,7 @@ const rules = {
   'no-relative-barrel-file-imports': noRelativeBarrelFileImports,
   'no-conversation-assistant-barrel-imports': noConversationAssistantBarrelImports,
   'visit-example-type-import-required': visitExampleTypeImportRequired,
+  'no-xcss-in-cx': noXcssInCx,
   'ensure-use-sync-external-store-server-snapshot': ensureUseSyncExternalStoreServerSnapshot
 };
 const commonConfig = {
@@ -105,10 +109,12 @@ const commonConfig = {
   '@atlaskit/platform/no-module-level-eval-nav4': 'error',
   '@atlaskit/platform/no-direct-document-usage': 'warn',
   '@atlaskit/platform/no-set-immediate': 'error',
+  '@atlaskit/platform/no-xcss-in-cx': 'error',
   // Compiled: rules that are not included via `@compiled/recommended
   '@atlaskit/platform/expand-border-shorthand': 'error',
   '@atlaskit/platform/expand-background-shorthand': 'error',
   '@atlaskit/platform/expand-spacing-shorthand': 'error',
+  '@atlaskit/platform/no-css-prop-in-object-spread': 'error',
   '@compiled/jsx-pragma': ['error', {
     importSources: ['@atlaskit/css'],
     onlyRunIfImportingCompiled: true,
@@ -153,7 +159,6 @@ const plugin = {
         get '@atlaskit/platform'() {
           return plugin;
         },
-        // @ts-expect-error there's an issue with the types for @compiled/eslint-plugin ('no-css-prop-without-css-function' specifically)
         '@compiled': {
           meta: compiledPlugin.meta,
           rules: compiledPlugin.rules
@@ -170,7 +175,6 @@ const plugin = {
         get '@atlaskit/platform'() {
           return plugin;
         },
-        // @ts-expect-error there's an issue with the types for @compiled/eslint-plugin ('no-css-prop-without-css-function' specifically)
         '@compiled': {
           meta: compiledPlugin.meta,
           rules: compiledPlugin.rules