(fix) Fixes the :has and other selector when used with multiple (fixe…

…s#596) (#597)
cristianbote · Oct 11, 2024 · 907ee0c · 907ee0c
1 parent e01d969
commit 907ee0c
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 1 deletion.
diff --git a/src/__tests__/integrations.test.js b/src/__tests__/integrations.test.js
@@ -72,6 +72,13 @@ describe('integrations', () => {
         const BoxWithShared = styled('div')(shared);
         const BoxWithSharedAndConditional = styled('div')([shared, { baz: 0 }]);
 
+        const BoxWithHas = styled('div')`
+            label:has(input, select),
+            :has(foo, boo) {
+                color: red;
+            }
+        `;
+
         const refSpy = jest.fn();
 
         render(
@@ -93,6 +100,7 @@ describe('integrations', () => {
                     <BoxWithShared />
                     <BoxWithSharedAndConditional />
                     <div className={css([shared, { background: 'cyan' }])} />
+                    <BoxWithHas />
                 </div>
             </ThemeContext.Provider>,
             target
@@ -114,6 +122,7 @@ describe('integrations', () => {
                 '.go631307347{foo:1;color:red;baz:0;}',
                 '.go3865943372{opacity:0;}',
                 '.go1162430001{opacity:0;baz:0;}',
+                '.go2602823658 label:has(input, select),.go2602823658  :has(foo, boo){color:red;}',
                 '"'
             ].join('')
         );

diff --git a/src/core/parse.js b/src/core/parse.js
@@ -33,7 +33,7 @@ export let parse = (obj, selector) => {
                     ? // Go over the selector and replace the matching multiple selectors if any
                       selector.replace(/([^,])+/g, (sel) => {
                           // Return the current selector with the key matching multiple selectors if any
-                          return key.replace(/(^:.*)|([^,])+/g, (k) => {
+                          return key.replace(/([^,]*:\S+\([^)]*\))|([^,])+/g, (k) => {
                               // If the current `k`(key) has a nested selector replace it
                               if (/&/.test(k)) return k.replace(/&/g, sel);