From 8064473ae107f6e2d34eb9590e4befa70ce4618c Mon Sep 17 00:00:00 2001
From: Bob Fanger <bfanger@gmail.com>
Date: Mon, 11 Apr 2022 09:55:48 +0200
Subject: [PATCH] fix: preserve `@font-face` inside `:global` block (#486)

Fixes #236
---
 src/transformers/globalStyle.ts       | 6 +++++-
 test/transformers/globalStyle.test.ts | 9 +++++++++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/transformers/globalStyle.ts b/src/transformers/globalStyle.ts
index c8414ea6..9dbbbdbe 100644
--- a/src/transformers/globalStyle.ts
+++ b/src/transformers/globalStyle.ts
@@ -23,7 +23,11 @@ const globalifyRulePlugin = (root: pcss.Root) => {
       });
 
     if (modifiedSelectors.length === 0) {
-      rule.remove();
+      if (rule.parent?.type === 'atrule' && rule.selector === ':global') {
+        rule.replaceWith(...rule.nodes);
+      } else {
+        rule.remove();
+      }
 
       return;
     }
diff --git a/test/transformers/globalStyle.test.ts b/test/transformers/globalStyle.test.ts
index e8e742d6..3a8b2201 100644
--- a/test/transformers/globalStyle.test.ts
+++ b/test/transformers/globalStyle.test.ts
@@ -251,5 +251,14 @@ describe('transformer - globalStyle', () => {
         '<style>div{/*comment*/}</style>',
       );
     });
+    it('unwraps :global in @font-face', async () => {
+      const template = `<style>@font-face{:global{font-family:Helvetica}}</style>`;
+      const opts = autoProcess();
+      const preprocessed = await preprocess(template, opts);
+
+      expect(preprocessed.toString?.()).toContain(
+        '<style>@font-face{font-family:Helvetica}</style>',
+      );
+    });
   });
 });