merge

Author: nvs119

.github/workflows/test-installers.yml

@@ -182,7 +182,7 @@ jobs:
       # Similar to total task timeout, setting these higher than the default
       # value to account for very slow windows machines
       COMPASS_E2E_MOCHA_TIMEOUT: 720000 # 12min
-      COMPASS_E2E_WEBDRIVER_WAITFOR_TIMEOUT: 360000 # 6min
+      COMPASS_E2E_WEBDRIVER_WAITFOR_TIMEOUT: 600000 # 10min
     steps:
       - name: Checkout
         uses: actions/checkout@v2

AUTHORS

@@ -112,3 +112,4 @@ Jacob Lu <[email protected]>
 Nataly Carbonell <[email protected]>
 DarshanaVenkatesh <[email protected]>
 Kevin Pamaran <[email protected]>
+Leo Generali <[email protected]>

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,6 @@
 {
   "name": "@mongodb-js/eslint-config-compass",
-  "version": "1.4.8",
+  "version": "1.4.10",
   "description": "Shared Compass eslint configuration",
   "license": "SSPL",
   "main": "index.js",
@@ -17,9 +17,9 @@
     "@babel/core": "^7.24.3",
     "@babel/eslint-parser": "^7.14.3",
     "@mongodb-js/eslint-config-devtools": "^0.9.9",
-    "@mongodb-js/eslint-plugin-compass": "^1.2.15",
-    "@typescript-eslint/eslint-plugin": "^8.41.0",
-    "@typescript-eslint/parser": "^8.41.0",
+    "@mongodb-js/eslint-plugin-compass": "^1.2.16",
+    "@typescript-eslint/eslint-plugin": "^8.43.0",
+    "@typescript-eslint/parser": "^8.43.0",
     "eslint": "^8.57.1",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-chai-friendly": "^1.1.0",

configs/eslint-config-compass/package.json

@@ -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

@@ -13,7 +13,7 @@
     "email": "[email protected]"
   },
   "homepage": "https://github.com/mongodb-js/compass",
-  "version": "1.2.15",
+  "version": "1.2.16",
   "repository": {
     "type": "git",
     "url": "https://github.com/mongodb-js/compass.git"

configs/eslint-plugin-compass/package.json

@@ -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);',