You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
People usually (if not always) import global CSS inside __layout.svelte, but that doesn't make sense because global CSS is usually page/app related things, like CSS resets, custom properties / variables, etc. I think of it like this:
<html><body><Layout><main>
Why are we setting CSS for <html> and <body> inside <Layout>?
Also, if you have __error.svelte, you need to import the global CSS file there too! And now with the new Named Layouts feature is also worse because if you have 10 different layouts that share the same CSS resets... you have to import it 10 times. Even if the output CSS is not duplicated and file is only imported once... it doesn't make sense as Layouts shouldn't be responsible for this!
A layout is a visual representation of a page, it shouldn't be responsible for setting variables or resetting css among other things.
Describe the proposed solution
I think we need an entrypoint for global CSS that is outside of layouts, for example an option inside svelte.config.js like:
constconfig={kit: {'globalCss or cssEntrypoint': 'src/lib/styles/index.css',}}
Alternatives considered
I tried using prependData inside postcss with svelte-preprocess but that's worse because the variables get added over and over again.
Having <style> or <link> inside app.html doesn't let you process those files with postcss or any other preprocessor, so not really a solution.
Importance
would make my life easier
Additional Information
No response
The text was updated successfully, but these errors were encountered:
Thanks, but the discussion on global styles (and scripts, for that matter) is happening on #3127.
For what it's worth, with named layouts you can have a root layout that all other layouts inherit from, so you'd only need to add it once (well, twice, pending #4582 for __error@layout).
Describe the problem
People usually (if not always) import global CSS inside
__layout.svelte, but that doesn't make sense because global CSS is usually page/app related things, like CSS resets, custom properties / variables, etc. I think of it like this:Why are we setting CSS for
<html>and<body>inside<Layout>?Also, if you have
__error.svelte, you need to import the global CSS file there too! And now with the new Named Layouts feature is also worse because if you have 10 different layouts that share the same CSS resets... you have to import it 10 times. Even if the output CSS is not duplicated and file is only imported once... it doesn't make sense as Layouts shouldn't be responsible for this!A layout is a visual representation of a page, it shouldn't be responsible for setting variables or resetting css among other things.
Describe the proposed solution
I think we need an entrypoint for global CSS that is outside of layouts, for example an option inside
svelte.config.jslike:Alternatives considered
I tried using
prependDatainside postcss with svelte-preprocess but that's worse because the variables get added over and over again.Having
<style>or<link>inside app.html doesn't let you process those files with postcss or any other preprocessor, so not really a solution.Importance
would make my life easier
Additional Information
No response
The text was updated successfully, but these errors were encountered: