mirror of
https://github.com/coder/coder.git
synced 2026-09-24 15:04:27 +08:00
refactor: remove MUI and Emotion (#27821)
> 🤖 This PR was modified by Coder Agents on behalf of Jake Howell. Until we meet again. ## Stack - #27636 - #27718 - #27719 - #27722 - #27723 - #27724 - #27728 - #27730 - #27732 - #27762 - #27763 - #27786 - #27787 - #27788 - #27789 - #27790 - #27791 - #27817 - #27820 - #28009 ## Final removal (`c39b664`) Removes the last of MUI and Emotion now that every surface has been migrated: - **Dependencies**: drops `@mui/material` and `@emotion/{cache,css,react,styled}` from `package.json` / `pnpm-lock.yaml`, and deletes the `@types/emotion.d.ts` and `@types/mui.d.ts` module augmentations. - **Theming**: replaces the Emotion `CacheProvider`, MUI `ThemeProvider` / `StyledEngineProvider`, and `CssBaseline` in `ThemeProvider` with a lightweight `theme/context.tsx` that exposes `ThemeContextProvider` and a `useTheme` hook. - **Global styles**: moves the base `body` styles (background, text color, font, antialiasing) that `CssBaseline` previously provided into `index.css`, and drops the temporary MUI modal/popover scrollbar-gutter workaround. - **Cleanup**: removes the MUI → shadcn / Emotion → Tailwind migration guidance from `site/AGENTS.md`, updates the Storybook `preview.tsx`, and adjusts assorted components (`Command`, `Slider`, `Switch`, `Tabs`, `SyntaxHighlighter`, timing charts) and theme files to consume the new context instead of MUI/Emotion.
This commit is contained in:
@@ -182,14 +182,6 @@ Components should be atomic, reusable and free of business logic. Modules are
|
||||
similar to components except that they can be more complex and can contain
|
||||
business logic specific to the product.
|
||||
|
||||
### MUI
|
||||
|
||||
The codebase is currently using MUI v5. Please see the
|
||||
[official documentation](https://mui.com/material-ui/getting-started/). In
|
||||
general, favor building a custom component via MUI instead of plain React/HTML,
|
||||
as MUI's suite of components is thoroughly battle-tested and accessible right
|
||||
out of the box.
|
||||
|
||||
### Structure
|
||||
|
||||
Each component and module gets its own folder. Module folders may group multiple
|
||||
@@ -246,7 +238,10 @@ new conventions, but all new components should follow these guidelines.
|
||||
|
||||
## Styling
|
||||
|
||||
We use [Emotion](https://emotion.sh/) to handle CSS styles.
|
||||
We use [Tailwind CSS](https://tailwindcss.com/) to handle CSS styles. Reusable UI
|
||||
primitives come from [shadcn/ui](https://ui.shadcn.com/) components in
|
||||
`site/src/components`. Use the `cn` helper from `#/utils/cn` to compose and
|
||||
conditionally apply classes.
|
||||
|
||||
## Forms
|
||||
|
||||
|
||||
Reference in New Issue
Block a user