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);