@atlaskit/eslint-plugin-platform 2.9.1 → 2.9.3

package/dist/es2019/index.js

@@ -25,6 +25,9 @@ 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 useMotionTokenValues from './rules/compiled/use-motion-token-values';
+import expandMotionShorthand from './rules/compiled/expand-motion-shorthand';
 import noSparseCheckout from './rules/no-sparse-checkout';
 import noDirectDocumentUsage from './rules/no-direct-document-usage';
 import noSetImmediate from './rules/no-set-immediate';
@@ -36,7 +39,9 @@ import noJestMockBarrelFiles from './rules/import/no-jest-mock-barrel-files';
 import noRelativeBarrelFileImports from './rules/import/no-relative-barrel-file-imports';
 import noConversationAssistantBarrelImports from './rules/import/no-conversation-assistant-barrel-imports';
 import visitExampleTypeImportRequired from './rules/visit-example-type-import-required';
+import editorExampleTypeImportRequired from './rules/editor-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 +72,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,7 +99,11 @@ const rules = {
   'no-relative-barrel-file-imports': noRelativeBarrelFileImports,
   'no-conversation-assistant-barrel-imports': noConversationAssistantBarrelImports,
   'visit-example-type-import-required': visitExampleTypeImportRequired,
-  'ensure-use-sync-external-store-server-snapshot': ensureUseSyncExternalStoreServerSnapshot
+  'no-xcss-in-cx': noXcssInCx,
+  'editor-example-type-import-required': editorExampleTypeImportRequired,
+  'ensure-use-sync-external-store-server-snapshot': ensureUseSyncExternalStoreServerSnapshot,
+  'use-motion-token-values': useMotionTokenValues,
+  'expand-motion-shorthand': expandMotionShorthand
 };
 const commonConfig = {
   '@atlaskit/platform/ensure-test-runner-arguments': 'error',
@@ -105,10 +115,14 @@ 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',
+  '@atlaskit/platform/use-motion-token-values': 'warn',
+  '@atlaskit/platform/expand-motion-shorthand': 'warn',
   '@compiled/jsx-pragma': ['error', {
     importSources: ['@atlaskit/css'],
     onlyRunIfImportingCompiled: true,
@@ -153,7 +167,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 +183,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

package/dist/es2019/rules/compiled/expand-motion-shorthand/index.js

@@ -0,0 +1,239 @@
+const EASING_KEYWORDS = ['ease', 'ease-in', 'ease-out', 'ease-in-out', 'linear', 'step-start', 'step-end'];
+const KEYWORD_VALUES = ['none', 'all', 'inherit', 'initial', 'unset'];
+const isDuration = token => /^\d+(?:\.\d+)?m?s$/.test(token);
+const isEasing = token => 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.
+ */
+const tokenizeShorthand = value => {
+  const tokens = [];
+  let depth = 0;
+  let current = '';
+  for (let i = 0; i < value.length; i++) {
+    const 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.
+const splitOnTopLevelCommas = value => {
+  const parts = [];
+  let depth = 0;
+  let current = '';
+  for (const ch of 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;
+    }
+  }
+  if (current.trim().length > 0) {
+    parts.push(current.trim());
+  }
+  return parts;
+};
+const parseTransition = value => {
+  const parts = tokenizeShorthand(value.trim());
+  const result = {};
+  let durationCount = 0;
+  for (const part of parts) {
+    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;
+    }
+  }
+  return result;
+};
+const parseAnimation = value => {
+  const parts = tokenizeShorthand(value.trim());
+  const result = {};
+  let durationCount = 0;
+  for (const part of parts) {
+    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;
+    }
+  }
+  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.
+const combineSubPropertyValues = (segments, subProperty, defaultValue) => {
+  if (segments.every(s => s[subProperty] === undefined)) {
+    return undefined;
+  }
+  return segments.map(s => {
+    var _s$subProperty;
+    return (_s$subProperty = s[subProperty]) !== null && _s$subProperty !== void 0 ? _s$subProperty : defaultValue;
+  }).join(', ');
+};
+const buildTransitionFix = (segments, indent) => {
+  const lines = [];
+  const property = combineSubPropertyValues(segments, 'transitionProperty', 'all');
+  const duration = combineSubPropertyValues(segments, 'transitionDuration', '0s');
+  const timing = combineSubPropertyValues(segments, 'transitionTimingFunction', 'ease');
+  const delay = combineSubPropertyValues(segments, 'transitionDelay', '0s');
+  if (property !== undefined) lines.push(`transitionProperty: '${property}'`);
+  if (duration !== undefined) lines.push(`transitionDuration: '${duration}'`);
+  if (timing !== undefined) lines.push(`transitionTimingFunction: '${timing}'`);
+  if (delay !== undefined) lines.push(`transitionDelay: '${delay}'`);
+  return lines.join(`,\n${indent}`);
+};
+const buildAnimationFix = (segments, indent) => {
+  const lines = [];
+  const name = combineSubPropertyValues(segments, 'animationName', 'none');
+  const duration = combineSubPropertyValues(segments, 'animationDuration', '0s');
+  const timing = combineSubPropertyValues(segments, 'animationTimingFunction', 'ease');
+  const delay = combineSubPropertyValues(segments, 'animationDelay', '0s');
+  const iter = combineSubPropertyValues(segments, 'animationIterationCount', '1');
+  const direction = combineSubPropertyValues(segments, 'animationDirection', 'normal');
+  const fill = combineSubPropertyValues(segments, 'animationFillMode', 'none');
+  const playState = combineSubPropertyValues(segments, 'animationPlayState', 'running');
+  if (name !== undefined) lines.push(`animationName: '${name}'`);
+  if (duration !== undefined) lines.push(`animationDuration: '${duration}'`);
+  if (timing !== undefined) lines.push(`animationTimingFunction: '${timing}'`);
+  if (delay !== undefined) lines.push(`animationDelay: '${delay}'`);
+  if (iter !== undefined) lines.push(`animationIterationCount: '${iter}'`);
+  if (direction !== undefined) lines.push(`animationDirection: '${direction}'`);
+  if (fill !== undefined) lines.push(`animationFillMode: '${fill}'`);
+  if (playState !== undefined) lines.push(`animationPlayState: '${playState}'`);
+  return lines.join(`,\n${indent}`);
+};
+const TRANSITION_SUB_PROPERTIES = ['transitionProperty', 'transitionDuration', 'transitionTimingFunction', 'transitionDelay'];
+const ANIMATION_SUB_PROPERTIES = ['animationName', 'animationDuration', 'animationTimingFunction', 'animationDelay', 'animationIterationCount', 'animationDirection', 'animationFillMode', 'animationPlayState'];
+const 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;
+  }
+  const rawValue = node.value.value;
+  if (KEYWORD_VALUES.includes(rawValue)) {
+    return;
+  }
+  const subProperties = property === 'transition' ? TRANSITION_SUB_PROPERTIES : ANIMATION_SUB_PROPERTIES;
+
+  // Extract leading whitespace to preserve indentation style (tabs vs spaces)
+  const sourceCode = (_context$sourceCode = context.sourceCode) !== null && _context$sourceCode !== void 0 ? _context$sourceCode : context.getSourceCode();
+  const nodeStart = (_node$loc = node.loc) === null || _node$loc === void 0 ? void 0 : _node$loc.start;
+  let indent = '\t';
+  if (nodeStart) {
+    var _sourceCode$lines;
+    const lineText = (_sourceCode$lines = sourceCode.lines[nodeStart.line - 1]) !== null && _sourceCode$lines !== void 0 ? _sourceCode$lines : '';
+    const leadingWhitespace = lineText.match(/^(\s*)/);
+    if (leadingWhitespace) {
+      indent = leadingWhitespace[1];
+    }
+  }
+  const segmentStrings = splitOnTopLevelCommas(rawValue);
+  if (property === 'transition') {
+    const segments = segmentStrings.map(parseTransition);
+    const fixText = buildTransitionFix(segments, indent);
+    context.report({
+      node,
+      messageId: 'expandTransitionShorthand',
+      data: {
+        property,
+        subProperties: subProperties.join(', ')
+      },
+      fix(fixer) {
+        return fixer.replaceText(node, fixText);
+      }
+    });
+  } else {
+    const segments = segmentStrings.map(parseAnimation);
+    const fixText = buildAnimationFix(segments, indent);
+    context.report({
+      node,
+      messageId: 'expandTransitionShorthand',
+      data: {
+        property,
+        subProperties: subProperties.join(', ')
+      },
+      fix(fixer) {
+        return fixer.replaceText(node, fixText);
+      }
+    });
+  }
+};
+export const 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(context) {
+    return {
+      'Property[key.name="transition"]': function (node) {
+        executeExpandTransitionRule(context, node, 'transition');
+      },
+      'Property[key.name="animation"]': function (node) {
+        executeExpandTransitionRule(context, node, 'animation');
+      }
+    };
+  }
+};
+export default expandTransitionShorthand;

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

