inline import of .css file gets transformed to a generic css import

[UltraCakeBakery]

Describe the bug
In my project i'm trying to import normalize.css in to my _layout.svelte component.
Instead of it getting impoted in to the main.css file it just adds the generic CSS import line instead.

<style lang="scss" global>
@import '@normalize.css/normalize.css';

/* some other random scss... */
</style>

Logs
None

To Reproduce

• clone the sapper template from the docs: https://sapper.svelte.dev/docs#Getting_started
• npm install normalize.css
• import it in to _layout.svelte in the src/routes folder

Expected behavior
Inline import it instead of having the generic css import line.

Stacktraces
None

Information about your project:

• Latest version of Edge (chromium)
• Windows 10
• 3.7.4
• Rollup

[UltraCakeBakery]

Just found out this is not unexpected behavior;
When I remove the .css extension from the import it can't find the file...

<style lang="scss" global>
@import '@normalize.css/normalize';
</style>

✗ server
File to import not found or unreadable: @normalize.css/normalize.
✗ client
File to import not found or unreadable: @normalize.css/normalize.
✔ service worker (9ms)

What am I doing wrong here?

[kaisermann]

Hey @UltraCakeBakery 👋 This seems related to how scss is handling that @import statement. Did you try using the @use statement? https://sass-lang.com/documentation/at-rules/use

[UltraCakeBakery]

Hey @kaisermann 👋
unless I'm doing something wrong @use also doesn't work;

<style lang="scss" global>
@use '@normalize.css/normalize';
@use '@normalize.css/normalize.css';
@use '../../node_modules/normalize.css/normalize.css';
</style>

main.css (screenshot from devtools)

I almost feel like it is not even considering it all to be SCSS but meanwhile nested classes and other stuff works perfectly fine.

[AlbertMarashi]

@UltraCakeBakery having a similar issue #146

[UltraCakeBakery]

@DominusVilicus I haven't found a fix yet. Kinda moved on to other problems. @kaisermann do you have any idea on what's going on?

[qwabra]

so important and too small note

• https://github.com/sveltejs/svelte-preprocess#global-rule

Note: needs PostCSS to be installed.

• https://github.com/sveltejs/svelte-preprocess/blob/master/docs/getting-started.md

-,-

this is fail [!] (plugin svelte) ValidationError: :global(...) can be at the start or end of a selector sequence, but not in the middle

<style lang="scss" >
@use "@material/icon-button";
@use "@material/drawer";
@use "@material/list";
:global() {
@include icon-button.core-styles;
@include drawer.core-styles;
@include list.core-styles;
}
</style>

this is ok

<style lang="scss" global>
@use "@material/icon-button";
@use "@material/drawer";
@use "@material/list";

@include icon-button.core-styles;
@include drawer.core-styles;
@include list.core-styles;
</style>

[kaisermann]

@UltraCakeBakery Is this still happening to you?

@qwabra this seems to be unrelated to the current issue. Besides that, if I'm not mistaken, :global() { ... } is wrong, as it should be :global { ... }.

[UltraCakeBakery]

@UltraCakeBakery Is this still happening to you?

@qwabra this seems to be unrelated to the current issue. Besides that, if I'm not mistaken, :global() { ... } is wrong, as it should be :global { ... }.

Yes. It just prints the entire line in the compiled css file. Doesn't matter if i use @use or @import

[benwoodward]

I resolved this issue in my codebase by using atImport():

// rollup.config.js
import sveltePreprocess from 'svelte-preprocess';
import atImport from 'postcss-import';

// snip

        preprocess: sveltePreprocess({
          sourceMap: !production,
          defaults: {
            style: 'scss'
          },
          sass: {
            includePaths: ['src'],
          },
          postcss: {
            plugins: [atImport({path: ['src/styles']})],
          },
        }),

// snip

What I think this is doing is inlining the CSS that's imported via an @import statement before it's processed by Sass—So whatever bug is preventing .css files from being @import'ed into <style lang="scss"> blocks is being circumvented.

[kaisermann]

@benwoodward The postcss transformer is the last one to be executed. It's working for you because you're importing a plain css file and the postcss plugin is handling that for ya.

[UltraCakeBakery]

Closing this as @use did the trick. I don't know why things didn't work before or what was going through my head. If I remember correctly @import is deprecated in postcss/scss anyways so this isn't weird behavior (i think?).

Thanks for the help anyways @kaisermann 👋