Add media query typing to XCSS prop / createStrictAPI

[itsdouges]

This pull request introduces media query support to XCSS prop, and in turn changes some internals to make it function. Read on for the individual changes to each API.

---

cssMap changes

The CSS map API now allows defining top level media queries. Previously you had to define them inside a @media object, this restriction has now been removed bringing it inline with the CSS function API.

import { cssMap } from '@compiled/react';

const styles = cssMap({
  topLevel: { '@media (min-width: 30rem)': { color: 'green' } },
  nested: { '@media': { '(min-width: 30rem)': { color: 'red' } } },
});

Both APIs are still supported however only the top level definition will pass type checking with XCSS prop. In the future we'll remove support for the nested object.

For the strict API the default media query type is @media ${never}. Meaning, by default, no media queries are available. Yo can expand it to specific string values passing in a string literal union as the second generic arg.

Note — Loose media queries can't be passed to strict XCSS prop! This is because we can't ensure the type safety of that object.

XCSS prop changes

The XCSS prop now takes top level media queries. Nested media queries is not allowed.

import { cssMap, css } from '@compiled/react';

const styles = cssMap({
  valid: { '@media (min-width: 30rem)': { color: 'green' } },
  invalid: { '@media': { '(min-width: 30rem)': { color: 'red' } } },
});

<Component xcss={styles.valid} />;

createStrictAPI changes

Now takes an optional second generic to define what media queries are supported:

createStrictAPI<
  { color: 'var(--text)' }
+  { media: '(min-width: 30rem)' | '(min-width: 48rem)' }
>();

Which is then flushed to all output APIs.

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: 70b84e919098029341b8f8b05092087813b34c20

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

| Name | Type | | ---------------------- | ----- | | @compiled/babel-plugin | Patch | | @compiled/react | Patch |

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[itsdouges]

Do requiredProperties, requiredPseudos work in nested @media rules—should they? Maybe they shouldn't actually…that'd be weird to require deep property overrides on every media rule…

Done, as discussed we'll remove the whole required pseudos in a follow up

isAtRuleObject logic

Let me fix now.

[itsdouges]

@kylorhall-atlassian check out the PR now thanks mate