[Feature Request] Implement postcss-sort-media-queries-like auto media query sort

[SukkaW]

Describe the feature request

This could be implemented as an option of stylexBabelPlugin.processStylexRules.

See also: https://www.npmjs.com/package/postcss-sort-media-queries

[nmn]

We won't be doing this, but a feature to automatically detect and resolve conflicts between media queries is planned. It should result in the same experience in practice.

[eslym]

when there is a lots of media query, the generated media query is not guaranteed to ordered correctly

@media (max-width: 480px){.fontSize-x97d2zc.fontSize-x97d2zc{font-size:.75rem}}
@media (max-width: 480px){.fontSize-x16xvv2x.fontSize-x16xvv2x{font-size:1.25rem}}
@media (max-width: 640px){.fontSize-xzqihf2.fontSize-xzqihf2{font-size:1.25rem}}
@media (max-width: 640px){.fontSize-x1jr4dfw.fontSize-x1jr4dfw{font-size:1.5rem}}
@media (max-width: 768px){.fontSize-x118u78a.fontSize-x118u78a{font-size:1.5rem}}
@media (max-width: 480px){.fontSize-x1hz897e.fontSize-x1hz897e{font-size:1.5rem}}
@media (max-width: 640px){.fontSize-xm4yhdm.fontSize-xm4yhdm{font-size:1rem}}
@media (max-width: 480px){.fontSize-xz5lva1.fontSize-xz5lva1{font-size:1rem}}
@media (max-width: 768px){.fontSize-x1edd32e.fontSize-x1edd32e{font-size:2.5rem}}
@media (max-width: 640px){.fontSize-x123g9ce.fontSize-x123g9ce{font-size:2rem}}
@media (max-width: 768px){.fontSize-x13qyk8x.fontSize-x13qyk8x{font-size:4rem}}

[SukkaW]

when there is a lots of media query, the generated media query is not guaranteed to ordered correctly

@eslym Especially with HMR when the CSS could be inserted multiple times.

[eslym]

i made a postcss plugin to solve this issue, the built-in sorting is just extract values with regex, can do more precise comparison if use postcss-media-query-parser but the logic would be very complex in that case

https://github.com/eslym/postcss-merge-queries

[nmn]

Our plan is to rewrite your media queries for you.

So, something like this:

const styles = stylex.create({
  foo: {
    fontSize: {
      default: '1rem',
      '@media (max-width: 640px)': '1.25rem',
      '@media (max-width: 480px)': '.75rem',
    }    
  }
})

Would be transformed into:

const styles = stylex.create({
  foo: {
    fontSize: {
      default: '1rem',
      '@media (min-width: 480.1px) and (max-width: 640px)': '1.25rem',
      '@media (max-width: 480px)': '.75rem',
    }    
  }
})

at compile time.

---

The recommendation today is to manually ensure you don't have overlapping media queries in your styles.

---

This is also needed to ensure shareable constants work without surprises.

[eslym]

@nmn does it going to apply to container query also?

---

update

before this feature ship and without any extra post-processing, i think this would work

import { create } from '@stylexjs/stylex';

const styles = create({
    title: {
        fontSize: {
            default: '1.25rem',
            '@media (min-width: 600px)': {
                default: '1.50rem',
                '@media (min-width: 800px)': '1.75rem'
            }
        }
    }
});

[SukkaW]

@nmn What about using the ESLint plugin (or just compiler emitting warning) to warn proper sorting (usually incorrect ordered or overlapped media range means bug)?

[nmn]

@SukkaW Both tasks depend on parsing media queries. I wrote a parser already but it was too slow. I'm currently rewriting it to be faster.