toHaveCompiledCss() does not support modern at-rules like @starting-style, @container

[michaelabrahamian]

Describe the bug

The toHaveCompiledCss() jest matcher from @compiled/jest does not work when there are styles containing modern at-rules, such as @starting-style and @container.

This appears to be due to the css library used to parse the CSS into an AST object: https://github.com/reworkcss/css

Error:

● toHaveCompliedCss › should work with @container

    undefined:1:73: missing '}'

      152 |     }
      153 |
    > 154 |     const ast = CSS.parse(css);
          |                     ^
      155 |     classNames.forEach((c) => {
      156 |       const rules = getRules(ast, matchFilter, c);
      157 |       const search = findStylesInRules(stylesToFind, rules);

Code referenced in error: https://github.com/atlassian-labs/compiled/blob/master/packages/jest/src/matchers.ts#L154

This lines up with some open some in reworkcss/css:

• @container support reworkcss/css#168
• @layer is not supported with css v3 reworkcss/css#165

reworkcss/css seems to inactive. It might be worth looking into migrating to @adobe/css-tools instead, which is forked off reworkcss/css: https://github.com/adobe/css-tools

@testing-library/jest-dom already uses it too.

@adobe/css-tools was updated to support these at-rules in the last few years:

• @starting-style: add support for @starting-style adobe/css-tools#319
• @container: add atContainer rule support adobe/css-tools#97

To Reproduce
Steps to reproduce the behavior:

Create a simple jest unit test, like below (this file is a good place to quickly add it):

  it.only('should work with @container', () => {
    const { getByText } = render(
      <div
        css={{
          '@media (min-width: 2px)': {
            color: 'blue',
            '@container (width > 400px)': {
              color: 'red',
            },
          },
        }}>
        hello world
      </div>
    );

    const el = getByText('hello world');
    expect(el).toHaveCompiledCss('color', 'blue', { media: '(min-width: 2px)' });
  });

When toHaveCompiledCss runs, the above error will be thrown.

Expected behavior
An error is not thrown when toHaveCompiledCss is used.