diff --git a/src/__tests__/integrations.test.js b/src/__tests__/integrations.test.js
index dfb7650d..99cb02b0 100644
--- 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', () => {
+
,
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
index fb05f852..5f1952b6 100644
--- 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);