@@ -0,0 +1,136 @@
+import { getScope, getSourceCode } from '../../util/context-compat';
+
+/**
+ * Returns the `css` Property node from an ObjectExpression, or null if not found.
+ */
+function getCssProperty(objectExpression) {
+  for (const prop of objectExpression.properties) {
+    if (prop.type !== 'Property') {
+      continue;
+    }
+    const {
+      key
+    } = prop;
+    if (key.type === 'Identifier' && key.name === 'css' || key.type === 'Literal' && key.value === 'css') {
+      return prop;
+    }
+  }
+  return null;
+}
+export const 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(context) {
+    return {
+      JSXSpreadAttribute(node) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const spreadNode = node;
+        const arg = spreadNode.argument;
+
+        // Case 1: inline object literal — <div {...{ css: styles, id: 'foo' }} />
+        if (arg.type === 'ObjectExpression') {
+          const objectArg = arg;
+          const cssProp = getCssProperty(objectArg);
+          if (!cssProp) {
+            return;
+          }
+          context.report({
+            node,
+            messageId: 'noCssPropInObjectSpread',
+            fix(fixer) {
+              const sourceCode = getSourceCode(context);
+              const cssValueText = sourceCode.getText(cssProp.value);
+              const remainingProps = objectArg.properties.filter(p => p !== cssProp);
+              const directCssProp = `css={${cssValueText}}`;
+              if (remainingProps.length === 0) {
+                return fixer.replaceText(node, directCssProp);
+              }
+              const remainingText = remainingProps.map(p => sourceCode.getText(p)).join(', ');
+              return fixer.replaceText(node, `${directCssProp} {...{ ${remainingText} }}`);
+            }
+          });
+          return;
+        }
+
+        // Case 2: variable reference — <div {...props} />
+        if (arg.type === 'Identifier') {
+          const scope = getScope(context, arg);
+          let currentScope = scope;
+          let variable = null;
+          while (currentScope) {
+            const found = currentScope.variables.find(v => v.name === arg.name);
+            if (found) {
+              variable = found;
+              break;
+            }
+            currentScope = currentScope.upper;
+          }
+          if (!variable || variable.defs.length === 0) {
+            return;
+          }
+          const def = variable.defs[0];
+          if (def.type !== 'Variable' || !def.node.init || def.node.init.type !== 'ObjectExpression') {
+            return;
+          }
+          const initObject = def.node.init;
+          const cssProp = getCssProperty(initObject);
+          if (!cssProp) {
+            return;
+          }
+
+          // Only auto-fix when there is exactly one JSX spread site for this variable
+          const spreadCount = variable.references.filter(ref => {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const refParent = ref.identifier.parent;
+            return (refParent === null || refParent === void 0 ? void 0 : refParent.type) === 'JSXSpreadAttribute';
+          }).length;
+          context.report({
+            node,
+            messageId: 'noCssPropInObjectSpread',
+            ...(spreadCount === 1 ? {
+              fix(fixer) {
+                const sourceCode = getSourceCode(context);
+                const cssValueText = sourceCode.getText(cssProp.value);
+                const fixes = [];
+                const remainingProps = initObject.properties.filter(p => p !== cssProp);
+                if (remainingProps.length === 0) {
+                  fixes.push(fixer.replaceText(initObject, '{}'));
+                } else {
+                  const propIndex = initObject.properties.indexOf(cssProp);
+                  const isLast = propIndex === initObject.properties.length - 1;
+                  const tokenBefore = sourceCode.getTokenBefore(cssProp);
+                  const tokenAfter = sourceCode.getTokenAfter(cssProp);
+                  if (!isLast && tokenAfter && tokenAfter.value === ',') {
+                    const src = sourceCode.getText();
+                    const afterEnd = tokenAfter.range[1];
+                    let 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={${cssValueText}} `));
+                return fixes;
+              }
+            } : {})
+          });
+        }
+      }
+    };
+  }
+};
+export default noCssPropInObjectSpread;