Remove inline styles to support strict CSP

[marekdedic]

Hi, I would like to use CSP for my site, however, svelte-fa contains inline styles that prevent me from removing unsafe-inline from my style-src. Could you please remove inline styles?

A quick search through the code reveals several candidates for the offending lines:

svelte-fa/src/fa.svelte

Line 72 in 73233b0

style={s}

svelte-fa/src/fa-layers.svelte

Line 50 in 73233b0

style={s}

svelte-fa/src/fa-layers-text.svelte

Line 39 in 73233b0

<span style={s}>

Thanks!

[marekdedic]

To clarify, the usual way around this is to use class:some={true} to dynamically style elements - the classes aren't inline

[Cweili]

We support inline style to meet the following use cases:

<FaLayers size="4x" style="background: mistyrose">
  <Fa icon={faEnvelope} />
  <FaLayersText scale={0.2} translateX={0.4} translateY={-0.4} color="white" style="padding: 0 .2em; background: tomato; border-radius: 1em">
    1,419
  </FaLayersText>
</FaLayers>

https://cweili.github.io/svelte-fa/#layering---text

[marekdedic]

Hmm, yeah, if values are passed to the component directly, that's unfortunately a little bit complicated - I see only one option that doesn't violate the CSP - add them with a JS function (see https://stackoverflow.com/a/57633533)

[marekdedic]

Would you be willing to accept a PR?

[Cweili]

@marekdedic Yes, please feel free to submit a PR!

[Cweili]

@marekdedic Please see #308 (comment)

[Cweili]

Released with v4. Thanks!