Merge remote-tracking branch 'origin/main' into COMPASS-9674

Author: johnjackweir

THIRD-PARTY-NOTICES.md

@@ -98,6 +98,7 @@ module.exports = {
   plugins: [...shared.plugins, '@mongodb-js/compass', 'chai-friendly'],
   rules: {
     ...shared.rules,
+    '@mongodb-js/compass/no-inline-emotion-css': 'warn',
     '@mongodb-js/compass/no-leafygreen-outside-compass-components': 'error',
     '@mongodb-js/compass/unique-mongodb-log-id': [
       'error',

configs/eslint-config-compass/index.js

@@ -1,6 +1,7 @@
 'use strict';
 module.exports = {
   rules: {
+    'no-inline-emotion-css': require('./rules/no-inline-emotion-css'),
     'no-leafygreen-outside-compass-components': require('./rules/no-leafygreen-outside-compass-components'),
     'unique-mongodb-log-id': require('./rules/unique-mongodb-log-id'),
   },

configs/eslint-plugin-compass/index.js

@@ -0,0 +1,84 @@
+'use strict';
+
+/**
+ * Checks if a node is a css() call from emotion.
+ * @param {Object} node - AST node to check.
+ * @returns {boolean} - Whether the node is a css() call.
+ */
+function isCssCall(node) {
+  return (
+    node &&
+    node.type === 'CallExpression' &&
+    node.callee &&
+    node.callee.type === 'Identifier' &&
+    node.callee.name === 'css'
+  );
+}
+
+/**
+ * Checks if a call is inside a react function.
+ * This only checks for JSXExpressionContainers or an uppercase function name,
+ * so it may miss some cases.
+ * @param {Object} context - ESLint context.
+ * @returns {boolean} - Whether we're inside a function.
+ */
+function isInsideReactFunction(context) {
+  const ancestors = context.getAncestors();
+
+  const hasJSXAncestor = ancestors.some(
+    (ancestor) => ancestor.type === 'JSXExpressionContainer'
+  );
+
+  if (hasJSXAncestor) {
+    return true;
+  }
+
+  const currentFunction = ancestors.find(
+    (ancestor) =>
+      ancestor.type === 'FunctionDeclaration' ||
+      ancestor.type === 'FunctionExpression' ||
+      ancestor.type === 'ArrowFunctionExpression'
+  );
+  if (currentFunction) {
+    // If the function name starts with an uppercase letter maybe it's a React component.
+    if (
+      currentFunction.type === 'FunctionDeclaration' &&
+      currentFunction.id &&
+      /^[A-Z]/.test(currentFunction.id.name)
+    ) {
+      return true;
+    }
+  }
+}
+
+/** @type {import('eslint').Rule.RuleModule} */
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'Disallow dynamic emotion css() calls in render methods',
+    },
+    messages: {
+      noInlineCSS:
+        "Don't use a dynamic css() call in the render method, this creates a new class name every time component updates and is not performant. Static styles can be defined with css outside of render, dynamic should be passed through the style prop.",
+    },
+  },
+
+  create(context) {
+    return {
+      // Check for dynamic css() calls in react rendering.
+      CallExpression(node) {
+        if (!isCssCall(node)) {
+          return;
+        }
+
+        if (isInsideReactFunction(context)) {
+          context.report({
+            node,
+            messageId: 'noInlineCSS',
+          });
+        }
+      },
+    };
+  },
+};

configs/eslint-plugin-compass/rules/no-inline-emotion-css.js

@@ -0,0 +1,51 @@
+'use strict';
+const { RuleTester } = require('eslint');
+const rule = require('./no-inline-emotion-css');
+
+const ruleTester = new RuleTester();
+
+ruleTester.run('no-inline-emotion-css', rule, {
+  valid: [
+    {
+      code: "const staticSet = css({ background: 'orange' });",
+      parserOptions: { ecmaVersion: 2021 },
+    },
+    {
+      code: `
+const pineappleStyles = css({ background: 'purple' });
+function pineapple() { return pineappleStyles; };`,
+      parserOptions: { ecmaVersion: 2021 },
+    },
+    {
+      code: `
+const pineappleStyles = css({ background: 'purple' });
+function Pineapple() { return (<div className={pineappleStyles}>pineapples</div>); }`,
+      parserOptions: { ecmaVersion: 2021, ecmaFeatures: { jsx: true } },
+    },
+    {
+      code: "function pineapple() { const dynamicSet = css({ background: 'orange' }); }",
+      parserOptions: { ecmaVersion: 2021 },
+    },
+  ],
+  invalid: [
+    {
+      code: `
+function Pineapple() {
+  const pineappleStyles = css({ background: 'purple' });
+  return (<div className={pineappleStyles}>pineapples</div>);
+}`,
+      parserOptions: { ecmaVersion: 2021, ecmaFeatures: { jsx: true } },
+      errors: [
+        "Don't use a dynamic css() call in the render method, this creates a new class name every time component updates and is not performant. Static styles can be defined with css outside of render, dynamic should be passed through the style prop.",
+      ],
+    },
+    {
+      code: "function Pineapple() { return (<div className={css({ background: 'purple' })}>pineapples</div>); }",
+      parserOptions: { ecmaVersion: 2021, ecmaFeatures: { jsx: true } },
+
+      errors: [
+        "Don't use a dynamic css() call in the render method, this creates a new class name every time component updates and is not performant. Static styles can be defined with css outside of render, dynamic should be passed through the style prop.",
+      ],
+    },
+  ],
+});

configs/eslint-plugin-compass/rules/no-inline-emotion-css.test.js

@@ -17,7 +17,7 @@ const testOptions = {
   ],
 };
 
-ruleTester.run('no-leafygreen-outside-compass-components', rule, {
+ruleTester.run('unique-mongodb-log-id', rule, {
   valid: [
     {
       code: 'mongoLogId(10);',

configs/eslint-plugin-compass/rules/unique-mongodb-log-id.test.js

@@ -6,7 +6,7 @@
 > the tracking plan for the specific Compass version you can use the following
 > URL: `https://github.com/mongodb-js/compass/blob/<compass version>/docs/tracking-plan.md`
 
-Generated on Thu, Sep 11, 2025
+Generated on Mon, Sep 15, 2025
 
 ## Table of Contents