PR Checklist

• The PR title follows our guidelines: https://github.com/NativeScript/NativeScript/blob/master/tools/notes/CONTRIBUTING.md#commit-messages.
• There is an issue for the bug/feature this PR is for. To avoid wasting your time, it's best to open a suggestion issue first and wait for approval before working on it.
• You have signed the CLA.
• All existing tests are passing: https://github.com/NativeScript/NativeScript/blob/master/tools/notes/DevelopmentWorkflow.md#running-unit-tests-application.
• Tests for the changes are included - https://github.com/NativeScript/NativeScript/blob/master/tools/notes/WritingUnitTests.md.

What is the current behavior?

Core is missing support for media queries.

What is the new behavior?

CSS media queries, MediaQueryList, and method matchMedia implementation.

To parse the queries, we are porting css-mediaquery to core rewritten in TypeScript. This one is quite old and supports up to Level 3 specs but we can replace it when we find one that's compatible with {N}.

Keyframes rules improvements are also included as they were poorly implemented before.

Supported media features:

• width
• height
• max-width
• max-height
• device-width
• device-height
• orientation
• prefers-color-scheme

Usage

matchMedia

const mql = matchMedia("only screen and (max-width: 600)");
console.log(mql.matches);

Common media query

@media only screen and (max-width: 600) {
  Button {
    background-color: lightblue;
  }
}

Common media query with nested keyframes

@media only screen and (max-width: 600) {
  Button {
    background-color: lightblue;
  }

  @keyframes mymove {
    from {top: 0px;}
    to {top: 200px;}
  }
}

Nested media query

@media (orientation: landscape) {
  @media (max-width: 600) {
    Button {
      background-color: lightblue;
    }
  }
}

Implements/Closes #64 NativeScript/rfcs#46 .
Fixes #6314