search

aesthetic-suite / framework

🎨 Aesthetic is an end-to-end multi-platform styling framework that offers a strict design system, robust atomic CSS-in-JS engine, a structural style sheet specification (SSS), a low-runtime solution, and much more!
https://aestheticsuite.dev
MIT License
203 stars 5 forks source link

Problem on Uglify for production build #7

Closed AndreyShpilevoy closed 7 years ago

AndreyShpilevoy commented 7 years ago

First of all, thank you for this awesome package. It's really cool package.

I use HOC for 4 my components, it's work as expected in development mode. When I build project in production mode - 2 components receive the classNames object for property from another component.

If I disable webpack.optimize.UglifyJsPlugin from the production build - it also works as expected.

Link to my rep: https://github.com/AndreyShpilevoy/DemUiBoilerplate/tree/master/DEM_MVC_UI I trying to create Bootstrap-like grid on jss with theme support.

milesj commented 7 years ago

I haven't looked into it too much, but I believe the issue is that you're not using true functions for your components, but are using anonymous functions, like so:

const Container = ({ fluid, children, classNames }) =>

When Uglify is ran, I'm assuming this get's converted to something like const a = () =>, which is causing the duplicate style objects. I'd suggest using true functions, or passing a styleName to the styler function.

AndreyShpilevoy commented 7 years ago

Thank you for the fast reply. I tried to change my arrow functions to named functions but got the same result. Unfortunately, the problem wasn't solved.

Changed version on my repo btw.

AndreyShpilevoy commented 7 years ago

I also changed all those components from stateless to stateful - and even that didn't solve the problem with UglifyJsPlugin .

milesj commented 7 years ago

Weird. Looking into it a bit more.

milesj commented 7 years ago

Messed around with this a bit, the problem resolves itself if you pass mangle: false to the uglify configuration or if you use options.styleName. http://lisperator.net/uglifyjs/mangle

This is definitely a tricky situation to solve. I can probably generate a UID in production.

AndreyShpilevoy commented 7 years ago

Yep, if pass mangle: false to the uglify configuration really solved this issue. But it increased bundled files size average in 51,5%. So it's definitely a workaround.

I will wait for your fix this problem. Huge thank you for your time and great work.

milesj commented 7 years ago

Thanks for finding the issue. Definitely something that should be fixed.

Will most likely go with the UID approach. Just need to avoid collisions.

milesj commented 7 years ago

@AndreyShpilevoy I published a small patch, let me know if that works for you.

AndreyShpilevoy commented 7 years ago

Thank you! It's really working. Even with stateless arrow functions.

milesj commented 7 years ago

Sweet. 👍