Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Allow inclusion of global styles #1948

Closed
ebeloded opened this issue Jul 19, 2021 · 7 comments
Closed

Allow inclusion of global styles #1948

ebeloded opened this issue Jul 19, 2021 · 7 comments

Comments

@ebeloded
Copy link

ebeloded commented Jul 19, 2021 •
edited
Loading

Describe the problem

Currently the recommended way to include global styles is to add it to root __layout.svelte, as was suggested by Rich and supported with this PR (#726):

<!-- __layout.svelte -->
<script context="module">
import '../app.scss'
</script>

The issue is that these styles are not linked in rendered HTML (like start.css), but rather are included at runtime with JS.

This means that

  1. the styles are loaded with delay resulting in FOUC
  2. the app is completely unstyled when JS is disabled

Describe the proposed solution

  1. There could be a convention for including global styles from app.[scss|less|css] done by SvelteKit
- src
  - app.html
  - app.scss
  1. A more generalized solution would be to allow app.ts living alongside app.html, included by SvelteKit. This file may import global styles, but also some scripts, which wouldn't make sense to include in layouts.
- src
  - app.html
  - app.ts

// app.ts
import './lib/global.scss' // include global styles
import Sentry from '@sentry/browser' // run global scripts
Sentry.init()
  1. Make app.htmlsmarter (Parcel style), allowing it to include files in whatever format, which would then be compiled to js/css
<!-- app.html -->
<html>
<script src="./app.ts"></script>
<link rel="stylesheet" href="./app.scss">
</html>

Alternatives considered

An alternative is to compile CSS separately from SvelteKit and include hashed filename in app.html during build.

Importance

nice to have

Additional Information

Related issues:
#714
@ebeloded
Copy link
Author

ebeloded commented Jul 19, 2021 •
edited
Loading

Just realized that layout.css IS included when not in SPA mode, but there is the problem of FOUC in SPA.

@aradalvand
Copy link
Contributor

@ebeloded Hi, I have this problem too, the stylesheet file I import in __layout.svelte doesn't exist in the initial markup. How did you fix this?!

@ghostdevv ghostdevv mentioned this issue Dec 29, 2021
Closed
@ebeloded ebeloded reopened this Jan 5, 2022
@benblazak
Copy link
Contributor

not quite sure where to put this -- there are several issues (open and closed) discussing this and (relatedly) possible changes to the root __layout.svelte -- but in case it helps anyone, or furthers the discussion, i did a bit of testing today on the different ways to load global styles, and how global styles in the root __layout.svelte worked with js on and off, in both dev and preview, and with a __layout.reset.svelte somewhere in the path to another route

  • loading via js import
    • vite feature https://vitejs.dev/guide/features.html#css
    • dev
      • FOUC
      • if in root layout, a layout reset won't reset styles
      • js off, styles won't be loaded
    • preview
      • if in root layout
        • js on, reset doesn't work
        • js off, reset works
      • css appears to be loaded via <link rel="stylesheet">
  • loading via a <style global lang="scss"> at the bottom of the file
    • dev
      • if in root layout
        • js on, reset doesn't work, but does cause FOUC
        • js off, reset works
    • preview
      • if in root layout
        • js on, reset doesn't work
        • js off, reset works
      • css appears to be loaded via <link rel="stylesheet">
  • loading via @use "..."; in a <style lang="scss"> in <svelte:head>
    • dev
      • if in root layout, reset works
    • preview
      • if in root layout, reset works
      • css appears to be inlined
  • notes
    • tested with safari 14.1.2 on macos 10.14.6 on 12 jan 2022
    • i'm using sass and typescript -- didn't test with plain css or javascript
    • if using plain css, another option would be to <link rel="stylesheet"> to the file in <svelte:head>
      • this isn't possible with sass -- it seems to work in dev, but fails to build
  • conclusion
    • for my setup, it looks best to @use "..."; the styles in a <style lang="scss"> in <svelte:head>

@ErraticFox
Copy link

@benblazak honestly, that's really useful and it's really nice to see this posted somewhat relatively recent (in terms of bug searching online haha). Though I could've sworn there was already a global.scss file that sveltekit picked up automatically without the need of importing?

@benblazak
Copy link
Contributor

@ErraticFox it's been discussed (here's another open issue) and apparently there is something similar in sapper. as far as i know you have to do it manually in sveltekit. hopefully i'll notice if the team decides to change that :)

@ebeloded ebeloded mentioned this issue Mar 22, 2022
Open
@Rich-Harris
Copy link
Member

Going to close this in favour of #1530, as it's essentially the same feature request, the only difference being that this issue focus on CSS rather than including generic code

@ErraticFox
Copy link

ErraticFox commented Apr 28, 2022 •
edited
Loading

@ErraticFox it's been discussed (here's another open issue) and apparently there is something similar in sapper. as far as i know you have to do it manually in sveltekit. hopefully i'll notice if the team decides to change that :)

I don't check GitHub comment responses often, but I think I was getting global.css file confused with my previous usage of using :global() in something like __layout.svelte as that's what I came around to (re)learning shortly after my previous comment haha.

Edit: to add to that, it isn't bad honestly. It's just more or less fighting with (carbon-framework) the framework. If it doesn't override the style I'm trying to apply, I just got to find a way to make the selectors more dominant (idk the terminology for that css jargon) so that they overrride the frameworks style without having to use !important as it feels sleezy! 😭

@GitRowin GitRowin mentioned this issue May 22, 2023
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@Rich-Harris @benblazak @ebeloded @ErraticFox @aradalvand