addon clustering css with my main app

[abhilashmurthy]

Hi, thanks for the work you've put into ember-photoswipe, really appreciate it!

I recently upgraded my Ember app to 3.20, but noticed my css minification was breaking with the ember-photoswipe addon. Basically in production, my app's CSS files would be injected in between photoswipe's CSS and override many existing classes, and make my whole app look wrong.

This issue has to do with the instruction to import the addon's css files with this instruction:

@import "ember-photoswipe"

If I remove this line, everything seems to work well.

Do you have any idea how this can be resolved?

I'm currently using ember-cli-sass v^8.0.1.

[kaermorchen]

Hi.

Hm.... I don't understand how it can happend. All the photoswipe classes have prefix .pswp and can't override your existing classes.

Are you sure this problem not from a 3rd-party addon or library? How can I reproduce it?

[abhilashmurthy]

To reproduce,

1. Install an Ember 3.20 app (even the tutorial's super-rentals app will do)
2. Use this photoswipe plugin
3. Build with CSS minification turned on, i.e. ember build --prod
4. Run the dist folder with a local http server, e.g. python -m SimpleHTTPServer

If things still look ok here, I understand it might be harder to reproduce.. considering the size of my app's css. Anyway I have created a PR to solve this issue by moving photoswipe to use bower! Please only merge it if other people are facing the same issue - don't want mine to be a one-off