Set CSS rule priority based on media query break points

[liamqma]

First of all, I just want to say "Awesome work". I have been looking forward to using Stylex since 2021 😃.

Is your feature request related to a problem? Please describe.
I have the below styles.

const styles = stylex.create({
   foo: {
      "@media (min-width: 10px)": {
         color: "red"
      },
      "@media (min-width: 20px)": {
         color: "green"
      }
   }
});

I am expecting

"@media (min-width: 20px)": {
  color: "green"
}

to be placed after

"@media (min-width: 10px)": {
      color: "red"
}

in the sheet.

However, the 👆 code gets babel transformed to

stylex.inject("@media (min-width: 10px){.xl9lbu0.xl9lbu0{color:red}}", 3200);
stylex.inject("@media (min-width: 20px){.xwdmb1y.xwdmb1y{color:green}}", 3200);

These two CSS rules have the same priority, which means the order of these two rules is indeterministic.

Describe a solution you'd like
When we calculate property property, can we consider the breakpoint value from media atrule?

Describe alternatives you've considered
I cannot think of anything alternative.

Additional context
I've raised a similar question in Compiled CSS-in-JS. atlassian-labs/compiled#1567

[necolas]

Please see the docs for the correct media query syntax https://stylexjs.com/docs/learn/styling-ui/defining-styles/#media-queries-and-other--rules

[liamqma]

Thanks @necolas.
Unless I miss something, the syntax doesn't solve the issue

const styles = stylex.create({
  foo: {
    color: {
      default: "red",
      '@media (min-width: 10px)': "blue",
      "@media (min-width: 20px)": "green"
    }
  }
});

gets babel transformed to

stylex.inject(".x1e2nbdu{color:red}", 3000);
stylex.inject("@media (min-width: 10px){.xw7d59y.xw7d59y{color:blue}}", 3200);
stylex.inject("@media (min-width: 20px){.xwdmb1y.xwdmb1y{color:green}}", 3200);

Notice @media (min-width: 10px){.xw7d59y.xw7d59y{color:blue}} has the same priority as @media (min-width: 20px){.xwdmb1y.xwdmb1y{color:green}}.

What I look for is that @media (min-width: 20px){...} should have the higher priority than @media (min-width: 10px){...}.

[nmn]

@liamqma It is your responsibility to ensure that your "conditions" when applying various values for a property do not conflict.

const styles = stylex.create({
  foo: {
    color: {
      default: "red",
      '@media (min-width: 10px) and (max-width: 20px)': "blue",
      "@media (min-width: 20px)": "green"
    }
  }
});

There is an ESLint rule planned to detect conflicts and we're also discussing the possibility of automating more of this in the compiler itself.

[liamqma]

Thank you for clarification!

[nmn]

Overlapping media queries can currently break. Use this instead:

gridTemplateColumns: {
      default: "repeat(4, minmax(0, 1fr))",
      "@media (max-width: 1100px) and (min-width: 900px)": "repeat(3, minmax(0, 1fr))",
      "@media (max-width: 900px) and (min-width: 700px)": "repeat(2, minmax(0, 1fr))",
      "@media (max-width: 700px)": "1fr",
    },

I know this is annoying and this will done automatically soon.

[alejandroyunes]

thank you, I deleted my post since: i thought it was my fault.

got it to work following the docs:

    gridTemplateColumns: {
      default: "repeat(3, minmax(0, 1fr))",
      '@media (max-width: 700px)': "1fr",
      '@media (min-width: 1240px)': "repeat(4, minmax(0, 1fr))",
    },

your solution is better!