fix: do not break when :global is the only selector

Author: illright

Diff for: src/transformers/globalRule.ts

@@ -7,16 +7,24 @@ const selectorPattern = /:global(?!\()/;
 
 const globalifyRulePlugin: postcss.Transformer = (root) => {
   root.walkRules(selectorPattern, (rule) => {
-    const modifiedSelectors = rule.selectors.map((selector) => {
-      const [beginning, ...rest] = selector.split(selectorPattern);
+    const modifiedSelectors = rule.selectors
+      .filter((selector) => selector !== ':global')
+      .map((selector) => {
+        const [beginning, ...rest] = selector.split(selectorPattern);
 
-      if (rest.length === 0) return;
+        if (rest.length === 0) return beginning;
 
-      return [beginning, ...rest.map(globalifySelector)]
-        .map((str) => str.trim())
-        .join(' ')
-        .trim();
-    });
+        return [beginning, ...rest.map(globalifySelector)]
+          .map((str) => str.trim())
+          .join(' ')
+          .trim();
+      });
+
+    if (modifiedSelectors.length === 0) {
+      rule.remove();
+
+      return;
+    }
 
     rule.replaceWith(
       rule.clone({

Diff for: test/transformers/globalRule.test.ts

@@ -104,4 +104,15 @@ describe('transformer - globalRule', () => {
       /div (:global\(span .cls\)\{\}|:global\(span\) :global\(\.cls\)\{\})/,
     );
   });
+
+  it('remove rules with only :global its selector', async () => {
+    const template =
+      '<style>:global{/*comment*/}:global,div{/*comment*/}</style>';
+    const opts = autoProcess();
+    const preprocessed = await preprocess(template, opts);
+
+    expect(preprocessed.toString()).toContain(
+      '<style>div{/*comment*/}</style>',
+    );
+  });
 });