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:

https://github.com/Cweili/svelte-fa/blob/73233b00dc0e5866ed935e505d44d9504c5a93be/src/fa.svelte#L72

https://github.com/Cweili/svelte-fa/blob/73233b00dc0e5866ed935e505d44d9504c5a93be/src/fa-layers.svelte#L50

https://github.com/Cweili/svelte-fa/blob/73233b00dc0e5866ed935e505d44d9504c5a93be/src/fa-layers-text.svelte#L39

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 https://github.com/Cweili/svelte-fa/pull/308#issuecomment-1862212759

[Cweili]

Released with v4. Thanks!