[BUG] If your website is built on Radix, importing CSS breaks design

[KidLinus]

• [X] I have searched for similar issues in both open and closed tickets and cannot find a duplicate.
• [x] I have read the documentation and cannot find an answer.

Describe the bug I have a SPA built on top of @radix-ui/themes. If i import "@mdxeditor/editor/style.css" then the entire theming of my application breaks.

Reproduction Create a vite boiler. Set up a radix themes ui and integrate their official support for light/dark theme. Import "@mdxeditor/editor/style.css"

Expected behavior I expect a component library to not declare global css that interfere with the application.

Desktop (please complete the following information):

• OS: MacOS
• Any

[petyosi]

MDXEditor uses the Radix UI primitives internally. It also imports the radix colors - https://github.com/mdx-editor/editor/blob/main/src/styles/globals.css.

Apart from that, all declared rules are namespaced to the .mdxeditor CSS class. I might be missing something, though. Can you elaborate? A runnable example would be helpful.

[KidLinus]

I can't share the code since it's work related but I'm comparing the css before and after import and I dont yet understand why, but the theme gets partially overridden. I'll keep digging but first off I need to fix the issue by adding a vite transformer to disable all the global css selectors. This fixes the issue in my app.

[petyosi]

I'm sure that something is wrong on your side, but it will take a lot of effort and trial and error to potentially figure out what, and even then I can't be sure I've addressed it correctly without a test case.

Post an update if you isolate the problem. I will re-open the issue.

[KidLinus]

The styles from certain components contain :root selectors that override the .dark class on the document html tag.


[petyosi]

This is coming from @radix-ui/colors? https://github.com/mdx-editor/editor/blob/main/src/styles/globals.css#L1-L8. My guess is that you would reproduce the same problem if you import those stylesheets without the editor.

[KidLinus]

No, I'm using radix-colors normally. If you look at your dist css https://www.npmjs.com/package/@mdxeditor/editor?activeTab=code at line 1874 you can see the selectors that are messing up the theme.

The normal radix-colors are imported at the top of your dist file (and are working as intended) but these extra selectors are both overriding certain colors AND do not include dark mode variants

[KidLinus]

Just a not if anyone is encountering the same issue as I am, this is a vite plugin that fixes this issue, albeit temporarily.

const mdxCssFix = () => {
  return {
    name: 'mdx-css-globals-remove',
    transform(src: string, id: string) {
      if (id.endsWith("node_modules/@mdxeditor/editor/dist/style.css")) {
        return { code: src.replaceAll(":root, ._light", "._light"), map: null }
      }
    }
  }
}


// https://vite.dev/config/
export default defineConfig({
  plugins: [mdxCssFix()]
})

[ranbena]

@petyosi I'm using @radix-ui/themes in my project and also mdx-editor. The moment @mdxeditor/editor/style.css gets imported, it collides with my project's ui colors and messes it up for dark mode.

[petyosi]

@ranbena can you create a reproduction in a sample repo? I will take a look.

[ranbena]

I now understand the issue:

• My project is a Nextjs app with yarn workspaces, utilizing @radix-ui/theme and dark mode.
• When in dark mode, the app looks like it's in light mode.

Importing this file from either a css/jsx file

Results in the file getting modularized. This means the file's styles imported from @redux-ui/colors get their classnames altered (.light -> ._light_abcde_1, .dark -> .dark_fghij_1) This causes the .light/.dark classnames to "fail" and falls back to the :root styles - so dark mode gets trampled with the default radix-ui colors.

[!NOTE] Importing this file from a css module file does import the file without altering its content. But results in build error "Syntax error: Selector ":root, .light, .light-theme" is not pure".

Tried to reproduce this on codesandbox but the style file stays unaltered. I don't have any special webpack or nextjs configuration 🤷🏻‍♂️

Can the imported @radix-ui/colors somehow be scoped within mdxeditor instead of being a global style? Lmk if you have any thoughts about how to solve this @petyosi

[petyosi]

@ranbena this is helpful. To answer your question, I don't know, maybe the radix colors package has a solution for that, but I have not searched for it yet.

[ranbena]

Btw, one workaround I found is marking the style file as a css @layer. This results in demoting the style's cascade precedence, disabling its radix related influence.

BUT for this to work in Nextjs, they gotta fix their github issue

import './mdxeditor.css';
import { MDXEditor } from '@mdxeditor/editor';

const MyComponent() {
  return <MDXEditor ... />
}

/* mdxeditor.css */
@import '@mdxeditor/editor/style.css' layer(mdxeditor);

[petyosi]

Thanks for sharing this. I should probably just vendor the colors I'm using.

[jokoso]

This was giving me a headache as well. I used separate CSS layers, like suggested above, to define the order of precedence:

@layer theme, base, mdxeditor, radix-themes, components, utilities;
@import "tailwindcss";
@import "@radix-ui/themes/styles.css" layer(radix-themes);
@import "@mdxeditor/editor/style.css" layer(mdxeditor);

...

By having radix-themes after mdxeditor in line 1 it doesn't overrides the rest of my app. However, I had to manually style the editor content as described here. But I didn't lose the toolbar styles.

Hopefully, this can help others in a similar situation. Thanks for creating MDX Editor! 🙌