mirror of
https://github.com/supabase/supabase.git
synced 2026-10-09 03:15:06 +03:00
Alaister Young
1f0abede5d
Studio (@monaco-editor/react via the AMD loader) and GraphiQL (@graphiql/react,
bundled ESM) ran as two separate Monaco instances on one page. Each injects
Monaco's global CSS (.monaco-editor layout rules and .mtk* theme classes), which
collide: after visiting GraphiQL the SQL editor's wrapper was reflowed to a ~5px
slit and its syntax colors swapped to GraphiQL's theme.
- Import monaco-editor once and hand it to loader.config({ monaco }) so the bundler
dedupes GraphiQL's copy with ours -> one instance, one CSS, one theme.
- Set up Monaco workers for the bundled instance (lib/monaco-setup).
- GraphiQL imports graphiql.css (UI only) instead of style.css (which bundles a
second Monaco CSS copy), and uses the primary 'supabase' theme.
- Neutralize Monaco's runtime-injected '.monaco-editor{position:absolute!important}'
rule which otherwise collapses the @monaco-editor/react wrapper.
Styles
When to write custom styles
Tailwind should be sufficient to cover the majority of styling needs. We typically only write custom styles here in the event where we're working with an external library and we need to override some styles (e.g Monaco, or even our own UI library).
Ideally, keep custom styling here to a minimum, use tailwind directly in the pages and components where possible, so that we have less code to maintain.
If you're writing custom styles
Group custom styles into separate stylesheets based on their context. For styles which are generic and global, we can write them in main.scss.