search

sjdemartini / mui-tiptap

A Material UI (MUI) styled WYSIWYG rich text editor, using Tiptap
MIT License
319 stars 43 forks source link

CSS classes mangled in production build #178

Closed bartlangelaan closed 1 year ago

bartlangelaan commented 1 year ago

Describe the bug

During development, all CSS classes are nicely available. For example, MuiTiptap-RichTextField-content can be found in the DOM. This is nice, because we can override some styles using CSS this way.

However, in a production build the CSS properties are minified. Now, MuiTiptap-Xy-content can be found in the DOM. This is probabily because the function names are minified, and the function names are used to generate the CSS classes.

To Reproduce

To reproduce, you can open the default demo (https://codesandbox.io/p/sandbox/mui-tiptap-demo-3zl2l6) and in the terminal, use the build step. Then, open the 'preview' URL (change port 5173 to 4173). The CSS classes are now different.

Expected behavior

I would expect the CSS classes to be the same in a development build, and in a production build.

Screenshots

If applicable, add screenshots to help explain your problem.

System (please complete the following information):

Additional context

Probabily, the use of function.name needs to be avoided, because the function name is minified in most production builds. See: https://github.com/sjdemartini/mui-tiptap/blob/main/src/RichTextContent.tsx#L19C20-L19C20

Hard-coding the component name is, I think, the only option here. MUI seems to do that aswell.

sjdemartini commented 1 year ago

@bartlangelaan Great catch, thank you for reporting! You're probably right that hard-coding the name is the only option. Feel free to open a PR for that if you'd like, or otherwise I'll plan on getting to that soon.

sjdemartini commented 1 year ago

This should be fixed in v1.8.6, just released. Thanks again for the very clear and helpful report!