Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

CSS classes mangled in production build #178

Closed
bartlangelaan opened this issue Nov 4, 2023 · 2 comments · Fixed by #179
Closed

CSS classes mangled in production build #178

bartlangelaan opened this issue Nov 4, 2023 · 2 comments · Fixed by #179

Comments

@bartlangelaan
Copy link

bartlangelaan commented Nov 4, 2023 •
edited
Loading

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):

  • mui-tiptap version: v1.8.5

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
Copy link
Owner

@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 added a commit that referenced this issue Nov 14, 2023
@sjdemartini
Prevent static class names from getting mangled in build
130336b 
Fixes #178

In certain build setups, we can't use `function.name`, since the
function will be mangled/minified, and so to ensure the MuiTiptap
classes are static and consistent, we have to hard-code the component
name.
sjdemartini added a commit that referenced this issue Nov 14, 2023
@sjdemartini
Prevent static class names from getting mangled in build
da66ac0 
Fixes #178

In certain build setups, we can't use `function.name`, since the
function will be mangled/minified, and so to ensure the MuiTiptap
classes (like `MuiTiptap-RichTextField-content`) are static and
consistent, we have to hard-code the component names as strings.
@sjdemartini sjdemartini mentioned this issue Nov 14, 2023
Merged
sjdemartini added a commit that referenced this issue Nov 14, 2023
@sjdemartini
Prevent static class names from getting mangled in build
872b5f2 
Fixes #178

In certain build setups, we can't use `function.name`, since the
function will be mangled/minified, and so to ensure the MuiTiptap
classes (like `MuiTiptap-RichTextField-content`) are static and
consistent, we have to hard-code the component names as strings.
@sjdemartini
Copy link
Owner

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Prevent static class names from getting mangled in build sjdemartini/mui-tiptap
2 participants
@sjdemartini @bartlangelaan