fix: ignore relative selector lists when resolving multiple selectors (#921)

Author: 1000hz

packages/fela-plugin-multiple-selectors/src/__tests__/multipleSelectors-test.js

@@ -99,4 +99,20 @@ describe('multiple-selectors plugin', () => {
       },
     })
   })
+
+  it('should not resolve relative selector lists', () => {
+    const style = {
+      ':not(:hover, :focus)': {
+        color: 'blue',
+        fontSize: 12,
+      },
+    }
+
+    expect(multipleSelectors()(style)).toEqual({
+      ':not(:hover, :focus)': {
+        color: 'blue',
+        fontSize: 12,
+      },
+    })
+  })
 })

packages/fela-plugin-multiple-selectors/src/index.js

@@ -6,7 +6,9 @@ function multipleSelectorsPlugin(style) {
     if (isPlainObject(value)) {
       const resolvedValue = multipleSelectorsPlugin(value)
 
-      const selectors = property.split(',')
+      // split on commas, but not within a relative selector list
+      //   e.g. ":hover, :focus", but not ":where(:hover, :focus)"
+      const selectors = property.split(/(?<!\([^)]*),(?![^(]*\))/)
 
       if (selectors.length > 1) {
         arrayEach(selectors, (selector) => {