Skip to content

Empty <style> block appended to <head> when transition is used. #4801

Closed
@whataboutpereira

Description

@whataboutpereira

I just started exploring Svelte transitions I noticed sudden CSP failures in Firefox and Chrome.

I've tracked it down to Svelte appending an empty <style>element to when transitions are used.

Transition is used in a component like this:

<script>
    import { fade } from "svelte/transition";
</script>

<div transition:fade>
    <!-- content -->
</div>

Results in the following:

index.mjs:481 [Report Only] Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self'. Either the 'unsafe-inline' keyword, a hash ('sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU='), or a nonce ('nonce-...') is required to enable inline execution.

I managed to suppress the warning by adding the suggested hash for the empty <style> tag to my CSP policy, but creating an empty <style> seems redundant.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions