Original components class name mangling after build

[Arif-un]

Describe the bug

Declared component style with the class name, but when running the build command, it's changing the original React-Component file

Reproduction

In this sandbox, App.jsx has two classes (container, title), when I run the build command my original react components class names are getting mangled.
I want to keep short class name in production but not in dev.
https://stackblitz.com/edit/stylify-react-vite-o6zemm?file=src/App.jsx
Thanks

Logs

No response

System Info

Live Sandbox provided

[Machy8]

Hi @Arif-un.

This is actually a feature. Files are rewritten on purpose in a production build, because of the inconsistency when working with vite/reactjs implementations. Some of them (somehow) handle Stylify before the build, so all is mangled within the process before the JSX is converted and the CSS is processed correctly and some of them not, which leads to mangled CSS but not JSX templates (output).

Run dev for development (local, testing branch/domain, or when you need to see the selectors) and build for production (in production pipeline in Github/Gitlab Actions, this mangles selectors).

The mangling can be disabled by adding mangleSelectors: false to compiler config:

const stylifyPlugin = stylifyVite({
  // ...
  compiler: {
    mangleSelectors: false
  }
});

Could you please tell me from which page you came to that example? I will update the docs.

[Machy8]

Related: #155

[Arif-un]

There is an option rewriteSelectorsInFiles, I commented out this option and tried to see the build with the default configuration. Now I set rewriteSelectorsInFiles: false, then the original file class names keep intact but the production build style is not working.
Is there any way to mangle class names only in production but keep the original class name in dev?

Thanks

[Machy8]

Hi @Arif-un.

In the end it was indeed a bug. And a good one :D.

The jsx is now converted from className={'color:red'} to 'class': "color:red" during the compilation and Stylify didn't matched that by default.

I have fixed that https://github.com/stylify/packages/blob/master/packages/stylify/src/Compiler/defaultPreset.ts#L102.

---

Back to your question.

I have updated the React example https://stackblitz.com/edit/stylify-react-vite?file=src%2FApp.jsx,src%2FButton.jsx.

So now, it is configured exactly as you mentioned:

• Dev => non minified classes
• Production => classes mangled during build but not in the files

To the configuration:

• rewriteSelectorsInFiles => disables rewriting in files
• compiler: { mangleSelectors: false } => disables minification entirely even for production. By default this is configured automatically by the unplugin. You can override it to disable it if you want.

This had to be a default behavior, but it seems some updates (vite/react/something else) broke that.

Could you please try it and let me know, if it works and if everything is ok now?

---

I have also checked your example where you have tried to split the button using className={str}. This doesn't work, because Stylify matches selectors only in selectors areas https://stylifycss.com/docs/stylify/compiler#selectorsareas. Thanks to this, it doesn't match selectors within content or paragraphs and therefore doesn't generate unwanted classes.

You can however configure some custom areas with the selectors areas option.

[Arif-un]

Great @Machy8, It's working, Thanks.
Wish I know this library before I can save my 1-month of work in our company, we did this kind of optimization for our product.

[Machy8]

@Arif-un Thanks for the answer! I am happy that this library is helpful to you. If you have any other questions or found any other bugs, please let me know.

[Machy8]

For further reading:

• Mangling is now opt-in
• Mangling: https://stylifycss.com/en/docs/get-started/mangling-selectors/
• Release notes: https://stylifycss.com/en/docs/get-started/releases/

[Arif-un]

Great 👌