Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(core): Media query support #10530

Draft
wants to merge 61 commits into
base: main
Choose a base branch
from

Conversation

CatchABus
Copy link
Contributor

@CatchABus CatchABus commented Apr 27, 2024

PR Checklist

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
  • 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

@cla-bot cla-bot bot added the cla: yes label Apr 27, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
2 participants