Complex direct descendents etc work now.

packages/jest/src/__tests__/matchers.test.tsx

@@ -184,4 +184,19 @@ describe('toHaveCompliedCss', () => {
     expect(el).toHaveCompiledCss('color', 'blue', { media: '(min-width: 2px)' });
     expect(el).toHaveCompiledCss('color', 'red', { media: '(min-width: 1px)' });
   });
+
+  it('should match complicated direct ancestors', () => {
+    const { getByText } = render(
+      <div
+        css={`
+          > :first-child {
+            color: red;
+          }
+        `}>
+        hello world
+      </div>
+    );
+    const el = getByText('hello world');
+    expect(el).toHaveCompiledCss('color', 'red', { target: '> :first-child' });
+  });
 });

packages/jest/src/matchers.tsx

@@ -11,6 +11,8 @@ const kebabCase = (str: string) =>
     .replace(/\s+/g, '-')
     .toLowerCase();
 
+const removeSpaces = (str?: string) => str && str.replace(/\s/g, '');
+
 const mapProperties = (properties: Record<string, any>) =>
   Object.keys(properties).map(property => `${kebabCase(property)}:${properties[property]}`);
 
@@ -31,7 +33,7 @@ const findMediaRules = (
   for (const rule of allRules) {
     if (!rule) return;
     if ('media' in rule) {
-      if (rule.media === media.replace(/\s/g, '') && 'rules' in rule) return rule.rules;
+      if (removeSpaces(rule.media) === removeSpaces(media) && 'rules' in rule) return rule.rules;
       if ('rules' in rule) return findMediaRules(rule.rules, media);
     }
   }
@@ -55,7 +57,7 @@ const getRules = (ast: CSS.Stylesheet, filter: MatchFilter, className: string) =
   const klass = target ? `.${className}${target}` : `.${className}`;
   return allRules?.filter(r => {
     if ('selectors' in r) {
-      return r.selectors?.find(s => s === klass);
+      return r.selectors?.find(s => removeSpaces(s) === removeSpaces(klass));
     }
     return;
   });

packages/jest/src/types.tsx

@@ -1,5 +1,5 @@
 import { Pseudos } from 'csstype';
 export type MatchFilter = {
-  target?: Pseudos;
+  target?: Pseudos | string;
   media?: string;
 };