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.

Sign up for GitHub

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

Jump to bottom

Order Media Queries #1567

Closed
liamqma opened this issue Nov 29, 2023 · 6 comments
Closed

Order Media Queries #1567

liamqma opened this issue Nov 29, 2023 · 6 comments
Assignees
@liamqma
Labels
new feature 🆕 New feature or request

Comments

@liamqma
Copy link
Collaborator

liamqma commented Nov 29, 2023 •
edited
Loading

Compiled uses Atomic CSS, so the order of CSS rules is not based on the definition in the codebase.
This means

const style = css({
   "@media (min-width: 10px)": {
      color: "red"
   },
   "@media (min-width: 20px)": {
      color: "green"
   }
})

in the ☝️, the order of these two pieces of CSS rules are not guaranteed.
Can we order the Media Query CSS, so they are always mobile first?

Implementation detail:
Create a postcss plugin to sort media queries.
@liamqma
Copy link
Collaborator Author

liamqma commented Nov 29, 2023

@JakeLane @dddlr @itsdouges @zerosicx

@liamqma liamqma changed the title Order Media Queries Blocks Order Media Queries Nov 29, 2023
@liamqma liamqma self-assigned this Nov 29, 2023
@liamqma liamqma added the new feature 🆕 New feature or request label Nov 29, 2023
@liamqma
Copy link
Collaborator Author

liamqma commented Nov 30, 2023 •
edited
Loading

I realised that this approach only works if stylesheet extraction is enabled, as it needs to sort the entire sheet at once.
When stylesheet extraction is disabled, Compiled individually collects the sheets (from Components), and put them in the <Head>. Note this is done on client-side.

@itsdouges
Copy link
Collaborator

itsdouges commented Nov 30, 2023 •
edited
Loading

Mm I think style groups are still ordered when ran in runtime mode. Let me look.

Edit: https://github.com/atlassian-labs/compiled/blob/master/packages/react/src/runtime/sheet.ts

@liamqma
Copy link
Collaborator Author

liamqma commented Nov 30, 2023

Mm I think style groups are still ordered when ran in runtime mode. Let me look.

Yea, but I think ordering the breakpoints on client-side is going to be quite a runtime cost.

@itsdouges
Copy link
Collaborator

True.

@liamqma
Copy link
Collaborator Author

liamqma commented Dec 6, 2023

I can think of two options:

Option 1: Ask the users of Compiled to avoid overlapping breaking points

const style = css({
   "@media (min-width: 10px and max-width: 19px)": {
      color: "red"
   },
   "@media (min-width: 20px)": {
      color: "green"
   }
})

Option 2: Sort the media query by break points somehow.

I will take a look how Stylex does it.

@liamqma liamqma mentioned this issue Dec 7, 2023
Closed
@liamqma liamqma closed this as completed Dec 7, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@liamqma liamqma

Labels
new feature 🆕 New feature or request
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@liamqma @itsdouges