Add support for @starting-style at-rule **when not nested**

[michaelabrahamian]

Is your feature request related to a problem? Please describe.

In this PR, support for the @starting-style at-rule was added. However, as mentioned in this comment, it only currently works when nested under another rule, e.g.

const styles = cssMap({
  flyoutOpen: {
    '@media (prefers-reduced-motion: no-preference)': {
      '@starting-style': {
         transform: 'translateX(-100%)',
      },
    },
  },
});

will correctly output:

 @media (prefers-reduced-motion: no-preference) {
    @starting-style {
      ._oyeijq3t {
        transform: translateX(-100%);
      }
    }
  }

However, when it is added as a top-level property (not nested under another property), the extracted CSS does not include a class name. Example:

const styles = cssMap({
  flyoutOpen: {
    '@starting-style': {
        transform: 'translateX(-100%)',
    },
  },
});

will output:

@starting-style transform: translateX(-100%){}

Also, the package's types do not seem to support top-level @starting-style. There seems to be an assumption that at-rules have two "halves" (e.g. like @media (min-width: 64rem)).

This happens for other similar at-rules like @font-face that only have one "term".

Adding a second "term" resolves the type issue:

I believe the types are defined here: https://github.com/atlassian-labs/compiled/blob/BLU-6338-starting-style-reproduction/packages/react/src/css-map/index.ts#L13-L16

Describe the solution you'd like

@starting-style should work as a top level property. Types should also work.

Describe alternatives you've considered

N/A