@font-face getting removed inside nested :global rule

[silllli]

Describe the bug
When adding a @font-face declaration nested inside a :global rule (using SASS), the @font-face declaration is getting removed. The resulting CSS looks like this:

@font-face{}

However using the global attribute on the style tag works.

To Reproduce
Add a @font-face declaration inside a :global rule

<style lang="scss">
  :global {
    @font-face {
      font-family: 'Font';
      font-style: normal;
      font-weight: 400;
      src: url('font.woff2') format('woff2');
    }
  }
</style>

If you can’t reproduce the problem I’ll create a repo later.

Expected behavior
The @font-face declaration being globally available.

Information about your project:

• Operating system: macOS 10.15.6
• svelte version: 3.17.3
• sapper version: 0.28.0
• svelte-preprocess version: 4.2.0
• Project uses Rollup

[kaisermann]

Hey @silllli 👋 I will take a look at what's happening here, but @font-faces are always global, you shouldn't need to use the :global { ... } rule.

Edit:

The output from scss seems weird even without any kind of transformation:

[silllli]

but @font-faces are always global, you shouldn't need to use the :global { ... } rule

Oh that’s good to know, thank you!

I encountered the problem because I import a SCSS file with sitewide needed rules in my _layout.svelte (and wanted to make it globally available using the :global {…} rule). This SCSS file also contains @font-face declarations which then got lost on the way.

[silllli]

I just stumbled on this problem again (and found my issue here). I used some older Svelte projects of mine as reference for my current one and that’s why I thought (again!) it should work, as it did back then.

So, something changed along they way (it’s not the node-sass version, that I checked)—just wanted leave that here as a note.