@atlaskit/eslint-plugin-platform 2.9.1 → 2.9.3

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/eslint-plugin-platform
 
+## 2.9.3
+
+### Patch Changes
+
+- [`a1196120ab924`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a1196120ab924) -
+  Add `use-motion-token-values` and `expand-motion-shorthand` lint rules to enforce motion token
+  usage.
+
+## 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,9 @@ 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 _useMotionTokenValues = _interopRequireDefault(require("./rules/compiled/use-motion-token-values"));
+var _expandMotionShorthand = _interopRequireDefault(require("./rules/compiled/expand-motion-shorthand"));
 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"));
@@ -43,7 +46,9 @@ var _noJestMockBarrelFiles = _interopRequireDefault(require("./rules/import/no-j
 var _noRelativeBarrelFileImports = _interopRequireDefault(require("./rules/import/no-relative-barrel-file-imports"));
 var _noConversationAssistantBarrelImports = _interopRequireDefault(require("./rules/import/no-conversation-assistant-barrel-imports"));
 var _visitExampleTypeImportRequired = _interopRequireDefault(require("./rules/visit-example-type-import-required"));
+var _editorExampleTypeImportRequired = _interopRequireDefault(require("./rules/editor-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 +81,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,7 +108,11 @@ 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,
-  'ensure-use-sync-external-store-server-snapshot': _ensureUseSyncExternalStoreServerSnapshot.default
+  'no-xcss-in-cx': _noXcssInCx.default,
+  'editor-example-type-import-required': _editorExampleTypeImportRequired.default,
+  'ensure-use-sync-external-store-server-snapshot': _ensureUseSyncExternalStoreServerSnapshot.default,
+  'use-motion-token-values': _useMotionTokenValues.default,
+  'expand-motion-shorthand': _expandMotionShorthand.default
 };
 var commonConfig = {
   '@atlaskit/platform/ensure-test-runner-arguments': 'error',
@@ -114,10 +124,14 @@ 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',
+  '@atlaskit/platform/use-motion-token-values': 'warn',
+  '@atlaskit/platform/expand-motion-shorthand': 'warn',
   '@compiled/jsx-pragma': ['error', {
     importSources: ['@atlaskit/css'],
     onlyRunIfImportingCompiled: true,
@@ -159,7 +173,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 +189,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/expand-motion-shorthand/index.js

@@ -0,0 +1,281 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.expandTransitionShorthand = exports.default = void 0;
+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 EASING_KEYWORDS = ['ease', 'ease-in', 'ease-out', 'ease-in-out', 'linear', 'step-start', 'step-end'];
+var KEYWORD_VALUES = ['none', 'all', 'inherit', 'initial', 'unset'];
+var isDuration = function isDuration(token) {
+  return /^\d+(?:\.\d+)?m?s$/.test(token);
+};
+var isEasing = function isEasing(token) {
+  return EASING_KEYWORDS.includes(token) || token.startsWith('cubic-bezier(') || token.startsWith('steps(');
+};
+/**
+ * Tokenizes a CSS shorthand value string, respecting function boundaries.
+ * e.g. 'opacity 200ms cubic-bezier(0.4, 0, 0, 1) 0ms' →
+ *      ['opacity', '200ms', 'cubic-bezier(0.4, 0, 0, 1)', '0ms']
+ * Splits on whitespace only when not inside parentheses.
+ */
+var tokenizeShorthand = function tokenizeShorthand(value) {
+  var tokens = [];
+  var depth = 0;
+  var current = '';
+  for (var i = 0; i < value.length; i++) {
+    var ch = value[i];
+    if (ch === '(') {
+      depth++;
+      current += ch;
+    } else if (ch === ')') {
+      depth--;
+      current += ch;
+    } else if (/\s/.test(ch) && depth === 0) {
+      if (current.length > 0) {
+        tokens.push(current);
+        current = '';
+      }
+    } else {
+      current += ch;
+    }
+  }
+  if (current.length > 0) {
+    tokens.push(current);
+  }
+  return tokens;
+};
+
+// Splits on top-level commas (outside function parens) — preserves cubic-bezier(...) commas.
+var splitOnTopLevelCommas = function splitOnTopLevelCommas(value) {
+  var parts = [];
+  var depth = 0;
+  var current = '';
+  var _iterator = _createForOfIteratorHelper(value),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var ch = _step.value;
+      if (ch === '(') {
+        depth++;
+        current += ch;
+      } else if (ch === ')') {
+        depth--;
+        current += ch;
+      } else if (ch === ',' && depth === 0) {
+        parts.push(current.trim());
+        current = '';
+      } else {
+        current += ch;
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  if (current.trim().length > 0) {
+    parts.push(current.trim());
+  }
+  return parts;
+};
+var parseTransition = function parseTransition(value) {
+  var parts = tokenizeShorthand(value.trim());
+  var result = {};
+  var durationCount = 0;
+  var _iterator2 = _createForOfIteratorHelper(parts),
+    _step2;
+  try {
+    for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+      var part = _step2.value;
+      if (isDuration(part)) {
+        if (durationCount === 0) {
+          result.transitionDuration = part;
+        } else {
+          result.transitionDelay = part;
+        }
+        durationCount++;
+      } else if (isEasing(part)) {
+        result.transitionTimingFunction = part;
+      } else {
+        result.transitionProperty = part;
+      }
+    }
+  } catch (err) {
+    _iterator2.e(err);
+  } finally {
+    _iterator2.f();
+  }
+  return result;
+};
+var parseAnimation = function parseAnimation(value) {
+  var parts = tokenizeShorthand(value.trim());
+  var result = {};
+  var durationCount = 0;
+  var _iterator3 = _createForOfIteratorHelper(parts),
+    _step3;
+  try {
+    for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+      var part = _step3.value;
+      if (isDuration(part)) {
+        if (durationCount === 0) {
+          result.animationDuration = part;
+        } else {
+          result.animationDelay = part;
+        }
+        durationCount++;
+      } else if (isEasing(part)) {
+        result.animationTimingFunction = part;
+      } else if (part === 'infinite' || /^\d+(\.\d+)?$/.test(part)) {
+        result.animationIterationCount = part;
+      } else if (['normal', 'reverse', 'alternate', 'alternate-reverse'].includes(part)) {
+        result.animationDirection = part;
+      } else if (['none', 'forwards', 'backwards', 'both'].includes(part)) {
+        result.animationFillMode = part;
+      } else if (['running', 'paused'].includes(part)) {
+        result.animationPlayState = part;
+      } else {
+        result.animationName = part;
+      }
+    }
+  } catch (err) {
+    _iterator3.e(err);
+  } finally {
+    _iterator3.f();
+  }
+  return result;
+};
+
+// Combine sub-property values across comma-separated transitions/animations.
+// If no segment explicitly set this sub-property, omit it entirely.
+// Otherwise, fill missing slots with the CSS spec default to preserve positional alignment.
+var combineSubPropertyValues = function combineSubPropertyValues(segments, subProperty, defaultValue) {
+  if (segments.every(function (s) {
+    return s[subProperty] === undefined;
+  })) {
+    return undefined;
+  }
+  return segments.map(function (s) {
+    var _s$subProperty;
+    return (_s$subProperty = s[subProperty]) !== null && _s$subProperty !== void 0 ? _s$subProperty : defaultValue;
+  }).join(', ');
+};
+var buildTransitionFix = function buildTransitionFix(segments, indent) {
+  var lines = [];
+  var property = combineSubPropertyValues(segments, 'transitionProperty', 'all');
+  var duration = combineSubPropertyValues(segments, 'transitionDuration', '0s');
+  var timing = combineSubPropertyValues(segments, 'transitionTimingFunction', 'ease');
+  var delay = combineSubPropertyValues(segments, 'transitionDelay', '0s');
+  if (property !== undefined) lines.push("transitionProperty: '".concat(property, "'"));
+  if (duration !== undefined) lines.push("transitionDuration: '".concat(duration, "'"));
+  if (timing !== undefined) lines.push("transitionTimingFunction: '".concat(timing, "'"));
+  if (delay !== undefined) lines.push("transitionDelay: '".concat(delay, "'"));
+  return lines.join(",\n".concat(indent));
+};
+var buildAnimationFix = function buildAnimationFix(segments, indent) {
+  var lines = [];
+  var name = combineSubPropertyValues(segments, 'animationName', 'none');
+  var duration = combineSubPropertyValues(segments, 'animationDuration', '0s');
+  var timing = combineSubPropertyValues(segments, 'animationTimingFunction', 'ease');
+  var delay = combineSubPropertyValues(segments, 'animationDelay', '0s');
+  var iter = combineSubPropertyValues(segments, 'animationIterationCount', '1');
+  var direction = combineSubPropertyValues(segments, 'animationDirection', 'normal');
+  var fill = combineSubPropertyValues(segments, 'animationFillMode', 'none');
+  var playState = combineSubPropertyValues(segments, 'animationPlayState', 'running');
+  if (name !== undefined) lines.push("animationName: '".concat(name, "'"));
+  if (duration !== undefined) lines.push("animationDuration: '".concat(duration, "'"));
+  if (timing !== undefined) lines.push("animationTimingFunction: '".concat(timing, "'"));
+  if (delay !== undefined) lines.push("animationDelay: '".concat(delay, "'"));
+  if (iter !== undefined) lines.push("animationIterationCount: '".concat(iter, "'"));
+  if (direction !== undefined) lines.push("animationDirection: '".concat(direction, "'"));
+  if (fill !== undefined) lines.push("animationFillMode: '".concat(fill, "'"));
+  if (playState !== undefined) lines.push("animationPlayState: '".concat(playState, "'"));
+  return lines.join(",\n".concat(indent));
+};
+var TRANSITION_SUB_PROPERTIES = ['transitionProperty', 'transitionDuration', 'transitionTimingFunction', 'transitionDelay'];
+var ANIMATION_SUB_PROPERTIES = ['animationName', 'animationDuration', 'animationTimingFunction', 'animationDelay', 'animationIterationCount', 'animationDirection', 'animationFillMode', 'animationPlayState'];
+var executeExpandTransitionRule = function executeExpandTransitionRule(context, node, property) {
+  var _context$sourceCode, _node$loc;
+  if (node.value.type === 'CallExpression') {
+    return;
+  }
+  if (node.value.type === 'TemplateLiteral') {
+    return;
+  }
+  if (node.value.type !== 'Literal' || typeof node.value.value !== 'string') {
+    return;
+  }
+  var rawValue = node.value.value;
+  if (KEYWORD_VALUES.includes(rawValue)) {
+    return;
+  }
+  var subProperties = property === 'transition' ? TRANSITION_SUB_PROPERTIES : ANIMATION_SUB_PROPERTIES;
+
+  // Extract leading whitespace to preserve indentation style (tabs vs spaces)
+  var sourceCode = (_context$sourceCode = context.sourceCode) !== null && _context$sourceCode !== void 0 ? _context$sourceCode : context.getSourceCode();
+  var nodeStart = (_node$loc = node.loc) === null || _node$loc === void 0 ? void 0 : _node$loc.start;
+  var indent = '\t';
+  if (nodeStart) {
+    var _sourceCode$lines;
+    var lineText = (_sourceCode$lines = sourceCode.lines[nodeStart.line - 1]) !== null && _sourceCode$lines !== void 0 ? _sourceCode$lines : '';
+    var leadingWhitespace = lineText.match(/^(\s*)/);
+    if (leadingWhitespace) {
+      indent = leadingWhitespace[1];
+    }
+  }
+  var segmentStrings = splitOnTopLevelCommas(rawValue);
+  if (property === 'transition') {
+    var segments = segmentStrings.map(parseTransition);
+    var fixText = buildTransitionFix(segments, indent);
+    context.report({
+      node: node,
+      messageId: 'expandTransitionShorthand',
+      data: {
+        property: property,
+        subProperties: subProperties.join(', ')
+      },
+      fix: function fix(fixer) {
+        return fixer.replaceText(node, fixText);
+      }
+    });
+  } else {
+    var _segments = segmentStrings.map(parseAnimation);
+    var _fixText = buildAnimationFix(_segments, indent);
+    context.report({
+      node: node,
+      messageId: 'expandTransitionShorthand',
+      data: {
+        property: property,
+        subProperties: subProperties.join(', ')
+      },
+      fix: function fix(fixer) {
+        return fixer.replaceText(node, _fixText);
+      }
+    });
+  }
+};
+var expandTransitionShorthand = exports.expandTransitionShorthand = {
+  meta: {
+    type: 'suggestion',
+    fixable: 'code',
+    docs: {
+      url: 'https://bitbucket.org/atlassian/atlassian-frontend-monorepo/src/master/platform/packages/platform/eslint-plugin/src/rules/compiled/expand-transition-shorthand/'
+    },
+    messages: {
+      expandTransitionShorthand: "Use {{ subProperties }} instead of the '{{ property }}' shorthand so that individual values can be replaced with motion tokens."
+    }
+  },
+  create: function create(context) {
+    return {
+      'Property[key.name="transition"]': function PropertyKeyNameTransition(node) {
+        executeExpandTransitionRule(context, node, 'transition');
+      },
+      'Property[key.name="animation"]': function PropertyKeyNameAnimation(node) {
+        executeExpandTransitionRule(context, node, 'animation');
+      }
+    };
+  }
+};
+var _default = exports.default = expandTransitionShorthand;

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;