fix: preserve @font-face inside :global block (#486)

Fixes #236

Author: bfanger

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;
     }

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>',
+      );
+    });
   });
 });