From 6883525fa44c2c47d0d93768eb26f072fee3c439 Mon Sep 17 00:00:00 2001
From: Cina Saffary <cina@cloudflare.com>
Date: Wed, 6 Nov 2024 05:34:01 -0600
Subject: [PATCH] fix: ignore relative selector lists when resolving multiple
 selectors (#921)

---
 .../src/__tests__/multipleSelectors-test.js      | 16 ++++++++++++++++
 .../fela-plugin-multiple-selectors/src/index.js  |  4 +++-
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/packages/fela-plugin-multiple-selectors/src/__tests__/multipleSelectors-test.js b/packages/fela-plugin-multiple-selectors/src/__tests__/multipleSelectors-test.js
index ed6ab2566..82d687b96 100644
--- a/packages/fela-plugin-multiple-selectors/src/__tests__/multipleSelectors-test.js
+++ b/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,
+      },
+    })
+  })
 })
diff --git a/packages/fela-plugin-multiple-selectors/src/index.js b/packages/fela-plugin-multiple-selectors/src/index.js
index 535b932ec..66d2f4a3e 100644
--- a/packages/fela-plugin-multiple-selectors/src/index.js
+++ b/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) => {