Style tags are doubled

[timoanttila]

I use a page or component-specific svelte:head with <style> inside. Sending the original project to Netlify and Netlify builds it (npm run build). For some unknown reason there are all the <style> tags twice. Tags are only once when running the development version (npm run dev, MacOS, node 14.13.1, npm 6.14.8). Svelte:head should be run only once per page / component.

https://imgur.com/a/kzTo9j2

I have three of them because of the font size for accessible, main styles and component's styles.

• Website
• My project
• package.json

[timoanttila]

It seems that when I run npm run build on my own machine, those tags only get into the files once. Something happens between Github and Netlify or Netlify builds somehow strangely. There was no asset optimization on.

[antony]

This is a duplicate of #5668 and #4533 - we don't track which elements are inserted into the head tag, they are just inserted each time the component is hydrated.

However, I'm not sure why you're writing style tags inside <svelte:head>. Styles for a component or page should be written in a style tag within the component or page. You're doing something which circumvent's Svelte's entire styling mechanism.

[timoanttila]

I have all kinds of special styling for certain pages or components, and using Svelte's <style> put those all in the one file. And because I use only builded sites all the styles are already in the page. No need for an extra style file.

[antony]

I'm not 100% sure I'm clear on what you're saying here, but as a guide to using a global stylesheet, I would recommend the following:

If you need global styles, put them in a regular css file in your public directory. Link this file from the html file which serves your application, or @import it, or use a css preprocessor like svelte-preprocess to include it globally.

If you can afford to use component or page local styles, which is the ideal, then simply use the <style> tag inside those .svelte files.

We don't recommend, support, nor make any guarantees about inline or imported css files within the <svelte:head> tag. Tags included in svelte:head are not tracked, or indexed, or anything special at all (with exception of the title tag). For this reason, if you load the component or route twice, the file will get included twice - this also explains why it isn't in your SSR'd code.