chore(eslint-config): add dynamic css call lint rule COMPASS-9843 (#7314)

Author: Anemy

configs/eslint-config-compass/index.js

@@ -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-plugin-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/rules/no-inline-emotion-css.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.test.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/unique-mongodb-log-id.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);',

packages/compass-aggregations/src/components/aggregation-side-panel/stage-wizard-use-cases/sort/sort.tsx

@@ -6,7 +6,7 @@ import {
   css,
   ListEditor,
 } from '@mongodb-js/compass-components';
-import React, { useMemo, useState } from 'react';
+import React, { useState } from 'react';
 import {
   SORT_DIRECTION_OPTIONS,
   getNextId,
@@ -47,6 +47,10 @@ const sortDirectionStyles = css({
   width: '150px',
 });
 
+const comboboxStyles = css({
+  minWidth: '200px',
+});
+
 const mapSortFormDataToStageValue = (
   formData: SortFieldState[]
 ): Record<string, number> => {
@@ -159,14 +163,6 @@ export const SortForm = ({ fields, onChange }: WizardComponentProps) => {
     onSetFormData(newData);
   };
 
-  const comboboxClassName = useMemo(() => {
-    return css({
-      width: `calc(${String(
-        Math.max(...fields.map(({ name }) => name.length), 10)
-      )}ch)`,
-    });
-  }, [fields]);
-
   return (
     <div className={containerStyles}>
       <ListEditor
@@ -178,7 +174,7 @@ export const SortForm = ({ fields, onChange }: WizardComponentProps) => {
         renderItem={(item, index) => {
           return (
             <SortFormGroup
-              comboboxClassName={comboboxClassName}
+              comboboxClassName={comboboxStyles}
               index={index}
               sortField={item.field}
               sortDirection={item.direction}

packages/compass-aggregations/src/components/search-no-results.tsx

@@ -33,9 +33,9 @@ export default function SearchNoResults() {
   return (
     <div className={centeredContent}>
       <Subtitle
-        className={css(
+        className={
           darkMode ? missingAtlasIndexDarkStyles : missingAtlasIndexLightStyles
-        )}
+        }
       >
         No preview documents
       </Subtitle>