Svelte: oncreate fails when CSP style-src is set to self

[solox174]

When the CSP header it set to self for style-src an exception is thrown during transitions. The oncreate function stops firing for all components after the exception and transitions don't work. Components still load an otherwise work. I edited the source code below, surrounding one part with a try catch and adding a test to make sure this.stylesheet was defined. The problem with oncreate went away though animations still wont work since the styles they rely on don't get loaded.

The Svelte version I am using is 2.16.0.

It appears Svelte is trying to append a style element to document.head but the browser is blocking it causing an exception. The exception is:

Uncaught TypeError: Cannot read property 'insertRule' of null

The offending code as reported by the browser is in shared.js:

     addRule(b, M) {
        if (!this.stylesheet) {
            const b = q("style");
            document.head.appendChild(b),
            y.stylesheet = b.sheet
        }
        this.activeRules[M] || (this.activeRules[M] = !0,
        this.stylesheet.insertRule(`@keyframes ${M} ${b}`, this.stylesheet.cssRules.length))
    },

[Conduitry]

So that they can just run as-is with only javascript, the default behavior is for Svelte components to insert their styles at runtime. The only way to avoid this is to tell Svelte to not emit js to insert the css and to extract all of the components' styles at build time and put these somewhere else, where they are statically included in your html. Both the Rollup and webpack plugin readmes have information about how to extract css in this way.

[just-boris]

The documentation covers the case about styles in general. However, the concern in the original report was about the animations/transitions implementation, which creates styles on the fly: https://github.com/sveltejs/svelte/blob/master/src/runtime/internal/style_manager.ts#L30-L34

This will not be extracted by the compiler, if I understand this correctly. Having an extra documentation about this gotcha would be nice.