Usage of the `style` attribute breaks websites with a secure Content Security Policy

[nicwortel]

Similar to #12, the use of inline style attributes breaks Content Security Policies without the (insecure) setting style: unsafe-inline.

Instead of using style attributes, styling should probably be supplied via classes.

In total I count 7 instances of the style attribute in index.js, for example:

https://github.com/trvswgnr/bs5-lightbox/blob/f4d2e1b9f583f499a50a4b4cd87c7535bc2c18db/src/index.js#L149-L153

[trvswgnr]

@nicwortel thanks for bringing this to my attention. I'm trying to avoid a stylesheet dependency if at all possible but I will look at other options.

[trvswgnr]

@nicwortel do you have any suggestions for styling these elements in a way that doesn't involve moving them to an external stylesheet and that would still be compliant? My concern is that separating styles into their own resource will introduce a breaking change and require additional setup.

One potential workaround would be to instead put all of the styles into a <style> tag so that a single hash could be added to the Content Security Policy. Not ideal, of course but I'm open to suggestions.

Edit: I'm noticing that Bootstrap 5 uses inline display: block; on the modal element when it is shown—would that not break as well?

[CallumNZ]

Would it be possible to only use Bootstrap classes to style? Since the users of this will already have the Bootstrap 5 stylesheet, it won't introduce any extra set up.

[trvswgnr]

@CallumNZ I could replace some of the inline styles with utility classes now (e.g. object-fit and z-index were added in Bootstrap v5.3-alpha). There are a couple of other areas that could be cleaned up (can probably remove the Instagram support altogether).

That said, Bootstrap applies the display: block inline style on the Modal and uses multiple inline SVGs so I'm not sure what to do about it. Open to ideas!