fix: teach the globalifySelector to determine combinators

src/modules/globalifySelector.ts

@@ -1,9 +1,19 @@
+const combinatorPattern = /(\s*[ >+~]\s*)(?![^[]+\])/g;
+
 export function globalifySelector(selector: string) {
   return selector
     .trim()
-    .split(' ')
-    .filter(Boolean)
-    .map((selectorPart) => {
+    .split(combinatorPattern)
+    .map((selectorPart: string, index: number) => {
+      // if this is the separator
+      if (index % 2 !== 0) {
+        return selectorPart;
+      }
+
+      if (selectorPart === '') {
+        return selectorPart;
+      }
+
       if (selectorPart.startsWith(':local')) {
         return selectorPart.replace(/:local\((.+?)\)/g, '$1');
       }
@@ -13,5 +23,5 @@ export function globalifySelector(selector: string) {
 
       return `:global(${selectorPart})`;
     })
-    .join(' ');
+    .join('');
 }

test/modules.test.ts

@@ -2,6 +2,7 @@ import { resolve } from 'path';
 
 import { importAny } from '../src/modules/importAny';
 import { getIncludePaths } from '../src/modules/getIncludePaths';
+import { globalifySelector } from '../src/modules/globalifySelector';
 
 describe('importAny', () => {
   it('should throw error when none exist', () => {
@@ -49,3 +50,23 @@ describe('getIncludePaths', () => {
     expect(paths).toEqual(['src', 'node_modules', process.cwd(), dummyDir]);
   });
 });
+
+describe('globalifySelector', () => {
+  it('correctly treats CSS selectors with legal spaces', async () => {
+    const selector = '[attr="with spaces"]';
+
+    expect(globalifySelector(selector)).toEqual(
+      ':global([attr="with spaces"])',
+    );
+  });
+
+  it('correctly treats CSS combinators', async () => {
+    const selector = 'div > span';
+
+    expect(globalifySelector(selector)).toMatch(
+      // either be :global(div > span)
+      //        or :global(div) > :global(span)
+      /(:global\(div> span\)|:global\(div\) > :global\(span\))/,
+    );
+  });
+});