fix: ignore relative selector lists when resolving multiple selectors (…

…#921)
robinweser · Nov 6, 2024 · 6883525 · 6883525
1 parent e22ecf1
commit 6883525
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 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
@@ -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
@@ -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) => {