From b9b2b07a75941086c27759805b87338043ac3c5f Mon Sep 17 00:00:00 2001
From: Brandon Scott <bscott@twilio.com>
Date: Thu, 23 Mar 2023 09:53:08 -0400
Subject: [PATCH 1/2] Add failing test for evergreen-ui#1622 issue

---
 test/enhance-props.ts | 32 ++++++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/test/enhance-props.ts b/test/enhance-props.ts
index 71d075a..b6ac767 100644
--- a/test/enhance-props.ts
+++ b/test/enhance-props.ts
@@ -170,3 +170,35 @@ test.serial('injects nested selector styles', t => {
 }`
   )
 })
+
+test.serial.only('multiple selectors with nested selector are expanded properly', t => {
+  enhanceProps({
+    selectors: {
+      '&[aria-current="page"],&[aria-selected="true"]': {
+        color: '#3366FF',
+
+        '&:before': {
+          transform: 'scaleY(1)'
+        },
+
+        '&:focus': {
+          color: '#2952CC'
+        }
+      }
+    }
+  })
+
+  t.deepEqual(
+    styles.getAll(),
+    `
+.ub-color_3366FF_75lazh[aria-current="page"], .ub-color_3366FF_75lazh[aria-selected="true"] {
+  color: #3366FF;
+}
+.ub-tfrm_qu4iyp_1d0tz5k[aria-current="page"]:before, .ub-tfrm_qu4iyp_1d0tz5k[aria-selected="true"]:before {
+  transform: scaleY(1);
+}
+.ub-color_2952CC_1tznks7[aria-current="page"]:focus, .ub-color_2952CC_1tznks7[aria-selected="true"]:focus {
+  color: #2952CC;
+}`
+  )
+})

From 70c38b3f2dbf50ecb74b52c3e7e143012b4bf999 Mon Sep 17 00:00:00 2001
From: Brandon Scott <bscott@twilio.com>
Date: Thu, 23 Mar 2023 10:08:01 -0400
Subject: [PATCH 2/2] Update enhanceProps logic to attach nested selector to
 each comma-separated parent selector instead of just on the last entry

---
 src/enhance-props.ts  | 13 +++++++++++--
 test/enhance-props.ts |  6 +++---
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/enhance-props.ts b/src/enhance-props.ts
index 51c04da..aa9f78b 100644
--- a/src/enhance-props.ts
+++ b/src/enhance-props.ts
@@ -30,8 +30,17 @@ export default function enhanceProps(
     const isSelectorOrChildProp = property === SELECTORS_PROP || parentProperty.length > 0
     // Only attempt to process objects for the `selectors` prop or the individual selectors below it
     if (isObject(value) && isSelectorOrChildProp) {
-      const prop = property === 'selectors' ? '' : property
-      const parsed = enhanceProps(value, noAnd(selectorHead + prop), property)
+      const prop = property === SELECTORS_PROP ? '' : property
+
+      // If the selector head includes a comma, map over selectorHead and attach property for nested selectors so it isn't just added to the last entry
+      // i.e. [aria-current="page"],[aria-selected="true"] + :before -> [aria-current="page"]:before,[aria-selected="true"]:before instead of [aria-current="page"],[aria-selected="true"]:before
+      const newSelectorHead = selectorHead.includes(',')
+        ? selectorHead
+            .split(',')
+            .map(selector => `${selector}${prop}`)
+            .join(',')
+        : `${selectorHead}${prop}`
+      const parsed = enhanceProps(value, noAnd(newSelectorHead), property)
       className = `${className} ${parsed.className}`
       continue
     }
diff --git a/test/enhance-props.ts b/test/enhance-props.ts
index b6ac767..df1513c 100644
--- a/test/enhance-props.ts
+++ b/test/enhance-props.ts
@@ -171,7 +171,7 @@ test.serial('injects nested selector styles', t => {
   )
 })
 
-test.serial.only('multiple selectors with nested selector are expanded properly', t => {
+test.serial('comma-separated selectors with nested selectors are expanded with nested selector appended to each', t => {
   enhanceProps({
     selectors: {
       '&[aria-current="page"],&[aria-selected="true"]': {
@@ -194,10 +194,10 @@ test.serial.only('multiple selectors with nested selector are expanded properly'
 .ub-color_3366FF_75lazh[aria-current="page"], .ub-color_3366FF_75lazh[aria-selected="true"] {
   color: #3366FF;
 }
-.ub-tfrm_qu4iyp_1d0tz5k[aria-current="page"]:before, .ub-tfrm_qu4iyp_1d0tz5k[aria-selected="true"]:before {
+.ub-tfrm_qu4iyp_fiauus[aria-current="page"]:before, .ub-tfrm_qu4iyp_fiauus[aria-selected="true"]:before {
   transform: scaleY(1);
 }
-.ub-color_2952CC_1tznks7[aria-current="page"]:focus, .ub-color_2952CC_1tznks7[aria-selected="true"]:focus {
+.ub-color_2952CC_drif9m[aria-current="page"]:focus, .ub-color_2952CC_drif9m[aria-selected="true"]:focus {
   color: #2952CC;
 }`
   )