[COMPASS-5219] Add emotion js babel parser and use css prop Created: 21/Oct/21 Updated: 03/Oct/23 |
|
| Status: | Open |
| Project: | Compass |
| Component/s: | Packaging, Tech debt, UI / UX, Webpack |
| Affects Version/s: | None |
| Fix Version/s: | None |
| Type: | Task | Priority: | Major - P3 |
| Reporter: | Rhys Howell | Assignee: | Unassigned |
| Resolution: | Unresolved | Votes: | 0 |
| Labels: | None | ||
| Remaining Estimate: | Not Specified | ||
| Time Spent: | Not Specified | ||
| Original Estimate: | Not Specified | ||
| Story Points: | 5 |
| Description |
|
Currently we are using `emotion/css` and passing css to className for styling components. We'd like to use `emotion/react` for passing styles so we can use the `css` prop on components for styles and improve class name debugging and server side rendering. This ticket involves updating our build config to include a babel plugin for emotion/react, so we can start using the `css` and also not have a jsx pragma at the top of files. Github thread with some more info: https://github.com/mongodb-js/compass/pull/2527#discussion_r733077477 https://emotion.sh/docs/css-prop Using "jsxImportSource": "@emotion/react" in our compilerOptions in the tsconfig was erroring. I think it might be something that needs react 17 to work nicely without some more intentional configuration https://www.typescriptlang.org/tsconfig#jsxImportSource If it isn't feasible we can either start using the js pragma or keep using `className` with emotion/css. Using the pragma out of the box was causing an error `RangeError: WebAssembly.Compile is disallowed on the main thread, if the buffer size is larger than 4KB. Use WebAssembly.compile, or compile on a worker thread` when running in the electron renderer in electron-mocha tests so we'll have to investigate that. |