chore(eslint-config): add dynamic css call lint rule COMPASS-9843 #7314
Conversation
Anemy
requested review from
Copilot and
lerouxb
and removed request for
lerouxb
There was a problem hiding this comment.
Pull Request Overview
This PR adds a new ESLint rule to prevent dynamic CSS-in-JS calls within functions for performance optimization. The rule is configured as a warning to allow gradual adoption, as there are existing violations in the codebase.
- Adds
no-inline-emotion-cssESLint rule to detect performance-problematic dynamic CSS calls - Fixes two existing violations by moving dynamic CSS generation outside functions
- Includes comprehensive test coverage for the new rule
Reviewed Changes
Copilot reviewed 7 out of 7 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| configs/eslint-plugin-compass/rules/no-inline-emotion-css.js | Implements the new ESLint rule logic |
| configs/eslint-plugin-compass/rules/no-inline-emotion-css.test.js | Test cases for the new rule |
| configs/eslint-plugin-compass/index.js | Exports the new rule |
| configs/eslint-config-compass/index.js | Configures the rule as a warning |
| packages/compass-aggregations/src/components/search-no-results.tsx | Fixes dynamic CSS usage |
| packages/compass-aggregations/src/components/aggregation-side-panel/stage-wizard-use-cases/sort/sort.tsx | Replaces dynamic CSS with static styles |
| configs/eslint-plugin-compass/rules/unique-mongodb-log-id.test.js | Corrects test name |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
configs/eslint-plugin-compass/rules/no-inline-emotion-css.test.js
Outdated
Show resolved
Hide resolved
| return ( | ||
| <SortFormGroup | ||
| comboboxClassName={comboboxClassName} | ||
| comboboxClassName={comboboxStyles} |
| return ancestors.some( | ||
| (ancestor) => | ||
| ancestor.type === 'FunctionDeclaration' || | ||
| ancestor.type === 'FunctionExpression' || | ||
| ancestor.type === 'ArrowFunctionExpression' | ||
| ); |
There was a problem hiding this comment.
Maybe just checking for css calls found inside JSXExpressionContainer is enough for initial iteraion, I think it's the main offender case, but I might be wrong. Otherwise it can be indeed tricky to target only functions that are React components, react hook rules for example try to identify something as a component just by function name starting with an uppercase letter, not the most precise logic 🙂
There was a problem hiding this comment.
Sounds good, I added both!
| }; | ||
|
|
||
| ruleTester.run('no-leafygreen-outside-compass-components', rule, { | ||
| ruleTester.run('unique-mongodb-log-id', rule, { |
2 participants
COMPASS-9843
Opened as
warnand noterroras there are a good amount of ones that error so I'll do it in a separate pr.Included two small fixes for existing cases in this. There are 8 in compass-components, it looks like most are behind
useMemocalls though.How it looks with error:
Warn (current):
