Astro/Vite not adding global styles with <style lang="scss">?

[flayks]

Astro Info

Astro                    v4.16.13
Node                     v22.11.0
System                   macOS (arm64)
Package Manager          bun
Output                   server
Adapter                  @astrojs/cloudflare
Integrations             @sanity/astro
                         @astrojs/svelte
                         astro-critters

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

It doesn't seem that Astro or Vite are adding global data to SCSS files for some reason, at least only if using import '@styles/pages/weekly-page.scss' in the <script> tag.

Importing stylesheets this way in Astro components is scoping it all (which I'm after), but I need to reimport my vars/functions/mixins in the file which feels a bit redundant 🤔

// pages/weekly/[week].astro
<style lang="scss">
    @use "../../../styles/pages/weekly-page" as *;
</style>

// styles/pages/weekly-page.scss
@use "../imports" as *;

.weekly-page {
    // stuff
}

My Astro/Svelte config:

// Astro config with Vite
vite: {
    css: {
        preprocessorOptions: {
            scss: {
                additionalData: globalStyles,
                api: 'modern',
            }
        }
    }
},

// Svelte config
export const globalStyles = `@use "${resolve(fileURLToPath(import.meta.url), '../src/styles/imports')}" as *;`

return default {
    preprocess: sveltePreprocess({
        scss: {
            prependData: globalStyles,
        }
    })
}

When importing styles like that on Svelte components using svelte-preprocess actually works:

<style lang="scss" src="./style.scss"></style>

What's the expected result?

I think it should include all the global data set in the config to all styling, without having to reimport this same file in each page/component

Link to Minimal Reproducible Example

https://stackblitz.com/~/github.com/flayks/astro-scss-global?file=src/components/Test/Test.astro

Participation

• I am willing to submit a pull request for this issue.

[apatel369]

@flayks Please add a reproduction link.

[flayks]

@apatel369:

Here is a minimal reproduction link from a repo:
https://stackblitz.com/~/github.com/flayks/astro-scss-global?file=src/components/Test/Test.astro
https://github.com/flayks/astro-scss-global

You'll see in the Test.astro 3 options for the stylesheet:

1. Importing the stylesheet in the script, which works fine without having to "reuse" the imports.scss file in the Test.scss file.
   This doesn't scopes styles though (I wish!), but the prepended data from the Vite config works fine.

---
import "./Test.scss"
---

2. Using @use "Test" as *, which doesn't includes the prepended data from the Vite config.
   It scopes styles but I have to "reimport" @use "../../styles/imports" as *; which defeats the purpose of the additionalData option

// Test.astro
<style lang="scss">
    @use "./Test" as *;
</style>

// Test.scss
@use "../../styles/imports" as *;
// ... + styles

3. Using @import which works perfectly fine and scopes styles, but is deprecated since SASS 1.8 (which is why I'm trying to use @use)

<style lang="scss">
    @import "./Test";
</style>

For some context and with a very similar setup, I use SCSS files with Svelte components using svelte-preprocess and @use the same way with no issue:

<style lang="scss" src="./Component.scss"></style>

But AFAIK Astro doesn't allow this src="" syntax.

I just feel that the additionalData is actually not imported using the @use option.

[bluwy]

This looks like a Vite issue. The problem here is that Vite is only adding additionalData to entrypoint files. So if you have

---
import "./Test.scss"
---

<style lang="scss">
    @import "./Test";
</style>

<style lang="scss" src="./Test.scss"></style>

These will all make Test.scss an entrypoint and Vite will add the additionalData to the top, which make it work. @import is a special case in Vite where it'll mark the imported path as entrypoint because it's handled by Vite itself.

When you have

<style lang="scss">
    @use "./Test" as *;
</style>

The entrypoint is the style tag itself (it creates a virtual module) so the additionalData is no longer added to Test.scss. This would also happen for Svelte. It's trickier for Vite to add the additionalData to imported files since that involves hooking into the preprocessors to add them, because preprocessors will "bundle" the files themselves.

Maybe it's worth reporting this to Vite if it's something worth fixing. However, I don't think there's much Astro can fix here. You may have to workaround adding the @use manually for now.

[flayks]

@bluwy Interesting. Thanks for investigating! I suppose how svelte-preprocess is handling this by using src="" might be the best way but AFAIK Astro doesn't allow this syntax. Could it be implemented or does it rely too much on Vite?

[bluwy]

In practice we could support it but it requires some changes to the compiler due to some hardcoded things there, it won't rely on Vite. However, I don't know if this is something we should support yet, maybe worth opening a discussion at https://github.com/withastro/roadmap to gauge interest though.

[flayks]

Righto, I made one, we'll see: withastro/roadmap#1061