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

Fixes #236
sveltejs · Apr 11, 2022 · 8064473 · 8064473
1 parent 74a7e17
commit 8064473
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 1 deletion.
diff --git 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
@@ -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>',
+      );
+    });
   });
 });