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.

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

fix: @font-face inside :global block #486

Merged
merged 1 commit into from Apr 11, 2022

Conversation

bfanger
Copy link
Contributor

@bfanger bfanger commented Feb 19, 2022

Fixes #236

<style lang="scss">
:global {
  @font-face {
    font-family: "Open Sans";
    src: url("/fonts/OpenSans-Regular.woff2") format("woff2"),
  }
}
</style>

Currently generates:

@font-face {}

Instead of the desired:

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular.woff2") format("woff2"),
}

"you shouldn't need to use :global for @font-face" was the reason for closing #236
And while this is an ok solution for when the @font-face is written inside the svelte component, I've encountered this issue when using the following pattern from the Readme:

<style lang="scss">
  :global {
    @import 'global-stylesheet.scss';
  }
}

All the @font-face rules in global-stylesheet.scss are currently being emptied by svelte-preprocess.
This PR fixes that

@dummdidumm dummdidumm merged commit 8064473 into sveltejs:main Apr 11, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

@font-face getting removed inside nested :global rule
2 participants